《高性能的JavaScript》讀書筆記

一年前開始看這本書狸剃,然而書里的劃線筆記掐隐,現(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ò)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末惯豆,一起剝皮案震驚了整個濱河市池磁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌循帐,老刑警劉巖框仔,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異拄养,居然都是意外死亡离斩,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進(jìn)店門瘪匿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來跛梗,“玉大人,你說我怎么就攤上這事棋弥『顺ィ” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵顽染,是天一觀的道長漾岳。 經(jīng)常有香客問我轰绵,道長,這世上最難降的妖魔是什么尼荆? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任左腔,我火速辦了婚禮,結(jié)果婚禮上捅儒,老公的妹妹穿的比我還像新娘液样。我一直安慰自己,他們只是感情好巧还,可當(dāng)我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布鞭莽。 她就那樣靜靜地躺著,像睡著了一般麸祷。 火紅的嫁衣襯著肌膚如雪澎怒。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天摇锋,我揣著相機(jī)與錄音丹拯,去河邊找鬼。 笑死荸恕,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的死相。 我是一名探鬼主播融求,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼算撮!你這毒婦竟也來了生宛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤肮柜,失蹤者是張志新(化名)和其女友劉穎陷舅,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體审洞,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡莱睁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了芒澜。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片仰剿。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖痴晦,靈堂內(nèi)的尸體忽然破棺而出南吮,到底是詐尸還是另有隱情,我是刑警寧澤誊酌,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布部凑,位于F島的核電站露乏,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏涂邀。R本人自食惡果不足惜施无,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望必孤。 院中可真熱鬧猾骡,春花似錦、人聲如沸敷搪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赡勘。三九已至嫂便,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間闸与,已是汗流浹背毙替。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留践樱,地道東北人厂画。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像拷邢,于是被迫代替她去往敵國和親袱院。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 最近在閱讀這本Nicholas C.Zakas(javascript高級程序設(shè)計作者)寫的最佳實踐瞭稼、性能優(yōu)化類的書...
    undefinedR閱讀 2,159評論 0 30
  • 《高性能Javascript》閱讀摘要 加載和執(zhí)行 腳本位置 放在 中的javascript文件會阻塞頁面渲染:一...
    環(huán)零弦閱讀 268評論 0 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案忽洛? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評論 1 92
  • 高效的 JavaScript 本文轉(zhuǎn)載自:眾成翻譯譯者:邊城鏈接:http://www.zcfy.cc/artic...
    唯我樓蘭閱讀 308評論 0 0
  • 青春 是一場說走就走的旅行 亦或是 一場敢愛敢恨的劇目 從懵懂開始 以感傷結(jié)束 或深或淺的記憶 將靈魂孤獨安放
    不惑而歌閱讀 270評論 35 42