前端性能优化总结

目录

参考文档

【阮一峰网络日志】网页性能管理详解
【淘宝团队前端优化】无线性能优化：页面可见时间与异步加载
移动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响应过快，易引发误操作）

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~