该如何优化前端性能

前言
发现总结性的小干货能够为你们提高更好的开发技巧和编码思惟，对代码量产化提供更扎实的质量和支持。此次咱们来聊聊你们可能都比较关心的话题：性能优化。

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

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

为了方便记忆和阅读，文章使用部分简写名词，解释以下
D端：桌面端页面Desktop End Page

M端：移动端页面Mobile End Page

概述指南
D端优化手段在M端一样适用

在M端提出3秒钟渲染完成首屏指标

基于第二点，首屏加载3秒内完成或使用Loading进行占位

基于联通3G网络平均338kb/s(2.71mb/s)，首屏资源不该超过1014kb

M端因配置缘由，除加载外渲染速度也是优化重点

基于第五点，要合理处理代码减小渲染损耗

基于第二点和第五点，全部影响首屏加载和渲染的代码应在处理逻辑中后置

加载完成后，用户交互使用时也需注意性能

加载优化
减小HTTP请求：尽可能减小页面的请求数(首次加载同时请求数不能超过4个)，移动设备浏览器同时响应请求为4个请求(Android支持4个，iOS5+支持6个)

合并CSS和JS

使用CSS精灵图

缓存资源：使用缓存可减小向服务器的请求数，节省加载时间，全部静态资源都要在服务器端设置缓存，而且尽可能使用长缓存(使用时间戳更新缓存)

缓存一切可缓存的资源

使用长缓存

使用外联的样式和脚本

压缩代码：减小资源大小可加快网页显示速度，对代码进行压缩，并在服务器端设置GZip

压缩代码(多余的缩进、空格和换行符)

启用Gzip

无阻塞：头部内联的样式和脚本会阻塞页面的渲染，样式放在头部并使用link方式引入，脚本放在尾部并使用异步方式加载

首屏加载：首屏快速显示可大大提高用户对页面速度的感知，应尽可能针对首屏的快速显示作优化

按需加载：将不影响首屏的资源和当前屏幕不用的资源放到用户须要时才加载，可大大提高显示速度和下降整体流量(按需加载会致使大量重绘，影响渲染性能)

懒加载

滚屏加载

Media Query加载

预加载：大型资源页面可以使用Loading，资源加载完成后再显示页面，但加载时间过长，会形成用户流失

可感知Loading：进入页面时Loading

不可感知Loading：提早加载下一页

压缩图像：使用图像时选择最合适的格式和大小，而后使用工具压缩，同时在代码中用srcset来按需显示(过分压缩图像大小影响图像显示效果)

使用TinyJpg和TinyPng压缩图像

使用CSS三、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：避免图片空连接

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

用户在2秒内获得响应，会感受页面的响应速度很快 Fast

用户在2~5秒间获得响应，会感受页面的响应速度还行 Medium

用户在5~8秒间获得响应，会感受页面的响应速度很慢，但还能够接受 Slow

用户在8秒后仍然没法获得响应，会感受页面的响应速度垃圾死了(此时会有如下四种可能)

难道是网速很差，发起第二次请求 => 刷新页面

什么垃圾页面呀，怎么还不打开 => 离开页面，有可能转投竞争对手的网站

垃圾程序猿，作的是什么页面啊 => 咒骂开发此页面的程序猿

断网了 => 网线断了？Wi-Fi断了？信号很差？话费用完了？

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

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

结语写到最后总结得差很少了，后续若是我想起还有哪些前端性能优化遗漏的，会继续在这篇文章上补全，同时也但愿各位朋友对文章里的要点进行补充或者提出本身的看法。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。