JavaScript優化細節

 

原文地址:http://www.w3cgroup.com/article.asp?id=255

 

一、避免出現腳本失控

    不論什麼腳本,在任何時間、任何瀏覽器上執行,都不應該超過100毫秒。如果實際執行的時間長於這個底限,一定要將進程分解成若干更小的代碼段。

 

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

    1. 在循環中執行了太多的操作

        解決這個問題的訣竅就是用下面這兩個問題來評估每個循環:

            這個循環必須要同步執行麼?

            循環裏面的數據,必須要按順序執行麼?

        如果1和2都可以否定,那麼建議使用setTimeout方式將循環體切分成小塊進行異步處理

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

 

    2. 臃腫的函數體

        在JavaScript中,我們應該儘可能的用局部變量來代替全局變量。

        理解JavaScript作用域鏈。參見:http://www.jslab.org.cn/?tag=ScopeChainAndClosure

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

 

    3. 過多的遞歸

        使用迭代方式替代遞歸,採用memoization技術優化遞歸

        斐波那契數列的遞歸算法優化,參見:http://www.jslab.org.cn/?tag=Memoization

 

    4. 過多的DOM調用

        在Web開發中,JavaScript的一個很重要的作用就是對DOM進行操作。可是對DOM的操作是非常昂貴的,因爲這會導致瀏覽器執行迴流(reflow)操作。執行了過多的迴流操作,會導致網站變得越來越慢。應該儘可能的減少DOM操作。

        迴流操作主要會發生在幾種情況下:

            1. 改變窗體大小

            2. 更改字體

            3. 添加移除stylesheet塊

            4. 內容改變哪怕是輸入框輸入文字

            5. CSS虛類被觸發如 :hover

            6. 更改元素的className

            7. 當對DOM節點執行新增或者刪除操作或內容更改時。

            8. 動態設置一個style樣式時(比如element.style.width="10px")。

            9. 當獲取一個必須經過計算的尺寸值時,比如訪問offsetWidth、clientHeight或者其他需要經過計算的CSS值(在兼容DOM的瀏覽器中,可以通過getComputedStyle函數獲取;在IE中,可以通過currentStyle屬性獲取)。

 

        解決問題的關鍵,就是限制通過DOM操作所引發迴流的次數:

            1.在對當前DOM進行操作之前,儘可能多的做一些準備工作,保證N次創建,1次寫入。

            2.在對DOM操作之前,把要操作的元素,先從當前DOM結構中刪除:

                通過removeChild()或者replaceChild()實現真正意義上的刪除。

                設置該元素的display樣式爲“none”。

              修改操作完成後,將上面這個過程反轉過來,建議使用第2種方式。

            3.CSS部分

                另外一個經常引起迴流操作的情況是通過style屬性對元素的外觀進行修改,如element.style.backgroundColor = "blue";

                每次修改元素的style屬性,都肯定會觸發迴流操作,要解決這個問題可以:

                    1. 使用更改 className 的方式替換 style.xxx=xxx 的方式。

                    2. 使用 style.cssText = ''; 一次寫入樣式。

                    3. 避免設置過多的行內樣式

                    4. 添加的結構外元素儘量設置它們的位置爲 fixed 或 absolute

                    5. 避免使用表格來佈局

                    6. 避免在 CSS 中使用 JavaScript expressions(IE only)

            4.將獲取的DOM數據緩存起來。這種方法,對獲取那些會觸發迴流操作的屬性(比如offsetWidth等)尤爲重要。

            5.當對HTMLCollection對象進行操作時,應該將訪問的次數儘可能的降至最低,最簡單的,你可以將length屬性緩存在一個本地變量中,這樣就能大幅度的提高循環的效率。

 

二、避免大字符串字面量對象操作,如 字符串.lenth,儘量轉換爲new String(字符串)後再進行操作。

 

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

    快速掌握ECMAScript正則表達式。參見:http://www.w3cgroup.com/article.asp?id=202

 

四、減少語句,利用運算符優先級實現if else表達式,使用三元表達式,使用連續表達式(看情況,將損失程序可讀性)

    利用運算符優先級實現if else表達式參見:http://www.w3cgroup.com/article.asp?id=131

 

五、將CSS,JS文件合併到一個文件(非BT愛好者不建議使用)

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

 

六、避免Javascript事件綁定出現內存泄漏

    "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://www.w3cgroup.com/article.asp?id=207

 

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

    Web Workers爲JavaScript提供了一種能在後臺進程中運行的方法,Web Workers進程能夠在不影響用戶界面的情況下處理任務。

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

 

八、Y!14條(14 Rules for Faster-Loading Web Sites)

    Rule 01 - Make Fewer HTTP Requests

    Rule 02 - Use a Content Delivery Network (Server端)

    Rule 03 - Add an Expires Header (Server端)

    Rule 04 - Gzip Components (Server端)

    Rule 05 - Put Stylesheets at the Top

    Rule 06 - Put Scripts at the Bottom

    Rule 07 - Avoid CSS Expressions

    Rule 08 - Make JavaScript and CSS External

    Rule 09 - 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://www.w3cgroup.com/article.asp?id=97

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章