1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS代碼放在head中
JS代碼放在body標(biāo)簽的最后
2.解釋白屏和FOUC
白屏問題：
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏杏节。
出現(xiàn)白屏的原因是因?yàn)闉g覽器在渲染的過程中需要DOM樹和CSSOM樹組合成渲染樹，把CSS放在最后和使用@import標(biāo)簽引入CSS都會(huì)拖慢引入CSSOM樹的速度值依，在沒有獲取到CSSOM樹的時(shí)候?yàn)g覽器無法進(jìn)行渲染，就會(huì)導(dǎo)致白屏碟案。
可以通過在head中使用link標(biāo)簽解決
FOUC：
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會(huì)一直表現(xiàn)出 FOUC .
可以通過避免使用@import方法導(dǎo)入CSS鳞滨，且將樣式表鏈接都放在head來解決。
3.async和defer的作用是什么蟆淀？有什么區(qū)別
<script src="script.js"></script>
沒有 defer 或 async拯啦，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前熔任，也就是說不等待后續(xù)載入的文檔元素褒链，讀到就加載并執(zhí)行。
<script defer src="script.js"></script>
這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會(huì)影響頁面的構(gòu)造疑苔。也就是說甫匹，腳本會(huì)被延遲到整個(gè)頁面都解析完畢后再運(yùn)行。因此惦费，在<script>元素中設(shè)置defer屬性兵迅，相當(dāng)于告訴瀏覽器立即下載，但延遲執(zhí)行薪贫。
HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行恍箭，因此第一個(gè)延遲腳本會(huì)先于第二個(gè)延遲腳本執(zhí)行，而這兩個(gè)腳本會(huì)先于DOMContentLoaded事件執(zhí)行瞧省。在現(xiàn)實(shí)當(dāng)中扯夭，延遲腳本并不一定會(huì)按照順序執(zhí)行，也不一定會(huì)在DOMContentLoad時(shí)間觸發(fā)前執(zhí)行鞍匾，因此最好只包含一個(gè)延遲腳本交洗。
<script async src="script.js"></script>
這個(gè)屬性與defer類似，都用于改變處理腳本的行為橡淑。同樣與defer類似构拳，async只適用于外部腳本文件，并告訴瀏覽器立即下載文件梁棠。但與defer不同的是置森，標(biāo)記為async的腳本并不保證按照它們的先后順序執(zhí)行。
第二個(gè)腳本文件可能會(huì)在第一個(gè)腳本文件之前執(zhí)行掰茶。因此確保兩者之間互不依賴非常重要暇藏。指定async屬性的目的是不讓頁面等待兩個(gè)腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容濒蒋。
區(qū)別：
async:不保證順序
defer:腳本延遲到文檔解析和顯示后執(zhí)行盐碱，有順序
4.簡述網(wǎng)頁的渲染機(jī)制
- 解析HTML標(biāo)簽，構(gòu)建DOM樹沪伙。
- 解析CSS標(biāo)簽瓮顽，構(gòu)建CSSOM樹。
- 將DOM與CSSOM進(jìn)行組合構(gòu)建渲染樹 Render Tree围橡。
- 在渲染樹的基礎(chǔ)上進(jìn)行布局暖混，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)。
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)翁授。
