JavaScript執(zhí)行效率優(yōu)化及內(nèi)存管理優(yōu)化

1、JS執(zhí)行效率及內(nèi)存管理1 執(zhí)行效率1.1 DOM說(shuō)明：添加多個(gè)dom元素時(shí)，先將元素append到DocumentFragment中，最后統(tǒng)一將DocumentFragment添加到頁(yè)面。該做法可以減少頁(yè)面渲染dom元素的次數(shù)。經(jīng)IE和Fx下測(cè)試，在append1000個(gè)元素時(shí)，效率能提高10%-30%，F(xiàn)x下提升較為明顯。優(yōu)化前：for (var i = 0; i < 1000; i+     var el = document.createElement('p'    el.innerHT

2、ML = i;優(yōu)化后：var frag = document.createDocumentFragment(;for (var i = 0; i < 1000; i+     var el = document.createElement('p'    el.innerHTML = i;    frag.appendChild(el;說(shuō)明：通過(guò)一個(gè)模板dom對(duì)象cloneNode，效率比直接創(chuàng)建element高。性能提高不明顯，約為10%左右。在低于10

3、0個(gè)元素create和append操作時(shí)，沒(méi)有優(yōu)勢(shì)。優(yōu)化前：var frag = document.createDocumentFragment(;for (var i = 0; i < 1000; i+     var el = document.createElement('p'    el.innerHTML = i;    frag.appendChild(el;優(yōu)化后：var frag = document.createDocumentFrag

4、ment(;var pEl = document.getElementsByTagName('p'0;for (var i = 0; i < 1000; i+     var el = pEl.cloneNode(false;    el.innerHTML = i;    frag.appendChild(el;說(shuō)明：根據(jù)數(shù)據(jù)構(gòu)建列表樣式的時(shí)候，使用設(shè)置列表容器innerHTML的方式，比構(gòu)建dom元素并append到頁(yè)面中的方式，效率有數(shù)量級(jí)上的提高

5、。優(yōu)化前：var frag = document.createDocumentFragment(;for (var i = 0; i < 1000; i+     var el = document.createElement('p'    el.innerHTML = i;    frag.appendChild(el;優(yōu)化后：var html = ;for (var i = 0; i < 1000; i+    &

6、#160;html.push('' + i + '' html.join(''說(shuō)明：約能獲得30%-50%的性能提高。逆向遍歷時(shí)使用lastChild和previousSibling。優(yōu)化前：var nodes = element.childNodes;for (var i = 0, l = nodes.length; i < l; i+ var node = nodes;優(yōu)化后：var node = element.firstChild;while (node node = node.nextSibling;1.2 字符串說(shuō)明：IE在對(duì)字

7、符串拼接的時(shí)候，會(huì)創(chuàng)建臨時(shí)的String對(duì)象；經(jīng)測(cè)試，在IE下，當(dāng)拼接的字符串越來(lái)越大時(shí)，運(yùn)行效率會(huì)急劇下降。Fx和Opera都對(duì)字符串拼接操作進(jìn)行了優(yōu)化；經(jīng)測(cè)試，在Fx下，使用Array的join方式執(zhí)行時(shí)間約為直接字符串拼接的1.4倍。優(yōu)化前：var now = new Date(;var str = ''for (var i = 0; i < 10000; i+ alert(new Date( - now;優(yōu)化后：var now = new Date(;var strBuffer = ;for (var i = 0; i < 10000; i+  &

8、#160;  var str = strBuffer.join(''alert(new Date( - now;1.3 循環(huán)語(yǔ)句說(shuō)明：對(duì)數(shù)組和列表對(duì)象的遍歷時(shí)，提前將length保存到局部變量中，避免在循環(huán)的每一步重復(fù)取值。優(yōu)化前：var list = document.getElementsByTagName('p'for (var i = 0; i < list.length; i+     優(yōu)化后：var list = document.getElementsByTagName('p

9、'for (var i = 0, l = list.length; i < l; i+     說(shuō)明：該方法可以減少局部變量的使用。比起效率優(yōu)化，更能直接看到的是字符數(shù)量的優(yōu)化。該做法有程序員強(qiáng)迫癥的嫌疑（= =！）。優(yōu)化前：var arr = 1,2,3,4,5,6,7;var sum = 0;for (var i = 0, l = arr.length; i < l; i+     sum += arr;    優(yōu)化后：var arr = 1,2,3,

10、4,5,6,7;var sum = 0, l = arr.length;while (l-     sum += arrl;1.4 條件分支說(shuō)明：可以減少解釋器對(duì)條件的探測(cè)次數(shù)。說(shuō)明：switch分支選擇的效率高于if，在IE下尤為明顯。4分支的測(cè)試，IE下switch的執(zhí)行時(shí)間約為if的一半。優(yōu)化前：if (a > b num = a; else num = b;優(yōu)化后：num = a > b ? a : b;1.5 定時(shí)器說(shuō)明：setTimeout每一次都會(huì)初始化一個(gè)定時(shí)器。setInterval只會(huì)在開始的時(shí)候初始化一個(gè)定時(shí)器優(yōu)化前：v

11、ar timeoutTimes = 0;function timeout (     timeoutTimes+;    if (timeoutTimes < 10         setTimeout(timeout, 10;    timeout(;優(yōu)化后：var intervalTimes = 0;function interval (     

12、intervalTimes+;    if (intervalTimes >= 10         clearInterval(interv;    var interv = setInterval(interval, 10;說(shuō)明：如果把字符串作為setTimeout和setInterval的參數(shù)，瀏覽器會(huì)先用這個(gè)字符串構(gòu)建一個(gè)function。優(yōu)化前：var num = 0;setTimeout('num+',

13、 10;    優(yōu)化后：var num = 0;function addNum (     num+;setTimeout(addNum, 10;1.6 其他說(shuō)明：eval、Function、execScript等語(yǔ)句會(huì)再次使用javascript解析引擎進(jìn)行解析，需要消耗大量的執(zhí)行時(shí)間。說(shuō)明：避免多次取值的調(diào)用開銷。優(yōu)化前：var h1 = element1.clientHeight + num1;var h2 = element1.clientHeight + num2;優(yōu)化后：var eleHeight =

14、element1.clientHeight;var h1 = eleHeight + num1;var h2 = eleHeight + num2;說(shuō)明：var a = new Array(param,param,. -> var a = var foo = new Object( -> var foo = var reg = new RegExp( -> var reg = /./說(shuō)明： with雖然可以縮短代碼量，但是會(huì)在運(yùn)行時(shí)構(gòu)造一個(gè)新的scope。OperaDev上還有這樣的解釋，使用with語(yǔ)句會(huì)使得解釋器無(wú)法在語(yǔ)法解析階段對(duì)代碼進(jìn)行優(yōu)化。對(duì)此說(shuō)法，無(wú)法驗(yàn)證。優(yōu)化前

15、：property1 = 1;property2 = 2;優(yōu)化后：perty1 = 1;perty2 = 2;優(yōu)化前：function eventHandler (e if(!e e = window.event;優(yōu)化后：function eventHandler (e e = e | window.event;優(yōu)化前：if (myobj doSomething(myobj;優(yōu)化后：myobj && doSomething(myobj;說(shuō)明：1.    數(shù)字轉(zhuǎn)換成字符串，應(yīng)用"" + 1，性

16、能上：("" + > String( > .toString( > new String(；2.    浮點(diǎn)數(shù)轉(zhuǎn)換成整型，不使用parseInt(， parseInt(是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換，建議使用Math.floor(或者M(jìn)ath.round(3.    對(duì)于自定義的對(duì)象，推薦顯式調(diào)用toString(。內(nèi)部操作在嘗試所有可能性之后，會(huì)嘗試對(duì)象的toString(方法嘗試能否轉(zhuǎn)化為String。多用id，少用classJS在IE瀏覽器下的效率

17、并不好，尤其當(dāng)頁(yè)面很大且具有繁雜的邏輯操作時(shí)在寫html時(shí)，如果使用id，JS會(huì)很快在一次遍歷中找到需要的元素（無(wú)論有幾個(gè)id它都會(huì)在找到第一個(gè)id后返回）。而通過(guò)class等去尋找，程序會(huì)在整個(gè)文檔中一遍又一遍的去遍歷，找到一個(gè)比較判斷以后再去找第二個(gè)第三個(gè)非常浪費(fèi)資源。2 內(nèi)存管理2.1 循環(huán)引用說(shuō)明：如果循環(huán)引用中包含DOM對(duì)象或者ActiveX對(duì)象，那么就會(huì)發(fā)生內(nèi)存泄露。內(nèi)存泄露的后果是在瀏覽器關(guān)閉前，即使是刷新頁(yè)面，這部分內(nèi)存不會(huì)被瀏覽器釋放。簡(jiǎn)單的循環(huán)引用：var el = document.getElementById('MyElement'var func =

18、function ( el.func = func;func.element = el;但是通常不會(huì)出現(xiàn)這種情況。通常循環(huán)引用發(fā)生在為dom元素添加閉包作為expendo的時(shí)候。如：function init(     var el = document.getElementById('MyElement'el.onclick = function ( init(;init在執(zhí)行的時(shí)候，當(dāng)前上下文我們叫做context。這個(gè)時(shí)候，context引用了el，el引用了function，function引用了context。這時(shí)候形成了一個(gè)循

19、環(huán)引用。下面2種方法可以解決循環(huán)引用：優(yōu)化前：function init( var el = document.getElementById('MyElement'el.onclick = function ( init(;優(yōu)化后：function init( var el = document.getElementById('MyElement'el.onclick = function ( el = null;init(;將el置空，context中不包含對(duì)dom對(duì)象的引用，從而打斷循環(huán)應(yīng)用。如果我們需要將dom對(duì)象返回，可以用如下方法：優(yōu)化前：functi

20、on init(     var el = document.getElementById('MyElement'    el.onclick = function (     return el;init(;優(yōu)化后：function init( var el = document.getElementById('MyElement'el.onclick = function ( tryreturn el; finally  

21、0;  el = null;init(;優(yōu)化前：function init(     var el = document.getElementById('MyElement'    el.onclick = function ( init(;優(yōu)化后：function elClickHandler( function init(     var el = document.getElementById('MyElement'&

22、#160;   el.onclick = elClickHandler;init(;把function抽到新的context中，這樣，function的context就不包含對(duì)el的引用，從而打斷循環(huán)引用。2.2 通過(guò)javascript創(chuàng)建的dom對(duì)象，必須append到頁(yè)面中說(shuō)明：IE下，腳本創(chuàng)建的dom對(duì)象，如果沒(méi)有append到頁(yè)面中，刷新頁(yè)面，這部分內(nèi)存是不會(huì)回收的！示例代碼：    function create (         

23、var gc = document.getElementById('GC'        for (var i = 0; i < 5000 ; i+                    var el = document.createElement('div'