作為一名網(wǎng)站開發(fā)web前端工程師，對自己開發(fā)的網(wǎng)站項目應(yīng)該盡可能地對其性能進(jìn)行優(yōu)化，現(xiàn)在互聯(lián)網(wǎng)上搜索到的網(wǎng)站性能優(yōu)化多是翻譯轉(zhuǎn)載自 yahoo14條或34條。yahoo的優(yōu)化建議關(guān)注在大的方面，下面，w3c group為大家呈現(xiàn)web前端開發(fā)高性能優(yōu)化部分之javascript的優(yōu)化細(xì)節(jié)！

一、避免出現(xiàn)腳本失控

不論什么腳本，在任何時間、任何瀏覽器上執(zhí)行，都不應(yīng)該超過100毫秒。如果實際執(zhí)行的時間長于這個底限，一定要將進(jìn)程分解成若干更小的代碼段。

腳本失控基本上有以下四個方面的原因：

1. 在循環(huán)中執(zhí)行了太多的操作

解決這個問題的訣竅就是用下面這兩個問題來評估每個循環(huán)：
1. 這個循環(huán)必須要同步執(zhí)行么？
2. 循環(huán)里面的數(shù)據(jù)，必須要按順序執(zhí)行么？

如果1和2都可以否定，那么建議使用settimeout方式將循環(huán)體切分成小塊進(jìn)行異步處理

將循環(huán)中的定義變量及初始化操作放到循環(huán)外。參見：http://w3cgroup.com/article.asp?id=111

2. 臃腫的函數(shù)體

在javascript中，我們應(yīng)該盡可能的用局部變量來代替全局變量!

理解javascript作用域鏈。參見：http://jslab.org.cn/?tag=scopechainandclosure

理解原型鏈。參見：http://jslab.org.cn/?tag=prototypechain

3. 過多的遞歸

使用迭代方式替代遞歸，采用memoization技術(shù)優(yōu)化遞歸

斐波那契數(shù)列的遞歸算法優(yōu)化，參見：http://jslab.org.cn/?tag=memoization

4. 過多的dom調(diào)用

在web開發(fā)中，javascript的一個很重要的作用就是對dom進(jìn)行操作?？赡阒烂?？對dom的操作是非常昂貴的，因為這會導(dǎo)致瀏覽器執(zhí)行回流（reflow）操作。而執(zhí)行了過多的回流操作，你就會發(fā)現(xiàn)自己的網(wǎng)站變得越來越慢了。我們應(yīng)該盡可能的減少dom操作。

回流操作主要會發(fā)生在幾種情況下：

* 改變窗體大小
* 更改字體
* 添加移除stylesheet塊
* 內(nèi)容改變哪怕是輸入框輸入文字
* css虛類被觸發(fā)如 :hover
* 更改元素的classname
* 當(dāng)對dom節(jié)點執(zhí)行新增或者刪除操作或內(nèi)容更改時。
* 動態(tài)設(shè)置一個style樣式時（比如element.style.width=”10px”）。
* 當(dāng)獲取一個必須經(jīng)過計算的尺寸值時，比如訪問offsetwidth、clientheight或者其他需要經(jīng)過計算的css值（在兼容dom的瀏覽器中，可以通過getcomputedstyle函數(shù)獲??；在ie中，可以通過currentstyle屬性獲取）。

解決問題的關(guān)鍵，就是限制通過dom操作所引發(fā)回流的次數(shù):

1.在對當(dāng)前dom進(jìn)行操作之前，盡可能多的做一些準(zhǔn)備工作，保證n次創(chuàng)建，1次寫入。

2.在對dom操作之前，把要操作的元素，先從當(dāng)前dom結(jié)構(gòu)中刪除：
1. 通過removechild()或者replacechild()實現(xiàn)真正意義上的刪除。
2. 設(shè)置該元素的display樣式為“none”。
修改操作完成后，將上面這個過程反轉(zhuǎn)過來，建議使用第2種方式。

3.css部分
另外一個經(jīng)常引起回流操作的情況是通過style屬性對元素的外觀進(jìn)行修改，如element.style.backgroundcolor = “blue”;
每次修改元素的style屬性，都肯定會觸發(fā)回流操作，要解決這個問題可以：
1.使用更改classname的方式替換style.xxx=xxx的方式。
2.使用style.csstext = ”;一次寫入樣式。
3. 避免設(shè)置過多的行內(nèi)樣式
4. 添加的結(jié)構(gòu)外元素盡量設(shè)置它們的位置為fixed或absolute
5. 避免使用表格來布局
6. 避免在css中使用javascript expressions(ie only)

4.將獲取的dom數(shù)據(jù)緩存起來。這種方法，對獲取那些會觸發(fā)回流操作的屬性（比如offsetwidth等）尤為重要。

5.當(dāng)對htmlcollection對象進(jìn)行操作時，應(yīng)該將訪問的次數(shù)盡可能的降至最低，最簡單的，你可以將length屬性緩存在一個本地變量中，這樣就能大幅度的提高循環(huán)的效率。

二、避免大字符串字面量對象操作，如 字符串.lenth，盡量轉(zhuǎn)換為new string(字符串)后再進(jìn)行操作

三、在做字符查找替換等操作時善用正則表達(dá)式

快速掌握ecmascript正則表達(dá)式。參見：http://w3cgroup.com/article.asp?id=202

四、減少語句，利用運算符優(yōu)先級實現(xiàn)if else表達(dá)式，使用三元表達(dá)式，使用連續(xù)表達(dá)式（看情況，將損失程序可讀性）

利用運算符優(yōu)先級實現(xiàn)if else表達(dá)式參見：http://w3cgroup.com/article.asp?id=131

五、將css，js文件合并到一個文件（非bt愛好者還是不要玩了^_^）

參見：http://w3cgroup.com/article.asp?id=29

六、避免javascript事件綁定出現(xiàn)內(nèi)存泄漏

“these memory leaks often occur as a result of circular references between javascript objects and objects within ie’s dom (document object model).” microsoft gpde team blog

參見：http://w3cgroup.com/article.asp?id=207

七、使用web workers技術(shù)（支持html5的瀏覽器）

web workers為javascript提供了一種能在后臺進(jìn)程中運行的方法，web workers進(jìn)程能夠在不影響用戶界面的情況下處理任務(wù)。

參見：http://w3cgroup.com/article.asp?id=242

八、y!14條（14 rules for faster-loading web sites）

* rule 1 – make fewer http requests
* rule 2 – use a content delivery network (server端)
* rule 3 – add an expires header (server端)
* rule 4 – gzip components (server端)
* rule 5 – put stylesheets at the top
* rule 6 – put scripts at the bottom
* rule 7 – avoid css expressions
* rule 8 – make javascript and css external
* rule 9 – reduce dns lookups (server端)
* rule 10 – minify javascript
* rule 11 – avoid redirects (server端)
* rule 12 – remove duplicate scripts
* rule 13 – configure etags (server端)
* rule 14 – make ajax cacheable
* rule 15 – use iframes wisely

參見：http://w3cgroup.com/article.asp?id=97

九、微軟早期的dhtml優(yōu)化建議

* 使用數(shù)組push替代字符串累加

原文：http://w3cgroup.com/article.asp?id=255