javascript编程容易出现的错误

原创于 2013-08-09 15:06:53 发布 · 566 阅读

CC 4.0 BY-SA版权

本文探讨了在网页开发中优化DOM操作的方法，通过引入Document Fragments，避免了逐个插入DOM元素导致的性能瓶颈，提供了快速、简洁的解决方案。

错误1 单个单个的插入dom

var list = document.getElementById("list"),
 items = ["one", "two", "three", "four"],
 el;
 
 for (var i = 0; items[i]; i++) {
 el = document.createElement("li");
 el.appendChild( document.createTextNode(items[i]) );
 list.appendChild(el); // slow, bad idea
 }

Document fragments 是一个DOM元素容器，可以使用它同时添加这些元素到页面中。Document fragment自身不是一个DOM节点，它不会在页面DOM树中显示，并且在把它插入DOM之前它是不可见的。下面是它的用法：

var list = document.getElementById("list"),
 frag = document.createDocumentFragment(),
 items = ["one", "two", "three", "four"],
 el;
 
 for (var i = 0; items[i]; i++) {
 el = document.createElement("li");
 el.appendChild( document.createTextNode(items[i]) );
 frag.appendChild(el); // better!
 }
 
 list.appendChild(frag);

非常快速、简洁！