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

1、JS執(zhí)行效率及內(nèi)存管理1執(zhí)行效率1.1 DOM使用 DocumentFragment 優(yōu)化屢次 append說明：添加多個dom元素時，先將元素 append至U DocumentFragment中，最后統(tǒng)一將DocumentFragment添加到頁面。該做法可以減少頁面渲染dom元素的次數(shù)。經(jīng)IE和Fx下測試，在append1OOO個元素時，效率能提高10%-30% , Fx下提升較為明顯。優(yōu)化前：for (var i = 0; i 1000; i+) var el = docume nt.createEleme nt(p);el.i nn erHTML = i;docume nt.body

2、.appe ndChild(el);優(yōu)化后：var frag = docume nt.createDocume ntFragme nt();for (var i = 0; i 1000; i+) var el = docume nt.createEleme nt(p);el.i nn erHTML = i;frag.appe ndChild(el);docume nt.body.appe ndChild(frag);通過模板元素clone ,替代createElement說明：通過一個模板 dom對象cloneNode，效率比直接創(chuàng)立 element高。優(yōu)勢。優(yōu)化前:var frag =doc

3、ume nt.createDocume ntFragme nt();for (var i=0; i 1000; i+) var el :=docume nt.createEleme nt(p);el.i nn erHTML = i;frag.appe ndChild(el);docume nt.body.appe ndChild(frag);優(yōu)化后：var frag =docume nt.createDocume ntFragme nt();var pEl =docume nt.getEleme ntsByTagName(p)O;for (var i=0; i 1000; i+) var el

4、=pEl.cl on eNode(false);el.i nn erHTML = i;frag.appe ndChild(el);docume nt.body.appe ndChild(frag);使用一次innerHTML賦值代替構(gòu)建dom元素說明：根據(jù)數(shù)據(jù)構(gòu)建列表樣式的時候，使用設(shè)置列表容器inn erHTML的方式，比構(gòu)建dom元素并append到頁面中的方式，效率有數(shù)量級上的提高。優(yōu)化前：var frag =docume nt.createDocume ntFragme nt();for (var i=0; i 1000; i+) var el :=docume nt.createEl

5、eme nt(p);el.i nn erHTML = i;frag.appe ndChild(el);docume nt.body.appe ndChild(frag);優(yōu)化后：var html =;for (var i = 0; i 1000; i+) html .push( + i + );document.body.innerHTML =html .join();使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素說明：約能獲得30%-50%的性能提高。逆向遍歷時使用lastChild和previousSibling優(yōu)化前：var no

6、des = eleme nt.childNodes;for (var i = 0, l = no desen gth; i l; i+) var node = nodes;優(yōu)化后：var node = eleme nt.firstChild;while (no de) node = no de. nextSibli ng;1.2字符串使用Array做為StringBuffer，代替字符串拼接的操作說明：IE在對字符串拼接的時候，會創(chuàng)立臨時的String對象；經(jīng)測試，在IE下，當拼接的字符串越來越大時，運行效率會急劇下降。Fx和Opera都對字符串拼接操作進行了優(yōu)優(yōu)化前:var now =:ne

7、w Date();var str =for (var i :=0; i 10000; i+) alert (new Date() - no w);優(yōu)化后：var now =:new Date();var strBufferfor (var i :=0; i 10000; i+) var str = strBuffer.joi n();alert (new Date() - no w);1.3循環(huán)語句將循環(huán)控制量保存到局部變量說明：對數(shù)組和列表對象的遍歷時，提前將length保存到局部變量中，防止在循環(huán)的每一步重復(fù)取值。優(yōu)化前：var list = docume nt.getEleme ntsB

8、yTagName(p);for (var i :=0; i list.length; i+) 優(yōu)化后：var list = docume nt.getEleme ntsByTagName(p);順序無關(guān)的遍歷時，用 while替代for說明：該方法可以減少局部變量的使用。比起效率優(yōu)化，更能直接看到的優(yōu)化。該做法有程序員強迫癥的嫌疑=!。優(yōu)化前：var arr = 1,2,3,4,5,6,7;var sum = 0;for (var i = 0, l = arr.le ngth; i b) num = a; else num = b;優(yōu)化后：num = a b ? a : b;1.5定時器只會在

9、開始的時候初始化需要不斷執(zhí)行的時候，優(yōu)先考慮使用set In terval說明：setTimeout每一次都會初始化一個定時器。setInterval一個定時器優(yōu)化前：var timeoutTimes = 0;function timeout () timeoutTimes+;if (timeoutTimes = 10) clearl nterval( in terv);var in terv = set In terval( in terval, 10);使用 function 而不是 string說明：如果把字符串作為setTimeout和setInterval的參數(shù)，瀏覽器會先用這個字符

10、串構(gòu)建一個 function。優(yōu)化前：var num = 0; setTimeout( nu m+, 10);優(yōu)化后：var num = 0;function addNum () nu m+;setTimeout(addNum, 10);1.6其他盡量不使用動態(tài)語法元素說明：eval、Function、execScript等語句會再次使用 javascript解析引擎進行解析，需要消耗大量的執(zhí)行時間。重復(fù)使用的調(diào)用結(jié)果，事先保存到局部變量說明：防止屢次取值的調(diào)用開銷。優(yōu)化前：var h1 = eleme nt1.clie ntHeight + nu m1;var h2 = eleme nt1.

