前端性能优化指南

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

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

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

• D端：桌面端页面Decktop 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

• 避免重定向：重定向会影响加载速度，在服务器正确设置避免重定向

• 异步加载第三方资源：第三方资源不可控会影响页面的加载和显示，要异步加载第三方资源

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

执行优化

• CSS写在头部，JS写在尾部并异步

• 避免img、iframe等的src为空：空src会重新加载当前页面，影响速度和效率

• 尽量避免重置图像大小：多次重置图像大小会引发图像的多次重绘，影响性能

• 图像尽量避免使用DataURL：DataURL图像没有使用图像的压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长

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

渲染优化

• 设置viewport：HTML的viewport可加速页面的渲染

  1<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条规则翻译》。

• • 内容

     

√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：选择``代替`@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断了？信号不好？话费用完了？`

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

3秒钟首屏指标

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

结语

写到最后总结得差不多了，后续如果我想起还有哪些前端性能优化遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。

1我见犹怜，爱不释手，雅俗共赏，君子好逑！