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.如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開,刷新等)頁面會(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
對(duì)于firefox瀏覽器，如果CSS放置在底部，firebox會(huì)將html結(jié)構(gòu)先展示到頁面上，然后再讀取CSS并對(duì)html結(jié)構(gòu)進(jìn)行渲染，對(duì)相關(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.簡(jiǎn)述網(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)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
