前端性能优化

个人学习总结：从html、css、js、网络请求等方面入手

HTML

浏览器渲染顺序

• 使用link引入外部css(避免闪屏，提高用户体验)
• css放在head中（加快浏览器解析，html解析器和css解析器可以同时工作）
• style放在html文档底部，或者使用defer(要放在css文件后，因为JS可以操作dom和sss)
• body中间尽量不写style标签和script标签

CSS

• 提取公共样式
• 避免多层嵌套选择器
• 使用transform代替对left，top的操作
• 压缩CSS文件的体积（加快网络资源请求速度）
• 尽量使用默认字体（避免重绘）
• 用opacity=0代替visiblity=hidden和display=none,结合图层使用
• 将DOM离线后再修改（display=none的元素不在渲染树中，对它操作不会引发其他元素重排）
• 为动画元素新建图层（重排、重绘的基本单位是图层）

JS

• 绘制动画时，用requestAnimationFrame取代setTimeout
• 模块按需加载
• 防抖
• 节流
• 及时清理环境（消除定时器等）
• 事件代理（事件委托）

网络请求

• 减少请求资源的大小（html压缩、css压缩、js压缩、图片压缩）
• 合并资源（将多个css,js，合成后的体积不宜过大，使用雪碧图、精灵图）
• 使用CDN资源
• 使用浏览器缓存

大牛的前端性能优化文章