每次想到“DOM”编程就会自然联想到“性能瓶颈”。我觉得有两部分原因：
1.DOM自己本身操作代价昂贵，因为浏览器通常要求DOM 实现和JavaScript 实现保持相互独立；
2.嘿嘿，本人自身的原因，没有本质全面认识她，没有学习和思考如何高效运用其。
显而见之，我目前可以着手改进第二条呀。。。。
忘了哪位大牛说过的一句话，“轻轻地触摸DOM，并尽量保持在ECMAScript 范围内。”
具体做法：
first：DOM 访问和修改
who？ innerHTML or标准的DOM方法
使用DOM 方法更新页面内容的另一个途径是克隆已有DOM 元素
second：HTML集合（是用于存放DOM 节点引用的类数组对象）
document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName_r()
document.images
document.links
document.forms
document.forms[0].elements
HTML 集合是一个“虚拟存在，意味着当底层文档更新时，它们将自动更新”，HTML 集合实际上在查询文档，当你更新信息时，每次都要重复执行这种查询操作，正是低效率的来源。
--------方案
1.将length 缓存一下。
2.先将集合元素拷贝到数组（数组副本，评估是否有意），因为遍历数组比遍历集合快。
3.如果同一个DOM 属性或方法被访问一次以上，最好使用一个局部变量缓存此DOM 成员。
third：抓取DOM
1.用nextSibling 抓取DOM 是首选方法
2.DOM 属性诸如childNode，firstChild，和nextSibling 不区分元素节点和其他类型节点。
元素节点：children
3.函数querySelectorAll()接收一个CSS 选择器字符串参数并返回一个NodeList（由符合条件的节点构成的类数组对象）。此函数不返回
HTML 集合
列浏览器支持选择器API：Internet Explorer 8，Firefox 3.5，Safari 3.1，Chrome 1，Opera 10。
forth： 重绘和重排版
当浏览器下载完所有页面的html标记、javascript、css、图片之后，它解析文件并创建两个内部数据结构
a dom tree（表示页面结构）+ a render tree（表示dom节点如何显示）渲染树上的节点称为“框”或者“盒”。
获取布局信息的操作将导致刷新队列动作：
• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle() (currentStyle in IE)（在IE 中此函数称为currentStyle）
该将多个DOM 和风格改变合并到一个批次中一次性执行：cssText 属性实现、修改CSS 的类名称
firth：批量修改DOM
1.从文档流中摘除该元素---》对其应用多重改变----》将元素带回文档中
1.1隐藏元素，进行修改，然后再显示它。
1.2使用一个文档片断在已存DOM 之外创建一个子树，然后将它拷贝到文档中。
1.3将原始元素拷贝到一个脱离文档的节点中，修改副本，然后覆盖原始元素。
sixth：事件托管
事件逐层冒泡总能被父元素捕获。采用事件托管技术之后，你只需要在一个包装元素上挂接一个句柄，用于处理子元素发生的所有事件。