高性能JavaScript學習筆記

高性能JavaScript學習筆記

1、加載和執行

1. 腳本文件應該放在body標籤的最後面。
2. 合併多個script以減小Http請求。
3. 無阻塞的腳本：

• 爲script標籤添加defer屬性（僅ie 和firefox支持）
• 使用dom操做動態加載腳本。（推薦）

function loadScript(url,callback) {
    var script= document.createElement('script');
    script.type = 'text/javascript';
    script.onload = function() {
        callback && callback();
    };
    script.src= url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
}

先添加動態加載方法所需的代碼（loadscript），而後使用loadScript加載所需的Js文件

• 使用xhr對象獲取腳本（不能跨域從cdn下載js文件）。

---

2、數據訪問

1. 使用直接量和局部變量來讀取數據，減小使用數組和對象。
2. 儘量的使用局部變量而不是全局變量。經驗法則：若是某個跨做用域的值在函數中不僅被引用一次，那麼就應該用局部變量來保存它。
3. eval, with, try catch語句都有可能會影響做用域鏈，謹慎使用。
4. 搜索實例成員從比直接量或局部變量中訪問數據代價更高。
5. 每次遇到點操做符，嵌套成員會致使js引擎搜索全部對象成員。因此：在函數中若是要屢次讀取同一個對象屬性，最佳作法是將屬性值保存到一個局部變量中

---

3、DOM編程

1. 減小dom訪問的次數，innerHTML在大部分狀況下比原生DOM方法快。
2. 在循環dom節點的時候，應該先緩存length。
3. 使用children，firstElementChild，nextElementSibiling等更快的方法代替childNodes等屬性。
4. 若是瀏覽器容許，使用原生的querySelectorAll(),querySelector()等方法來進行節點查找。
5. 當添加和刪除dom節點，改變元素寬高位置或者內容時，瀏覽器都會發生「重排」，損耗性能。因此當減小以上的操做。技巧：

• 改變樣式時，使用cssText批量修改。若是樣式不依賴邏輯和運算的狀況下，只須要改變Class類名，把css的修改留給樣式表來完成。
• 當須要對dom節點進行一系列修改時，能夠採用先把Dom節點脫離文檔流，待修改完畢以後再加入文檔流中。三種基本方法：1.隱藏元素，修改元素，顯示元素。2.使用文檔碎片(documentfragment)來加入新的片斷。（推薦）3.將原始元素考本到一個脫離文檔的節點中，修改副本，而後拷貝迴文檔。

1. 緩存佈局信息。
2. 對動畫元素使用絕對定位，使其脫離文檔流，減小重排。
3. 避免大量使用：hover僞類。
4. 當存在大量重複的事件綁定時，使用事件委託。

---

4、算法和流程控制

1. 優化循環：

• 減小對象成員及數組項的查找次數。（緩存length屬性）
• 減小迭代的次數

1. 條件語句：條件數量多用switch，條件數量少用if else. 且if else 中的條件語句老是從大機率到小几率這樣排列。

---

5、字符串和正則表達式

1. + 和+=符號的使用：一般來講避免str += "one" + "two",這樣的寫法，而改爲str += "one"; str += "two";更好。
2. 正則技巧：正則以簡單、必須的字元開始；使用量詞模式，使他們後面的字元互斥；減小分支數量，縮小分支範圍；使用非捕獲組；只捕獲感興趣的部分以減小後處理等等。

---

6、快速響應的用戶界面

因爲瀏覽器對Js的運行時間有限制，因此使用定時器或者web workers來處理js能夠突破這種限制。

7、Ajax

1. 現代瀏覽器中獲取服務端數據的主要三種方式，XHR，動態腳本注入，multipart XHR。
2. 使用XHR時，GET和POST的對比：對於那些不會改變服務器狀態，只會獲取數據的請求，應該使用GET。只有當請求的URL加上參數的長度接近或超過2048個字符時，才應該使用Post方法。
3. 一個post請求，至少裝載兩個數據包，一個裝載頭信息，另外一個裝載post正文。
4. 使用jsonp時，由於json數據被當成一個js文件做爲原生代碼執行，因此這些數據必須封裝在一個回調函數裏。
5. 緩存數據：一、服務端，經過設置http頭信息確保響應被瀏覽器緩存。爲了保證ajax響應被緩存，必須使用get方式發送請求，並且必須在響應中發送正確的http頭Expires信息。二、在客服端，把獲取到的信息緩存到本地，從而避免再次請求。

---

8、編程實踐

1. 使用{},[]方式建立對象和數組而不是new Object()和new Array()方式。
2. 部署js應用：

• 合併Js文件
• 預處理Js文件
• 壓縮js文件
• 緩存js文件
• 使用cdn（內容分發網絡）