前端性能优化指南

时间 2019-11-05

标签前端性能优化指南栏目系统性能繁體版

原文原文链接

前言

继上一篇《灵活运用JS开发技巧》获得好评后，发现总结性的小干货能够为你们提高更好的开发技巧和编码思惟，对代码量产化提供更扎实的质量和支持。此次咱们来聊聊你们可能都比较关心的话题：性能优化。css

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

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

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

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

概述指南

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

加载优化github

减小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%时间(**优化重点**) web

执行优化正则表达式

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

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

渲染优化canvas

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

<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秒钟内完成渲染并展现内容。

结语

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

专栏文章

原文：请戳这里
做者：JowayYoung
仓库：Github
博客：掘金、思否、知乎
公众号：Uzero
联系我：关注公众号后有个人微信哟

《灵活运用》系列

灵活运用CSS开发技巧强烈推荐收藏👍
灵活运用JS开发技巧强烈推荐收藏👍
灵活运用PS切图技巧强烈推荐收藏👍

《依赖汇总》系列

NPM依赖：构建编译强烈推荐收藏👍
NPM依赖：框架平台强烈推荐收藏👍
NPM依赖：类库工具强烈推荐收藏👍

《必备工具》系列

Cmder&iTerm美化你的终端强烈推荐收藏👍

《随笔》系列

关注公众号Uzero，更多前端小干货等着你喔！我是JowayYoung，喜欢分享前端技术和生活纪事，学习与生活不落下，天天进步一点点，与你们相伴成长