DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript學習筆記(十七)js 優化
JavaScript學習筆記(十七)js 優化
編輯:JavaScript基礎知識     

一直很迷惑司徒正美為什麼對以下的for循環還鄙視,

for (var i = 0; i < list.length; i++) {

//循環代碼

}

看了下面這篇文章終於TM明白了。。。

語言層次方面

循環

在JavaScript中,我們可以使用for(;;),while(),for(in)三種循環,事實上,這三種循環中for(in)的效率極差,因為他需要查詢散列鍵,只要可以就應該盡量少用。

如果要與數組的長度作比較,應該事先把數組的length屬性放入一個局部變量中,減少查詢次數。

所以上面的代碼應該這麼寫:

for (var i = 0,l = list.length; i < l; i++) {

//循環代碼

}

局部變量和全局變量

局部變量的速度要比全局變量的訪問速度更快,因為全局變量其實是全局對象的成員,而局部變量是放在函數的棧當中的。

字符串連接

如果是收集字符串,比如多次對同一個字符串進行+=操作的話,最好使用一個緩存。怎麼用呢?使用JavaScript數組來收集,最後使用join方法連接起來,如下

var buf = new Array();

for (var i = 0; i < 100; i++) {

   buf.push(i.toString());

}

var all = buf.join("");

類型轉換

類型轉換是大家常犯的錯誤,因為JavaScript是動態類型語言,你不能指定變量的類型。

1.  把數字轉換成字符串,應用"" + 1,雖然看起來比較丑一點,但事實上這個效率是最高的,性能上來說:("" +) > String() > .toString() > new String()

String()屬於內部函數,所以速度很快,而.toString()要查詢原型中的函數,所以速度遜色一些,new String()用於返回一個精確的副本。

2. 浮點數轉換成整型,這個更容易出錯,很多人喜歡使用parseInt(),其實parseInt()是用於將字符串轉換成數字,而不是浮點數和整型之間的轉換,我們應該使用Math.floor()或者Math.round()。另外,和第二節的對象查找中的問題不一樣,Math是內部對象,所以Math.floor()其實並沒有多少查詢方法和調用的時間,速度是最快的。

3. 對於自定義的對象,如果定義了toString()方法來進行類型轉換的話,推薦顯式調用toString(),因為內部的操作在嘗試所有可能性之後,會嘗試對象的toString()方法嘗試能否轉化為String,所以直接調用這個方法效率會更高

使用直接量

其實這個影響倒比較小,可以忽略。什麼叫使用直接量,比如,JavaScript支持使用[param,param,param,...]來直接表達一個數組,以往我們都使用new Array(param,param,...),使用前者是引擎直接解釋的,後者要調用一個Array內部構造器,所以要略微快一點點。

同樣,var foo = {}的方式也比var foo = new Object();快,

var reg = /../;要比var reg=new RegExp()快。

字符串遍歷操作

對字符串進行循環操作,譬如替換、查找,應使用正則表達式,因為本身JavaScript的循環速度就比較慢,而正則表達式的操作是用C寫成的語言的API,性能很好。

高級對象

自定義高級對象和Date、RegExp對象在構造時都會消耗大量時間。如果可以復用,應采用緩存的方式。

DOM相關

插入HTML

很多人喜歡在JavaScript中使用document.write來給頁面生成內容。事實上這樣的效率較低,如果需要直接插入HTML,可以找一個容器元素,比如指定一個div或者span,並設置他們的innerHTML來將自己的HTML代碼插入到頁面中。

對象查詢

使用[“”]查詢要比.items()更快,這和前面的減少對象查找的思路是一樣的,調用.items()增加了一次查詢和函數的調用。

創建DOM節點

通常我們可能會使用字符串直接寫HTML來創建節點,其實這樣做無法保證代碼的有效性。

字符串操作效率低

所以應該是用document.createElement()方法,而如果文檔中存在現成的樣板節點,應該是用cloneNode()方法,因為使用createElement()方法之後,你需要設置多次元素的屬性,使用cloneNode()則可以減少屬性的設置次數——同樣如果需要創建很多元素,應該先准備一個樣板節點。

定時器

如果針對的是不斷運行的代碼,不應該使用setTimeout,而應該是用setInterval。setTimeout每次要重新設置一個定時器。

其他

腳本引擎

Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多,無論是執行速度還是內存管理上,因為JScript現在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件優化

文件優化也是一個很有效的手段,刪除所有的空格和注釋,把代碼放入一行內,可以加快下載的速度,注意,是下載的速度而不是解析的速度,如果是本地,注釋和空格並不會影響解釋和執行速度。

總結

在JavaScript編程中提高JavaScript運行性能的一些方法,其實這些經驗都基於幾條原則:

1.直接拿手頭現成的東西比較快,如局部變量比全局變量快,直接量比運行時構造對象快等等。

2.盡可能少地減少執行次數,比如先緩存需要多次查詢的。

3.盡可能使用語言內置的功能,比如串鏈接。

4.盡可能使用系統提供的API,因為這些API是編譯好的二進制代碼,執行效率很高

5.一些基本的算法上的優化,同樣可以用在JavaScript中,比如運算結構的調整。但是由於JavaScript是解釋型的,一般不會在運行時對字節碼進行優化,所以這些優化仍然是很重要的。

當然,其實這裡的一些技巧同樣使用在其他的一些解釋型語言中,大家也可以進行參考。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved