1.CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的？
html是一種結(jié)構(gòu)松散的文檔類型，理論上CSS與JS可以放在網(wǎng)頁(yè)的任何地方，但由于網(wǎng)頁(yè)的渲染機(jī)制，避免顯示（白屏、FOUC）與加載（阻塞）的問(wèn)題，則CSS與JS的放置有一定的規(guī)則：CSS通過(guò)link標(biāo)簽引入，放置在文檔頂部，<head>標(biāo)簽內(nèi)；而JavaScript放置在頁(yè)面底部，通過(guò)<script>標(biāo)簽引入，放置在body的閉合標(biāo)簽之前。
2.解釋白屏和FOUC
- 白屏：由于瀏覽器會(huì)將html文件解析為DOM樹(shù)，將CSS解析為CSSOM樹(shù)，然后將它們合并成render渲染樹(shù)，最后根據(jù)渲染樹(shù)繪制網(wǎng)頁(yè)，如果把樣式放在底部,瀏覽器將等到CSS加載完成時(shí)才繪制網(wǎng)頁(yè)，在某些場(chǎng)景下(新窗口打開(kāi),刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)；如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
- FOUC：如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書(shū)簽進(jìn)入等),會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無(wú)樣式的內(nèi)容,等CSS加載后頁(yè)面突然展現(xiàn)樣式).由于 Firefox 的渲染機(jī)制（會(huì)逐步加載無(wú)樣式內(nèi)容），F(xiàn)irefox會(huì)一直表現(xiàn)出 FOUC 。
3.async和defer的作用是什么？有什么區(qū)別
由于瀏覽器加載JS腳本時(shí)，會(huì)禁止并發(fā)阻塞后面內(nèi)容的呈現(xiàn)與其后組件的下載。于是有了async與defer來(lái)解決這個(gè)問(wèn)題。
- async: 在加載和執(zhí)行JS腳本時(shí)會(huì)與后續(xù)文件的加載和渲染并行進(jìn)行（異步）。
- defer：加載JS腳本后面的文檔元素過(guò)程將和JS腳本的加載異步進(jìn)行，但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
4.簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹(shù)
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹(shù)
- 把 DOM 和 CSSOM 組合成 渲染樹(shù) (render tree)
- 在渲染樹(shù)的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)
渲染流程圖
