CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的迁客？
- css樣式放在head中鳞陨。
- js放置在body標(biāo)簽內(nèi)的最后跪者，script標(biāo)簽內(nèi)玷或。外鏈用<script src=""></script>，內(nèi)部的用<script></script>
解釋白屏和FOUC
- 如果把樣式放在頂部,對(duì)于IE瀏覽器瓦呼、谷歌瀏覽器,在某些場(chǎng)景下(新窗口打開(kāi),刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)喂窟。如果使用@import
標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。 - FOUC無(wú)樣式內(nèi)容閃爍如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn)FOUC現(xiàn)象(逐步加載無(wú)樣式的內(nèi)容,等CSS加載后頁(yè)面突然展現(xiàn)樣式).對(duì)于Firefox會(huì)一直表現(xiàn)出 FOUC央串。
將JS放在頂部：
①腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)
②腳本會(huì)阻塞其后組件的下載
對(duì)于圖片和CSS, 在加載時(shí)會(huì)并發(fā)加載(如一個(gè)域名下同時(shí)加載兩個(gè)文件). 但在加載JavaScript時(shí),會(huì)禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把JavaScript放入頁(yè)面頂部也會(huì)導(dǎo)致白屏現(xiàn)象磨澡。
async和defer的作用是什么？有什么區(qū)別
- 沒(méi)有 defer 或 async质和，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本稳摄，“立即”指的是在渲染該script標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素饲宿，讀到就加載并執(zhí)行厦酬。有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）瘫想。有 defer仗阅，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但script.js的執(zhí)行要在所有元素解析完成之后国夜，DOMContentLoaded事件觸發(fā)之前完成减噪。
- defer腳本延遲到文檔解析和顯示后執(zhí)行，有順序async
- 不保證順序
簡(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)
