Q1：CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- CSS在網(wǎng)頁中放置在網(wǎng)頁的開頭<head>~</head>中筷厘；
- js在網(wǎng)頁中一般放置在網(wǎng)頁結(jié)尾力奋，推薦放置在<body>~</body>中，原因是JS腳本會阻塞后面的內(nèi)容呈現(xiàn)和阻塞其他組件的下載砸捏。
Q2：解釋白屏和FOUC
- 白屏：當(dāng)JS放置在網(wǎng)頁開頭時，js腳本會阻塞后面內(nèi)容的呈現(xiàn)隙赁，其他文檔無法加載垦藏；只有在JS代碼完全下載執(zhí)行完畢后才能顯示完整的文檔內(nèi)容，從而導(dǎo)致白屏問題的出現(xiàn)伞访。
- FOUC：因為瀏覽器的加載機(jī)制是先加載HTML文檔掂骏，再加載CSS的文檔內(nèi)容，最后再整合重新繪制HTML的文檔厚掷。若是將樣式放到底部弟灼，那么頁面就會出現(xiàn)FOUS現(xiàn)象。（FOUC：頁面首先出現(xiàn)無樣式的內(nèi)容冒黑，再CSS加載完成后田绑，突然顯示樣式內(nèi)容）
Q3. async和defer的作用是什么？有什么區(qū)別
- 再沒有async和defer時抡爹，瀏覽器會立即加載并執(zhí)行指定的腳本辛馆。sync和defer的作用就是當(dāng)腳本放置在<head></head>中讓腳本進(jìn)行異步加載，不會阻止頁面的渲染。
- async：在加載和渲染后續(xù)文檔元素時將和JS腳本的加載和執(zhí)行并行進(jìn)行昙篙，每一弍擁有async的JS腳本都會在他加載結(jié)束之后立即執(zhí)行，不等待后續(xù)的文檔诱咏，造成的后果是原先擁有次序的腳本苔可，順序?qū)⒈淮騺y。
- defer：在加載后續(xù)文檔元素的過程將和JS腳本文件的加載并行進(jìn)行袋狞，與async不同的是焚辅，其加載時的次序并不會被打亂。
Q4：簡述網(wǎng)頁的渲染機(jī)制
- 解析HTML標(biāo)簽苟鸯，簡歷DOM樹同蜻；
- 解析CSS標(biāo)簽，構(gòu)建CSSOM樹早处；
- 將DOM樹和CSSOM樹相結(jié)合構(gòu)成render樹湾蔓；
4.再根據(jù)render樹進(jìn)行布局，分別計算每個節(jié)點(diǎn)的結(jié)構(gòu)砌梆； - 再將每個節(jié)點(diǎn)都繪制到屏幕默责。
