標(biāo)簽：前端 讀書筆記

簡(jiǎn)介

《javascript高級(jí)程序設(shè)計(jì)》的作者寫的書，主要內(nèi)容就是從各方面入手提升JS程序的性能。

第一章 加載與執(zhí)行

• 無(wú)阻塞地加載JS代碼：腳本放到最后，defer屬性，動(dòng)態(tài)<script>標(biāo)簽。

第二章 數(shù)據(jù)存取

• 盡量使用字面量；
• 注意作用域鏈的深度，少進(jìn)行跨域訪問(wèn)；
• 經(jīng)常訪問(wèn)的變量存為局部變量。

第三章 DOM編程

• 避免重繪與重排：要注意訪問(wèn)某些屬性也會(huì)觸發(fā)重排：offsetXXX, scrollXXX, clientXXX;
• 最小化重繪與重排：將受影響的元素抽出來(lái)（display:none..）操作后再插入
• 動(dòng)畫使用絕對(duì)定位；
• 使用事件委托（多個(gè)元素共用一個(gè)事件回調(diào)）來(lái)減少回調(diào)的數(shù)量；
• 注意getElementByXXX獲取到的HTML集合，會(huì)消耗大量資源。

第四章 算法與流程控制

• 改善循環(huán)：減少每次循環(huán)的工作量（使用負(fù)循環(huán)）;減少循環(huán)次數(shù)（例如達(dá)夫設(shè)備）
• 用迭代代替遞歸，因?yàn)闉g覽器可能有調(diào)用棧限制；
• 使用函數(shù)緩存（Memoization），就是將曾經(jīng)輸入過(guò)的參數(shù)的結(jié)果緩存起來(lái)；

第五章 字符串與正則

沒看

第六章 快速響應(yīng)的用戶界面

• 將程序每次執(zhí)行的時(shí)間壓縮到100ms內(nèi)，以留出資源給瀏覽器UI線程
• 模擬多線程：可以通過(guò)setTimeout來(lái)將大任務(wù)分隔成各個(gè)小任務(wù)，以留出時(shí)間給UI線程
• Web Workers： W3C標(biāo)準(zhǔn)的多線程API

第七章 使用AJAX來(lái)提高JS程序性能

• 常規(guī)的XMLHttpRequest
• 動(dòng)態(tài)腳本注入: 動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并引用外部資源.

script.src = url; //該腳本下載完成后自動(dòng)運(yùn)行函數(shù)cb(data)
function cb(data){
 ...
}

• MXHR:將所有資源轉(zhuǎn)化合并成字符串，并用js根據(jù)mine-type來(lái)提取字符串中的資源
• beacons: 使用(new Image()).src = url + '?params=xxx'來(lái)向系統(tǒng)發(fā)送信息

第八章 編程實(shí)踐

• 避免使用 new Function(), eval()
• 避免重復(fù)工作：要先檢查兼容性的方法，可以在第一次檢查后就將檢查結(jié)果作為常量覆蓋掉檢查的部分，這樣就不用每次都檢查兼容性。
• 學(xué)習(xí)并適當(dāng)使用位操作
• 使用原生方法，例如Math

結(jié)語(yǔ)

以上只是摘錄了本書的一小部分，書中還有很多數(shù)據(jù)對(duì)比與作者的tips，建議閱讀。