前端性能优化指南,只为前端开发

浅浅的花香味﹌ 2023-05-29 11:47 18阅读 0赞

## 前言 ##

这次我们来聊聊大家可能都比较关心的话题：**性能优化**。

一说到页面的性能优化，大家可能都会想起`雅虎军规`、`2-5-8原则`、`3秒钟首屏指标`等规则，这些规则在开发过程中不是强制要求的，但是有时候为了追求页面性能的完美和体验，就不得不对原有的代码进行修改和优化。

下面就结合自己三年多的开发经验和大量的项目实践，整理出一些常用的性能优化要点，同时再罗列一下`雅虎军规`、`2-5-8原则`、`3秒钟首屏指标`这三个常用规则的要点。

> 为了方便记忆和阅读，文章使用部分简写名词，解释如下

*  **D端**：桌面端页面`Desktop End Page`
 *  **M端**：移动端页面`Mobile End Page`

### 概述指南 ###

1.  D端优化手段在M端同样适用
2.  在M端提出3秒钟渲染完成`首屏指标`
3.  基于第二点，首屏加载3秒内完成或使用`Loading`进行占位
4.  基于联通3G网络平均`338kb/s(2.71mb/s)`，首屏资源不应超过`1014kb`
5.  M端因配置原因，除加载外渲染速度也是优化重点
6.  基于第五点，要合理处理代码减少渲染损耗
7.  基于第二点和第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置
8.  加载完成后，用户交互使用时也需注意性能

> **加载优化**

*  **减少HTTP请求**：尽量减少页面的请求数(**首次加载同时请求数不能超过4个**)，移动设备浏览器同时响应请求为4个请求(**`Android`支持4个，`iOS5+`支持6个**)
    
     *  合并CSS和JS
     *  使用CSS精灵图
 *  **缓存资源**：使用缓存可减少向服务器的请求数，节省加载时间，所有静态资源都要在服务器端设置缓存，并且尽量使用长缓存(**使用时间戳更新缓存**)
    
     *  缓存一切可缓存的资源
     *  使用长缓存
     *  使用外联的样式和脚本
 *  **压缩代码**：减少资源大小可加快网页显示速度，对代码进行压缩，并在服务器端设置`GZip`
    
     *  压缩代码(多余的缩进、空格和换行符)
     *  启用Gzip
 *  **无阻塞**：头部内联的样式和脚本会阻塞页面的渲染，样式放在头部并使用`link`方式引入，脚本放在尾部并使用异步方式加载
 *  **首屏加载**：首屏快速显示可大大提升用户对页面速度的感知，应尽量针对首屏的快速显示做优化
 *  **按需加载**：将不影响首屏的资源和当前屏幕不用的资源放到用户需要时才加载，可大大提升显示速度和降低总体流量(**按需加载会导致大量重绘，影响渲染性能**)
    
     *  懒加载
     *  滚屏加载
     *  Media Query加载
 *  **预加载**：大型资源页面可使用`Loading`，资源加载完成后再显示页面，但加载时间过长，会造成用户流失
    
     *  可感知Loading：进入页面时`Loading`
     *  不可感知Loading：提前加载下一页
 *  **压缩图像**：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用`srcset`来按需显示(**过度压缩图像大小影响图像显示效果**)
    
     *  使用[TinyJpg][]和[TinyPng][]压缩图像
     *  使用CSS3、SVG、IconFont代替图像
     *  使用img的srcset按需加载图像
     *  选择合适的图像：`webp`优于`jpg`，`png8`优于`gif`
     *  选择合适的大小：首次加载不大于`1014kb`、不宽于`640px`
     *  PS切图时D端图像保存质量为80，M端图像保存质量为60
 *  **减少Cookie**：`Cookie`会影响加载速度，静态资源域名不使用`Cookie`
 *  **避免重定向**：重定向会影响加载速度，在服务器正确设置避免重定向
 *  **异步加载第三方资源**：第三方资源不可控会影响页面的加载和显示，要异步加载第三方资源

