1.CSS和JS在網頁中的放置順序是怎樣的？
根據瀏覽器渲染頁面順序的特點，為保證頁面加載的順暢，一般按如下方式放置：
- css使用link標簽置于head中，不使用@import；
- JS放置在</body>前，保證頁面加載結束（在JS不改動頁面內容的前提下）；
2.解釋白屏和FOUC
這兩種現象都是由于瀏覽器渲染頁面時，受到了阻塞或在等待造成的，根據不同瀏覽器渲染機制的不同，現象分為以下兩種，
- 白屏：瀏覽器頁面在加載時，出現白屏無內容的現象；
- FOUC：Flash of Unstyled Content，無樣式內容閃爍，是指在瀏覽器加載內容過程中，先出現沒有樣式的網頁內容，再展現出加載了樣式的網頁頁面；
chrome瀏覽器的加載和渲染機制，是等css全部加載解析完后再渲染展示頁面，這個等待時間就出現了白屏；
其他一些瀏覽器，例如Firefox,他會在css未加載前先展現頁面,等css加載后再重繪一次,這就造成了FOUC
造成以上兩種現象的原因有：
- css樣式放在底部，導致HTML加載完，還需要等待CSS的加載；
- css雖然放在頂部，但是使用@import，也可能加載等待，白屏；
- JavaScript 放入頁面頂部，造成后面頁面加載阻塞，也會出現白屏或FOUC
3.async和defer的作用是什么？有什么區別
async和defer都是調整JS腳本的加載順序，保證頁面加載的順暢和效果；
區別在于：
- defer指定了JS加載執行的固定時序，對腳本執行進行延遲，直到頁面加載為止；
- async一旦異步下載完成，就開始執行，.這意味著這些script 可能不會按它們出現在頁面中的順序來執行,如果你的腳本互相依賴并和執行順序相關,就有很大的可能出問題, 例如變量或者函數未定義之類的錯誤
參考：
html5中script的async屬性
js之script屬性async與defer
4.簡述網頁的渲染機制
Paste_Image.png
如上圖所示，網頁渲染按照如下順序進行：
- 解析 HTML 標簽, 構建 DOM 樹；
- 載入html代碼過程中，發現<head>標簽內有一個<link>標簽引用外部CSS文件，發出CSS文件的請求，服務器返回這個CSS文件；
- 解析 CSS 標簽, 構建 CSSOM 樹；
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)；
- 在渲染樹的基礎上進行布局, 計算每個節點的幾何結構；
- 把每個節點繪制到屏幕上 (painting)
