提高JavaScript性能

加載並執行


1.</body>閉合標籤之前，將所有的<script>標籤放到頁面底部。這能確保在腳本執行前頁面已經渲染完成


2.每個<script>標籤初始下載是都會阻塞頁面渲染，應減少頁面包含的<script>標籤（打包壓縮）


3.把一段內嵌腳本放在引用外鏈樣式表的<link>標籤之後會導致頁面阻塞去等待樣式表的下載，這樣做是爲了確保內嵌腳本在執行時能獲得最精確的樣式信息，因此不要把內嵌腳本緊跟在<link>標籤之後


4. 使用多種無阻塞下載JavaScript的方法
- 使用<script>標籤的defer屬性
- 使用動態創建的<script>元素來下載並執行代碼
- 使用XHR對象下載JavaScript代碼並注入頁面中




數據存儲

1.如果某個跨作用域的值在函數中被應用一次以上，那麼就把他存儲到局部變量( var doc = documeng; doc.xxxx )


2.點表示法(object.name)比括號表示(object['name'])法在Safari中速度更快


3.屬性或者方法在原型鏈中的位置越深，訪問的速度越慢


4.嵌套的對象成員會明顯影響性能


5.少用全局變量，因爲它總處於作用域鏈的最末端




DOM編程 (DOM是一個獨立於語言的沒用於操作XML和HTML文檔的程序接口API，所以DOM操作天生就慢)


1.減少DOM訪問的次數，把運算儘量留在ECMAScript這一端處理。


2.如果需要多次訪問某個DOM節點，請使用局部變量存儲他的引用


3.處理HTML集合時，把集合的長度緩存到一個變量中，並在迭代中使用它。如果經常需要操作集合，把集合拷貝到一個數組中(toArray)


4.使用事件委託來減少事件處理器的數量


5.使用動畫時，讓元素脫離文檔流(比如 展開/摺疊 先讓元素絕對定位，完成時候恢復定位)




算法和流程控制


1.不要用for-in來遍歷數組成員




快速響應的用戶界面


1.高效的管理UI線程就是要確保javas不能運行太長時間


2.任何JavaScript任務都不應當執行超過100ms


3.JavaScript運行期間，瀏覽器響應用戶交互的行爲存在差異


4.處理純數據或者與瀏覽器UI無關的長時間運行腳本，可以嘗試Web Workers


Ajax

1.使用XHR時，GET請求的數據會被緩存起來，如果需要多次請求同一數據的話，它會有助於提升性能(長度：2048字節)




編程實踐

1.避免雙抽求值


2.使用Objcet/Array直接量


3.避免重複工作
- 延遲加載(複寫現有函數)
- 條件預加載(三元表達式)

4.使用速度快的部分
- 位操作
- 原生方法




構建並部署高性能JavaScript應用


1.合併多個JavaScript文件，減少HTTP請求


2.預處理JavaScript文件


3.壓縮JavaScript


4.緩存JavaScript文件(添加校驗和)


5.使用CDN