CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的？
css樣式放在head標(biāo)簽中，通常引入方式為
<link href="index.css" rel="stylesheet" type="text/css"></link>
js放置在body標(biāo)簽的最后塑荒，因?yàn)橄鄬?duì)于其他的圖片或者css來(lái)說(shuō)忽妒，js是阻塞的玩裙，所以等頁(yè)面的渲染樹(shù)成行后引入js就可以避免白屏現(xiàn)象，通常外鏈引入方式為
<script src="index.js"></script>
解釋白屏和FOUC
瀏覽器的白屏與無(wú)樣式內(nèi)容閃爍（Flash of unstyled content）,是由于瀏覽器加載與顯示頁(yè)面方式不同造成的：
IE會(huì)出現(xiàn)白屏現(xiàn)象段直，這是因?yàn)槠涞却?yè)面組件包括樣式表全部加載完成后才呈現(xiàn)整個(gè)頁(yè)面吃溅。若樣式表放在頁(yè)面底部，將會(huì)出現(xiàn)白屏
FireFox 當(dāng)把樣式表放在頁(yè)面底部時(shí)鸯檬，會(huì)遇到FOUC問(wèn)題决侈，因?yàn)镕F為了用戶(hù)體驗(yàn)，對(duì)所有都是對(duì)頁(yè)面中的組件逐步呈現(xiàn)喧务。
此外赖歌，引入樣式表時(shí)，有兩種方式：link和@import
link:<link rel = "stylesheet" href = "styles1.css">
@import:
<style type = "text/css"> @import url("styles1.css"); @import url("styles2.css"); ... ... </style>
一個(gè)style塊可以包含多個(gè)@import規(guī)則功茴，但@import規(guī)則必須放在所有其他規(guī)則之前庐冯。
使用@import規(guī)則需要注意的是：即便把@import規(guī)則放在文檔的head標(biāo)簽中，可能導(dǎo)致頁(yè)面組件下載時(shí)的無(wú)序性坎穿，進(jìn)而導(dǎo)致白屏（對(duì)于IE）和FOUC(對(duì)于FF)問(wèn)題的產(chǎn)生肄扎。
async和defer的作用是什么？有什么區(qū)別
-
<script src="script.js"></script>
沒(méi)有 defer 或 async時(shí)，瀏覽器從上到下解析HTML文件犯祠，當(dāng)解析到 標(biāo)簽的時(shí)候會(huì)立即下載腳本并執(zhí)行旭等，只有當(dāng)加載執(zhí)行腳本之后瀏覽器才能繼續(xù)解析 標(biāo)簽之后的文檔內(nèi)容，而async和defer屬性就是改變這種加載方式的作用. -
<script async src="script.js"></script>
有async衡载，表示應(yīng)該立即下載腳本搔耕，不影響頁(yè)面其他操作諸如其他腳本的下載， async屬性會(huì)使加載和渲染文檔元素的過(guò)程和JS腳本加載和執(zhí)行并行進(jìn)行（即異步）痰娱。 async不保證按照指定順序執(zhí)行JS腳本弃榨，第二個(gè)JS可能會(huì)比第一個(gè)JS文件先執(zhí)行。所以多個(gè)JS文件若設(shè)置此屬性應(yīng)避免依賴(lài)梨睁。 -
<script defer src="script.js"></script>
有defer鲸睛，表示腳本可以延遲到文檔完全被解析之后再執(zhí)行。IE7及更早版本對(duì)嵌入腳本也支持這個(gè)屬性坡贺。defer 腳本延遲到文檔完全解析渲染后按照順序執(zhí)行官辈。
簡(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）隔节。
