自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

淺談編寫高性能的Javascript代碼

作者：佚名
開發(fā) 前端
今天為大家講解的是如何編寫高性能的Javascript代碼，首先要從執(zhí)行效率動(dòng)手，其次是一些方法上的處理。

一．Javascript代碼執(zhí)行效率

1. DOM

1.1 使用 DocumentFragment 優(yōu)化多次 append

說明：添加多個(gè) dom 元素時(shí)，先將元素 append 到 DocumentFragment 中，最后統(tǒng)一將 DocumentFragment 添加到頁(yè)面。

該做法可以減少頁(yè)面渲染 dom 元素的次數(shù)。經(jīng) IE 和 Fx 下測(cè)試，在 append1000 個(gè)元素時(shí)，效率能提高 10%-30% ， Fx 下提升較為明顯。

服用前： 

  1. for (var i = 0; i < 1000; i++) {  
  2.     var el = document.createElement('p');  
  3.     el.innerHTML = i;  
  4.     document.body.appendChild(el);  
  5. } 

服用后： 

  1. var frag = document.createDocumentFragment();  
  2. for (var i = 0; i < 1000; i++) {  
  3.     var el = document.createElement('p');  
  4.     el.innerHTML = i;  
  5.     frag.appendChild(el);  
  6. }  
  7. document.body.appendChild(frag); 

1.2 通過模板元素 clone ，替代 createElement

說明：通過一個(gè)模板 dom 對(duì)象 cloneNode ，效率比直接創(chuàng)建 element 高。性能提高不明顯，約為 10% 左右。在低于 100 個(gè)元素 create 和 append 操作時(shí)，沒有優(yōu)勢(shì)。

服用前： 

  1. var frag = document.createDocumentFragment();  
  2. for (var i = 0; i < 1000; i++) {  
  3.     var el = document.createElement('p');  
  4.     el.innerHTML = i;  
  5.     frag.appendChild(el);  
  6. }  
  7. document.body.appendChild(frag);     

服用后： 

  1. var frag = document.createDocumentFragment();  
  2. var pEl = document.getElementsByTagName('p')[0];  
  3. for (var i = 0; i < 1000; i++) {  
  4.     var el = pEl.cloneNode(false);  
  5.     el.innerHTML = i;  
  6.     frag.appendChild(el);  
  7. }  
  8. document.body.appendChild(frag); 

1.3 使用一次 innerHTML 賦值代替構(gòu)建 dom 元素

說明：根據(jù)數(shù)據(jù)構(gòu)建列表樣式的時(shí)候，使用設(shè)置列表容器 innerHTML 的方式，比構(gòu)建 dom 元素并 append 到頁(yè)面中的方式，效率有數(shù)量級(jí)上的提高。

服用前： 

  1. var frag = document.createDocumentFragment();  
  2. for (var i = 0; i < 1000; i++) {  
  3.     var el = document.createElement('p');  
  4.     el.innerHTML = i;  
  5.     frag.appendChild(el);  
  6. }  
  7. document.body.appendChild(frag); 

服用后： 

  1. var html = [];  
  2. for (var i = 0; i < 1000; i++) {  
  3.     html.push('  
  4.  
  5. ' + i + '  
  6.  
  7. ');  
  8. }  
  9. document.body.innerHTML = html.join(''); 

1.4 使用 firstChild 和 nextSibling 代替 childNodes 遍歷 dom 元素
說明：約能獲得 30%-50% 的性能提高。逆向遍歷時(shí)使用 lastChild 和 previousSibling 。

服用前： 

  1. var nodes = element.childNodes;  
  2. for (var i = 0, l = nodes.length; i < l; i++) {  
  3. var node = nodes[i];  
  4. ……  
  5. } 

服用后： 

  1. var node = element.firstChild;  
  2. while (node) {  
  3. ……  
  4. nodenode = node.nextSibling;  
  5. } 

2. 字符串

2.1 使用 Array 做為 StringBuffer ，代替字符串拼接的操作
說明： IE 在對(duì)字符串拼接的時(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 倍。

服用前： 

  1. var now = new Date();  
  2. var str = '';  
  3. for (var i = 0; i < 10000; i++) {  
  4.     str += '123456789123456789';  
  5. }  
  6. alert(new Date() - now); 

服用后： 

  1. var now = new Date();  
  2. var strBuffer = [];  
  3. for (var i = 0; i < 10000; i++) {  
  4.     strBuffer.push('123456789123456789');  
  5. }  
  6. var str = strBuffer.join('');  
  7. alert(new Date() - now); 

3. 循環(huán)語(yǔ)句

3.1 將循環(huán)控制量保存到局部變量

說明：對(duì)數(shù)組和列表對(duì)象的遍歷時(shí)，提前將 length 保存到局部變量中，避免在循環(huán)的每一步重復(fù)取值。 

  1. 服用前：   
  2. var list = document.getElementsByTagName('p');  
  3. for (var i = 0; i < list.length; i++) {  
  4.     ……  
  5. }  
  6.  
  7. 服用后：   
  8. var list = document.getElementsByTagName('p');  
  9. for (var i = 0, l = list.length; i < l; i++) {  
  10.     ……  
  11. } 

3.2 順序無(wú)關(guān)的遍歷時(shí)，用 while 替代 for

說明：該方法可以減少局部變量的使用。比起效率優(yōu)化，更能直接看到的是字符數(shù)量的優(yōu)化。該做法有程序員強(qiáng)迫癥的嫌疑。 

  1. 服用前：   
  2. var arr = [1,2,3,4,5,6,7];  
  3. var sum = 0;  
  4. for (var i = 0, l = arr.length; i < l; i++) {  
  5.     sum += arr[i];  
  6. }      
  7.  
  8. 服用后：   
  9. var arr = [1,2,3,4,5,6,7];  
  10. var sum = 0, l = arr.length;  
  11. while (l--) {  
  12.     sum += arr[l];  
  13. } 

4. 條件分支

4.1 將條件分支，按可能性順序從高到低排列

說明：可以減少解釋器對(duì)條件的探測(cè)次數(shù)。

4.2 在同一條件子的多（ >2 ）條件分支時(shí)，使用 switch 優(yōu)于 if

說明： switch 分支選擇的效率高于 if ，在 IE 下尤為明顯。 4 分支的測(cè)試， IE 下 switch 的執(zhí)行時(shí)間約為 if 的一半。

4.3 使用三目運(yùn)算符替代條件分支
服用前：
if (a > b) {
num = a;
} else {
num = b;
}

服用后：
num = a > b ? a : b;


5. 定時(shí)器

5.1 需要不斷執(zhí)行的時(shí)候，優(yōu)先考慮使用 setInterval

說明： setTimeout 每一次都會(huì)初始化一個(gè)定時(shí)器。 setInterval 只會(huì)在開始的時(shí)候初始化一個(gè)定時(shí)器 

  1. 服用前：   
  2. var timeoutTimes = 0;  
  3. function timeout () {  
  4.     timeoutTimes++;  
  5.     if (timeoutTimes < 10) {  
  6.         setTimeout(timeout, 10);  
  7.     }  
  8. }  
  9. timeout();  
  10.  
  11. 服用后：   
  12. var intervalTimes = 0;  
  13. function interval () {  
  14.     intervalTimes++;  
  15.     if (intervalTimes >= 10) {  
  16.         clearInterval(interv);  
  17.     }  
  18. }  
  19. var interv = setInterval(interval, 10); 

5.2 使用 function 而不是 string

說明：如果把字符串作為 setTimeout 和 setInterval 的參數(shù)，瀏覽器會(huì)先用這個(gè)字符串構(gòu)建一個(gè) function 。 

  1. 服用前：   
  2. var num = 0;  
  3. setTimeout('num++', 10);      
  4.  
  5. 服用后：   
  6. var num = 0;  
  7. function addNum () {  
  8.     num++;  
  9. }  
  10. setTimeout(addNum, 10); 


6. 其他

6.1 盡量不使用動(dòng)態(tài)語(yǔ)法元素

說明： eval 、 Function 、 execScript 等語(yǔ)句會(huì)再次使用 javascript 解析引擎進(jìn)行解析，需要消耗大量的執(zhí)行時(shí)間。

6.2 重復(fù)使用的調(diào)用結(jié)果，事先保存到局部變量

說明：避免多次取值的調(diào)用開銷。 

  1. 服用前：   
  2. var h1 = element1.clientHeight + num1;  
  3. var h2 = element1.clientHeight + num2;  
  4.  
  5. 服用后：   
  6. var eleHeight = element1.clientHeight;  
  7. var h1 = eleHeight + num1;  
  8. var h2 = eleHeight + num2; 

6.3 使用直接量
說明： 

  1. var a = new Array(param,param,...) -> var a = []  
  2. var foo = new Object() -> var foo = {}  
  3. var reg = new RegExp() -> var reg = /.../ 

6.4 避免使用 with

說明： with 雖然可以縮短代碼量，但是會(huì)在運(yùn)行時(shí)構(gòu)造一個(gè)新的 scope 。
OperaDev 上還有這樣的解釋，使用 with 語(yǔ)句會(huì)使得解釋器無(wú)法在語(yǔ)法解析階段對(duì)代碼進(jìn)行優(yōu)化。對(duì)此說法，無(wú)法驗(yàn)證。 

  1. 服用前：   
  2. with (a.b.c.d) {  
  3. property1 = 1;  
  4. property2 = 2;  
  5. }  
  6.  
  7.  
  8. 服用后：   
  9. var obj = a.b.c.d;  
  10. obj.property1 = 1;  
  11. obj.property2 = 2; 


6.5 巧用 || 和 && 布爾運(yùn)算符
重要程度： ★★★ 

  1. 服用前：   
  2. function eventHandler (e) {  
  3. if(!e) e = window.event;  
  4. }  
  5.  
  6.  
  7. 服用后：   
  8. function eventHandler (e) {  
  9. ee = e || window.event;  
  10. }  
  11.  
  12.  
  13. 服用前：   
  14. if (myobj) {  
  15. doSomething(myobj);  
  16. }  
  17.  
  18.  
  19. 服用后：   
  20. myobj && doSomething(myobj); 


6.6 類型轉(zhuǎn)換

說明：

1).    數(shù)字轉(zhuǎn)換成字符串，應(yīng)用 "" + 1 ，性能上： ("" +) > String() > .toString() > new String() ；

2).    浮點(diǎn)數(shù)轉(zhuǎn)換成整型，不使用 parseInt() ， parseInt() 是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換，建議使用 Math.floor() 或者 Math.round()

3).    對(duì)于自定義的對(duì)象，推薦顯式調(diào)用 toString() 。內(nèi)部操作在嘗試所有可能性之后，會(huì)嘗試對(duì)象的 toString() 方法嘗試能否轉(zhuǎn)化為 String 。

二．內(nèi)存管理

2.1 循環(huán)引用

說明：如果循環(huán)引用中包含 DOM 對(duì)象或者 ActiveX 對(duì)象，那么就會(huì)發(fā)生內(nèi)存泄露。內(nèi)存泄露的后果是在瀏覽器關(guān)閉前，即使是刷新頁(yè)面，這部分內(nèi)存不會(huì)被瀏覽器釋放。

簡(jiǎn)單的循環(huán)引用： 

  1. var el = document.getElementById('MyElement');  
  2. var func = function () {…}  
  3. el.func = func;  
  4. func.element = el;  


但是通常不會(huì)出現(xiàn)這種情況。通常循環(huán)引用發(fā)生在為 dom 元素添加閉包作為 expendo 的時(shí)候。

如： 

  1. function init() {  
  2.     var el = document.getElementById('MyElement');  
  3. el.onclick = function () {……}  
  4. }  
  5. init(); 


init 在執(zhí)行的時(shí)候，當(dāng)前上下文我們叫做 context 。這個(gè)時(shí)候， context 引用了 el ， el 引用了 function ， function 引用了 context 。這時(shí)候形成了一個(gè)循環(huán)引用。

下面 2 種方法可以解決循環(huán)引用：

1)    置空 dom 對(duì)象 

  1. 服用前：   
  2. function init() {  
  3. var el = document.getElementById('MyElement');  
  4. el.onclick = function () {……}  
  5. }  
  6. init();  
  7.  
  8.  
  9. 服用后：   
  10. function init() {  
  11. var el = document.getElementById('MyElement');  
  12. el.onclick = function () {……}  
  13. el = null;  
  14. }  
  15. init(); 


將 el 置空， context 中不包含對(duì) dom 對(duì)象的引用，從而打斷循環(huán)應(yīng)用。
如果我們需要將 dom 對(duì)象返回，可以用如下方法： 

  1. 服用前：   
  2. function init() {  
  3.     var el = document.getElementById('MyElement');  
  4.     el.onclick = function () {……}  
  5.     return el;  
  6. }  
  7. init();  
  8.  
  9.  
  10. 服用后：   
  11. function init() {  
  12. var el = document.getElementById('MyElement');  
  13. el.onclick = function () {……}  
  14. try{  
  15. return el;  
  16. } finally {  
  17.     el = null;  
  18. }  
  19. }  
  20. init(); 