> 加载过程是最为耗时的过程，可能会占到总耗时的\`80%时间(\*\*优化重点\*\*)

> **执行优化**

*  **CSS写在头部，JS写在尾部并异步**
 *  **避免img、iframe等的src为空**：空`src`会重新加载当前页面，影响速度和效率
 *  **尽量避免重置图像大小**：多次重置图像大小会引发图像的多次重绘，影响性能
 *  **图像尽量避免使用DataURL**：`DataURL`图像没有使用图像的压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长

> 执行处理不当会阻塞页面加载和渲染

> **渲染优化**

*  **设置viewport**：HTML的`viewport`可加速页面的渲染
    
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
 *  **减少DOM节点**：DOM节点太多影响页面的渲染，尽量减少DOM节点
 *  **优化动画**
    
     *  尽量使用CSS3动画
     *  合理使用requestAnimationFrame动画代替setTimeout
     *  适当使用Canvas动画：5个元素以内使用`CSS动画`，5个元素以上使用`Canvas动画`，`iOS8+`可使用`WebGL动画`
 *  **优化高频事件**：`scroll`、`touchmove`等事件可导致多次渲染
    
     *  函数节流
     *  函数防抖
     *  使用requestAnimationFrame监听帧变化：使得在正确的时间进行渲染
     *  增加响应变化的时间间隔：减少重绘次数
 *  **GPU加速**：使用某些HTML5标签和CSS3属性会触发`GPU渲染`，请合理使用(**过渡使用会引发手机耗电量增加**)
    
     *  HTML标签：`video`、`canvas`、`webgl`
     *  CSS属性：`opacity`、`transform`、`transition`

> **样式优化**

*  **避免在HTML中书写style**
 *  **避免CSS表达式**：CSS表达式的执行需跳出CSS树的渲染
 *  **移除CSS空规则**：CSS空规则增加了css文件的大小，影响CSS树的执行
 *  **正确使用display**：`display`会影响页面的渲染
    
     *  `display:inline`后不应该再使用`float`、`margin`、`padding`、`width`和`height`
     *  `display:inline-block`后不应该再使用`float`
     *  `display:block`后不应该再使用`vertical-align`
     *  `display:table-*`后不应该再使用`float`和`margin`
 *  **不滥用float**：`float`在渲染时计算量比较大，尽量减少使用
 *  **不滥用Web字体**：Web字体需要下载、解析、重绘当前页面，尽量减少使用
 *  **不声明过多的font-size**：过多的`font-size`影响CSS树的效率
 *  **值为0时不需要任何单位**：为了浏览器的兼容性和性能，值为`0`时不要带单位
 *  **标准化各种浏览器前缀**
    
     *  无前缀属性应放在最后
     *  CSS动画属性只用-webkit-、无前缀两种
     *  其它前缀为-webkit-、-moz-、-ms-、无前缀四种：`Opera`改用`blink`内核，`-o-`已淘汰
 *  **避免让选择符看起来像正则表达式**：高级选择符执行耗时长且不易读懂，避免使用

> **脚本优化**

*  **减少重绘和回流**
    
     *  避免不必要的DOM操作
     *  避免使用document.write
     *  减少drawImage
     *  尽量改变class而不是style，使用classList代替className
 *  **缓存DOM选择与计算**：每次DOM选择都要计算和缓存
 *  **缓存.length的值**：每次`.length`计算用一个变量保存值
 *  **尽量使用事件代理**：避免批量绑定事件
 *  **尽量使用id选择器**：`id`选择器选择元素是最快的
 *  **touch事件优化**：使用`tap`(`touchstart`和`touchend`)代替`click`(**注意`touch`响应过快，易引发误操作**)

### 常用规则 ###

> **雅虎军规**

雅虎团队通过大量实践总结出以下`7类35条`前端优化规则，规则详情请参考这位兄弟的[《雅虎前端优化35条规则翻译》][35]。

*  内容
    
     *   **Make Fewer HTTP Requests**：减少`HTTP`请求数
     *   **Reduce DNS Lookups**：减少`DNS`查询
     *   **Avoid Redirects**：避免重定向
     *   **Make Ajax Cacheable**：缓存`AJAX请求`
     *   **Postload Components**：延迟加载资源
     *   **Preload Components**：预加载资源
     *   **Reduce The Number Of DOM Elements**：减少`DOM`元素数量
     *   **Split Components Across Domains**：跨域拆分资源
     *   **Minimize The Number Of Iframes**：减少`iframe`数量
     *   **No 404s**：消除`404`错误
 *  样式
    
     *   **Put Stylesheets At The Top**：置顶样式
     *   **Avoid CSS Expressions**：避免`CSS`表达式
     *   **Choose <link> Over @import**：选择`<link>`代替`@import`
     *   **Avoid Filters**：避免滤镜
 *  脚本
    
     *   **Put Scripts At The Bottom**：置底脚本
     *   **Make JavaScript And CSS External**：使用外部`JS`和`CSS`
     *   **Minify JavaScript And CSS**：压缩`JS`和`CSS`
     *   **Remove Duplicate Scripts**：删除重复脚本
     *   **Minimize DOM Access**：减少`DOM`操作
     *   **Develop Smart Event Handlers**：开发高效的事件处理
 *  图像
    
     *   **Optimize Images**：优化图片
     *   **Optimize CSS Sprites**：优化`CSS精灵图`
     *   **Don't Scale Images In HTML**：不在`HTML`中缩放图片
     *   **Make Favicon.ico Small And Cacheable**：使用小体积可缓存的`favicon`
 *  缓存
    
     *   **Reduce Cookie Size**：减少`Cookie`大小
     *   **Use Cookie-Free Domains For Components**：使用无`Cookie`域名的资源
 *  移动端
    
     *   **Keep Components Under 25kb**：保持资源小于`25kb`
     *   **Pack Components Into A Multipart Document**：打包资源到多部分文档中
 *  服务器
    
     *   **Use A Content Delivery Network**：使用`CDN`
     *   **Add An Expires Or A Cache-Control Header**：响应头添加`Expires`或`Cache-Control`
     *   **Gzip Components**：`Gzip`资源
     *   **Configure ETags**：配置`ETags`
     *   **Flush The Buffer Early**：尽早输出缓冲
     *   **Use Get For AJAX Requests**：`AJAX请求`时使用`get`
     *   **Avoid Empty Image Src**：避免图片空链接

> **2-5-8原则**

在前端开发中，此规则作为一种开发指导思路，针对浏览器页面的性能优化。

*  用户在`2秒内`得到响应，会感觉页面的响应速度很快 Fast
 *  用户在`2~5秒间`得到响应，会感觉页面的响应速度还行 Medium
 *  用户在`5~8秒间`得到响应，会感觉页面的响应速度很慢，但还可以接受 Slow
 *  用户在`8秒后`仍然无法得到响应，会感觉页面的响应速度垃圾死了(**此时会有以下四种可能**)
    
     *  难道是网速不好，发起第二次请求 => `刷新页面`
     *  什么垃圾页面呀，怎么还不打开 => `离开页面，有可能转投竞争对手的网站`
     *  垃圾程序猿，做的是什么页面啊 => `咒骂开发此页面的程序猿`
     *  断网了 => `网线断了？Wi-Fi断了？信号不好？话费用完了？`

> 知道这个规则的数字顺序怎样来的吗，看下键盘右方的数字键盘由下往上排序：2-5-8

> **3秒钟首屏指标**

此规则适用于M端，顾名思义就是打开页面后3秒钟内完成渲染并展示内容。

[TinyJpg]: https://tinyjpg.com/
[TinyPng]: https://tinypng.com/
[35]: https://github.com/creeperyang/blog/issues/1