高性能javascript读书笔记（三.DOM 编程1）

第三章DOM Script DOM编程读书笔记

访问和修改DOM元素

浏览器通常要求DOM实现和JavaScript保持相互独立。

访问DOM元素

function innerHTMLLoop(){
	for(var count=0; count<15000; count++){
		document.getElementById("h").innerHTML+="a";
	}
}

每次循环单元中，都对DOM元素访问两次，一次次读innerHTML属性,一次写。

使用局部变量存储更新后的内容，在循环结束时一次性写入:

function innerHTMLLoop(){
    var content=" ";
    for(var count=0; count<15000; count++){
        content+="a";
    }
     document.getElementById("h").innerHTML+="content";
}

在所有浏览器中，新版本运行速度都要快得多。

结论:访问DOM越多，代码的执行速度就越慢。
“轻轻的触摸DOM”,尽量保持在ECMAScript范围内。

比较innerHTML和纯DOM,例如createElement()

两种方式创建一个1000行的表

1.构造一个HTML字符串，然后更新DOM的innerHTML属性。

2.通过标准DOM方法document.createElement() document.createTextNode()。

innerHTML的好处在老式浏览器上显而易见，新浏览器就不那么明显。
使用DOM方法反之。

如果在一个性能苛刻的操作中更新大一块HTML页面，innerHTML在大多数浏览器中执行更快。
但对于大多数日常操作而言，其差异并不大，所以应当根据代码可读性，可维护性，团队习惯，代码风格来综合决定采
用哪种方法。

节点克隆

使用DOM方法更新页面内容的另一个途径是克隆已有DOM元素，而不是创建新的。

即使用element.cloneNode() （element是一个已存在的节点）代替document.createElement();

在大多数浏览器上，克隆节点更有效率，但提高不太多。用克隆节点的方法重新生成前面例子中的表，
单元只创建执行复制操作，这样只是稍微快了一点。

HTML集合

是用于存放DOM节点引用的类数组对象。下列函数的返回值就是一个集合：

document.getElementByName()
document.getElementByClassName()
document.getElementByTagName()

document.images 页面中所有的<img>元素
document.links 所有的<a>元素
document.forms 所有表单
document.forms[0].elements 页面中的第一个表单的所有字段

这些方法和属性返回HTMLCollection对象 ,是一种类似数组的列表。他们不是数组(因为他们没有诸如push（）和

slice()之类的方法，但是提供料一个length属性)

HTML集合实际上查询文档，当你更新信息，每次都要重复执行这种查询这种操作。例如读取集合中元素的数目(也就是
集合的length)。这正是低效率的来源。

遍历数组明显快于相同大小和内容的HTML集合，可以将集合拷贝到数组arr中。

每次迭代过程访问集合的length属性，导致集合器更细，在所有浏览器都会产生明显的性能损失。

优化:将集合的length属性那个缓存到一个变量中，然后循环判断条件中使用这个变量。

对于任何类型的DOM 访问，如果同一个DOM属性或方法被访问一次以上，最好使用一个局部变量缓存此DOM成员。
当遍历一个集合时，第一个优化是将集合引用存储于局部变量，并在循环之外缓存length属性，然后，如果在循环体中
多次访问同一个集合元素，那么使用局部变量缓存它。

在使用DOM API时，通常要使用针对特定操作选择最有效的API.

例如操作周围的元素，或者递归迭代所有的子节点，你可以使用childNode集合，或者使用nextsibling获得每个元素
的兄弟节点。

DOM属性诸如childNode， firstChild， nextSibling不区分元素节点和其他类型的节点，如注释节点和文本节点，
通常只有元素节点需要被访问，所以在循环中，似乎应当对节点返回类型进行检查，过滤出非元素节点，这些检查和过
滤都是不必要的DOM操作。

只返回元素节点　　　　所有类型的节点
children 　　　　　　　　 childNodes
childElementCount 　　 childNodes.length
firstElementChild 　　　 firstChild
lastElementChild　　　 lastChild
nextElementChild　　 nextSibling
previousElementSibling previousSibling

以上支持 FF3.5 Safari 4 chrome2 opera9.62
IE6,7,8只支持children

遍历children比childNodes更快，集合项更少。

也可以用CSS选择器

var elements=document.querySelectorAll("#menu a");
返回的是NodeList 符合条件的类数组对象，不返回HTML集合

相同的方式，
var element=document.getElementById("menu").getElementsByTagName("a");
这element将是一个html集合，将它拷贝到一个数组中，如果想得到querySelectorAll()同样的返回值类型的话

querySelectorAll还可以用于联合查询
var errs=document.querySelectorAll("div.warning,div.notice");
可以一次性获得这两类节点

querySelector() 返回符合查询条件的第一个节点