关键渲染路径
image.png
webkit渲染引擎流程
image.png
渲染优化
1.HTML文档结构层次尽量少，最好不深于六层；
2.脚本尽量后放，放在</body>前即可；
3.少量首屏样式内联放在<head>标签内；
4.样式结构层次尽量简单；
5.在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；
6.减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；
7.动画尽量使用在绝对定位或固定定位的元素上；
8.隐藏在屏幕外，或在页面滚动时，尽量停止动画；
9.尽量缓存DOM查找，查找器尽量简洁；
10.涉及多域名的网站，可以开启域名预解析
11.使用雪碧图
网友评论