高性能Javascript總結

1、加載和運行

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

2、數據訪問

       經典計算機科學的一個問題是肯定數據應當存放在什麼地方、以實現最佳的讀寫效率。數據存儲在哪裏會關係到代碼運行期間數據被檢索到的速度。

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

每一種數據存儲位置都具備特定的讀寫操做負擔。直接量和局部變量的訪問速度要快於數組項和對象成員的訪問速度。所以儘可能使用直接量和局部變量，限制數組項和對象成員的使用。

對全部的瀏覽器來講，一個標識符所處的位置越深，讀寫它的速度就越慢。在函數體內中，若是對於使用多於一次的變量值，就儘可能用局部變量存儲本地範圍以外的變量值。

局部變量比域外變量快，是由於他位於做用域鏈的第一個對象中。變量在做用域鏈的位置越深，訪問的實際就越長。全局變量老是最慢的，由於它們老是位於做用域鏈的最後一環。

嵌套對象成員會形成重大性能影響，應儘可能少用。

3、DOM編程

文檔對象模型（DOM）是一個獨立於語言的，使用XML和HTML文檔操做的應用程序接口。DOM和JS（ECMAScript）相互獨立並以功能接口鏈接，所以每次經過js訪問或修改DOM就會帶來性能損耗。

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

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

引起重排的幾個緣由：

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

         二、元素位置改變

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

         四、內容改變

         五、最初的頁面渲染

         六、瀏覽器窗口尺寸的改變

 針對重排和重繪引起的性能問題能夠經過批量修改、離線操做DOM樹、緩存並減小對佈局信息的訪問來下降其帶來的影響。

 事件託管技術能夠最小化事件句柄數量。

4、算法和流程控制

JS中的for-in循環可枚舉任何對象的命名屬性（包括對象的實例屬性和繼承而來的屬性），通常不推薦使用。

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

5、響應接口

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

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

當多個重複的定時器被同事建立會產生性能問題。由於只有一個UI線程，全部定時器競爭運行時間。

6、Ajax  異步JavaScript和XML

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

Beacons（燈標）：JS用於建立一個新的Image對象，將src設置爲服務器上一個腳本文件的url，該url包含但願經過get格式傳回的鍵值對數據。

做爲數據格式，純文本和HTML是高度限制的，但其能夠節省客戶端的CPU週期。XML應用普遍但很是冗長且解析緩慢。json是輕量級、解析迅速，交互性和XML至關。自定義格式很是輕量。總而言之，越輕量級的格式越好，最好是json和字符分割的自定義格式。

7、編程實踐

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

定時器建議第一個參數傳入一個函數而不是一個字符串，不然會形成內存泄漏。

JS的原生部分通常是用低級語言寫的，如C++，因此不管怎樣優化JS代碼，永遠不會比JS引擎提供的原生方法更快，好比內置的Math對象提供的諸多方法。