Skip to main content

简介

Amazon发现每100ms延迟导致1%的销量损失

用户更缺少耐心，>3s 加载导致53%的跳出率(bounce rate)

https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work
https://developer.mozilla.org/zh-CN/docs/Web/Performance/dns-prefetch
https://developer.mozilla.org/zh-CN/docs/Web/Performance/Optimizing_startup_performance
https://developer.mozilla.org/zh-CN/docs/Web/Performance/Lazy_loading
https://developer.mozilla.org/zh-CN/docs/Web/Performance/Rum-vs-Synthetic
https://developer.mozilla.org/zh-CN/docs/Web/Performance/Critical_rendering_path
https://developer.mozilla.org/zh-CN/docs/Web/Performance

使用FastDom​

使用FastDom批量对DOM的读写操作 https://github.com/wilsonpage/fastdom

white循环比递归要快​

资源的压缩与合并​

  • 减少http请求数量
  • 减少请求资源的大小

HTML压缩

  • 使用在线工具进行压缩
  • 使用html-minifier等npm工具 CSS 压缩
  • 使用在线工具进行压缩
  • 使用 clean-css等npm工具

js压缩与混淆

  • 使用在线工具进行压缩
  • 使用Webpack对)S在构建时压缩

CSS JS 文件合并

  • 若干小文件，maybe……
  • 无冲突，服务相同的模块，ok.
  • 优化加载，NO!

图片格式优化​

https://github.com/imagemin/imagemin https://github.com/imagemin/imagemin-pngquant

JPEG/JPG图片​

webp图片​

png图片​

图片的懒加载 lazy loading​

  • 原生的图片懒加载方案()
  • 第三方图片懒加载方案 verlok/lazyload
    yallis
    Blazy

使用渐进式图片​

渐进式图片的解決方案​

  • progressive-image
  • libipeg
  • ImageMagick
  • jpegtran
  • jpeg-recompress
  • imagemin

使用响应式图片​

  • Srcset厲性的使用
  • Sizes属性的使用
  • picture的使用

字体优化​

什么是FOIT和FOUT

  • 字体末下载完成时，浏览器隐藏或自动降级，导致字体闪烁
  • Flash Of Invisible Text
  • Flash Of Unstyled Text

使用font-display​

  • auto
  • swap
  • optional
  • block
  • fallback

使用AJAX + Base64​

  • 解决兼容性问题
  • 缺点：缓存问题

Tree-shaking​

  • 上下文未用到的代码(dead code)
  • 基于ES6 import export
  • package.sideEffects:['*.css']
  • 注意Babel默认配置的影响

JS压缩​

  • Webpack 4 后引 uglifyjs-webpack-plugin
  • 支持ESG替换为terser-webpack-plugin

作用域提升（自动）​

  • 代码体积减小
  • 提高执行效率
  • 同样注意Babel的modules配置

渲染优化

switch 比if快

js 优化

方案一 code splitting 代码拆分，按需加载​

Tree shaking 代码减重​

减少主线程工作量​

  • 避免长任务
  • 避免超过1kB的行间脚本
  • 使用rAF和rIC进行时间调度

Progressive Bootstrapping​

  • 可见不可交互 vs'最小可交互资源集

v8 编译原理

const {performance, PerformanceObserver} = require ('perf_hooks');
const add = (a, b)=> a+b;
const num1 = 1;
const num2 = 2;

performance.mark('start');
for(let i = 0; i < 10000000; i++) {
  add(num1, num2) ;
}

add (num1, 's'); // xx

for(let i = 0; i < 10000000; i++) {
  add(num1, num2) ;
}
performance.mark('end');

const observer = new PerformanceObserver((list) => {
  console. log(list.getEntries () [0]) ;
})

observer.observe({entryTypes: ['measure']});
performance.measure( '测量11', 'start','end');


// node xxx.js

需要查一下 node --trace-opt --trace-deopt de-opt.js

抽象语法树​

  • 源码 =＞抽象语法树 =＞字节码Bytecode =＞机器码
  • 编译过程会进行优化
  • 运行时可能发生反优化

v8优化机制​

  • 脚本流
  • 字节码缓存
  • 懒解析

介绍 RAF requetAnimate Frame​

要想动画流畅 ，更新频率要 60 帧/s ，即 16.67ms 更新一次视图 setTimeout 要手动控制频率，而 RAF 浏览器会自动控制 后台标签或隐藏 iframe 中，RAF 会暂停，而 setTimeout 依然执行