通過網(wǎng)上查找資料了解關(guān)于性能優(yōu)化方面的內(nèi)容，現(xiàn)簡單整理，僅供大家在優(yōu)化的過程中參考使用，如有什么問題請(qǐng)及時(shí)提出，再做出相應(yīng)的補(bǔ)充修改。

一、 讓代碼簡潔：一些簡略的表達(dá)方式也會(huì)產(chǎn)生很好的優(yōu)化

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

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

eg：定義數(shù)組的長度可以取名為：ArrLen而不需要取為ArrayLength。

三、 關(guān)于JS的循環(huán)，循環(huán)是一種常用的流程控制。

JS提供了三種循環(huán)：for(;;)、while()、for(in)。在這三種循環(huán)中for(in)的效率最差，因?yàn)樗枰樵僅ash鍵，因此應(yīng)盡量少用for(in)循環(huán)，for(;;)、while()循環(huán)的性能基本持平。當(dāng)然，推薦使用for循環(huán)，如果循環(huán)變量遞增或遞減，不要單獨(dú)對(duì)循環(huán)變量賦值，而應(yīng)該使用嵌套的++或–運(yùn)算符。

四、 如果需要遍歷數(shù)組，應(yīng)該先緩存數(shù)組長度，將數(shù)組長度放入局部變量中，避免多次查詢數(shù)組長度。

因?yàn)槲覀兂３Ｒ鶕?jù)字符串、數(shù)組的長度進(jìn)行循環(huán)，而通常這個(gè)長度是不變的，比如每次查詢a.length，就要額外進(jìn)行一個(gè)操作，而預(yù)先把var len=a.length，則就少了一次查詢。

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

局部變量的訪問速度要比全局變量的訪問速度更快，因?yàn)槿肿兞科鋵?shí)是window對(duì)象的成員，而局部變量是放在函數(shù)的棧里的。

六、 盡量少使用eval。

每次使用eval需要消耗大量時(shí)間，這時(shí)候使用JS所支持的閉包可以實(shí)現(xiàn)函數(shù)模板。

七、 減少對(duì)象查找

因?yàn)镴avaScript的解釋性，所以a.b.c.d.e，需要進(jìn)行至少4次查詢操作，先檢查a再檢查a中的b，再檢查b中的c，如此往下。所以如果這樣的表達(dá)式重復(fù)出現(xiàn)，只要可能，應(yīng)該盡量少出現(xiàn)這樣的表達(dá)式，可以利用局部變量，把它放入一個(gè)臨時(shí)的地方進(jìn)行查詢。

八、 字符串連接。

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

如果要連接多個(gè)字符串，應(yīng)該少使用+=，如s+=a;s+=b;s+=c;應(yīng)該寫成s+=a + b + c；
而如果是收集字符串，比如多次對(duì)同一個(gè)字符串進(jìn)行+=操作的話，最好使用一個(gè)緩存。怎么用呢？使用JavaScript數(shù)組來收集，最后使用join方法連接起來，如下

九、 類型轉(zhuǎn)換

1. 把數(shù)字轉(zhuǎn)換成字符串，應(yīng)用"" + 1，雖然看起來比較丑一點(diǎn)，但事實(shí)上這個(gè)效率是最高的，性能上來說：("" +) > String() > .toString() > new String()

盡量使用編譯時(shí)就能使用的內(nèi)部操作要比運(yùn)行時(shí)使用的用戶操作要快。

String()屬于內(nèi)部函數(shù)，所以速度很快，而.toString()要查詢?cè)椭械暮瘮?shù)，所以速度遜色一些，new String()用于返回一個(gè)精確的副本。

2. 浮點(diǎn)數(shù)轉(zhuǎn)換成整型，這個(gè)更容易出錯(cuò)，很多人喜歡使用parseInt()，其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字，而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換，我們應(yīng)該使用Math.floor()或者M(jìn)ath.round()。Math是內(nèi)部對(duì)象，所以Math.floor()其實(shí)并沒有多少查詢方法和調(diào)用的時(shí)間，速度是最快的。

