簡單的常見的操作；假設每個便簽添加一個? 屬性?? -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變量');

?

?

雖然前人總結好了，自己還是實踐看一下；結果還是相差蠻大的，桌面端差別不大，但是一旦數據量大，或者移動端時候，性能問題能提高的計量提高，注意細節；

另外，緩存變量注意內存溢出問題，適合手動清理；

轉載于:https://www.cnblogs.com/surfaces/p/4500136.html

總結

以上是生活随笔為你收集整理的js 性能优化整理之 缓存变量的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。