1.CSS和JS在網(wǎng)頁(yè)中的放置順序
CSS需要放在head內(nèi)刻恭，一般用link標(biāo)簽引入外部樣式尸执，或者直接將CSS寫(xiě)在style標(biāo)簽內(nèi)峰伙；js一般放在body內(nèi)的最后新翎，用script標(biāo)簽包裹程帕。
2.白屏和FOUC現(xiàn)象
如果把樣式放在底部住练，對(duì)于IE瀏覽器，在某些場(chǎng)景下(新窗口打開(kāi)骆捧、刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)澎羞；
如果使用 @import 標(biāo)簽，即使 CSS 放入 link敛苇，并且放在頭部,也可能出現(xiàn)白屏妆绞。
對(duì)于圖片和CSS，在加載時(shí)會(huì)并發(fā)加載(如一個(gè)域名下同時(shí)加載兩個(gè)文件)枫攀。 但在加載 JavaScript 時(shí),會(huì)禁用并發(fā)括饶，并且阻止其他內(nèi)容的下載。 所以把 JavaScript 放入頁(yè)面頂部也會(huì)導(dǎo)致白屏現(xiàn)象来涨。
如果把樣式放在底部图焰，對(duì)于IE瀏覽器，在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL蹦掐，使用書(shū)簽進(jìn)入等)技羔，會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無(wú)樣式的內(nèi)容，等CSS加載后頁(yè)面突然展現(xiàn)樣式)卧抗。對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC藤滥。
3.async和defer的作用和區(qū)別
1.沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本社裆，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前拙绊，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行泳秀。
2.有 async标沪，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
3.有 defer嗜傅，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步）金句，但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成吕嘀。
區(qū)別：defer:腳本延遲到文檔解析和顯示后執(zhí)行违寞，有順序；
async:不保證順序币他。
4.網(wǎng)頁(yè)的渲染機(jī)制
當(dāng)瀏覽器獲得html文件后坞靶，會(huì)自上而下的加載憔狞，并在加載過(guò)程中進(jìn)行解析和渲染蝴悉。
加載說(shuō)的就是獲取資源文件的過(guò)程，如果在加載的過(guò)程中瘾敢，遇到外部css文件和圖片拍冠，瀏覽器會(huì)另外發(fā)出一個(gè)請(qǐng)求尿这，來(lái)獲取css文件和相應(yīng)的圖片，這個(gè)請(qǐng)求是異步的庆杜，并不會(huì)影響html文件射众。
但是如果遇到JavaScript文件，html文件會(huì)掛起渲染的線程晃财，等待javascript加載完畢后叨橱，html文件再繼續(xù)渲染。因?yàn)閖avascript可能會(huì)修改DOM断盛，導(dǎo)致后續(xù)的html資源白白加載罗洗，所以html必須等待javascript文件加載完畢后，再繼續(xù)渲染钢猛。這就是javascript文件要寫(xiě)在底部body標(biāo)簽前的原因伙菜。
html的渲染過(guò)程就是將html代碼按照深度優(yōu)先遍歷來(lái)生成DOM樹(shù)。
css文件下載完后也會(huì)進(jìn)行渲染命迈，生成相應(yīng)的CSSOM贩绕。
當(dāng)所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后，就會(huì)和DOM一起生成Render Tree壶愤。
接下來(lái)淑倾，瀏覽器就會(huì)進(jìn)入Layout環(huán)節(jié)，將所有的節(jié)點(diǎn)位置計(jì)算出來(lái)公你。
最后踊淳，通過(guò)Painting環(huán)節(jié)將所有的節(jié)點(diǎn)內(nèi)容呈現(xiàn)到屏幕上。
