《高性能JavaScript》 實用指南

By XFE-堪玉

---

閱讀《高性能javascript》後，對其內容的一個整理和精簡

加載與執行

1. 將script標籤放在body結尾標籤上面
2. 控制script標籤數量(每一次script解析都意味着阻塞或延遲)
3. 內嵌腳本不要放在link樣式以後
4. 對script標籤應用defer屬性
5. 動態建立script標籤加載js文件(模塊化框架便可)

數據存取

1. 不影響this的狀況下，對反覆訪問的對象進行變量保存
2. 合理使用局部變量，減小做用域跨越
3. 避免使用with和eval
4. 謹慎地使用閉包
5. 減小Object對象的層次訪問，避免過長的屬性讀取(es6解構賦值)

DOM編程

1. 儘可能用新的選擇器api代替老的，儘可能用dom克隆替代dom建立
2. html集合操做很是昂貴，可轉換爲數組再進行操做，同時使用局部變量緩存操做
3. 對dom訪問信息進行緩存，對dom改變進行批量操做
4. 對操做頻繁的dom，儘量採用position:absolute
5. 對操做密集的dom，先display:none——>操做——>再display:block
6. 對操做量很大的dom，採用文檔碎片createDocumentFragment
7. 合理使用事件委託，避免對dom進行逐個事件綁定

算法和流程控制

1. 減小使用for...in循環
2. 條件判斷上，避免類型轉換
3. 條件較多時，使用switch代替if..else
4. 最小化語句數，避免多個var聲明，插入迭代值——arr[i++]
5. 簡化終止條件，簡化循環體，減值迭代
6. 展開循環(在次數很少的狀況下)

字符串與正則表達式

1. 減小字符串拼接，避免"臨時字符串"的出現
2. 當疊加字符串的時候，字符串變量應該靠左
3. 數組join方法比其餘字符串鏈接方式慢
4. 字符串concat方法比使用簡單的+和+=慢
5. 正則優化(我的略過...)

快速響應的用戶界面

1. 對於異步操做的任務，可以使用定時器分解任務，分割循環項
2. 定時器最小延遲建議爲25毫秒，應避免高頻定時器的數量
3. 合理使用web workers

Ajax

1. 對那些不會改變服務器狀態，只獲取數據的請求，應該使用get類型（會被遊覽器緩存起來，有利於性能）
2. 若是你只關心發送數據到服務器，可使用圖標信標（img.src="請求地址"）
3. 使用能被http緩存的get查詢請求的時候，應該同時在服務端設置Expires頭信息（過時時間）
4. 本地設置緩存（變量緩存與storage緩存）

編程實踐

1. 避免使用eval,Function,setTimeout和setInterval去執行須要解析的字符串代碼
2. 對數組和對象使用字面量進行建立，而非構造器模式
3. 涉及計算的過程，應該儘可能用原生方法(Math)，合理使用位運算符

構建並部署高性能javascript應用

1. 合併js，減小http請求
2. 壓縮js，下降請求大小
3. 設置Accept-Encoding HTTP請求頭，對js進行gzip壓縮
4. 設置Expires HTTP響應頭，對js文件進行過時時間緩存(客戶端使用時間戳更新js文件)
5. 使用內容分發網絡CDN

工具

1. javascript的性能分析簡單的分析能夠經過Date日期和Log函數，推薦使用當前的集成測試和單元測試
2. 每一個遊覽器都具有各類的檢查器和資源面板，能夠經過分析得出一些javascript性能的數據