1.CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的呀闻？
css一般放在<head>標(biāo)簽之間拇惋，用<link>標(biāo)簽引入。
JS一般放在<body>標(biāo)簽的最后陶舞，用<script src="index.js"></script>引入外部JS文件嗽测，也可直接將代碼寫(xiě)在<script>標(biāo)簽中。這樣的放置位置可以讓頁(yè)面的內(nèi)容與樣式先于JS加載肿孵，避免出現(xiàn)白屏與FOUC唠粥。
2.解釋白屏和FOUC。
- 白屏
如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開(kāi),刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)停做。
如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏晤愧。 - FOUC
如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書(shū)簽進(jìn)入等),會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無(wú)樣式的內(nèi)容,等CSS加載后頁(yè)面突然展現(xiàn)樣式).對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC 。
3.async和defer的作用是什么蛉腌？有什么區(qū)別官份。
- async
只適用于加載外部腳本文件只厘，目的是不讓頁(yè)面等待腳本的下載，從而異步加載頁(yè)面其他內(nèi)容舅巷。但不保證執(zhí)行腳本的先后順序羔味。 - defer
只適用于加載外部腳本文件，會(huì)異步加載腳本和頁(yè)面其他內(nèi)容钠右，但會(huì)將腳本延遲到整個(gè)頁(yè)面都解析完畢后執(zhí)行赋元。 - 區(qū)別
defer會(huì)保證腳本按原有順序執(zhí)行，但async不保證執(zhí)行順序飒房。
4.簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹(shù)
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹(shù)
- 把 DOM 和 CSSOM 組合成 渲染樹(shù) (render tree)
- 在渲染樹(shù)的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)
