一说到页面的性能优化，大家可能都会想起​​雅虎军规​​​、​​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条规则翻译》。

  • 内容
  • 「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」：避免图片空链接