3. 對(duì)于自定義的對(duì)象，如果定義了toString()方法來進(jìn)行類型轉(zhuǎn)換的話，推薦顯式調(diào)用toString()，因?yàn)閮?nèi)部的操作在嘗試所有可能性之后，會(huì)嘗試對(duì)象的toString()方法嘗試能否轉(zhuǎn)化為String，所以直接調(diào)用這個(gè)方法效率會(huì)更高

十、 盡量作用JSON格式來創(chuàng)建對(duì)象，而不是var obj=new Object()方法。

因?yàn)榍罢呤侵苯訌?fù)制，而后者需要調(diào)用構(gòu)造器，因而前者的性能更好。

十一、 當(dāng)需要使用數(shù)組時(shí)，也盡量使用JSON格式的語法，

使用JSON格式的語法即直接使用如下語法定義數(shù)組：[parrm,param,param...],而不是采用new Array(parrm,param,param...)這種語法。因?yàn)槭褂肑SON格式的語法是引擎直接解釋的。而后者則需要調(diào)用Array的構(gòu)造器。

十二、 對(duì)字符串進(jìn)行循環(huán)操作，例如替換、查找，就使用正則表達(dá)式。

因?yàn)镴S的循環(huán)速度比較慢，而正則表達(dá)式的操作是用C寫成的API，性能比較好。

十三、 插入HTML

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

十四、 對(duì)象查詢

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

十五、 定時(shí)器

如果針對(duì)的是不斷運(yùn)行的代碼，不應(yīng)該使用setTimeout，而應(yīng)該是用setInterval。setTimeout每次要重新設(shè)置一個(gè)定時(shí)器。

十六、 盡量減少DOM調(diào)用

在Web開發(fā)中，JavaScript的一個(gè)很重要的作用就是對(duì)DOM進(jìn)行操作?？墒菍?duì)DOM的操作是非常昂貴的，因?yàn)檫@會(huì)導(dǎo)致瀏覽器執(zhí)行回流 （reflow）操作。我們應(yīng)該盡可能的減少DOM操作。
回流操作主要會(huì)發(fā)生在幾種情況下：
* 改變窗體大小
* 更改字體
* 添加移除stylesheet塊
* 內(nèi)容改變哪怕是輸入框輸入文字
* CSS虛類被觸發(fā)如 :hover
* 更改元素的className
* 當(dāng)對(duì)DOM節(jié)點(diǎn)執(zhí)行新增或者刪除操作或內(nèi)容更改時(shí)。
* 動(dòng)態(tài)設(shè)置一個(gè)style樣式時(shí)（比如element.style.width="10px"）。
* 當(dāng)獲取一個(gè)必須經(jīng)過計(jì)算的尺寸值時(shí)，比如訪問offsetWidth、clientHeight或者其他需要經(jīng)過計(jì)算的CSS值
解決問題的關(guān)鍵，就是限制通過DOM操作所引發(fā)回流的次數(shù):
1.在對(duì)當(dāng)前DOM進(jìn)行操作之前，盡可能多的做一些準(zhǔn)備工作，保證N次創(chuàng)建，1次寫入。
2.在對(duì)DOM操作之前，把要操作的元素，先從當(dāng)前DOM結(jié)構(gòu)中刪除：
2.1. 通過removeChild()或者replaceChild()實(shí)現(xiàn)真正意義上的刪除。
2.2. 設(shè)置該元素的display樣式為“none”。

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

十七、 重構(gòu)<script>和<style> 調(diào)用方式或合并js文件來優(yōu)化請(qǐng)求次數(shù)，并盡量使用外部鏈接方式引用

我們常常在一個(gè)HTML文件頭中看到這樣標(biāo)記代碼:

<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方法寫入。

十八、 對(duì)于大的JS對(duì)象，因?yàn)閯?chuàng)建時(shí)時(shí)間和空間的開銷都比較大，因此應(yīng)該盡量考慮采用緩存。

十九、 將腳本放到底部。

腳本一般是用來于用戶交互的，建議可以等頁面加載完成之后再加載js文件。所以，腳本和CSS正好相反，腳本應(yīng)該放在頁面的底部。

二十、 除去JavaScript中的空白區(qū)域

可以用相關(guān)工具去除空白注釋等,將所有的名稱都重新用一個(gè)或兩個(gè)字母來命名將帶來顯著的改善。（但需要留有一個(gè)未驗(yàn)收的備份文件，方便以后維護(hù)）

最新評(píng)論