性能优化

1. 优化原则

总原则

• 提升用户体验，让用户觉得网站很快，包括加载快和响应快

• 快分为两种

  • 真的快

    • 可以通过指标客观衡量，比如首屏打开时间

  • 觉得快

    • 通过引导手段转移用户对等待时间的关注，比如制作等待动画

其他原则

• 不要过早进行优化
  • 否则会引入额外复杂度，效果不明显，性价比低

2. 优化方向

文件下载

• 包括 js 脚本文件、css 样式文件、图片字体等资源文件

• 方向 1——减少文件体积

  • 最小原则: 控制依赖包的数量和体积
  • 压缩原则: 用 gzip 或者 br 进行编译预压缩

• 方向 2——减少单次下载量

  • 分包原则: 把不常变的依赖单独成包做缓存
  • 分离原则: 首屏加载和动态引入之间做分离

• 方向 3——加快下载速度

  • CDN 原则: 静态资源利用 CDN 节点加速

脚本执行

• 方向 1——延后执行时机

  • 首屏原则: 不影响首屏加载的脚本延后执行

• 方向 2——拒绝过重任务

  • 轻量原则: 把耗 CPU 的任务放到单独的 worker 进程

渲染过程

• 方向 1——尽早显示内容

  • 填充原则: 尽快把框架显示出来，再做填充

• 方向 2——避免反复渲染

  • 稳定原则: 不要做频繁触发重新布局的 DOM 操作

3. Chrome 性能测试

• F12唤出控制台，选择 Network 标签

  • 可勾选 Disable Cache 停用缓存

• Cmd + R对页面进行刷新，查看资源加载瀑布流，观察最下方的时间数据

4. lighthouse 性能测试

• 安装

  npm install lighthouse -g
  

• 使用

  lighthouse "https://www.bing.com" --view
  

  • 执行后会打开一个浏览器窗口，耐心等待它加载完，然后命令行跑完，就会生成一个报告窗口，可保存到本地

• Performance 指标

  • First Contentful Paint

    • 简称FCP，页面首次内容出现的消耗时长

  • Largest Contentful Paint

    • 简称LCP，页面最大块内容出现的消耗时长

  • Total Blocking Time

    • 简称TBT，页面堵塞不可操作的消耗时长

  • Cumulative Layout Shift

    • 简称CLS，页面元素颤动的程度

5. webpack bundle 分析

• 前提

  • 添加插件 webpack-bundle-analyzer 生成图表，详见 webpack 的内容

• 图表提示的优化方向

  • 会显示每个包以及内部模块的大小，可以针对性地进行分包，减小主包的大小
  • 如果引入了图片静态资源，找出体积大的，看能否压缩，比如 png，svg 等等