DOM优化



1.概念：

  DOM定义了访问 HTML和 XML 文档的标准，DOM会将文档看做一棵树，同时定义了很多方法来操作树中的每个节点。他不是指具体的某个东西，而是指一套准则。

2.重点：DOM与js为独立的两部分，要减少两者之间的交互，否则会影响性能。

3.innerHTML和DOM方法对比：

 Chrome：DOM方法快（appendChild）

 其他：innerHTML快

4.减少DOM操作：

 （1）节点克隆：cloneNode（可以创建一个元素，其他元素克隆这个）（创建）

 （2）访问元素集合：要尽量用局部变量（获取）

 （3）元素节点：要尽量使用获取元素的方法（children,firstElementChild）（获取）

 （4）选择器API：利用querySelect(),querySelectAll()。（获取）

html5之前用:

getElementById(),getElementsByName(),getElementsByTagName()

有了新的Selectors API之后，可以用更精确的方式来指定希望获取的元素，而不必再用标准DOM的方式循环遍历。

querySelector()

使用该函数可以根据指定的选择规则，返回在页面中找到的第一个匹配元素。

例如：querySelector(“input.error”)会返回第一个css类名为error的文本输入框。

querySelectorAll()

该函数可以根据指定规则返回页面中，所有匹配的元素。

例如：querySelectorAll(“#resultstd”)会返回id值为results的元素下的所有单元格。

可以同时为Selectors API函数同时指定多个选择规则，多条规则是用逗号分隔的。例如：querySelector(“.highClass”,”lowClass”)会返回类名为highClass或lowClass的第一个元素。

5.DOM与浏览器

 （1）重排：改变页面的内容

 （2）重绘：浏览器显示内容

 （3）添加顺序：尽量在appendChild前添加操作（添加）

 （4）合并DOM：利用cssText;（修改样式）

head.style.width = "200px";

head.style.height ="70px";

head.style.display= "block";

head.style.cssText="width:200px;height:70px;display:bolck";

 （5）文档碎片：（添加）

var temp=document.createDocumentFragment();

temp.appendChild();

将需要添加到dom中的内容一次性添加到文档碎片中，然后将文档碎片添加到dom树，这样就可以有效的减少操作dom的次数

6.DOM与事件：可以通过事件委托

事件委托是利用冒泡的原理，将事件处理程序添加到父级上，触发执行效果。

好处：

（1）提高性能

（2）新添加的元素，还会有之前的事件。