1.CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的凰荚？
css樣式放在head中。
js放置在body標(biāo)簽內(nèi)的最后叽讳，script標(biāo)簽內(nèi)捣炬。外鏈用<script src=""></script>，內(nèi)部的用<script></script>绽榛。
2.解釋白屏和FOUC
白屏：如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開(kāi),刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)湿酸。
如果使用@import標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
FOUC：FOUC (Flash of Unstyled Content) 無(wú)樣式內(nèi)容閃爍灭美。如果把樣式放在底部,對(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)樣式)推溃。對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC 。
3.async和defer的作用是什么届腐？有什么區(qū)別
<script async src="script.js"></script>
有 async铁坎，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）蜂奸。
<script defer src="script.js"></script>
有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步）硬萍，但 script.js 的執(zhí)行要在所有元素解析完成之后扩所，DOMContentLoaded 事件觸發(fā)之前完成。
區(qū)別：defer:腳本延遲到文檔解析和顯示后執(zhí)行朴乖，有順序祖屏；
async:不保證順序。
4.簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
瀏覽器先解析html文件买羞，構(gòu)建DOM樹(shù)袁勺；
然后解析CSS文件，構(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）钝荡。
