CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- CSS應(yīng)該放在頁面頂部的head標(biāo)簽中解愤，由于Render Tree是由DOM樹和CSSOM樹組合成的，html頁面需要等到CSS解析完后才能完成渲染，所以CSS應(yīng)放在head標(biāo)簽內(nèi)佳晶，優(yōu)先下載解析。
- JS應(yīng)該放在body的底部佛吓，因為瀏覽器需要一個穩(wěn)定的dom樹結(jié)構(gòu)宵晚，而且js中很有可能有代碼直接改變了dom樹結(jié)構(gòu)，瀏覽器為了防止出現(xiàn)js修改dom樹维雇，需要重新構(gòu)建dom樹的情況淤刃，所以就會阻塞其他的下載和呈現(xiàn)。
解釋白屏和FOUC
白屏和無樣式內(nèi)容閃爍（FOUC）是由于不用瀏覽器加載顯示頁面的機(jī)制不同造成的吱型。當(dāng)把CSS樣式放在底部或者使用@import方式引入樣式時逸贾，一些瀏覽器例如chrome，它的加載和渲染機(jī)制是等CSS全部加載解析完成后再渲染展示頁面津滞，而這個等待的時間就是白屏铝侵。另外一些瀏覽器，如Firefox触徐，它會在CSS未加載前展示頁面咪鲜，等CSS加載后再重新繪一次，這就造成了FOUC（無樣式內(nèi)容閃爍）撞鹉。如果把JS文件放在頭部疟丙，腳本會阻塞后面內(nèi)容的展示和其后組件的下載，也會導(dǎo)致白屏現(xiàn)象鸟雏。
async和defer的作用是什么享郊？有什么區(qū)別
當(dāng)瀏覽器遇到script腳本的時候：
藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時間孝鹊，這倆都是針對腳本的炊琉；
綠色線代表 HTML 解析。
此圖告訴我們以下幾個要點：
- a. defer 和 async 在網(wǎng)絡(luò)讀扔只睢（下載）這塊兒是一樣的苔咪，都是異步的（相較于 HTML 解析）
- b. 它倆的差別在于腳本下載完之后何時執(zhí)行锰悼，顯然defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的c. 關(guān)于 defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的悼泌，這一點要善加利用
- c. async 則是一個亂序執(zhí)行的主松捉，反正對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何馆里，只要它加載完了就會立刻執(zhí)行e. 仔細(xì)想想隘世，async 對于應(yīng)用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執(zhí)行）鸠踪，不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的丙者，最典型的例子：Google Analytics
簡述網(wǎng)頁的渲染機(jī)制
- Create/Update DOM And request css/image/js：瀏覽器請求到HTML代碼后，在生成DOM的最開始階段（應(yīng)該是Bytes → characters后）营密，并行發(fā)起css械媒、圖片、js的請求评汰，無論他們是否在HEAD里纷捞。注意：發(fā)起js文件的下載request并不需要DOM處理那個script節(jié)點。比如：簡單的正則匹配就能做到這一點被去，雖然實際上并不一定是通過正則主儡。這是很多人在理解渲染機(jī)制的時候存在的誤區(qū)。
- Create/Update Render CSSOM：CSS文件下載完成惨缆，開始構(gòu)建CSSOM糜值。
- Create/Update Render Tree：所有CSS文件下載完成偎快，CSSOM構(gòu)建結(jié)束后惫霸，和DOM一起生成Render Tree。
- Layout：有了Render Tree美尸，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點捣染、各個節(jié)點的CSS定義以及他們的從屬關(guān)系骄瓣。下一步操作稱之為layout，顧名思義就是計算出每個節(jié)點在屏幕中的位置耍攘。
- Painting：Layout之后榕栏，瀏覽器已經(jīng)知道了哪些節(jié)點要顯示（which nodes are visible）、么個節(jié)點的CSS屬性是什么（their computed style）少漆、每個節(jié)點在屏幕中的位置是哪里（geometry）。
- Painting,按照算出來的規(guī)則硼被，通過顯卡示损，把內(nèi)容畫到屏幕上。以上五個步驟前3個步驟之所有使用 “Create/Update” 是因為DOM嚷硫、CSSOM检访、Render Tree都可能在第一次Painting后又被更新多次始鱼，比如JS修改了DOM或者CSS屬性。Layout 和 Painting 也會被重復(fù)執(zhí)行脆贵，除了DOM医清、CSSOM更新的原因外，圖片下載完成后也需要調(diào)用Layout 和 Painting來更新網(wǎng)頁卖氨。
