性能优化手段#

加载优化：加载过程是最为耗时的过程，可能会占到总耗时的`80%时间(优化重点)

减少 HTTP 请求数#

缓存资源#

压缩代码#

无阻塞#

JS 脚本置底加载#

inline 脚本异步执行#

CSS 放在 head 中#

首屏加载#

按需加载#

预加载#

压缩图像#

减少 Cookie#

避免重定向#

异步加载第三方资源#

执行优化：执行处理不当会阻塞页面加载和渲染

CSS 写在头部，JS 写在尾部并异步#

避免 img、iframe 等的 src 为空#

空 src 会加载当前页面，影响速度和效率

避免重置图像大小#

减少因图片大小重置造成的多次重绘

图像尽量避免使用 DataURL#

渲染优化

设置 viewport#

加速页面渲染 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

减少 DOM 节点#

优化动画#

• 尽量使用 CSS3 动画
• 合理使用 RequestAnimationFrame 动画代替 setTimeout
• 适当使用 Canvas 动画：5 个元素以内使用 CSS 动画，5 个以上使用 Canvas，也可使用 WebGL

优化高频事件#

• 函数节流
• 函数防抖
• 使用 requestAnimationFrame 监听帧变化
• 增加相应变化的时间间隔：减少重绘次数

GPU 加速#

样式优化

避免在 HTML 中书写 style#

避免 CSS 表达式#

移除 CSS 空规则#

正确使用 display#

• display:inline后不应该再使用float、margin、padding、width和height
• display:inline-block后不应该再使用float
• display:block后不应该再使用vertical-align
• display:table-*后不应该再使用float和margin

不滥用 float#

不滥用 web 字体#

不声明过多的 font-size#

值为 0 时不需要任何单位#

标准化各种浏览器前缀#

• 无前缀属性应放在最后
• CSS动画属性只用-webkit-、无前缀两种
• 其它前缀为-webkit-、-moz-、-ms-、无前缀四种：Opera改用blink内核，-o-已淘汰

避免让选择符看起来像正则表达式#

脚本优化

减少重绘和回流#

• 避免不必要的DOM操作
• 避免使用document.write
• 减少drawImage
• 尽量改变class而不是style，使用classList代替className

缓存 DOM 选择和计算#

缓存 length 值#

尽量使用 事件代理#

尽量使用 id 选择器#

touch 事件优化#

2-5-8 原则

2-5-8 原则#

• 用户在2秒内得到响应，会感觉页面的响应速度很快 Fast
• 用户在2~5秒间得到响应，会感觉页面的响应速度还行 Medium
• 用户在5~8秒间得到响应，会感觉页面的响应速度很慢，但还可以接受 Slow
• 用户在8秒后仍然无法得到响应，会感觉页面的响应速度垃圾死了

3秒钟首屏指标#

此规则适用于移动端，顾名思义就是打开页面后3秒钟内完成渲染并展示内容。