一个前端优化的小技巧
我们知道在前端里面涉及到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个项目。每添加一个项目都有两次更新（一个添加<li>元素,一个给它添加文本节点）。这样添加这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()这三个属性
- counter-reset
顾名思意，就是“计数器-重置”的意思。
.box{ counter-reset: count; } /* 计数器名称是'count' */
.box{ counter-reset: count 2; } /* 计数器名称是'count', 并且默认起始值是2 */
- counter-incremen
顾名思意，就是“计数器-递增”的意思。值为counter-reset的1个或多个关键字。后面可以跟随数字，表示每次计数的变化值。如果缺省，则使用默认变化值1
- counter()/counters()
这个不能说是属性了，严格来说应该是一个方法。类似CSS3中才calc()计算。这里作用很单纯显示计数。下面看一个实际运用例子。html结构如下:
<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; /* 为每个ol元素创建新的计数器实例 */
list-style-type: none;
}
li:before {
counter-increment: addnum; /* 只增加计数器的计数器名字叫addnum的实例 */
content: counters(addnum, ".") " "; /* 为所有计数器实例增加以“.”分隔的值 */
}
图1
效果如上图所示。
