本文来自《JavaScript高级程序设计》阅读笔记
优化DOM交互
-------- DOM操作与交互要消耗大量时间,因为它们往往需要重新渲染整个页面或者某一个部分。
- 最小化现场更新
- 现场更新:因为需要立即(现场)对页面对用户的显示进行更新。
- 现场更新越多,代码完成执行所花的时间久越长
举例:
给列表添加10个项目。
var list = document.getElementById("myList"),
item,
i;
for(i=0;i<10;i++){
item = document.createElement("li");
list.appendChild(item);
item.appendChild(document.createTextNode("Item "+i));
}
------ 这样添加一个项目,需要添加li元素,给它添加文本节点,10个项目的话,需要20次的现场更新。
比较好的方式还是创建文档碎片来创建DOM结构,接着将其添加到List元素中,为了避免现场更新和页面闪烁。
var list = document.getElementById("myList"),
fragment = document.createDocumentFragment(),
item,
i;
for(i=0;i<10;i++){
item = document.createElement("li");
fragment.appendChild(item);
item.appendChild(document.createTextNode("Item "+i));
}
list.appendChild(fragment);
2. 使用innerHTML
当把innerHTML设置为某一个值, 后台会创建一个HTML解析器,然后 使用内部的DOM调用来创建DOM结构,而 非基于JavaScript的DOM调用。由于内部方法是编译好的而非解释执行的,所以执行快得多。
3. 使用事件代理
4. 注意HTMLCollection
优化HTMLCollection访问最重要的地方就是 循环。
举例:
var images = document.getElementsByTagName("img"),
i,
len;
for(i=0;len = images.length;i++){
}
发生以下情况时候回返回 HTMLCollection对象
- 进行对getElementsByTagName()的调用
- 获取元素的childNodes属性
- 获取元素的attributes属性
- 访问特殊的集合,如document.forms、document.images等