1. CSS和JS在網頁中正確的放置順序

(1)css樣式一般是放在head中的，避免加載不了出現白屏 閃爍等問題。
(2)js一般情況下是放在頁面的body標簽中的最下方，最后加載，避免阻塞其他元素的渲染。
根據實際情況，應用 defer 和 async 使用，可放在頂部

2. 出現的白屏和FOUC問題

白屏就是在瀏覽器在打開渲染頁面時，由于樣式在底部， 沒有及時加載到，出現頁面空白一片，沒有內容展現的情況
白屏不是BUG,而是瀏覽器機制造成的一種現象
可能出現白屏的問題的情況：

1. css樣式放置在頁面的底部.
2. css文件使用@import 標簽，css又放入到link外鏈
3. jsf放在頁面的頂部，也會導致白屏

FOUC，First Of Unstyle Content ，叫做無樣式內容閃爍，
當將樣式放在底部，對于IE 瀏覽器在某些場景下（點擊鏈接、 輸入URL、使用書簽進入等），逐步加載無樣式的內容，等css樣式加載后頁面“突然”展現樣式
FIREFOX火狐 瀏覽器會經常出現 FOUC
當樣式放在頁面的底部后，瀏覽器會出現白屏和閃爍的問題
為了解決這些問題，所以將css樣式放在head中

3. async和defer的作用

正常情況下，在瀏覽器解析到js文件時， 禁用并發請求，js不能并發請求，并阻塞js腳本后的內容的加載和組件的下載。

作用 都是加載異步，解決了加載js時 對后面渲染的影響，
當前頁面加載，不會影響頁面的渲染。
js腳本與后續的元素內容 加載并發執行（異步）。

4. async defer 的區別：

• <script async src="index.js"></script>
• async 不保證js順序，所有的腳本并發加載完就會執行。當并發加載的其他js腳本，雖然位置在其之后，有可能先加載完也先執行了。
• <script defer src="index.js"></script>
  defer 保證js順序，js文件在所有元素解析完成后才加載執行

4. 簡述網頁的渲染機制

(1) 解析html標簽，構造DOM樹
(2) 解析css標簽，構造CSSOM樹
(3)DOM和CSSOM組成渲染樹Render Tree;
(4)在渲染樹的基礎上布局，計算出每個節點的幾何結構
(5)把每個節點繪制到屏幕上顯示

瀏覽器渲染的流程圖

詳細渲染過程
輸入URL，瀏覽器會向服務器發出請求，服務器響應瀏覽器返回對應的資源，瀏覽器的HTML解析器就會解析文件，創建DOM樹。當解析html標簽時，遇到了js或css元素，那么就先解析js或css元素，將控制權交給js或css解析器。解析完成后，HTML解析器再繼續解析下面的標簽，直到完成整顆DOM樹。
DOM樹與CSSOM樹合并，生成渲染樹
根據渲染樹計算出各個節點在屏幕中的位置，最后繪制到屏幕顯示。

注意區別的一點：
當解析CSS時，請求CSS，然后繼續解析下面的元素，而不需要等待request的返回，當request返回后，只需要把返回的內容放入到DOM樹中對應的位置就可以了。
但當引用了JS的時候，瀏覽器發送一個JS request就會一直等待該request的返回。

DOM \ CSSDOM \Render Tree圖