如何减少页面的重绘和回流(14)

一.减少页面重绘和回流的方法

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.性能影响

总结:回流的性能消耗比重绘大