1. CSS和JS在網(wǎng)頁中的放置順序是怎樣的
- CSS的引入方式是在<head>中用
<link rel="stylesheet" href=""> - JS的引入方式為在<body>標(biāo)簽底部
<script src="index.js"></script>
<script>
alert(1)
</script>
2. 解釋白屏和FOUC
白屏
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
- 如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
- 在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致 白屏 現(xiàn)象
FOUC(Flash of Unstyled Content) 無樣式內(nèi)容閃爍
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點(diǎn)擊鏈接,輸入URL,使用書簽進(jìn)入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC .
3. async和defer的作用是什么？有什么區(qū)別
- 沒有defer或async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該script標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
-
<script async src="script.js"></script>
async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步） -
<script defer src="script.js"></script>
defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后DOMContentLoaded 事件觸發(fā)之前完成。
區(qū)別 - defer 腳本延遲到文檔解析和顯示后執(zhí)行，有順序
- async 不保證順序
4. 簡述網(wǎng)頁的渲染機(jī)制
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 把每個節(jié)點(diǎn)繪制到屏幕上 (painting)
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=en
