1 . CSS和JS在網(wǎng)頁(yè)中的放置順序

• CSS要放頭部head中的link標(biāo)簽內(nèi)引入。
• js文件要放在<script></script>標(biāo)簽中，該標(biāo)簽可置于</body>之后</html>之前，用于最后渲染。

2 . 解釋白屏和FOUC

白屏

• 如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開(kāi),刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
• 如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
• 因?yàn)槟_本會(huì)阻塞后面內(nèi)容的呈現(xiàn)和其后組件的下載
  對(duì)于圖片和CSS，在加載時(shí)會(huì)并發(fā)加載（如一個(gè)域名下同時(shí)加載兩個(gè)文件）。但在加載JavaScript 時(shí)，會(huì)禁用并發(fā)，并且阻止其他內(nèi)容的下載。所以把JavaScript放入頁(yè)面頂部也會(huì)導(dǎo)致白屏現(xiàn)象。

FOUC（Flash of Unstyled Content）

• 對(duì)于IE瀏覽器，在某些場(chǎng)景下（點(diǎn)擊鏈接，輸入U(xiǎn)RL,使用書(shū)簽進(jìn)入等），會(huì)出現(xiàn)FOUC（Flash of Unstyled Content）無(wú)樣式內(nèi)容閃爍現(xiàn)象（逐步加載無(wú)樣式的內(nèi)容，等CSS加載后頁(yè)面突然展現(xiàn)樣式）。對(duì)于Firefox會(huì)一直表現(xiàn)出FOUC

3 . async和defer的作用和區(qū)別

1 .<script src="script.js"></script>
沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
2 . <script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
3 . <script defer src="myscript.js"></script>
有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

• 從實(shí)用角度來(lái)講，首先把所有腳本都放置到 </body> 之前是最佳實(shí)踐，因?yàn)閷?duì)于舊瀏覽器來(lái)說(shuō)這是唯一的優(yōu)化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。

藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時(shí)間，這倆都是針對(duì)腳本的；綠色線代表 HTML 解析。

• 由圖得知：
  1 . defer 和 async 在網(wǎng)絡(luò)讀?。ㄏ螺d）這部分是一樣的，都是異步的（相較于 HTML 解析）。
  2 . 兩者的差別在于腳本下載完之后何時(shí)執(zhí)行，顯然 defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的。
  3 . 關(guān)于 defer，由圖知它是按照加載順序執(zhí)行腳本的，這一點(diǎn)要善加利用。
  4 . async 則是亂序執(zhí)行，反正對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行。
  5 . async 對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來(lái)說(shuō)卻是非常合適的，最典型的例子：Google Analytics。

4 . 簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制

• 解析HTML標(biāo)簽，構(gòu)建DOM tree
• 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM tree
• 把 DOM 和 CSSOM 組合成 渲染樹(shù) (render tree)
• 在渲染樹(shù)的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
• 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)