重绘与重排怎样运用-
阅读器加载页面道理
平常在文档初次加载时，阅读器引擎会解析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 changep = document.getElementById(‘changep’);
changep.style.color = ‘#093′;
changep.style.background = ‘#eee';
changep.style.height = ‘200px';
可以合并为：
CSS:
p.changep {
background: #eee;
color: #093;
height: 200px;
}
JS:
document.getElementById(‘changep’).className = ‘changep';2、 将需要屡次重排的元素，position属性设为absolute或fixed，这样此元素就离开了文档流，它的变化不会影响到其他元素。例若有动画结果的元素就最佳设定为绝对定位。
3、 在内存中屡次操纵节点，完成后再增加到文档中去。例如要异步猎取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性增加到文档中去，而不是轮回增加每一行。
4、 因为display属性为none的元素不在渲染树中，对隐蔽的元素操纵不会激发其他元素的重排。要是要对一个元素进行复杂的操纵时，可以先隐蔽它，操纵完成后再显示。这样只在隐蔽和显示时触发2次重排。
5、 在需要时常取那些引起阅读器重排的属性值时，要缓存到变量
信赖看了本案牍例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！
举荐浏览：
S5让分层屏幕适配
h5实现多图片预览上传及点击可拖拽控件
以上就是重绘与重排怎样运用的细致内容，更多请关注 百分百源码网 其它相干文章！
