1.CSS和JS在網頁中的放置順序是怎樣的？
- CSS應該放在頂部，即
<head>標簽里，放在其他位置可能出現白屏或者-FOUC - JS應放在
<body>的最后，用<script src="index.js"></script>或<script> </script>引入- 原因：
- JS是用來操作頁面元素的，如果不放在最后，運行到JS時候，還沒有需要操作的內容，此時就會報錯。
- 腳本會阻塞后面內容的呈現，腳本會阻塞其后組件的下載
- 對于圖片和CSS, 在加載時會并發加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發,并且阻止其他內容的下載. 所以把 JavaScript 放入頁面頂部也會導致 白屏 現象.
- 原因：
2.解釋白屏和FOUC
白屏問題
瀏覽器的渲染需要先生成 DOM 和 CSSOM 樹，假如 CSS 獲取時間過長，就會導致 CSSOM 生成過久，瀏覽器只能等待，這時候就會出現長時間白屏，直到 DOM 和 CSSOM 構建完成。通常打開頁面都會短暫白屏，因為 DOM 和 CSSOM 構建需要時間。
- 原因
- CSS原因
- 如果把樣式放在底部,對于IE瀏覽器,由于DOM樹過大，瀏覽器解析HTML文件時間過長但卻沒有解析CSS文件，在某些場景下(新窗口打開,刷新等)頁面會出現白屏,而不是內容逐步展現
- 如果使用 @import 標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現白屏
- JS原因
- 腳本會阻塞后面內容的呈現及其后組件的下載。對于圖片和CSS, 在加載時會并發加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發,并且阻止其他內容的下載. 所以把 JavaScript 放入頁面頂部也會導致 白屏 現象.
- CSS原因
FOUC(Flash of Unstyled Content 無樣式內容閃爍)
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現 FOUC 現象(逐步加載無樣式的內容,等CSS加載后頁面突然展現樣式).對于 Firefox 會一直表現出 FOUC .
- Firefox瀏覽器經常出現FOUC現象與其渲染方式有關，Firefox在生成DOM后，將無樣式內容展現，等到 CSSOM 生成了，再重繪渲染，這樣就會看到一部分沒樣式的內容，然后再看到有樣式的。這種分塊分步的渲染。。
Firefox渲染機制
chrome渲染機制
3. async和defer的作用是什么？有什么區別
-
作用是加載異步
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
- async
- 加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
- defer
- 加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
- 區別
- defer:腳本延遲到文檔解析和顯示后執行，有順序
- async:不保證順序
參考:defer和async區別
4.簡述網頁的渲染機制
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節點的幾何結構
- 把每個節點繪制到屏幕上 (painting)
瀏覽器渲染機制.png
