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