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