减少浏览器的回流和重绘
Posted cvv54
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了减少浏览器的回流和重绘相关的知识，希望对你有一定的参考价值。
1、css
避免过多样式嵌套
避免使用css表达式
使用绝对定位可以让动画元素脱离文档流（给动画元素做单独定位）
避免使用table布局（会引起多次重绘）
尽量不适用float布局
图片最好设置好width和height
尽量简化浏览器不必要的任务，减少页面重新布局
使用viewpoint设置屏幕缩放级别
避免频繁设置样式
避免使用引起回流的和重绘的属性
2、js
最小化回流和重排：避免频繁操作DOM，可以合并多次对DOM修改，尽量一次性批量处理
控制绘制过程和绘制区域
3、优化DOM
控制DOM大小：合理的业务逻辑（逻辑拆分）、延迟加载即将呈现的内容
简化DOM操作：统一处理DOM节点的操作后再统一插入到DOM TREE中；使用fragment；虚拟DOM技术，通过diff算法简化和减少DOM操作
4、静态文件压缩工具：
html压缩工具：html-minifier
CSS压缩工具：clean-css
JS压缩工具：uglify-js
5、静态文件打包方案：
公共组件拆分
压缩：JS/CSS/图片
合并：JS/CSS文件合并，CSS Sprite
Combo：JS/CSS文件
以上是关于减少浏览器的回流和重绘的主要内容，如果未能解决你的问题，请参考以下文章