1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- CSS:是在<head>中用
<link rel="stylesheet" href="">
- JS:在<body>標(biāo)簽底部
<script src="index.js"></script>
alert(1)
</script>```
###2.解釋白屏和FOUC
- 白屏
1.如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
2.如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
3.在加載 JavaScript 時(shí),會(huì)禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會(huì)導(dǎo)致白屏現(xiàn)象
- FOUC
對于firefox瀏覽器颠焦，如果CSS放置在底部霹肝，firebox會(huì)將html結(jié)構(gòu)先展示到頁面上歉井，然后再讀取CSS并對html結(jié)構(gòu)進(jìn)行渲染，對相關(guān)元素進(jìn)行渲染之后會(huì)刷新頁面，表現(xiàn)為html內(nèi)容無樣式內(nèi)容閃爍矛辕，隨著頁面的不斷刷新囤屹，樣式逐漸的展示出來熬甚。
###3.async和defer的作用是什么？有什么區(qū)別
`<script src= " script.js"></script>`
沒有 defer 或 async肋坚，瀏覽器會(huì)立即加載并執(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ā)之前完成呻澜。
defer:腳本延遲到文檔解析和顯示后執(zhí)行，有順序;
async:不保證順序;
###4.簡述網(wǎng)頁的渲染機(jī)制
1.解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
2.解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
3.把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
4.在渲染樹的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
5.把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
