《高性能javascript》筆記

閱讀《高性能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日期函數，推薦使用當前的集成測試和單元測試
 2.每一個遊覽器都具有各類的檢查器和資源面板，能夠經過分析得出一些javascript性能的數據