| 我們常說性能永遠是第一需求，作為一個前端工程師，不管使用什么框架，不管從事什么類型的網站或應用開發，只要是項目被用戶使用，性能優化就永遠是你需要關注的問題。通常情況下，工程師們在深入了解前端技術的原理后，才能總結出性能優化的方案，需要多年經驗的積累。前端技術日新月異，優秀的性能優化方案在近幾年也層出不窮。本課程，我會帶你使用當今行業中非常前沿&專業的方案，解決前端性能優化問題。無論是為了解決工作中的實際問題，還是為了提升能力，這門課都能幫到你。5 m5 }’ y” G” F+ E% B5 {! W& t
〖課程目錄〗:
? ?? ???第1章 課程介紹9 D; V; C/ `* I, N6 d??m) P$ x
? ?? ???介紹這門課程要講的主要內容，講解方式、課程主線、以及能有的收獲。% w: _% Q. J* j. i
$ Q# y3 Z$ s” I6 `5 n
? ?? ?? ?1-1 課程導學 【課程背景，大綱速覽】 試看3 B4 M1 e! W’ x; a8 W; m9 i5 \: s) t
? ?? ???第2章 性能優化的指標和工具 (告別前端小白，成為大神的必經之路)
? ?? ???本章帶大家認識前端優化優化的重要性，了解當前的行業標準，流行的模型和測量工具，以及如何有針對性的進行性能的測量，解讀性能報告；還會學習到很多與性能相關的APIs的使用和實用的例子。
$ w0 B2 I5 D+ v! d% E
? ?? ?? ?2-1 為什么要進行Web性能優化【企業剛需】
? ?? ?? ?2-2 性能指標和優化目標【了解行業標準】# C# u& \; x* F. L8 |
? ?? ?? ?2-3 RAIL測量模型【黃金指南】; F1 d3 g1 n/ Q$ F, h* e# O
? ?? ?? ?2-4 使用WebPageTest評估Web網站性能【快捷好用的在線分析工具】
? ?? ?? ?2-5 使用LightHouse分析性能【一站式全面呈現性能指標】
? ?? ?? ?2-6 使用Chrome DevTools分析性能【最大法寶】
? ?? ?? ?2-7 常用的性能測量APIs【不可不知，打開精細化、自定義測量的大門】 試看0 ^3 q; S+ l( w7 t- g
? ?? ???第3章 渲染優化 (與瀏覽器為友，共進退)% e; j$ Y8 P, @) ?9 ~” i: v, U! S5 z
? ?? ???本章涵蓋現代瀏覽器的渲染原理，詳細解讀各個環節的作用和相互聯系，具體講解如何減少和避免回流和重繪，還有如何解決布局抖動的問題。: |/ L8 t! x* ]8 ^??i3 }
? ?? ?? ?3-1 瀏覽器渲染原理和關鍵渲染路徑【大廠前端面試必考】
? ?? ?? ?3-2 回流與重繪, 如何避免布局抖動; T4 h: U3 i0 s+ h7 R
? ?? ?? ?3-3 使用FastDom【防止布局抖動的利器】
? ?? ?? ?3-4 復合線程與圖層【深入渲染流水線的最后一站】” C/ y0 f- Q” y; U0 d) m+ [
? ?? ?? ?3-5 避免重繪【必學，加速頁面呈現】8 H1 ^) L’ W7 w- e. n/ G
? ?? ?? ?3-6 高頻事件防抖【解救頁面卡頓的秘藥】# g7 A9 z& j- I
? ?? ?? ?3-7 React時間調度實現【中高級前端需要了解的React調度原理】
? ?? ???第4章 代碼優化 (快來看看怎樣寫出真正高性能的代碼)
? ?? ???本章主要了解在代碼層面上可以進行的極致優化，涉及JavaScript，CSS和HTML的方方面面；較深的理論知識會做到深入淺出的講解，讓你了解如何配合JS引擎寫會可以被它有效優化的代碼。0 a9 B) n4 r9 u# e
3 ^/ Z; C3 j. M! V2 c: F$ H7 T
? ?? ?? ?4-1 JS開銷和如何縮短解析時間【為什么我的JS運行慢】
? ?? ?? ?4-2 配合V8 有效優化代碼【路走對了才能快】
? ?? ?? ?4-3 函數優化【必會】 試看9 s3 u’ |# |3 j??j* r??O7 O. b7 ~$ u
? ?? ?? ?4-4 對象優化【JS對象避坑地圖】* Q+ H4 S) {+ o
? ?? ?? ?4-5 HTML優化【必會】. [8 v$ L: G/ e
? ?? ?? ?4-6 CSS對性能的影響 【必會】
? ?? ???第5章 資源優化 (經典性能優化解決方案)‘ M. O# O/ I2 ~
? ?? ???本章學習如何對Web加載的資源進行有效的優化，不僅涉及壓縮的知識，還詳細講解一些針對圖片、字體類資源本身特性和使用方式不同可以帶來的性能提升。
? ?? ???第6章 構建優化(揭開webpack性能優化的內幕)
? ?? ???本章講解基于Webpack項目如何進行全方位的性能優化，讓你的企業級應用速度翻倍。以一個基本webpack工程開始，逐項講解如何進行配置，達到優化的效果。– ^& P6 K& v7 w, f8 R
# o. C5 c, m; `
? ?? ???第7章 傳輸加載優化（前沿技術解決高訪問量網站性能優化問題）4 q9 x9 d* A??R+ D
? ?? ???本章包括了前沿的網絡加載優化技術，從了解現代網絡上的問題和多樣的流行技術解決方案，給大型、高訪問量的網站帶來質的飛躍。0 s3 Y4 `2 E??T) C3 z7 ]# K
/ e! A* o3 B# Y3 l
? ?? ???第8章 前沿優化解決方案
? ?? ???本章在之前章節知識點的基礎上，補充了更多流行的Web性能優化技術。以例子為導向掌握用法。
2 ^4 [; y1 k1 C# x+ J4 g
? ?? ???第9章 性能優化問題面試指南【能胸有成竹的一步】
? ?? ???本章在之前章節的基礎之上，針對當前高頻的性能優化相關問題進行剖析，讓大家同時了解應對的方法，如何準確理解問題，抓住重點進行作答。$ |! {4 m6 J* @. m$ K
? ?? ???第10章 互聯網外企offer與立足之道【能不能出國，就看這一章了】% e” `) ]) L0 i- {
? ?? ???本章向大家介紹互聯網外企面試中常見流程和考察重點，同時帶來在外企生存的職業經驗分享。 |
