1. CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的？
- CSS放置在HTML的head標(biāo)簽里。
- JS放在網(wǎng)頁(yè)的底部body關(guān)閉標(biāo)簽前。
2. 解釋白屏和FOUC
- 白屏：由于某些場(chǎng)景，如js加載緩慢或無法加載，或css樣式表放在頁(yè)面文件底部等特殊情況，在瀏覽器新開窗口或刷新時(shí)會(huì)出現(xiàn)白屏。
- FOUC（Flash of Unstyled Content）無樣式內(nèi)容閃爍：是指css樣式最后才加載出來渲染html。因此會(huì)先看到混亂的網(wǎng)頁(yè)，再看到正常的頁(yè)面。
原因：因?yàn)闉g覽器對(duì)HTML元素和CSS的解析渲染需要一個(gè)過程，構(gòu)建好DOM樹和cssom樹之后再組合成渲染樹（render tree），如果在構(gòu)建DOM樹和cssom樹時(shí)，請(qǐng)求html元素或css樣式表出現(xiàn)阻塞，將無法組合成渲染樹即無法將內(nèi)容繪制到屏幕上，此是部分瀏覽器會(huì)將頁(yè)面以白屏的方式展示。而FireFox等部分瀏覽器的渲染機(jī)制不同會(huì)將已經(jīng)請(qǐng)求成功的元素和樣式組成渲染樹，先繪制已加載的部分，如果后續(xù)有新加載的元素和樣式將再刷新渲染樹，繼而刷新頁(yè)面內(nèi)容，直到完全加載，即FOUC（無樣式內(nèi)容閃爍）。
3. async和defer的作用是什么？有什么區(qū)別
- 加載JS時(shí)有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
- 加載JS時(shí)有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，OMContentLoaded 事件觸發(fā)之前完成。
- 區(qū)別在于defer:腳本延遲到文檔解析和顯示后執(zhí)行，有順序；async:不保證順序。
4. 簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
- 首先解析html標(biāo)簽形成，DOM樹
- 然后解析css，構(gòu)建cssom樹
- 把DOM和CSSOM組合成渲染樹（render tree）。
- 在渲染樹的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)。
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上（painting）。
