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

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

访问和修改DOM元素

 

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

<!-- 例如IE中，被称为JScript的JavaScript实现位于库文件jscript.dll中，而DOM实现位于另外一个库mshtml.dll(内
部代号Trident).这种分离技术容许其余技术和语言，
如VBScript,受益于Trident所提供的DOM功能和渲染功能。
Safari使用Webkit的WebCore处理DOM和渲染，具备一个分离的JavaScriptCore引擎。
Google Chrome也使用Webkit的WebCore库渲染页面，但实现了本身的JavaScript引擎V8.
在Firefox中，JavaScript实现了TraceMonkey，与其Gwcko渲染引擎相分离。-->

访问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() 返回符合查询条件的第一个节点