1. CSS和JS在網(wǎng)頁中的放置順序是怎樣的抒痒？
- CSS放置在HTML的head標簽里幌绍。
- JS放在網(wǎng)頁的底部body關閉標簽前。
2. 解釋白屏和FOUC
- 白屏：由于某些場景故响，如js加載緩慢或無法加載傀广，或css樣式表放在頁面文件底部等特殊情況，在瀏覽器新開窗口或刷新時會出現(xiàn)白屏彩届。
- FOUC（Flash of Unstyled Content）無樣式內(nèi)容閃爍：是指css樣式最后才加載出來渲染html伪冰。因此會先看到混亂的網(wǎng)頁，再看到正常的頁面樟蠕。
原因：因為瀏覽器對HTML元素和CSS的解析渲染需要一個過程贮聂，構建好DOM樹和cssom樹之后再組合成渲染樹（render tree），如果在構建DOM樹和cssom樹時寨辩，請求html元素或css樣式表出現(xiàn)阻塞吓懈，將無法組合成渲染樹即無法將內(nèi)容繪制到屏幕上，此是部分瀏覽器會將頁面以白屏的方式展示靡狞。而FireFox等部分瀏覽器的渲染機制不同會將已經(jīng)請求成功的元素和樣式組成渲染樹耻警，先繪制已加載的部分，如果后續(xù)有新加載的元素和樣式將再刷新渲染樹甸怕，繼而刷新頁面內(nèi)容甘穿，直到完全加載，即FOUC（無樣式內(nèi)容閃爍）梢杭。
3. async和defer的作用是什么温兼？有什么區(qū)別
- 加載JS時有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）武契。
- 加載JS時有 defer妨托，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后吝羞，OMContentLoaded 事件觸發(fā)之前完成兰伤。
- 區(qū)別在于defer:腳本延遲到文檔解析和顯示后執(zhí)行，有順序钧排；async:不保證順序敦腔。
4. 簡述網(wǎng)頁的渲染機制
- 首先解析html標簽形成，DOM樹
- 然后解析css恨溜，構建cssom樹
- 把DOM和CSSOM組合成渲染樹（render tree）符衔。
- 在渲染樹的基礎上進行布局找前，計算每個節(jié)點的幾何結構。
- 把每個節(jié)點繪制到屏幕上（painting）判族。
