一個(gè)前端優(yōu)化的小技巧

我們知道在前端里面涉及到dom部分的操作都比較耗時(shí)，因?yàn)楦耫om需要立即對(duì)頁(yè)面對(duì)用戶的顯示進(jìn)行更新。每一個(gè)更改，不管是插入字符還是移除dom節(jié)點(diǎn)，瀏覽器都需要重新計(jì)算很多尺寸以進(jìn)行更新。這種更新進(jìn)行的越多，代碼完成所花的時(shí)間就越長(zhǎng);如下面的代碼：

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個(gè)項(xiàng)目。每添加一個(gè)項(xiàng)目都有兩次更新（一個(gè)添加<li>元素,一個(gè)給它添加文本節(jié)點(diǎn)）。這樣添加這10個(gè)項(xiàng)目要20次更新。
減少更新次數(shù)可以優(yōu)化這段代碼的性能，首先想到的是將列表從頁(yè)面上移除,再進(jìn)行更新，更新完了再一次性加列表插回原來(lái)的位置，這樣也是一種方法，但還有更好一種方法是使用文檔片段來(lái)構(gòu)建dom結(jié)構(gòu)，如下代碼：

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);

這樣就只有一次更新，它發(fā)生在所有項(xiàng)目都創(chuàng)建好之后。

css計(jì)數(shù)器

一般和計(jì)數(shù)相關(guān)的字眼，我們首先想到的是js。css不是只負(fù)責(zé)樣式的嗎？其實(shí)css和偽類像配合也可以擁有簡(jiǎn)單的計(jì)數(shù)功能。但是它的計(jì)數(shù)功能只能跟content屬性在一起的時(shí)候才有作用。而content屬性貌似專門(mén)用在before/after偽元素上的和計(jì)數(shù)器相關(guān)的屬性主要就是1. counter-reset 2. counter-incremen 3. counter()/counters()這三個(gè)屬性

1. counter-reset
   顧名思意，就是“計(jì)數(shù)器-重置”的意思。

.box{ counter-reset: count; } /* 計(jì)數(shù)器名稱是'count' */
.box{ counter-reset: count 2; } /* 計(jì)數(shù)器名稱是'count', 并且默認(rèn)起始值是2 */

2. counter-incremen
   顧名思意，就是“計(jì)數(shù)器-遞增”的意思。值為counter-reset的1個(gè)或多個(gè)關(guān)鍵字。后面可以跟隨數(shù)字，表示每次計(jì)數(shù)的變化值。如果缺省，則使用默認(rèn)變化值1

3. counter()/counters()
   這個(gè)不能說(shuō)是屬性了，嚴(yán)格來(lái)說(shuō)應(yīng)該是一個(gè)方法。類似CSS3中才calc()計(jì)算。這里作用很單純顯示計(jì)數(shù)。下面看一個(gè)實(shí)際運(yùn)用例子。html結(jié)構(gòu)如下:

<ol>  
  <li>item</li>        
  <li>item              
    <ol>  
      <li>item</li>     
      <li>item</li>       
      <li>item          
        <ol>  
          <li>item</li>  
          <li>item</li>  
        </ol>  
     </li>  
      <li>item</li>  
    </ol>  
  </li>  
</ol>

css代碼如下

ol {  
  counter-reset: addnum;                /* 為每個(gè)ol元素創(chuàng)建新的計(jì)數(shù)器實(shí)例 */  
  list-style-type: none;  
}  
li:before {  
  counter-increment: addnum;            /* 只增加計(jì)數(shù)器的計(jì)數(shù)器名字叫addnum的實(shí)例  */  
  content: counters(addnum, ".") " ";   /* 為所有計(jì)數(shù)器實(shí)例增加以“.”分隔的值 */  
}  

圖1

效果如上圖所示。