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