今天小编跟大家讲解下有关css重绘与重排的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css重绘与重排的方法 的相关资料，希望小伙伴们看了有所帮助。
浏览器加载页面原理
通常在文档初次加载时 浏览器引擎会解析HTML文档来构建DOM树 之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性 类似于 盒子模型 （由于隐藏元素不需要显示 渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后 浏览器就可以将元素放置到正确的位置了 再根据渲染树节点的样式属性绘制出页面。由于浏览器的 流布局 对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外 它可能需要多次计算才能确定好其在渲染树中节点的属性 通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。
重绘
重绘是一个元素 外观的改变 所触发的浏览器行为 例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制 使元素呈现新的外观。重绘不会带来重新布局 并不一定伴随重排。浏览器在进行重绘和重排的时候是要付出高昂的性能代价的。
重排
重排是更明显的一种改变 可以理解为渲染树需要重新计算。下面是常见的触发重排的操作：
DOM元素的几何属性变化。 DOM树的结构变化。例如节点的增减、移动等.
获取某些属性。
当获取一些属性时 浏览器为取得正确的值也会触发重排。这样就使得浏览器的优化失效了。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以 在多次使用这些值时应进行缓存。
此外 改变元素的一些样式 调整浏览器窗口大小 滚动条出现等等也都将触发重排。
减少重排次数和重排影响范围
1、将多次改变样式属性的操作合并成一次操作。例如
JS: var changeDiv = document.getElementById(‘changeDiv’); changeDiv.style.color = ‘#093′; changeDiv.style.background = ‘#eee'; changeDiv.style.height = ‘200px'; 可以合并为：CSS: div.changeDiv { background: #eee; color: #093; height: 200px; }JS: document.getElementById(‘changeDiv’).className = ‘changeDiv';2、 将需要多次重排的元素 position属性设为absolute或fixed 这样此元素就脱离了文档流 它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
3、 在内存中多次操作节点 完成后再添加到文档中去。例如要异步获取表格数据 渲染到页面。可以先取得数据后在内存中构建整个表格的html片段 再一次性添加到文档中去 而不是循环添加每一行。
4、 由于display属性为none的元素不在渲染树中 对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时 可以先隐藏它 操作完成后再显示。这样只在隐藏和显示时触发2次重排。
5、 在需要经常取那些引起浏览器重排的属性值时 要缓存到变量
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
