javascript-性能優(yōu)化

《javascript-性能優(yōu)化》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、淺談JavaScript性能優(yōu)化龍剛（@RainoXu）TaobaoUEDwww.rainoxu.com優(yōu)化JavaScript性能，使它運行足夠快一個關(guān)鍵因素：運行的時間響應(yīng)時間與用戶的體驗0.1s用戶覺得很流暢1.0s用戶的操作可能偶爾受到影響，并且用戶已經(jīng)能感覺到有些不流暢10s對用戶的影響比較嚴重，需要相應(yīng)的進度提示。用戶也會有一些沮喪WhatToDo&&HowToDo?管理作用域操作數(shù)據(jù)流控制ReflowDOM操作長時間運行的腳本處理管理作用域functionadd(num1,num2){returnnum1+num2;}varresult=add(5,

2、10);使用局部變量局部變量存在于活動對象中，解析器只需查找作用域中的單個對象vara=1;functiontest(){//對變量a進行一系列操作}functiontest2(){vara=1;//對變量a進行一系列操作}另一個例子(function(win,S,undefined){......vardoc=win['document'],loc=location,EMPTY='',......})(window,'KISSY');數(shù)據(jù)操作使用局部變量，它是最快的緩存頻繁使用的對象、數(shù)組及相關(guān)的屬性值obj.name比obj.xxx.name訪問更快，訪問屬性

3、的速度，與其在對象中的深度有關(guān)“.”操作的次數(shù)直接影響著訪問對象屬性的耗時varobjName=obj.name;KISSY.add('switchable',function(S,undefined){varDOM=S.DOM,Event=S.Event,......});functionprocess(data){if(data.count>0){for(vari=0;i

4、>0){for(vari=0;i標準瀏覽器逐個拷貝到一個新數(shù)組中=>ForIE大部分JS庫都有提供將Array-Like的對象轉(zhuǎn)變成Array的方法（如KISSY提供的makeArray()方法）；部分JS庫在返回元素集合時，已預(yù)處理成Array（例子：YUI的DOM相關(guān)操作方法）遍歷NodeList時，不做對當前NodeList相關(guān)結(jié)構(gòu)有影響的DO

5、M操作，并且如之前所提到的，要緩存一些頻繁使用到的屬性值，以避免杯具發(fā)生。vardivs=document.getElementsByTagName('DIV');//假定頁面中有div，所以divs.length是大于0的for(varidx=0;idx

6、eList的引用，任何對其相關(guān)的DOM操作都會立即反應(yīng)在這個NodeList上面通過不斷地往document.body下插入div節(jié)點，for循環(huán)的終止條件（div.length也隨之改變）失效，陷入死循環(huán)。LiveNodeListvsStaticNodeList理論上，靜態(tài)的東西應(yīng)該是最快的，但是實際情況是，LiveNodeList更快。LiveNodeListvsStaticNodeList原因：目前市場上的瀏覽器，對LiveNodeList做了緩存LiveNodeListvsStaticNodeList結(jié)論：優(yōu)先使用LiveNodeList，通過選擇器獲取以

7、后，再進一步轉(zhuǎn)換成數(shù)組來使用。這也是目前許多JS庫在使用的方案。DOM操作指明操作DOM的contextYUI:ArraygetElementsByClassName(className,tag,root,apply,o,overrides)KISSY:Arrayquery(selector,context)即便是用原生的JS，也應(yīng)該指明:context.getElementsByTagName()DOM操作增刪、修改節(jié)點使用DocumentFragment使用cloneNode()復(fù)制一份目標節(jié)點來處理如果是直接修改DOM，請先將其di

8、splay