CSS和JS在網頁中的放置順序是怎樣的？
- CSS 一般通過外部文件的方式引入，使用 HTML
<link>標簽引入，放置到 HTML<head></head>標簽中，如果放置到頁面底部可能會造成白屏或者 FOUC 問題，詳情請看下文介紹； - JS 通過 HTML
<script>標簽引入，放置到<body>閉合標簽之前，對其他的圖片或 CSS 的加載來說，JavaScript 的加載是阻塞的，所以等頁面的渲染樹生成后以后再引入 JavaScript 就可以避免白屏現(xiàn)象。
解釋白屏和FOUC
- 白屏問題
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內容逐步展現(xiàn)；
- 如果使用
@import標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏； - 加載 JavaScript 時,會禁用并發(fā),并且阻止其他內容的下載. 所以把 JavaScript 放入頁面頂部也會導致白屏現(xiàn)象；
- 白屏不是 BUG，而是瀏覽器渲染機制問題；
- 解決方案：1. 使用 link 標簽將樣式表放在頂部；2. 將 JavaScript 放置到
<body>閉合標簽之前或者在<script>標簽中使用async或defer，詳細信息請看下文。
- FOUC
- FOUC (Flash of Unstyled Content) 無樣式內容閃爍，如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC 。
async 和 defer的作用是什么？有什么區(qū)別
- 沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行；
- async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）；
- defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成；
- 區(qū)別： async 不保證順序執(zhí)行，在腳本加載完成后立即執(zhí)行；defer 在腳本加載完成后會等待頁面渲染完成后執(zhí)行。
簡述網頁的渲染機制
- 解析 HTML 標簽構建 DOM 樹；
- 解析 CSS 標簽構建 CSSOM 樹；
- 將 DOM 和 CSSOM 組合成渲染樹（read tree）；
- 在渲染樹的基礎上進行，計算出每個節(jié)點的幾何結構；
- 把每個節(jié)點繪制到屏幕上；
image.png
