前端性能优化指南

继上一篇 《灵活运用JavaScript开发技巧》 得到好评后，发现总结性的小干货可以为大家提升更好的开发技巧和编码思维，对代码量产化提供更扎实的质量和支持。这次我们来聊聊大家可能都比较关心的话题： 性能优化 。

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

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

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

• D端 ：桌面端页面 Decktop End Page
• M端 ：移动端页面 Mobile End Page

常用规则

雅虎军规

雅虎团队通过大量实践总结出以下 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 Over @import ：选择 <link> 代替 @important
  • 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秒钟内完成渲染并展示内容。

概述指南

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 响应过快，易引发误操作 )

结语

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

我见犹怜，爱不释手，雅俗共赏，君子好逑！
复制代码