1.CSS和JS在網頁中的放置順序是怎樣的？
css使用link標簽放在head里面，JS放在body底部，在html內容后面
引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<link href="index.css" rel="stylesheet">
<style>
body{
background: red;
}
</style>
</head>
<body>
<p></p>
<script src="index.js"></script>
<script>
alert(1);
</script>
</body>
</html>
2.解釋白屏和FOUC
白屏問題：
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現白屏,而不是內容逐步展現。如果使用 @import 標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現白屏。
解決方案：
使用 link 標簽將樣式表放在頂部。
FOUC:
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現 FOUC 現象(逐步加載無樣式的內容,等CSS加載后頁面突然展現樣式).對于 Firefox 會一直表現出 FOUC .
原因：
1.腳本會阻塞后面內容的呈現
2.腳本會阻塞其后組件的下載
對于圖片和CSS, 在加載時會并發加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發,并且阻止其他內容的下載. 所以把 JavaScript 放入頁面頂部也會導致 白屏 現象.
解決方案：
將JS放在底部
3.async和defer的作用是什么？有什么區別
加載異步：
<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
<script async src="script.js"></script>
有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
<script defer src="script.js"></script>
有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
defer與async的區別
defer:腳本延遲到文檔解析和顯示后執行，有順序
async:不保證順序
4.簡述網頁的渲染機制
- 1.解析 HTML 標簽, 構建 DOM 樹
- 2.解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 4.在渲染樹的基礎上進行布局, 計算每個節點的幾何結構
- 5.把每個節點繪制到屏幕上 (painting)
