前端性能优化

Posted by Mars . Modified at

记录前端性能优化的方向、方式方法。

前端性能评价指标

白屏时间

白屏时间（FP：First Paint）：从浏览器响应用户输入的url，到页面开始显示内容的时间（解析完HTML文档的<head>部分，开始渲染<body>）；

白屏时间的计算：

<head>
    <!-- other content ... -->
    <script>
        // 在head标签的最下方，获取白屏时间，因为接下来即将解析body元素。
        // performance.timing.navigationStart是浏览器响应用户url输入的时间节点。
        const FP = Date.now() - performance.timing.navigationStart;
    </script>
</head>

首屏时间

首屏时间（FCP：First Contentful Paint）：从浏览器响应用户输入的url，到首屏渲染完成的时间（完全渲染完成，包括内部图片等置换元素的请求、解析）。

首屏时间计算方法：

  1. 估计首屏截止位置，在对应位置设置<script>标签获取；
  2. 最慢图片加载法：为首屏的图片添加load事件，获取最慢加载完成时间，减去起始时间得到首屏时间；
  3. 异步请求法：在首屏内容的异步请求回调中，获取时间节点计算首屏时间。

如何选择

首屏时间相对更为准确地反映了用户体验。

大型复杂页面优先选择首屏时间，简单页面二者差别不大，可随意选择。

前端性能检测

优化的起点，是对当前的页面进行性能检测，查看有哪些优化点，是否需要优化。

性能分为加载性能和运行时性能。

加载性能通过首屏、白屏时间来度量。

运行时性能，指网页在用户正常交互过程中，是否出现卡顿、掉帧等情况。

运行时性能可以通过chrome的performance面板进行监控&录制获得。

二、前端性能优化主要方向

  1. 静态资源优化：html、CSS、JS、图片、字体文件等，包括各种打包压缩策略；
  2. 页面渲染策略；
  3. 原生APP的优化；
  4. 网络性能优化；
  5. 研发开发流程优化；
  6. 性能监控及评价；

三、常用方法

  • 减少 HTTP 请求
  • 使用 HTTP2
  • 考虑使用服务端渲染 SSR
  • 静态资源使用 CDN
  • 将 CSS 放在文件头部，JavaScript 文件放在底部
  • 使用字体图标 iconfont 代替图片图标
  • 善用缓存，不重复加载相同的资源
  • 压缩文件
  • 图片优化
  • 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
  • 减少重绘重排
  • 使用事件委托
  • 注意程序的局部性
  • if-else 改为 switch
  • 查找表
  • 修改JS，避免页面卡顿
  • 使用 requestAnimationFrame 来实现视觉变化
  • 使用 Web Workers
  • 使用位操作不要覆盖原生方法
  • 降低 CSS 选择器的复杂性
  • 使用 flexbox 而不是较早的布局模型
  • 使用 transform 和 opacity 属性更改来实现动画
  • 合理使用规则，避免过度优化

静态资源优化

一、图片优化

1.正确选择图片格式

  • jpg、jpeg: 有损储存，适合颜色丰富的照片、彩色图；
  • png: 无损储存，体积大，支持透明度，适合透明、线条、图标，边缘清晰，大块同色区域，颜色数少但是需要半通明的场景；
  • gif: 8位色，不适合高保真彩色照片，适合动画、图标；
  • webp: 现代化格式，可提供有损或无损压缩，最多256色，不适合彩色图片，适合图形和半透明图像；

2. 压缩图片体积

  • 压缩png图片: node-pngquant-native工具，可在npm安装;
  • 压缩jpg图片: jpegtran工具;
  • 压缩gif图片: gifsicle工具；

3. 根据设备选用不同分辨率的图片

在移动端加载小图片。

4. 先采用图片占位符，后续再慢慢加载图片

  • 低质量图片占位符LQIP：npm install lqip;
  • SVG图像占位符SQIP：npm install sqip;

5. 用其他方式代替图片

  • Data URI: 比如Base64形式；
  • Web Font；
  • 雪碧图;

6. 服务端图片自动优化

按请求自动裁剪、调节分辨率、AI抠图、质量控制等。

二、HTML优化

1. 精简HTML代码

  • 减少HTML嵌套；
  • 减少DOM节点数；
  • 减少无语义的代码；
  • 压缩：删除注释、多余空格和缩进等；
  • 使用相对路径的url；

文件放在合适的位置

  • CSS引入在头部进行；
  • Js引入在末尾进行；

增强用户体验

  • 始终设置favicon图标；
  • 增加首屏必要的CSS和JS：为需要加载的资源设置一个背景色，然后用js控制资源加载完成后去掉，可以减少用于白屏等待的时间。

三、CSS优化

1. 提升CSS渲染性能

  • 谨慎使用耗费计算资源的属性。比如:nth-child,position:fixed定位；
  • 减少样式嵌套层数；
  • 避免占用CPU过多的属性值：比如left: -99999px;
  • 避免复杂动画、透明度转换等；

2. CSS文件优化

  • 尽量使用外联CSS文件，充分利用浏览器缓存；
  • 避免使用@import： 因为CSS中引入@import相当于整合所有CSS文件为一个，必须所有import的CSS文件都加载完成，才能开始渲染，相比于独立文件加载渲染更慢。
  • CSS代码压缩；

3. 中文字体优化、合理使用Web Fonts

  • 中文字体体积太大，使用fontmin对常用3500汉字进行字体裁剪，然后再转换为woff格式，可以大幅缩减字体体积；
  • 字体保存在CDN上；
  • 字体以Base64形式保存在CSS，并且通过localStorage缓存；
  • Google相关服务选择国内托管；
Keywords: Performance
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。