一年前開始看這本書，然而書里的劃線筆記，現(xiàn)在基本想不起來，估計那時候是非常一知半解。有了一年多的項目經(jīng)驗后，再次看這本書，并整理了些工作中遇到過或我認為會有用的東西
加載和執(zhí)行
- 將腳本放在文檔底部加載。避免瀏覽器在下載解析和執(zhí)行js代碼時的等待。
- 合并Js代碼。HTTP請求會帶來額外的性能開銷。內(nèi)嵌腳本也需要合并
- 無阻塞腳本。文件的下載和執(zhí)行過程不會阻塞頁面其他進程。
- defer屬性。 可與其他資源并行下載，待DOM加載完成后才會執(zhí)行。
- Async 屬性。支持包含src的元素，并行下載，下載完成后自動執(zhí)行。無法控制先后順序。
- 動態(tài)資源加載。文件在<script>元素被添加到頁面時開始下載。通常下載后會立即執(zhí)行。
推薦無阻塞模式
先添加動態(tài)加載所需的代碼，然后加載初始化頁面所需的剩余代碼。
function loadScript(url, fallback){
var script = document.createElement("script")
script.type = "text/javascript"
script.onload = function() {
callback()
}
}
數(shù)據(jù)存取
- 函數(shù)中讀取局部變量總是最快的，而讀取全局變量則是最快的，全局變量總是在執(zhí)行環(huán)境作用域鏈的頂端。
- 若某個跨作用域的值在函數(shù)中被引用了一次以上，則可以把它存儲到局部變量里。
閉包、作用域和內(nèi)存
函數(shù)的活動對象會隨著執(zhí)行環(huán)境一同銷毀。但引入閉包后，激活對象無法被銷毀。閉包比非閉包函數(shù)相比，需要更多點額內(nèi)存開銷。
嵌套成員
- 對象成員嵌套越深，讀取速度就會越慢，執(zhí)行l(wèi)ocation.href 比 window.location.href 要快
- 在函數(shù)中讀取同一個對象屬性，最佳做法是將屬性值保存到局部變量中。
DOM編程
- 兩個相互獨立的功能（如DOM和Js)只要通過接口彼此連接，就會產(chǎn)生消耗
- 修改元素會導致重繪和重排。
- 合并HTML的innerHTML 比 DOM標準方法，通常性能更好
- 選擇器API。document.querrySelectorAll("#menu a") 更高效
瀏覽器下載完頁面中所有組件——HTML標記、JavaScript、CSS、圖片——之后會生成兩個內(nèi)部數(shù)據(jù)結(jié)構(gòu)：
- DOM樹。表示頁面結(jié)構(gòu)
- 渲染樹。表示DOM節(jié)點如何顯示
DOM的變化影響元素的幾何屬性(寬、高), 瀏覽器需要重新計算幾何屬性，其他元素的幾何屬性和位置也會受到影響。
- 重排。頁面布局和幾何屬性改變時需要“重排”。瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造渲染樹。
- 重繪。完成重排后，瀏覽器會重新繪制受影響的部分到屏幕中。
減少重繪與重排
- 批量操作DOM
- 緩存布局信息。同函數(shù)局部緩存
- 讓元素脫離動畫流。使用絕對定位
- 事件委托。事件逐層并能被父元素捕獲，只需給外層父元素綁定一個處理器，即可處理其子元素上的所有事件。
算法和流程控制
代碼的組織結(jié)構(gòu)和解決具體問題的思路是影響代碼性能的主要因素
代碼執(zhí)行時間大部分消耗在循環(huán)中
循環(huán)類型
- For 循環(huán)。初始化、前測條件、循環(huán)體、后執(zhí)行代碼組成
- While 循環(huán)。前測條件和循環(huán)體構(gòu)成
- do-While 循環(huán)。循環(huán)體和后測條件構(gòu)成，至少發(fā)生一次
- for-in 循環(huán)?？梢悦杜e對象的屬性名。每次迭代會同時搜尋原型和實例屬性，應避免使用。
循環(huán)優(yōu)化
- 改善循環(huán)性能的最佳方式是減少每次迭代的運算量和減少循環(huán)迭代次數(shù)
- 通常來說，對離散點來說，switch 比 if-else 快，判斷條件多時使用查找表
- 使用Memorization 來避免重復計算
快速響應用戶界面
瀏覽器UI線程，大多數(shù)瀏覽器讓一個單線程共用于執(zhí)行JavaScript 和更新用戶界面
- 任何JavaScript 任務都不應該執(zhí)行超過100ms, 過長會導致 UI 更新出現(xiàn)明顯延遲
- 定時器可以用來安排代碼延遲執(zhí)行，使得可以把長時間運行的腳本分解成一系列小任務
- Web Workers，允許在UI線程外部執(zhí)行 JavaScript 代碼，避免鎖定UI
Ajax
- 減少請求數(shù)，可通過合并 Javascript 和 CSS 文件
- 縮短頁面加載時間，頁面主要內(nèi)容加載后，使用 Ajax 獲取那些次要文件
- 緩存數(shù)據(jù)，設(shè)置HTTP頭部的文件過期時間
編程實踐
- 使用數(shù)組或?qū)ο笾苯恿縿?chuàng)建
- 延遲加載，第一次加載時去檢測，之后用新函數(shù)覆蓋舊檢測函數(shù)，避免重復檢測
- 條件預加載。腳本加載期間提前檢測
構(gòu)建并部署高性能的 JavaScript 應用
- 合并、預處理、壓縮 文件
- 緩存文件，當應用升級時，用時間戳重命名，確保下載最新的
- 使用內(nèi)容分發(fā)網(wǎng)絡(luò)