2)    構(gòu)造新的 context

  1. 服用前：   
  2. function init() {  
  3.     var el = document.getElementById('MyElement');  
  4.     el.onclick = function () {……}  
  5. }  
  6. init();  
  7.  
  8.  
  9. 服用后：   
  10. function elClickHandler() {……}  
  11. function init() {  
  12.     var el = document.getElementById('MyElement');  
  13.     el.onclick = elClickHandler;  
  14. }  
  15. init(); 

把 function 抽到新的 context 中，這樣， function 的 context 就不包含對(duì) el 的引用，從而打斷循環(huán)引用。

2.2 通過 javascript 創(chuàng)建的 dom 對(duì)象，必須 append 到頁(yè)面中

說明： IE 下，腳本創(chuàng)建的 dom 對(duì)象，如果沒有 append 到頁(yè)面中，刷新頁(yè)面，這部分內(nèi)存是不會(huì)回收的！

示例代碼： 

  1. function create () {  
  2.         var gc = document.getElementById('GC');  
  3.         for (var i = 0; i < 5000 ; i++)  
  4.         {  
  5.             var el = document.createElement('div');  
  6.             el.innerHTML = "test";  
  7.  
  8.             // 下面這句可以注釋掉，看看瀏覽器在任務(wù)管理器中，點(diǎn)擊按鈕然后刷新后的內(nèi)存變化   
  9.             gc.appendChild(el);  
  10.         }  
  11.     } 


2.3 釋放 dom 元素占用的內(nèi)存
說明：
將 dom 元素的 innerHTML 設(shè)置為空字符串，可以釋放其子元素占用的內(nèi)存。
在 rich 應(yīng)用中，用戶也許會(huì)在一個(gè)頁(yè)面上停留很長(zhǎng)時(shí)間，可以使用該方法釋放積累得越來(lái)越多的 dom 元素使用的內(nèi)存。

2.4 釋放 javascript 對(duì)象
說明：在 rich 應(yīng)用中，隨著實(shí)例化對(duì)象數(shù)量的增加，內(nèi)存消耗會(huì)越來(lái)越大。所以應(yīng)當(dāng)及時(shí)釋放對(duì)對(duì)象的引用，讓 GC 能夠回收這些內(nèi)存控件。
對(duì)象： obj = null
對(duì)象屬性： delete obj.myproperty
數(shù)組 item ：使用數(shù)組的 splice 方法釋放數(shù)組中不用的 item

2.5 避免 string 的隱式裝箱
說明：對(duì) string 的方法調(diào)用，比如 'xxx'.length ，瀏覽器會(huì)進(jìn)行一個(gè)隱式的裝箱操作，將字符串先轉(zhuǎn)換成一個(gè) String 對(duì)象。推薦對(duì)聲明有可能使用 String 實(shí)例方法的字符串時(shí)，采用如下寫法：
var myString = new String('Hello World');

【編輯推薦】

  1. 常用的JavaScript驗(yàn)證正則表達(dá)式
  2. 給JavaScript初學(xué)者的24個(gè)小竅門
  3. JavaScript中關(guān)于Cookie的詳細(xì)介紹
  4. JavaScript中confirm,alert,prompt的用法
  5. 基于JavaScript的REST客戶端框架
責(zé)任編輯：彭凡 來(lái)源： JavaEye
Javascript代碼
相關(guān)推薦

2012-12-17 13:51:22

Web前端JavaScriptJS

2014-11-25 10:03:42

JavaScript

2014-04-25 09:02:17

LuaLua優(yōu)化Lua代碼

2024-03-20 08:00:00

軟件開發(fā)Java編程語(yǔ)言

2015-12-17 13:19:29

編寫高性能Swift

2018-01-12 14:37:34

Java代碼實(shí)踐

2019-08-26 18:20:05

JavascriptWeb前端

2017-12-07 13:40:00

JavaScript內(nèi)存泄露內(nèi)存管理

2022-02-24 09:00:38

React代碼模式

2022-03-22 14:06:43

Java性能技術(shù)匯編

2011-02-23 12:59:08

JSJavaScript瀏覽器

2016-11-30 18:35:03

JavaScript

2022-06-07 09:30:35

JavaScript變量名參數(shù)

2011-03-11 09:51:47

Java NIO

2014-10-10 14:00:52

JavascriptHTML

2014-04-21 10:14:52

PromisesJavaScript

2013-04-15 09:02:43

JavaScriptJS

2011-04-07 09:18:59

MySQL語(yǔ)法

2009-01-08 17:15:29

服務(wù)器虛擬化高性能計(jì)算

2011-04-19 11:06:03

JavaScriptweb
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)