一.减少页面重绘和回流的方法
1.尽量使用css属性简写:如:用boder代替boder-width,boder-style,boder-color
2.批量修改元素样式 elem.className
3.尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)
4.需要创建多个DOM节点时,使用DocumentFragment创建。
因为:每次创建一个页面就会发生回流,所以采用DocumentFragment批量创建
5.尽量去写css表达式。因为每次调用都会重新计算值(包括加载页面)
二.介绍下回流(reflow)与重绘
1.了解浏览器的渲染机制
(1)浏览器采用流式布局
(2)首页浏览器会将html解析成DOM节点,把Css解析成CSSOM。把CSSOM与DOM结合产生render tree。render tree=DOM+CSSOM。
(3)有render之后,我们知道了节点样式,然后浏览器会计算解节点的位置,然后把节点绘制到页面上。
2.回流
当我们render tree中的一些元素的结构或尺寸等发生改变,浏览器重新渲染部分或者全部文档的过程叫回流。
会导致回流的操作:
页面首页渲染
浏览器的窗口发生变化
内容变换
添加或者删除节点
3.重绘
当也面中元素样式的改变不影响它在文档流的位置,浏览器回将新样式赋予给元素,这个过程叫做重绘。
background
visibility
4.性能影响
总结:回流的性能消耗比重绘大