CSS和JS在網(wǎng)頁中的放置順序是怎樣的？

• CSS一般放置在head標簽內(nèi)，要是頁面在無CSS渲染下先加載HTML的話將會面目全非，樣式先行的話在加載HTML內(nèi)容時可以同時渲染樣式，避免FOUC。
• JS一般放置在</body>標簽之前、body標簽中html內(nèi)容的后面，這是為了提高頁面渲染的速度效率。瀏覽器在加載<script>元素內(nèi)部的JS代碼將被從上至下依次解釋，解釋器對<script>元素內(nèi)部所有代碼求值完畢之前，會阻塞其他資源的加載，頁面的其余內(nèi)容都不會被瀏覽器加載顯示，如果放置在前面其他位置，會對頁面內(nèi)容的加載速度產(chǎn)生影響。

解釋白屏和FOUC

白屏:當把css代碼放在頁面底部或者使用@import引入樣式，再或者JS放在頁面頭部造成阻塞其他內(nèi)容加載時：一些瀏覽器比如chrome它的加載和渲染機制是等頭部的JS和底部的CSS全部加載并解析完渲染展示頁面，而這個等待的過程就為白屏。
FOUC(無樣式內(nèi)容閃爍):如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC現(xiàn)象。

async和defer的作用是什么？有什么區(qū)別

當瀏覽器碰到碰到script腳本時:

<script src="script.js"></script>

• 沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行

<script async src="script.js"></script>

• 有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）。

<script defer src="script.js"></script>

• 有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
  async與defer區(qū)別如下圖

  
  
  網(wǎng)上某位大神畫的
  
  

  圖中，藍色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時間，綠色線代表 HTML 解析。
  由此圖可得出以下幾點：

• defer 和 async 在網(wǎng)絡(luò)讀取（下載）這部分是一樣的，都是異步（相較于 HTML 解析），它們的差別在于腳本下載完之后何時執(zhí)行。
• defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的，而且它是按照加載順序執(zhí)行腳本的，這一點要善加利用；
• async 則是一個亂序執(zhí)行方式，對它來說腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會立刻執(zhí)行，async 對于應(yīng)用腳本的用處不大，因為它完全不考慮依賴（哪怕是最低級的順序執(zhí)行），不過它對于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來說卻是非常合適的。

網(wǎng)頁的渲染機制

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