CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- CSS應(yīng)該放在網(wǎng)頁的<head>標(biāo)簽之內(nèi)
- JavaScript可以放在網(wǎng)頁的任何位置，但是由于javascript在加載的時候會禁止其他項加載，會導(dǎo)致阻塞后面內(nèi)容的呈現(xiàn)和后面組件的下載，所以，JS應(yīng)該body的最后面
解釋白屏和FOUC
FOUC:Flash Of Unstyled Content （文檔無樣式閃爍）。
對于IE瀏覽器，在某些場景下（點擊鏈接，輸入URL,使用書簽進入等），會出現(xiàn)FOUC（Flash of Unstyled Content）無樣式內(nèi)容閃爍現(xiàn)象（逐步加載無樣式的內(nèi)容，等CSS加載后頁面突然展現(xiàn)樣式）。對于Firefox會一直表現(xiàn)出FOUC-
白屏
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)* 頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
- 如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
因為腳本會阻塞后面內(nèi)容的呈現(xiàn)和其后組件的下載 - 對于圖片和CSS，在加載時會并發(fā)加載（如一個域名下同時加載兩個文件）。但在加載JavaScript 時，會禁用并發(fā)，并且阻止其他內(nèi)容的下載。所以把JavaScript放入頁面頂部也會導(dǎo)致白屏現(xiàn)象。
async和defer的作用是什么？有什么區(qū)別?
沒有defer或async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該script標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
- 有async，加載和渲染后續(xù)文檔元素的過程將和 該script的加載與執(zhí)行并行進行（異步）
- 有defer，加載后續(xù)文檔元素的過程將和 該script的加載并行進行（異步），但該script的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
簡述網(wǎng)頁的渲染機制
解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
把每個節(jié)點繪制到屏幕上 (painting)
