DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS性能優化筆記搜索整理
JS性能優化筆記搜索整理
編輯:關於JavaScript     
通過網上查找資料了解關於性能優化方面的內容,現簡單整理,僅供大家在優化的過程中參考使用,如有什麼問題請及時提出,再做出相應的補充修改。

一、 讓代碼簡潔:一些簡略的表達方式也會產生很好的優化

eg:x=x+1;在不影響功能的情況下可以簡寫為x++;

二、 變量名方法名盡量在不影響語意的情況下簡單。(可以選擇首字母命名)

eg:定義數組的長度可以取名為:ArrLen而不需要取為ArrayLength。

三、 關於JS的循環,循環是一種常用的流程控制。

JS提供了三種循環:for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差,因為它需要查詢Hash鍵,因此應盡量少用for(in)循環,for(;;)、while()循環的性能基本持平。當然,推薦使用for循環,如果循環變量遞增或遞減,不要單獨對循環變量賦值,而應該使用嵌套的++或–運算符。

四、 如果需要遍歷數組,應該先緩存數組長度,將數組長度放入局部變量中,避免多次查詢數組長度。

因為我們常常要根據字符串、數組的長度進行循環,而通常這個長度是不變的,比如每次查詢a.length,就要額外進行一個操作,而預先把var len=a.length,則就少了一次查詢。

五、 盡量選用局部變量而不是全局變量。

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

六、 盡量少使用eval。

每次使用eval需要消耗大量時間,這時候使用JS所支持的閉包可以實現函數模板。

七、 減少對象查找

因為JavaScript的解釋性,所以a.b.c.d.e,需要進行至少4次查詢操作,先檢查a再檢查a中的b,再檢查b中的c,如此往下。所以如果這樣的表達式重復出現,只要可能,應該盡量少出現這樣的表達式,可以利用局部變量,把它放入一個臨時的地方進行查詢。

八、 字符串連接。

如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。

如果要連接多個字符串,應該少使用+=,如s+=a;s+=b;s+=c;應該寫成s+=a + b + c;
而如果是收集字符串,比如多次對同一個字符串進行+=操作的話,最好使用一個緩存。怎麼用呢?使用JavaScript數組來收集,最後使用join方法連接起來,如下
復制代碼 代碼如下:
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");

九、 類型轉換

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,所以直接調用這個方法效率會更高

十、 盡量作用JSON格式來創建對象,而不是var obj=new Object()方法。

因為前者是直接復制,而後者需要調用構造器,因而前者的性能更好。

十一、 當需要使用數組時,也盡量使用JSON格式的語法,

使用JSON格式的語法即直接使用如下語法定義數組:[parrm,param,param...],而不是采用new Array(parrm,param,param...)這種語法。因為使用JSON格式的語法是引擎直接解釋的。而後者則需要調用Array的構造器。

十二、 對字符串進行循環操作,例如替換、查找,就使用正則表達式。

因為JS的循環速度比較慢,而正則表達式的操作是用C寫成的API,性能比較好。

十三、 插入HTML

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

十四、 對象查詢

使用[“”]查詢要比.items()更快

十五、 定時器

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

十六、 盡量減少DOM調用

在Web開發中,JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的,因為這會導致浏覽器執行回流 (reflow)操作。我們應該盡可能的減少DOM操作。
回流操作主要會發生在幾種情況下:
* 改變窗體大小
* 更改字體
* 添加移除stylesheet塊
* 內容改變哪怕是輸入框輸入文字
* CSS虛類被觸發如 :hover
* 更改元素的className
* 當對DOM節點執行新增或者刪除操作或內容更改時。
* 動態設置一個style樣式時(比如element.style.width="10px")。
* 當獲取一個必須經過計算的尺寸值時,比如訪問offsetWidth、clientHeight或者其他需要經過計算的CSS值
解決問題的關鍵,就是限制通過DOM操作所引發回流的次數:
1.在對當前DOM進行操作之前,盡可能多的做一些准備工作,保證N次創建,1次寫入。
2.在對DOM操作之前,把要操作的元素,先從當前DOM結構中刪除:
2.1. 通過removeChild()或者replaceChild()實現真正意義上的刪除。
2.2. 設置該元素的display樣式為“none”。

3.CSS部分
另外一個經常引起回流操作的情況是通過style屬性對元素的外觀進行修改,如element.style.backgroundColor = "blue";
每次修改元素的style屬性,都肯定會觸發回流操作,要解決這個問題可以:
3.1.使用更改className的方式替換style.xxx=xxx的方式。
3.2.使用style.cssText = '';一次寫入樣式。
3.3. 避免設置過多的行內樣式
3.4. 添加的結構外元素盡量設置它們的位置為fixed或absolute
3.5. 避免使用表格來布局
3.6. 避免在CSS中使用JavaScript expressions(IE only)
4.將獲取的DOM數據緩存起來。這種方法,對獲取那些會觸發回流操作的屬性(比如offsetWidth等)尤為重要。
5.當對HTMLCollection對象進行操作時,應該將訪問的次數盡可能的降至最低,最簡單的,你可以將length屬性緩存在一個本地變量中,這樣就能大幅度的提高循環的效率。

十七、 重構<script>和<style> 調用方式或合並js文件來優化請求次數,並盡量使用外部鏈接方式引用

我們常常在一個HTML文件頭中看到這樣標記代碼:

<script src="/scripts/a.js"></script>

<script src="/scripts/b.js"></script>

<script src="/scripts/c.js"></script>

大多是情況下,上述代碼可以被簡化成:

<script src="/ scripts /d.js"></script>

其中d.js中引用了a.js/b.js/c.js。通過document.write方法寫入。

十八、 對於大的JS對象,因為創建時時間和空間的開銷都比較大,因此應該盡量考慮采用緩存。

十九、 將腳本放到底部。

腳本一般是用來於用戶交互的,建議可以等頁面加載完成之後再加載js文件。所以,腳本和CSS正好相反,腳本應該放在頁面的底部。

二十、 除去JavaScript中的空白區域

可以用相關工具去除空白注釋等,將所有的名稱都重新用一個或兩個字母來命名將帶來顯著的改善。(但需要留有一個未驗收的備份文件,方便以後維護)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved