博客 图片 旧版

性能优化

2022-03-23

性能指标

如何计算

  • 白屏时间：白屏时间指的是浏览器开始显示内容的时间。
  • 首屏时间：首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。
  • 用户可操作时间： 用户可以进行正常的事件输入交互操作。

优化方法

预处理阶段

  • 使用preload/prefetch 让浏览器提前加载需要的资源 详细用法
<link rel="preload" href="/path/to/style.css" as="style">
<link rel="prefetch" href="/path/to/style.css" as="style">
  • 使用dns-prefetch、preconnect减少DNS解析，建立TCP连接以及执行TLS握手时间
    详细用法

加载阶段

  • 减少关键资源个数
  1. 合并css/js，js数量和体积之间需要平衡，必要时需要将部分js合并成一个，从而减少请求资源的数量。
  2. 内联部分css/js，部分小体积的css和js可以选择内联到html中，从而减少网络请求数量。
  3. 对于数据不经常改动的，可以利用浏览器缓存将接口数据或外部资源css、js存储在浏览器里，从而减少请求。
  • 减少关键资源大小
  1. 压缩html、css和js
    JavaScript：UglifyPlugin
    CSS ：MiniCssExtractPlugin
    HTML：HtmlWebpackPlugin
  2. 减小dom数量和嵌套层级
  3. ui组件库使用按需加载，使用babel-plugin-import插件进行按需加载
  4. 组件按需加载，使用AsyncComponent仅加载首屏组件
  5. 公共库代码体积缩减，减少第三方库的引入，使用其他替代方案或者自己实现
  • 非关键资源优化
  1. 图片压缩 tinypng
  2. 图片懒加载vue-lazyload
  3. 使用iconfont或者svg
  • 网络层
  1. 使用cdn缓存-内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。
  2. 使用http2-解析速度快、多路复用（一个tcp链接可发送多个http请求）

渲染阶段

交互阶段

  • 减少 JavaScript 脚本执行时间
    web worker：可以把 Web Workers 当作主线程之外的一个线程，在 Web Workers 中是可以执行 JavaScript 脚本的，不过 Web Workers 中没有 DOM、CSSOM 环境，这意味着在 Web Workers 中是无法通过 JavaScript 来访问 DOM 的，所以我们可以把一些和 DOM 操作无关且耗时的任务放到 Web Workers 中去执行
  • 减少页面重排、重绘、强制同步布局
  • 动画流畅性
    可以使用requestAnimationFrame代替setTimeout和setInterval；开启GPU加速等等

卸载阶段

  • 卸载dom
  • 清除定时器
  • 断开websocket

--------end--------