参考文档
【阮一峰网络日志】网页性能管理详解
【淘宝团队前端优化】无线性能优化:页面可见时间与异步加载
移动H5前端性能优化指南
Chrome 渲染优化 - 层模型
前端性能总结
加载优化
加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点。
1. 减少HTTP请求
(合并CSS、JavaScript;需要多个icon的使用精灵图,避免请求文件过多)
2. 缓存(使用缓存可以减少向服务器的请求数,节省加载时间;)
3. 压缩HTML、CSS、JavaScript
4. 无阻塞
(写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,建议避免在HTML标签中写Style;建议JavaScript放在页面尾)
5. 使用首屏加载//还不是很理解
6. 按需加载
(PS:按需加载会导致大量重绘,影响渲染性能; LazyLoad;滚屏加载(比如手机端淘宝首页); 通过Media Query加载)
7. 预加载(大型重资源页面(如游戏)可使用增加Loading的方法; 可感知Loading(如进入空间游戏的Loading);不可感知的Loading(如提前加载下一页))
8. 压缩图片
(使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont);使用Srcset来按需显示;选择合适的图片(1. webP优于JPG 2. PNG8优于GIF);选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度);)
9. 减少Cookie
10. 避免重定向
11. 异步加载第三方资源
12. 【淘宝团队前端优化】无线性能优化:页面可见时间与异步加载
脚本执行优化
1.CSS写在头部,JavaScript写在尾部或异步
2. 避免图片和iFrame等的空Src
3. 尽量避免重设图片大小
(重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能)
4. 图片尽量避免使用DataURL
CSS优化
1.尽量避免写在HTML标签中写Style属性
,但是还是有些优先级原因可能会无法避免用style顶替!important值
2. 避免CSS表达式、移除空的CSS规则
3. 正确使用Display的属性
Display属性会影响页面的渲染,因此请合理使用
a) display:inline后不应该再使用width、height、margin、padding以及float
b) display:inline-block后不应该再使用float
c) display:block后不应该再使用vertical-align
d) display:table-*后不应该再使用margin或者float
4. 不滥用Float
(Float在渲染时计算量比较大,尽量减少使用)
5. 减少使用定位属性
(fixed/absolute)(static元素处于文档流中,其渲染速度是最快的)
5. 不滥用Web字体
6. 不声明过多的Font-size
(过多会引发CSS树的效率)
7. 值为0时不需要任何单位
8. 标准化各种浏览器前缀(无前缀应放在最后; CSS动画只用 (-webkit- 无前缀)两种即可;其它前缀为 -webkit- -moz- -ms- 无前缀 四种)使用编辑器的插件辅助即可
JavaScript执行优化
1.· 减少重绘和回流
2. 避免不必要的Dom操作
3. 尽量改变Class而不是Style,使用classList代替className
4. 避免使用document.write
5. 减少drawImage
6. 缓存Dom选择与计算
7. 缓存列表.length(每次.length都要计算,用一个变量保存这个值)
8. 尽量使用事件代理,避免批量绑定事件
9. 尽量使用ID选择器
10. TOUCH事件优化(使用touchstart、touchend代替click,因快影响速度快。但应注意Touch响应过快,易引发误操作)