提高Web網(wǎng)站性能：JavaScript優(yōu)化細節(jié)
作為一名網(wǎng)站開發(fā)Web前端工程師，對自己開發(fā)的網(wǎng)站項目應該盡可能地對其性能進行優(yōu)化，現(xiàn)在互聯(lián)網(wǎng)上搜索到的網(wǎng)站性能優(yōu)化多是翻譯轉載自Yahoo14條或34條。Yahoo的優(yōu)化建議關注在大的方面，而本文將著重分析JavaScript的優(yōu)化細節(jié)。
51CTO推薦閱讀： 改善用戶體驗 Web前端優(yōu)化策略總結
一、避免出現(xiàn)腳本失控
不論什么腳本，在任何時間、任何瀏覽器上執(zhí)行，都不應該超過100毫秒。如果實際執(zhí)行的時間長于這個底限，一定要將進程分解成若干更小的代碼段。腳本失控基本上有以下四個方面的原因：
1. 在循環(huán)中執(zhí)行了太多的操作
解決這個問題的訣竅就是用下面這兩個問題來評估每個循環(huán)：
◆這個循環(huán)必須要同步執(zhí)行么？
◆循環(huán)里面的數(shù)據(jù)，必須要按順序執(zhí)行么？
如果1和2都可以否定，那么建議使用setTimeout方式將循環(huán)體切分成小塊進行異步處理，將循環(huán)中的定義變量及初始化操作放到循環(huán)外。
2. 臃腫的函數(shù)體
在JavaScript中，我們應該盡可能的用局部變量來代替全局變量!
◆理解JavaScript作用域鏈。
◆理解原型鏈。
3. 過多的遞歸
使用迭代方式替代遞歸，采用memoization技術優(yōu)化遞歸，斐波那契數(shù)列的遞歸算法優(yōu)化。
4. 過多的DOM調(diào)用
在Web開發(fā)中，JavaScript的一個很重要的作用就是對DOM進行操作。可你知道么？對DOM的操作是非常昂貴的，因為這會導致瀏覽器執(zhí)行回流（reflow）操作。而執(zhí)行了過多的回流操作，你就會發(fā)現(xiàn)自己的網(wǎng)站變得越來越慢了。我們應該盡可能的減少DOM操作?；亓鞑僮髦饕獣l(fā)生在幾種情況下：
◆改變窗體大小。
◆更改字體。
◆添加移除stylesheet塊。
◆內(nèi)容改變哪怕是輸入框輸入文字。
◆CSS虛類被觸發(fā)如 :hover。
◆更改元素的className。
◆當對DOM節(jié)點執(zhí)行新增或者刪除操作或內(nèi)容更改時。
◆動態(tài)設置一個style樣式時（比如element.style.width="10px"）。
◆當獲取一個必須經(jīng)過計算的尺寸值時，比如訪問offsetWidth、clientHeight或者其他需要經(jīng)過計算的CSS值（在兼容DOM的瀏覽器中，可以通過getComputedStyle函數(shù)獲取；在IE中，可以通過currentStyle屬性獲?。?/p>
解決問題的關鍵，就是限制通過DOM操作所引發(fā)回流的次數(shù):
1.在對當前DOM進行操作之前，盡可能多的做一些準備工作，保證N次創(chuàng)建，1次寫入。
2.在對DOM操作之前，把要操作的元素，先從當前DOM結構中刪除：
（1）通過removeChild()或者replaceChild()實現(xiàn)真正意義上的刪除。
（2）設置該元素的display樣式為“none”。修改操作完成后，將上面這個過程反轉過來，建議使用第2種方式。
3.CSS部分
另外一個經(jīng)常引起回流操作的情況是通過style屬性對元素的外觀進行修改，如element.style.backgroundColor = "blue"；每次修改元素的style屬性，都肯定會觸發(fā)回流操作，要解決這個問題可以：
（1）使用更改className的方式替換style.xxx=xxx的方式。
（2）使用style.cssText = '';一次寫入樣式。
（3）避免設置過多的行內(nèi)樣式
（4）添加的結構外元素盡量設置它們的位置為fixed或absolute
（5）避免使用表格來布局
（6）避免在CSS中使用JavaScript expressions(IE only)
4.將獲取的DOM數(shù)據(jù)緩存起來。這種方法，對獲取那些會觸發(fā)回流操作的屬性（比如offsetWidth等）尤為重要。
5.當對HTMLCollection對象進行操作時，應該將訪問的次數(shù)盡可能的降至最低，最簡單的，你可以將length屬性緩存在一個本地變量中，這樣就能大幅度的提高循環(huán)的效率。
二、避免大字符串字面量對象操作，如 字符串.lenth，盡量轉換為new String(字符串)后再進行操作
三、在做字符查找替換等操作時善用正則表達式
快速掌握ECMAScript正則表達式。
四、減少語句，利用運算符優(yōu)先級實現(xiàn)if else表達式，使用三元表達式，使用連續(xù)表達式（看情況，將損失程序可讀性）
利用運算符優(yōu)先級實現(xiàn)if else表達式。
五、將CSS，JS文件合并到一個文件
六、避免Javascript事件綁定出現(xiàn)內(nèi)存泄漏
這些內(nèi)存泄漏的出現(xiàn)，往往是由于Javascript對象與對象之間的循環(huán)應用。
七、使用WEB Workers技術（支持html5的瀏覽器）
Web Workers為JavaScript提供了一種能在后臺進程中運行的方法，Web Workers進程能夠在不影響用戶界面的情況下處理任務。
【編輯推薦】
