减少dom更新以及css计数器

一个前端优化的小技巧

我们知道在前端里面涉及到dom部分的操作都比较耗时，因为更新dom需要立即对页面对用户的显示进行更新。每一个更改，不管是插入字符还是移除dom节点，浏览器都需要重新计算很多尺寸以进行更新。这种更新进行的越多，代码完成所花的时间就越长;如下面的代码：

var list = document.getElementById("list"),
           item,
           i;
for (i=0; i< 10; i++) {
    item = document.createElement("li");
    list.appendChild(item);
    item.appendChild(document.createTextNode("item"+i));
}

上述代码为列表添加了10个项目。每添加一个项目都有两次更新（一个添加

元素,一个给它添加文本节点）。这样添加这10个项目要20次更新。
减少更新次数可以优化这段代码的性能，首先想到的是将列表从页面上移除,再进行更新，更新完了再一次性加列表插回原来的位置，这样也是一种方法，但还有更好一种方法是使用文档片段来构建dom结构，如下代码：

var list = document.getElementById("list"),
       item,
       fragment = document.createDocumentFragment(),
       i;
for (i=0; i< 10; i++) {
    item = document.createElement("li");
    item.appendChild(document.createTextNode("item"+i));
    fragment .appendChild(item);
}
list.appendChild(fragment);

这样就只有一次更新，它发生在所有项目都创建好之后。

css计数器

一般和计数相关的字眼，我们首先想到的是js。css不是只负责样式的吗？其实css和伪类像配合也可以拥有简单的计数功能。但是它的计数功能只能跟content属性在一起的时候才有作用。而content属性貌似专门用在before/after伪元素上的和计数器相关的属性主要就是1. counter-reset 2. counter-incremen 3. counter()/counters()这三个属性

1. counter-reset
   顾名思意，就是“计数器-重置”的意思。

.box{ counter-reset: count; } /* 计数器名称是'count' */
.box{ counter-reset: count 2; } /* 计数器名称是'count', 并且默认起始值是2 */

2. counter-incremen
   顾名思意，就是“计数器-递增”的意思。值为counter-reset的1个或多个关键字。后面可以跟随数字，表示每次计数的变化值。如果缺省，则使用默认变化值1

3. counter()/counters()
   这个不能说是属性了，严格来说应该是一个方法。类似CSS3中才calc()计算。这里作用很单纯显示计数。下面看一个实际运用例子。html结构如下:

  
  
item
        
  
item              
    
  
      
item
     
      
item
       
      
item          
        
  
          
item
  
          
item
  
        
  
     
  
      
item
  
    
  
  
  

css代码如下

ol {  
  counter-reset: addnum;                /* 为每个ol元素创建新的计数器实例 */  
  list-style-type: none;  
}  
li:before {  
  counter-increment: addnum;            /* 只增加计数器的计数器名字叫addnum的实例  */  
  content: counters(addnum, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */  
}  

图1

效果如上图所示。