11、clie ntHeight + num2;優(yōu)化后:var eleHeight = eleme ntl.clie ntHeight;var hl = eleHeight + nu ml;var h2 = eleHeight + nu m2;使用直接量說明:var a = new Array(param,param,.) - var a =var foo = new Object() - var foo = var reg = new RegExp() - var reg = /./防止使用with說明：with雖然可以縮短代碼量，但是會在運行時構(gòu)造一個新的scope。OperaDev上還有這樣的

12、解釋，使用with語句會使得解釋器無法在語法解析階段對代碼進行優(yōu)化。對此說法，無法驗證。優(yōu)化前：with (a.b.c.d) property1 = 1;property2 = 2;優(yōu)化后：var obj = a.b.c.d;perty1 = 1;perty2 = 2;巧用|和&布爾運算符優(yōu)化前:fun ctio n even tHa ndler (e) if(!e) e = win dow.eve nt;e = e | win dow.eve nt;優(yōu)化前：if (myobj) doSomethi ng(myobj);優(yōu)化后：myobj & doSometh in

13、 g(myobj);類型轉(zhuǎn)換說明：.數(shù)字轉(zhuǎn)換成字符串，應(yīng)用 + 1，性能上:(+) String() .toString() newString()；.浮點數(shù)轉(zhuǎn)換成整型，不使用 parse lnt() ， parse In t()是用于將字符串轉(zhuǎn)換成數(shù)字,而不是浮點數(shù)和整型之間的轉(zhuǎn)換，建議使用Math.floor()或者Math.round().對于自定義的對象，推薦顯式調(diào)用 toString()。內(nèi)部操作在嘗試所有可能性之后，會嘗試對象的toString()方法嘗試能否轉(zhuǎn)化為String。多用 id，少用 classJS在IE瀏覽器下的效率并不好，尤其當頁面很大且具有繁雜的邏輯操作時在寫ht

14、ml時，如果使用id，JS會很快在一次遍歷中找到需要的元素無論有幾個id它都會在找到第一個id后返回。而通過class等去尋找，程序會在整個文檔中一遍又一遍的去遍歷，找到一個比擬判斷以后再去找第二個第三個非常浪費資源。2內(nèi)存管理2.1循環(huán)引用說明：如果循環(huán)引用中包含DOM對象或者ActiveX對象，那么就會發(fā)生內(nèi)存泄露。內(nèi)存泄露的后果是在瀏覽器關(guān)閉前，即使是刷新頁面，這局部內(nèi)存不會被瀏覽器釋放。簡單的循環(huán)引用：var el = docume nt.getEleme ntByld(MyEleme nt);var func = fun cti on () el.fu nc = func;fun c

15、.eleme nt = el;但是通常不會出現(xiàn)這種情況。通常循環(huán)引用發(fā)生在為dom元素添加閉包作為 expendo的時候。如：fun ctio n ini t() var el = docume nt.getEleme ntByld(MyEleme nt);el.o nclick = fun ctio n () ini t();init在執(zhí)行的時候，當前上下文我們叫做con text。這個時候，con text弓I用了 el, el引用了 fun ction , fun ctio n引用了 con text。這時候形成了一個循環(huán)引用。下面2種方法可以解決循環(huán)引用：置空dom對象優(yōu)化前：fun

16、ctio n ini t() var el = docume nt.getEleme ntByld(MyEleme nt);el.o nclick = fun ctio n () var el = docume nt.getEleme ntByld(MyEleme nt);el.o nclick = fun ctio n () el = n ull;ini t();將el置空，con text中不包含對dom對象的引用，從而打斷循環(huán)應(yīng)用。如果我們需要將dom對象返回，可以用如下方法：優(yōu)化前：fun ctio n ini t() var el = docume nt.getEleme ntByl

17、d(MyEleme nt);el.o nclick = fun ctio n () return el;ini t();優(yōu)化后：fun ctio n ini t() var el = docume nt.getEleme ntById(MyEleme nt);el.o nclick = fun ctio n () tryreturn el; fin ally el = n ull;ini t();構(gòu)造新的con text優(yōu)化前：fun ctio n ini t() var el = docume nt.getEleme ntByld(MyEleme nt);el.o nclick = fun

18、ctio n () ini t();優(yōu)化后：fun ctio n elClickHa ndler() fun ctio n ini t() var el = docume nt.getEleme ntByld(MyEleme nt);el.o nclick = elClickHa ndler;ini t();把fun ction抽到新的con text中，這樣，fun ctio n的con text就不包含對 el的引用，從 而打斷循環(huán)引用。2.2通過javascript創(chuàng)立的dom對象，必須append到頁面中說明：IE下，腳本創(chuàng)立的dom對象，如果沒有 即pend到頁面中，刷新頁面，這局部 內(nèi)存是不會回收的！例如代碼：f