CSS和JS在網(wǎng)頁中的放置順序是怎樣的
CSS通過link標簽引入，放置在<head>標簽內(nèi)。
JS放置在頁面底部，通過<script>標簽引入，放置在body的閉合標簽之前。
解釋白屏和FOUC
- 白屏：
對于chrome、IE等瀏覽器，頁面渲染需要等到HTML頁面DOM樹和CSS的CSSOM樹構建完畢后，兩者結合形成render tree后，才對頁面進行渲染繪制。
當CSS文件放于頁面底部，會影響CSS的加載時間，因此在CSS沒有全部加載并形成render tree之前，頁面都處于空白狀態(tài)，會導致白屏；如果使用@import標簽，即使CSS放于頭部，也可能出現(xiàn)白屏現(xiàn)象。
當JavaScript文件放于頁面頭部時，JavaScript會禁用并發(fā)加載，阻塞JavaScript后面內(nèi)容的呈現(xiàn)及后面組件的下載，等到JavaScript文件全部加載完成后才會繼續(xù)執(zhí)行之后的代碼，因此JavaScript文件放于頭部也會導致頁面白屏現(xiàn)象。 - FOUC：
對于Firefox瀏覽器，DOM樹的構建與CSS的渲染時同步進行的。所以當CSS樣式置于頁面底部時，首先瀏覽器會對HTML的元素進行展示，當CSS全部加載完成后對樣式進行修改，出現(xiàn)FOUS現(xiàn)象。
如果把CSS樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),也會出現(xiàn) FOUC 現(xiàn)象。
async和defer的作用是什么？有什么區(qū)別
async和defer是異步加載腳本的的屬性。
<script async src="script.js"></script>
加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）。同時出現(xiàn)幾個具有async屬性的js文件，async屬性不保證按照它們的先后順序執(zhí)行。
<script deferc src="script.js"></script>
加載script.js文件后面的文檔元素過程將和script.js的加載異步進行，但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
簡述網(wǎng)頁的渲染機制
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節(jié)點的幾何結構
- 把每個節(jié)點繪制到屏幕上 (painting)
