JS对DOM的优化小结
所有的HTML解析成DOM节点才能操作
1. 什么是dom?
2.优化DOM
优化DOM的本质其实就是减少DOM树的重绘与重流。
什么是重流||重绘？
通常页面在加载你的js，css，img等文件时，引擎会对文件加以解析，最终生成两棵树，渲染树和DOM树。DOM树中的需要显示节点在渲染数中都会存在（即display：none的不存在）。DOM是页面显示的HTML结构，渲染树是DOM显示的真实结点
，也可以理解为渲染树其实就是css文件指定节点的样式表。
- 当渲染树和DOM树都已经完成的时候，则开始将页面显示到桌面上。
- 如果改变页面的DOM结构，渲染树和DOM树都发生改变
- 浏览器会重新计算出渲染树的这一过程叫重流（重排）
- 将更新后的结构重新渲染到页面的这一过程叫重绘
整个流程就是这个图 
重流重绘发生的情况
重流发生情况：
- 添加或删除可见DOM元素
- 元素位置改变
- 元素尺寸改变
- 元素内容改变
- 页面渲染初始化
- 浏览器窗口尺寸改变
总的来说，改变页面布局、大小，都会发生重流的情况。那重绘什么时候发生呢？发生重流就一定会发生重绘，但是重绘的范围大一点。比如，当你仅仅改变字体颜色，页面背景等比较“肤浅”的操作时，是不会打扰到重排的。
优化DOM的结构，无非就是引用保存，动画优化，节点保存，更新节点等基本操作。
优化DOM的效果
var times=10000;
var time1 = function(){
var time = times;
while(time--){
//DOM的两个操作放在循环内
var dom = document.querySelector("#Div1");
dom.innerHTML+="a";
}
};
var time2=function(){
var time = times,
dom = document.querySelector("#Div1");
while(time--){
//DOM的一个操作放在循环内
dom.innerHTML+="a";
}
};
var time3=function(){
var time = times,
dom = document.querySelector("#Div1"),
str = "";
while(time--){
//循环内不放置DOM的操作
str +="a";
}
dom.innerHTML=str;
}
console.time(1);
//设置时间起点
time1();
console.timeEnd(1);
console.time(2);
//设置时间起点
time2();
console.timeEnd(2);
console.time(3);
//设置时间起点
time3();
console.timeEnd(3);
//测试结果为:
1: 101.868ms
2: 101.560ms
3: 13.615ms
- 过多的DOM操作时，一定要保存获取到的DOM节点及所有涉及DOM相关的操作。
- 合并DOM的操作
div.style.color="red";div.style.border="1px
solid red";
浏览器会聪明的将两次重排合并到一次发生，节省资源。
但是如果中间访问了其他属性等，那么就会再次重排。
div.style.color="red";//积累一次重排记录var
height = div.clientHeight;//触发重排div.style.border="1px solid red";//再次积累一次重排
所以如果更改DOM结构最好一次性写完
1. 批量增加 Dom
尽量使用修改 innerHTML 的方式而不是用 appendChild 的方式 ; 因为使用 innerHTML 开销更小 , 速度更快 , 同时也更加内存安全 .
有一点需要注意的是 , 用 innerHTML 方式添加时 , 一定不要在循环中使用 innerHTML += 的方式添加 , 这样反而会使速度减慢 ; 而是应该中间用 array 缓存起来 , 循环结束后调用 xx.innerHTML = array.join(‘’); 的方式 , 或者至少保存到 string 中再插到 innerHTML 中 .
针对用户列表一块采用这种方式优化后 , 加载速度提升一倍 .
2. 单个增加 Dom
这里是指要将新节点加载到一个内容不断变化的节点的情形 , 对于内容稳定的节点来说 , 随便怎么加都没有问题 .但是对于有动态内容的节点来说 , 为其添加子节点尽量使用 dom append 的方式 .
这是因为 ,dom append 不会影响到其他的节点 ; 而如果修改 innerHTML 属性的话 , 该父节点的所有子节点都会从 dom 树中剥离 , 再根据新的 innerHTML 值来重绘子节点 dom 树 ; 所有注册到原来子节点的事件也会失效 .
综上 , 如果在一个有动态内容的节点上 出现了 innerHTML += 的代码 , 就该考虑是否有问题了 .
3. 创建 Dom 节点
用 createElement 方式创建一个 dom 节点 , 有一个很重要的细节 : 在执行完 createElement 代码之后 , 应该马上append 到 dom 树中 ; 否则 , 如果在将这个孤立节点加载到 dom 树之前所做的赋值它的属性和 innerHTML 的操作都会引发该 dom 片段内存无法回收的问题 . 这个不起眼细节 , 一旦遇到大量 dom 增删操作 , 就会引发内存的灾难 .
4. 删除 Dom 节点
删除 dom 节点之前 , 一定要删除注册在该节点上的事件 , 不管是用 observe 方式还是用 attachEvent 方式注册的事件 , 否则将会产生无法回收的内存 .
另 , 在 removeChild 和 innerHTML=’’ 二者之间 , 尽量选择后者 . 因为在 sIEve( 内存泄露监测工具 ) 中监测的结果是用 removeChild 无法有效地释放 dom 节点 .
5. 创建事件监听
现有的 js 库都采用 observe 方式来创建事件监听 , 其实现上隔离了 dom 对象和事件处理函数之间的循环引用 ,所以应该尽量采用这种方式来创建事件监听 .
6. 监听动态元素
Dom 事件默认是向上冒泡的 , 发生在子节点中的事件 , 可以由父节点来处理 . Event 的 target/srcElement 仍是产生事件的最深层子节点 . 这样 , 对于内容动态增加并且子节点都需要相同的事件处理函数的情况 , 可以把事件注册上提到父节点上 , 这样就不需要为每个子节点注册事件监听了 .
同时 , 这样做也避免了产生无法回收的内存 . 即使是用 Prototype 的 observe 方式注册事件并在删除节点前调用stopObserving, 也会产生出少量无法回收的内存 , 所以应该尽量少的为 dom 节点注册事件监听 .
所以 , 当代码中出现在循环里注册事件时 , 也是我们该考虑事件上提机制的时候了 .
****************************************************************************************************************************
7. HTML 提纯
HTML 提纯体现的是一种各负其责的思想 . HTML 只用来显示 , 尽量不出现和显示无关的属性 . 比如 onclick 事件 , 比如自定义的对象属性 .
事件可以用前面的方法避免 , 对象属性指的是这样的一种情景 : 通常情况下 , 动态增加的内容都是有个对象和它对应 ,比如聊天室的用户列表 , 每个显示用户的 dom 节点都有一个 user 对象和它对应 , 这样在 html 中 , 应该仅保留一个 id属性和 user 对象对应 , 而其他的信息 , 则应通过 user 对象去获取 .
基于 PrototypeJS ，写了一个 Dom 生成器，以提供简单高效的 HTML 操作接口的语法和语义优化 ：
1. 使用类似 JSONML 的格式 (HTML in JSON) 描述 DOM 结构，以补充 HTML 转义字符串的表达形式，规范格式中可支持以下 HTML 语义：
l 标签名
l 属性 ( 标识符 , 类名 , 事件名 , 内联样式等 )
注：事件名上注册的侦听函数将自动通过 Event.observe 方式添加
l 嵌套标签
格式规范可简单描述为：
{
tag:string, // 元素的标记名，如果没有，默认为 div
children|cn: string|Array|json, // 子结点对应的 json 数组或字节点的 html 或单个 json
html:string, // 对应的 html ，如果有 cn 或 children 属性就忽略
style:function|string|json, // 元素的样式，可以是函数，字符串， json 对象
cls:string, // 元素的 class 属性的值
x:y // x 表示其他名字， y 表示变量值、非空字符串
onXXX: function // 以 on 为首的属性是事件侦听器
}
一个具体的例子为：
var list = DomBuilder.append( 'my-div' ,
{
tag : 'ul' ,
cls : 'my-list' ,
children : [
{
tag : 'li' ,
id : 'item1' ,
html : 'List Item 1' ,
onclick : function ()
{
alert( 'List Item1 Clicked' )
}
},
{
tag : 'li' ,
id : 'item2' ,
html : 'List Item 2' ,
customattr : 'customValue'
}]
});
2. 在实际修改 DOM 结构时，提供两种方式可供调用者选择，以便应需使用：
l W3C 标准 DOM 操作 (appendChild, removeChild) 方式
l 使用 innerHTML,insertAdjacentHTML 等的实效模式
一个具体例子为：
DomBuilder.useDom = true ; // 显示申明使用 W3C
Dom 操作方式
3. 另外提供 DOM 节点的有效回收方法
var abandoned = DomBuilder.destroy(list); // 将 DOM 节点从文档中移除