快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

澳门24小时娱乐在线:浏览器的重绘与重排分析



在项目的交互或视觉评审中,前端同砚经常会对一些交互效果质疑,提出这样做不好那样做不好。主要缘故原由是这些效果平日会孕育发生一系列的浏览看重绘(redraw)和重排(reflow),必要付出高昂的机能价值。那么,什么是浏览器的重绘和重排呢?二者何时发生以及若何权衡?若何在详细的开拓历程中将重绘和重排激发的机能问题斟酌进去?本文等候可以部分化释以上三个问题。

浏览器从下载文档到显示页面的历程是个繁杂的历程,这里包孕了重绘和重排。各家浏览器引擎的事情道理略有区别,但也有必然规则。简单讲,平日在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于衬着的树。衬着树的每个节点都有大年夜小和边距等属性,类似于盒子模型(因为暗藏元素不必要显示,衬着树中并不包孕DOM树中暗藏的元素)。当衬着树构建完成后,浏览器就可以将元素放置到精确的位置了,再根据衬着树节点的样式属性绘制出页面。因为浏览器的流结构,对衬着树的谋略平日只必要遍历一次就可以完成。但table及其内部元素除外,它可能必要多次谋略才能确定好其在衬着树中节点的属性,平日要花3倍于一致元素的光阴。这也是为什么我们澳门24小时娱乐在线要避免应用table做结构的一个缘故原由。

重绘是一个元素外不雅的改变所触发的浏览器行径,例如改变visibility、outline、背景致等属性。浏览器会根据元素的新属性从新绘制,使元素出现新的外不雅。重绘不会带来从新结构,并不必然伴随重排。

重排是更显着的一种改变,可以理解为澳门24小时娱乐在线衬着树必要从新谋略。下面是常见的触发重排的操作:

1. DOM元素澳门24小时娱乐在线的几何属性变更

当DOM元素的几何属性变更时,衬着树中的相枢纽关头点就会掉效,浏览器会根据DOM元素的变更从新构建衬着树中掉效的节点。之后,会根据新的衬着树从新绘制这部分页面。而且,当前元素的重排大概会带来相关元素的重排。例如,容器节点的衬着树改变时,会触发子节点的从新谋略,也会触发其后续兄弟节点的重排,先人节点必要从新谋略子节点的尺寸也会孕育发生重排。着末,每个元素都将发生重绘。可见,重排必然会引起浏览器的重绘,一个元素的重排平日会带来一系列的反映,以致触发全部文档的重排和重绘,机能价值是高昂的。

2. DOM树的布局变更

当DOM树的布局变更时,例如节点的增减、移动等,也会触发重排。浏览器引擎结构的历程,类似于树的前序遍历,是一个从上到下从左到右的历程。平日在这个历程中,当前元素不会再影响其前面已经遍历过的元素。以是,假如在body最前面插入一个元素,会导致全部文档的从新澳门24小时娱乐在线衬着,而在其后插入一个元素,则不会影响到前面的元素。

3. 获取某些属性

浏览器引擎可能会针对重排做了优化。比如Opera,它会等到有足足数量的变更发生,或者等到必然的光阴,或者等一个线程停止,再一路处置惩罚,这样就只发生一次重排。但除了衬着树的直接变更,当获取一些属性时,浏览器为取得精确的值也会触发重排。这样就使得浏览器的优化掉效了。这些属性包括: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.getEl澳门24小时娱乐在线ementById(‘changeDiv’).className = ‘changeDiv’;

2. 将必要多次重排的元素,position属性设为absolute或fixed,这样此元素就离开了文档流,它的变更不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

3. 在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,衬着到页面。可以先取得数据后在内存中构建全部表格的html片段,再一次性添加到文档中去,而不是轮回添加每一行。

4. 因为display属性为none的元素不在衬着树中,对暗藏的元素操作不会激发其他元素的重排。假如要对一个元素进行繁杂的操作时,可以先暗藏它,操作完成后再显示。这样只在暗藏和显示时触发2次重排。

5. 在必要常常获取那些引起浏览看重排的属性值时,要缓存到变量。

在近来几回口试中对照常问的一个问题:在前端若何实现一个表格的排序。假如应聘者的规划中斟酌到了若何削减重绘和重排的影响,将是使人知足的规划。

参考文档:

Loading Web pages

http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#browsers

Rendering

http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#rendering

WebCore RenderingI – The Basics

http://www.webkit.org/blog/114/webcore-rendering-i-the-basics/

Notes on HTML Reflow

http://www-archive.mozilla.org/newlayout/doc/reflow.html

您可能还会对下面的文章感兴趣: