CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的
- CSS最好放置在head標(biāo)簽中，JS最好放置在body標(biāo)簽內(nèi)的最后面
解釋白屏和FOUC
- 白屏 如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開,刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)烁兰；如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏；JS加載會(huì)阻塞后面內(nèi)容的呈現(xiàn)抢呆，如果將js放到head標(biāo)簽中并且加載時(shí)間很長(zhǎng)，頁(yè)面也有可能出現(xiàn)白屏
- FOUC 逐步加載無(wú)樣式的內(nèi)容,等CSS加載后頁(yè)面突然展現(xiàn)樣式，對(duì)于Firefox猾普，渲染機(jī)制與chrome略有不同嫡良，因此會(huì)出現(xiàn)FOUC锰扶；把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn)FOUC現(xiàn)象
async和defer的作用是什么？有什么區(qū)別
- 沒(méi)有async和defer寝受，瀏覽器會(huì)立即加載并執(zhí)行js代碼坷牛，不會(huì)等文檔元素加載完。
- async js的加載和執(zhí)行與文檔元素加載與渲染并行執(zhí)行很澄。
- defer js的加載與文檔元素加載和渲染并行執(zhí)行京闰，但是會(huì)等到文檔元素解析完成之后才會(huì)執(zhí)行颜及。
- async不保證順序，defer腳本延遲到文檔解析和顯示后執(zhí)行蹂楣，有順序
簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
- 解析HTML標(biāo)簽俏站，生成DOM樹
- 解析CSS元素，生成CSSOM樹
- 把DOM和CSSOM組合成渲染樹
- 在渲染樹的基礎(chǔ)上進(jìn)行布局痊土，計(jì)算每個(gè)節(jié)點(diǎn)的幾何機(jī)構(gòu)
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上
