《高性能Javascript》 Summary（一）

 

第一章、加載和執行 Loading & Execution

緣由：Javascript 的執行致使頁面渲染停止等待。

解決：

1. 將script放在頁面底部，緊靠body 閉合標籤以前，保證頁面在script執行以前渲染完成。
2. 將script成組打包，減小script的請求數量。
3. 用非阻塞的方式加載script。（設置defer屬性；動態建立script標籤；使用xhr下載腳本注入到頁面）

第二章、數據訪問 Date Access

緣由： 在Javascript中，數據存儲位置能夠對代碼總體興能產生重大影響。有四種數據訪問類型：直接量，變量，數組項，對象成員。直接量和變量訪問快，數組項和對象訪問慢。

解決：

1. 避免使用with語句改變上下文執行環境，應該適當當心的使用try catch的catch子句，他有一樣的效果。
2. 嵌套對象成員會形成重要性能影響，儘可能少用。
3. 一個屬性或方法在原型鏈位置越深，訪問速度越慢。
4. 訪問局部變量快。將常常使用的對象成員，數組項和域外變量存入局部變量中。

 

第三章、DOM編程 DOM Scripting

緣由：DOM和 Javascript(ECMAScript)實現保持相互獨立。二者就像兩座島嶼，ECMAScript每次訪問DOM時，都會交上一次‘過橋費’,訪問越多，交得越多。

解決：

1. 最小化DOM的訪問，在Javascript端儘可能作更多的事情。
2. 將反覆使用的地方使用局部變量存放DOM引用。
3. 當心處理HTML集合（訪問慢，老是對底層文檔進行查詢），將Length緩存到變量中，在迭代中使用這個變量。若是常常操做html集合，能夠將集合拷貝到數組中使用。
4. 若是能夠的話使用更快的API，如querySelectorAll and firstElementChild。
5. 注意重繪和重排：批量修改style, 離線操做dom樹，緩存並減小對佈局信息的訪問。
6. 動畫中使用絕對定位(脫離文檔流，不影響文檔流的dom重繪重排)，使用拖放代理。
7. 使用事件委託技術最小化事件句柄數量。

 

《高性能Javascript》  Summary（二）