一、如何遍历一个dom树
function traversal(node) {
//对node的处理
if (node && node.nodeType === 1) {
console.log(node.tagName);
}
var i = 0,
childNodes = node.childNodes,
item;
for (; i < childNodes.length; i++) {
item = childNodes[i];
if (item.nodeType === 1) {
//递归先序遍历子节点
traversal(item);
}
}
}
备注:
nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素
节点,则 nodeType 属性将返回 1。
如果节点是属性
节点,则 nodeType 属性将返回 2。
二、为什么操作DOM会很慢
虽然DOM是由JavaScript实现的,但是在浏览器中都是把DOM和JavaScript分开来实现的,比如IE中,JavaScript的实现名为JScript,放在jscript.dll文件中,而DOM则放在另一个叫做mshtml.dll的库中。在Safari中,DOM和渲染是使用Webkit中的WebCore实现,而JavaScript是由独立的JavaScriptCore引擎实现,同样在Chrome中,同样是使用WebCore来实现渲染,而JavaScript引擎则是他们自己研发的V8引擎。
由于DOM和JavaScript是被分开独立实现的,因此,每一次在通过js操作DOM的时候,就需要先去连接js和DOM,我们可以这样理解:把DOM和JavaScript比作两个岛,他们之间通过一个收费的桥连接着,每一次访问DOM的时候,就需要经过这座桥,并且给“过路费”,访问的次数越多,路费就会越高,并且访问到DOM后,操作具体的DOM还需要给“操作费”,由于浏览器访问DOM的操作很多,因此,路费
和操作费
自然会增加,这就是为什么操作DOM会很慢的原因
三、浏览器渲染HTML的步骤
HTML渲染大致分为如下几步:
-
HTML被HTML解析器解析成DOM Tree, css则被css解析器解析成CSSOM Tree。
-
DOM Tree和CSSOM Tree解析完成后,被附加到一起,形成渲染树(Render Tree)。
-
节点信息计算(重排),这个过程被叫做Layout(Webkit)或者Reflow(Mozilla)。即根据渲染树计算每个节点的几何信息。
-
渲染绘制(重绘),这个过程被叫做(Painting 或者 Repaint)。即根据计算好的信息绘制整个页面。
以上4步简述浏览器的一次渲染过程,理论上,每一次的dom更改或者css几何属性更改,都会引起一次浏览器的重排/重绘过程
,而如果是css的非几何属性更改,则只会引起重绘过程。所以说重排一定会引起重绘,而重绘不一定会引起重排
。
备注:
重排(回流)和重绘的区别
重绘
(replaint)——当页面中的元素只是外观或风格
被改变不影响布局,比如更换背景色background-color,这个过程就是重绘。
重排
(relayout)——当RenderTree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变,浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构
的过程,也就是重新构造渲染树 ,这个过程叫做重排(relayout)
回流
(reflow)——Gecko中布局的称谓,同时也是重排的别称。
重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置
DOM的变化影响了元素的几何属性,浏览器需要重新计算元素的几何属性,同时其他元素的几何属性和位置也会受到影响,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树,这个过程是重排,浏览器会重新绘制受到影响的部分到屏幕,这个过程叫重绘。
1>重排(Reflow)
:当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。
2>重绘(Repaint)
:是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等
3>引发重排
1.添加、删除可见的dom
2.元素的位置改变
3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)
4.页面渲染初始化
5.浏览器窗口尺寸改变
6.获取某些属性。当获取一些属性时,浏览器为取得正确的值也会触发重排,它会导致队列刷新,这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以,在多次使用这些值时应进行缓存。
4>优化:
浏览器自己的优化:
浏览器会维护1个队列,把所有会引起重排,重绘的操作放入这个队列,等队列中的操作到一定数量或者到了一定时间间隔,浏览器就会flush队列,进行一批处理,这样多次重排,重绘变成一次重排重绘
减少 reflow/repaint:
(1)不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class,然后修改 DOM 的 className。
(2)不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
(3)为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是不会 reflow 的。
(4)千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
(5)不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)
四、DOM和JavaScript的关系
文档对象模型(DOM)是一个独立于语言,用于操作XML和HTML文档的API,在web端,我们常用来操作HTML,但其实DOM也是可以操作XML文档的。
我们现在知道,DOM是一个独立于语言的API,换句话说,DOM是一个与语言无关的API,别的语言也可以实现操作DOM的具体api,但是它在浏览器中是用JavaScript来实现的,也因此,DOM是现在JavaScript编码中很重要的一部分,因为JavaScript很多时候都在操作底层文档。