高效能Javascript總結

標籤：排版   提高   介面   gulp   構造   帶來   總結   產生   壓縮   

一、載入和運行

Javascript代碼執行會阻塞其他瀏覽器處理過程、充分利用webpack或gulp工具對檔案打包壓縮，減少js檔案的數量，從而減少http請求的次數，以提高網頁應用的實際效能。

二、資料訪問

       經典電腦科學的一個問題是確定資料應當存放在什麼地方、以實現最佳的讀寫效率。資料存放區在哪裡會關係到代碼運行期間資料被檢索到的速度。

JS中的四種基本的資料存放區位置：直接量（字串、數字、布爾值、對象、數組、函數、正則、null、undefind）、變數、數組項、對象成員。

每一種資料存放區位置都具有特定的讀寫操作負擔。直接量和局部變數的訪問速度要快於數組項和對象成員的訪問速度。因此盡量使用直接量和局部變數，限制數組項和對象成員的使用。

對所有的瀏覽器來說，一個標識符所處的位置越深，讀寫它的速度就越慢。在函數體內中，如果對於使用多於一次的變數值，就盡量用局部變數儲存本地範圍之外的變數值。

局部變數比域外變數快，是因為他位於範圍鏈的第一個對象中。變數在範圍鏈的位置越深，訪問的實際就越長。全域變數總是最慢的，因為它們總是位於範圍鏈的最後一環。

嵌套對象成員會造成重大效能影響，應盡量少用。

三、DOM編程

文件物件模型（DOM）是一個獨立於語言的，使用XML和HTML文檔操作的應用程式介面。DOM和JS（ECMAScript）相互獨立並以功能介面串連，因此每次通過js訪問或修改DOM就會帶來效能損耗。

一般而言，對於任何類型的DOM訪問，假如同一個DOM屬性或方法被訪問一次以上，最好使用一個局部變數緩衝此DOM成員。

        重繪和重排：當DOM改變影響到元素的幾何屬性（寬高）或其內部內容時，瀏覽器需要重新計算元素的幾何屬性，而且其他元素的幾何屬性和位置也會因此改變受到影響。瀏覽器使渲染樹上受到的部分失效，然後重構渲染樹。這個過程被稱作重排。重排版完成時，瀏覽器會在一個重繪進程中重新繪製螢幕上受影響的部分。

引發重排的幾個原因：

         1、添加或刪除可見的DOM元素

         2、元素位置改變

         3、元素尺寸改變（盒子模型）

         4、內容改變

         5、最初的頁面渲染

         6、瀏覽器視窗尺寸的改變

 針對重排和重繪引發的效能問題可以通過批量修改、離線操作DOM樹、緩衝並減少對布局資訊的訪問來降低其帶來的影響。

 事件託管技術可以最小化事件控制代碼計數。

四、演算法和流程式控制制

JS中的for-in迴圈可枚舉任何對象的命名屬性（包括對象的執行個體屬性和繼承而來的屬性），一般不推薦使用。

JavaScript引擎所支援的遞迴數量與JavaScript調用棧的大小直接相關。

五、響應介面

大多數瀏覽器有一個單獨的處理進程，它由兩個任務所共用：JavaScript任何和使用者介面更新任務（UI線程）。

一個單一的JavaScript操作應當使用的總時間（最大）是100毫秒。

當多個重複的定時器被同事建立會產生效能問題。因為只有一個UI線程，所有定時器競爭已耗用時間。

六、Ajax  非同步JavaScript和XML

ajax是一種與伺服器通訊而不重載當前頁面的方法。

Beacons（燈標）：JS用於建立一個新的Image對象，將src設定為伺服器上一個指令檔的url，該url包含希望通過get格式傳回的索引值對資料。

作為資料格式，純文字和HTML是高度限制的，但其可以節省用戶端的CPU周期。XML應用廣泛但非常冗長且解析緩慢。json是輕量級、解析迅速，互動性和XML相當。自訂格式非常輕量。總而言之，越輕量級的格式越好，最好是json和字元分割的自訂格式。

七、編程實踐

 eval()、Function()構造器、定時器（setTimeout()和setInterval()）四種函數可以允許在程式中擷取一個包含代碼的字串然後運行它。但此時會付出二次評估的代價，與直接包含相應代碼相比將佔用更長的時間。

定時器建議第一個參數傳入一個函數而不是一個字串，否則會造成記憶體流失。

JS的原生部分一般是用低級語言寫的，如C++，所以無論怎樣最佳化JS代碼，永遠不會比JS引擎提供的原生方法更快，比如內建的Math對象提供的諸多方法。

 

高效能Javascript總結