性能:
一.优化性能
1.优化for循环:在循环体外算出需要循环的最大次数。
2.将DOM节点附加到文档:
1var container = document.createElement('div');
2var outer = document.getElementById('top');//已经存在的结点
3outer.appendChild(container);
4for(var i=0;i<count;i++){
6  var node = document.createElement('div');
7  container.appendChild(node);
8}
//因为首先是把附加容器加入到了DOM,然后再填充容器,所以整个文档需要修改count+1次。
修正!
1var container = document.createElement('div');
2var outer = document.getElementById('top');//已经存在的结点
3for(var i=0;i<count;i++){
4  var node = document.createElement('div');
5  container.appendChild(node);
6}

7outer.appendChild(container);
//虽然container被修改了count次,但是对于整个文档来说在没有被附加到DOM中之前并没有重新绘制。这样,整个文档只需要修改1次。
3.尽量减少点号操作符的使用:查找父变量的子变量时候,提前找到父变量,而不需要每次都从同一个父变量再次找它的子变量。
4.打破循环引用:当DOM结点于一个对象的属性进行双向引用后,由于DOM元素是一直存在的,所以其对象属性即使没有任何可编程的引用指向也不会被垃圾回收掉,所以需要手动编写清除的函数,把对象的属性设置为null。
5.移除DOM元素:当需要再次使用某个DOM元素时候,优先使用隐藏元素方式。当不再需要使用时候,使用移除元素方式。另外,在使用隐藏元素方式时候,可以首先检测元素时候存在,不存在再建立元素。
 1function message(txt){
 2   var box = document.getElementById('message');
 3   var txtNode = document.createTextNode(txt);
 4   if(box == null)
 5   {
 6           box = document.createElement("div");
 7           box.appendChild(txtNode);
 8        }

 9   else
10   {
11         var oldTxtnode = box.firstChild;//取得box的textNode
12          box.replace(txtNode,oldTxtNode);//使用replace()替换
13        }

14}