CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- CSS一般放置在head標簽內，要是頁面在無CSS渲染下先加載HTML的話將會面目全非，樣式先行的話在加載HTML內容時可以同時渲染樣式，避免FOUC。
- JS一般放置在</body>標簽之前、body標簽中html內容的后面，這是為了提高頁面渲染的速度效率。瀏覽器在加載<script>元素內部的JS代碼將被從上至下依次解釋，解釋器對<script>元素內部所有代碼求值完畢之前，會阻塞其他資源的加載，頁面的其余內容都不會被瀏覽器加載顯示，如果放置在前面其他位置，會對頁面內容的加載速度產生影響。
解釋白屏和FOUC
當把CSS樣式放在底部或者使用@import方式引入樣式、或將JS放在頭部造成其他內容阻塞加載時：
- 例如chrome,他的加載和渲染機制是等頭部的JS和底部的CSS全部加載解析完后再渲染展示頁面,而這個等待的時間就為白屏。
- 例如Firefox,他會在CSS未加載前先展現(xiàn)頁面,等css加載后再重繪一次,這就造成了FOUC (無樣式內容閃爍)。
所以為了避免這些問題,最好使用link標簽將CSS樣式表放在文檔的head中，將JS放置在</body>標簽之前、body標簽中html內容的后面。
async和defer的作用是什么？有什么區(qū)別
- 沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
- async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步），但是不保證順序
- defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成，即有順序
簡述網(wǎng)頁的渲染機制
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節(jié)點的幾何結構
- 把每個節(jié)點繪制到屏幕上 (painting)
