标签：style color ar 使用 java sp for 文件 数据
每次想到“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：事件托管
事件逐层冒泡总能被父元素捕获。采用事件托管技术之后，你只需要在一个包装元素上挂接一个句柄，用于处理子元素发生的所有事件。
标签：style color ar 使用 java sp for 文件 数据
原文地址：http://www.cnblogs.com/youlanlan/p/4081017.html
