一年前開始看這本書狸剃,然而書里的劃線筆記掐隐,現(xiàn)在基本想不起來,估計那時候是非常一知半解钞馁。有了一年多的項目經(jīng)驗后虑省,再次看這本書,并整理了些工作中遇到過或我認(rèn)為會有用的東西
加載和執(zhí)行
- 將腳本放在文檔底部加載僧凰。避免瀏覽器在下載解析和執(zhí)行js代碼時的等待探颈。
- 合并Js代碼。HTTP請求會帶來額外的性能開銷训措。內(nèi)嵌腳本也需要合并
- 無阻塞腳本伪节。文件的下載和執(zhí)行過程不會阻塞頁面其他進(jìn)程。
- 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)生消耗
- 修改元素會導(dǎo)致重繪和重排嚷兔。
- 合并HTML的innerHTML 比 DOM標(biāo)準(zhǔn)方法,通常性能更好
- 選擇器API榨崩。document.querrySelectorAll("#menu a") 更高效
瀏覽器下載完頁面中所有組件——HTML標(biāo)記谴垫、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)睡陪∷律可以枚舉對象的屬性名匿情。每次迭代會同時搜尋原型和實例屬性,應(yīng)避免使用信殊。
循環(huán)優(yōu)化
- 改善循環(huán)性能的最佳方式是減少每次迭代的運算量和減少循環(huán)迭代次數(shù)
- 通常來說炬称,對離散點來說,switch 比 if-else 快涡拘,判斷條件多時使用查找表
- 使用Memorization 來避免重復(fù)計算
快速響應(yīng)用戶界面
瀏覽器UI線程玲躯,大多數(shù)瀏覽器讓一個單線程共用于執(zhí)行JavaScript 和更新用戶界面
- 任何JavaScript 任務(wù)都不應(yīng)該執(zhí)行超過100ms, 過長會導(dǎo)致 UI 更新出現(xiàn)明顯延遲
- 定時器可以用來安排代碼延遲執(zhí)行,使得可以把長時間運行的腳本分解成一系列小任務(wù)
- Web Workers鳄乏,允許在UI線程外部執(zhí)行 JavaScript 代碼跷车,避免鎖定UI
Ajax
- 減少請求數(shù),可通過合并 Javascript 和 CSS 文件
- 縮短頁面加載時間橱野,頁面主要內(nèi)容加載后朽缴,使用 Ajax 獲取那些次要文件
- 緩存數(shù)據(jù),設(shè)置HTTP頭部的文件過期時間
編程實踐
- 使用數(shù)組或?qū)ο笾苯恿縿?chuàng)建
- 延遲加載水援,第一次加載時去檢測密强,之后用新函數(shù)覆蓋舊檢測函數(shù),避免重復(fù)檢測
- 條件預(yù)加載蜗元。腳本加載期間提前檢測
構(gòu)建并部署高性能的 JavaScript 應(yīng)用
- 合并或渤、預(yù)處理、壓縮 文件
- 緩存文件奕扣,當(dāng)應(yīng)用升級時薪鹦,用時間戳重命名,確保下載最新的
- 使用內(nèi)容分發(fā)網(wǎng)絡(luò)