CSS和JS在網頁中的放置順序是怎樣的？
- 由于瀏覽器渲染機制，Render Tree是由DOM樹和CSSOM樹組合成的，html頁面需要等到CSS解析完后才能完成渲染，所以CSS應放在head標簽內，優先下載解析，以避免頁面元素由于樣式缺失造成瞬間的白頁或者給用戶閃爍感為
- js是使用script標簽在body的閉合標簽之前進行引入，瀏覽器需要一個穩定的dom樹結構，瀏覽器為了防止出現js修改dom樹，需要重新構建dom樹的情況，所以就會阻塞其他的下載和呈現，出現白屏
解釋白屏和FOUC
白屏
- 如果把樣式放在底部，由于html頁面需要等到CSS解析完后才能完成渲染，故頁面會出現白屏,而不是內容逐步展現， 如果使用 @import 標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現白屏（@import加載完html，在引入外部文件）
- 對于圖片和CSS，在加載時會并發加載（如一個域名下同時加載兩個文件）。但在加載JavaScript 時，會禁用并發，并且阻止其他內容的下載。所以把JavaScript放入頁面頂部也會導致白屏現象
FOUC
FOUC（Flash of Unstyled Content）無樣式內容閃爍現象（逐步加載無樣式的內容，等CSS加載后頁面突然展現樣式）。由于瀏覽器渲染機制不同，css樣式放在底部,瀏覽器邊渲染邊逐步呈現組件，Firefox會一直表現出FOUC
async和defer的作用是什么？有什么區別
async和defer的作用（加載異步）
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該script標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。有 defer 或 async，加載續文檔元素的過程將和 script.js 的加載并行進行
async和defer的區別
有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但script.js的執行要在所有元素解析完成之后，DOMContentLoaded事件觸發之前完成。
defer腳本延遲到文檔解析和顯示后執行，有順序
async不保證腳本執行順序
簡述網頁的渲染機制
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節點的幾何結構
-
把每個節點繪制到屏幕上 (painting)
截圖06.png
Gecko調用視覺格式化元素的樹 - 框架樹。每個元素都是一個框架。Webkit使用術語“渲染樹”，它由“渲染對象”組成。
