簡單的常見的操作；假設(shè)每個(gè)便簽添加一個(gè)? 屬性?? -webkit-animation-delay:0.1s 遞增操作；；通過for循環(huán)添加

<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("緩存變量節(jié)點(diǎn)");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("緩存變量節(jié)點(diǎn)");</script>

?

?

?

?

另外一個(gè)小例子 緩存變量，dom優(yōu)化

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

?

分別添加文本內(nèi)容 ?

var odiv=document.getElementById('sa');var odiv2=document.getElementById('sb');console.time('name');for(var i=0;i<5000;i++){odiv.innerHTML+='內(nèi)容';};console.timeEnd('name');var str='';console.time('22name變量');for(var i=0;i<5000;i++){str+='內(nèi)2容';};odiv2.innerHTML=str;console.timeEnd('22name變量');

?

?

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/surfaces/p/4500136.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。