1.CSS和JS在網頁中的放置順序是怎樣的？
- css是使用link標簽將樣式進行引入并放置在header標簽內。
- js是使用script標簽進行引入，放置位置一般在
body底部</body>閉合標簽之前。這是因為頁面渲染時，js放在頁面頂部，會阻塞后面內容的呈現以及其后組件下載，會造成白屏等問題。
2.解釋白屏和FOUC
1.白屏
- 如果把樣式放在底部，對于IE瀏覽器，在某些場景下(新窗口打開,刷新等)頁面會出現白屏，而不是內容逐步展現。
- 如果使用 @import 標簽,即使 CSS 放入 link, 并且放在頭部，也可能出現白屏。
- 對于圖片和CSS，在加載時會并發加載(如一個域名下同時加載兩個文件)。但在加載 JavaScript 時，會禁用并發,并且阻止其他內容的下載。 所以把 JavaScript 放入頁面頂部也會導致白屏現象。
白屏不是bug，而是瀏覽器渲染機制造成的，即瀏覽器在渲染的時候請求時間過長導致的.
2.FOUC(Flash of Unstyled Content) 無樣式內容閃爍
- 如果把樣式放在底部，對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等)，會出現 FOUC 現象(逐步加載無樣式的內容，等CSS加載后頁面突然展現樣式)。對于 Firefox 會一直表現出 FOUC 。FireFox每加載一次dom樹就會重繪一次網頁樣式,一直到所有內容完成為止。
- 如果有多個樣式表， 放在HTML的不同位置，這時有的瀏覽器可能會在所有樣式都加載完后再進行樣式的渲染， 此時也可能會出現FOUC。
為了避免FOUC發生一般我們用link標簽把css放在頂部header內.
3.sync和defer的作用是什么？有什么區別？
- 作用
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
-
async使加載和渲染后續文檔元素的過程與 script.js 的加載與執行并行進行（異步）
<script async src="script.js"></script> -
defer加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
<script defer src="script.js"></script>
- 區別
defer:腳本延遲到文檔解析和顯示后執行，有順序
async:不保證順序
4.簡述網頁的渲染機制
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節點的幾何結構
- 把每個節點繪制到屏幕上 (painting)
參考
- 高性能網站建設指南, Steve Sounders
- Render-tree construction, layout, and paint
- How browsers work
