前端性能优化指南

更多内容请见：http://www.zgwenku.com/

 

前言

发现总结性的小干货可以为大家提升更好的开发技巧和编码思维，对代码量产化提供更扎实的质量和支持。这次我们来聊聊大家可能都比较关心的话题：性能优化。

一说到页面的性能优化，大家可能都会想起雅虎军规、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方式引入，脚本放在尾部并使用异步方式加载
• 首屏加载：首屏快速显示可大大提升用户对页面速度的感知，应尽量针对首屏的快速显示做优化

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