轉(zhuǎn)自：http://www.w3cgroup.com/article.asp?id=255

?

網(wǎng)站開(kāi)發(fā)WEB前端高性能優(yōu)化之JavaScript優(yōu)化細(xì)節(jié)

作者:dh20156 日期:2009-06-05

字體大小: 小 中 大

作為一名網(wǎng)站開(kāi)發(fā)WEB前端工程師，對(duì)自己開(kāi)發(fā)的網(wǎng)站項(xiàng)目應(yīng)該盡可能地對(duì)其性能進(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前端開(kāi)發(fā)高性能優(yōu)化部分之JavaScript的優(yōu)化細(xì)節(jié)！

?

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

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

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

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

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

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

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

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

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

??? 理解JavaScript作用域鏈。參見(jiàn)：http://www.jslab.org.cn/?tag=ScopeChainAndClosure

??? 理解原型鏈。參見(jiàn)：http://www.jslab.org.cn/?tag=prototypeChain

3. 過(guò)多的遞歸

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

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

4. 過(guò)多的DOM調(diào)用

??? 在Web開(kāi)發(fā)中，JavaScript的一個(gè)很重要的作用就是對(duì)DOM進(jìn)行操作。可你知道么？對(duì)DOM的操作是非常昂貴的，因?yàn)檫@會(huì)導(dǎo)致瀏覽器執(zhí)行回流（reflow）操作。而執(zhí)行了過(guò)多的回流操作，你就會(huì)發(fā)現(xiàn)自己的網(wǎng)站變得越來(lái)越慢了。我們應(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)過(guò)計(jì)算的尺寸值時(shí)，比如訪問(wèn)offsetWidth、clientHeight或者其他需要經(jīng)過(guò)計(jì)算的CSS值（在兼容DOM的瀏覽器中，可以通過(guò)getComputedStyle函數(shù)獲取；在IE中，可以通過(guò)currentStyle屬性獲取）。


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

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

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

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

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

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

?

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

?

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

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

?

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

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

?

五、將CSS，JS文件合并到一個(gè)文件（非BT愛(ài)好者還是不要玩了^_^）

參見(jiàn)：http://www.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

參見(jiàn)：http://www.w3cgroup.com/article.asp?id=207

?

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

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

參見(jiàn)：http://www.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

參見(jiàn)：http://www.w3cgroup.com/article.asp?id=97

?

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

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

?

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處http://www.w3cgroup.com/article.asp?id=255

轉(zhuǎn)載于:https://www.cnblogs.com/xjyggd/archive/2009/07/17/1525547.html

總結(jié)

以上是生活随笔為你收集整理的[转]JavaScript优化方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。