简单的常见的操作；假设每个便签添加一个  属性   -webkit-animation-delay:0.1s 递增操作；；通过for循环添加

<ul id="uls">
      <li style="background:red">0</li>
      <li>1</li>
      <li style="background:#333;">2</li>
      <li>3</li>
      <li>4</li>
      <li style="background:red">5</li>  
</ul>

<script>

console.time("没有缓存变量");

    var uls=document.getElementById("uls");

    var lis=document.getElementById("uls").getElementsByTagName("li");

	for(var i=0;i<lis.length;i++){

		lis[i].style.cssText=";-webkit-animation-delay:"+i+"s";

		}

    console.timeEnd("没有缓存变量");

    console.time("缓存变量节点");

     var uls=document.getElementById("uls"),

         lis=uls.getElementsByTagName("li"),

	     i=0,

		 lens=lis.length;

	for(;i<lens;i++){

		lis[i].style.cssText=";-webkit-animation-delay:"+i+"s";

		}

    console.timeEnd("缓存变量节点");

</script>

另外一个小例子 缓存变量，dom优化

<div id="sa"></div>
<div id="sb"></div>

分别添加文本内容

    var odiv=document.getElementById('sa');

    var odiv2=document.getElementById('sb');

  console.time('name');

   for(var i=0;i<5000;i++){

       odiv.innerHTML+='内容';

       };

    console.timeEnd('name');

   var str='';

    console.time('22name变量');

   for(var i=0;i<5000;i++){

       str+='内2容';

       };

       odiv2.innerHTML=str;

   console.timeEnd('22name变量');

虽然前人总结好了，自己还是实践看一下；结果还是相差蛮大的，桌面端差别不大，但是一旦数据量大，或者移动端时候，性能问题能提高的计量提高，注意细节；

另外，缓存变量注意内存溢出问题，适合手动清理；