學(xué)習(xí)目的：解決性能問題（如果不了解，就不知道什么情況下會對性能造成損傷）
前言： js 有js引擎，那么執(zhí)行渲染也會有渲染引擎(不同瀏覽器不同)
js，html，css文件都是字符串，計算機(jī)硬件不識別，網(wǎng)絡(luò)傳輸中傳輸?shù)膬?nèi)容都是0和1的字節(jié)數(shù)據(jù)
瀏覽器接收HTML文件轉(zhuǎn)化為DOM樹
字節(jié)數(shù)據(jù) =>字符串 =>標(biāo)記（token）=>Node =>DOM （Node根據(jù)聯(lián)系構(gòu)建DOM樹）
注：標(biāo)記是構(gòu)成代碼的最小單位
CSS文件轉(zhuǎn)換成CSSOM樹
字節(jié)數(shù)據(jù) => 字符串 =>token =>Node =>CSSOM
這個過程中----瀏覽器確定每個節(jié)點(diǎn)的樣式----------消耗資源
因為：樣式 我們可以自行設(shè)置節(jié)點(diǎn)，也可以通關(guān)繼承獲得------過程中瀏覽器遞歸CSSOM樹
方法一： 瀏覽器找到頁面中所有的span然后設(shè)置顏色
方法二：瀏覽器先找到所有的span標(biāo)簽，然后找到span標(biāo)簽上的a標(biāo)簽，最后找div標(biāo)簽--然后找到符合條件的span標(biāo)簽設(shè)置顏色-----------這個遞歸過程很復(fù)雜（因此我們要避免寫過于具體的CSS選擇器，對于HTML要盡量減少無意義標(biāo)簽，保證層級扁平）
生成渲染樹?
生成DOM和CSSOM后，將兩棵樹組合-----渲染樹（只會包函需要顯示的節(jié)點(diǎn)和這些節(jié)點(diǎn)的樣式，display：none的不會在渲染樹中顯示）
生成渲染樹------根據(jù)渲染樹進(jìn)行布局（回流）
為什么操作DOM慢
因為DOM屬于渲染引擎中的東西，而js屬于js引擎中的東西。我們用js操作DOM時--兩個線程之間的通信，DOM次數(shù)一多，兩個線程之間通信多了（操作DOM可能帶來重繪回流---導(dǎo)致性能變差）
面試：插入幾萬個DOM，如何實(shí)現(xiàn)頁面不卡頓
?解決：
方式一：分批次部分渲染DOM-------requestAnimationFrame方式循環(huán)插入DOM
方式二：虛擬滾動：原理：只渲染可視區(qū)域的內(nèi)容（非可視不渲染），滾動時實(shí)時渲染DOM
什么情況阻塞渲染
渲染的前提----生成DOM樹
因此HTML和CSS肯定會阻塞渲染----想要渲染快
1.降低一開始需要渲染的文件的大小，平且扁平層級，優(yōu)化選擇器
2.瀏覽器在解析到script標(biāo)簽時，會停止構(gòu)建DOM，完成后在繼續(xù)開始
也就是說：不應(yīng)該在首屏加載JS文件（把script標(biāo)簽放在body底部的原因）
通過給script添加 defer屬性---js文件并行下載----放在HTML解析完以后順序執(zhí)行（放在任意位置）
或者 async 屬性（沒有任何依賴時使用）-----表示JS文件下載和解析不阻塞渲染
重繪和回流：設(shè)置節(jié)點(diǎn)樣式時頻繁出現(xiàn)--影響性能
重繪：當(dāng)節(jié)點(diǎn)需要改變外觀但不會影響布局（eg：color改變叫重繪）
回流：布局或者幾何屬性改變
可能影響性能的幾種動作：
①window大小改變? ?②改變字體? ?③添加或刪除樣式? ?④ 文字改變 ⑤ 定位或者浮動
⑥ 盒模型
減少重繪回流
使用transfrom替代 top
使用visibility 替換display：none? -----前者只會引起重繪，后者引起回流（改變了布局）
不要把節(jié)點(diǎn)屬性值? 放在一循環(huán)里
for（let i =0; i<1000; i++){ console.log(document.querySelector(".test").style.offsetTop)}
獲取offsetTop會導(dǎo)致回流，因為要獲取正確的值
不要使用table布局-------可能一個小改動可能造成table重新布局
動畫實(shí)現(xiàn)的速度的選擇，動畫速度越快，回流次數(shù)越多，也可以選擇使用?requestAnimationFrame
CSS 選擇符從右往左匹配查找，避免節(jié)點(diǎn)層級過多
將頻繁重繪或者回流的節(jié)點(diǎn)設(shè)置為圖層，圖層能夠阻止該節(jié)點(diǎn)的渲染行為影響別的節(jié)點(diǎn)。比如對于?video?標(biāo)簽來說，瀏覽器會自動將該節(jié)點(diǎn)變?yōu)閳D層。
思考：
不考慮緩存和優(yōu)化網(wǎng)絡(luò)協(xié)議的前提下，考慮可以通過哪些方式來最快的渲染頁面，也就是常說的關(guān)鍵渲染路徑，
DOMContentLoaded?事件后，就會生成渲染樹，生成渲染樹就可以進(jìn)行渲染了，這一過程更大程度上和硬件有關(guān)系了。
提示如何加速
1.文件大小
2.script標(biāo)簽使用
3.HTML，CSS代碼考慮
4.需要下載的內(nèi)容是否需要首屏使用
