一箩言、網(wǎng)頁的渲染機(jī)制
1. CSSOM 和 DOM
先拋開 JS 不說逻杖，瀏覽器收到一張
html頁面時屯烦，會從上往下開始生成 DOM(Document Object Model) 樹凉当，如果中途發(fā)現(xiàn)有樣式如<link>引入或者<style>寫法茄靠，瀏覽器就會同步生成 CSSOM(CSS Object Model)峦萎。當(dāng) DOM 和 CSSOM 樹構(gòu)建好之后屡久，瀏覽器就會開始組合，生成渲染樹（Render-Tree）爱榔，最后就是渲染（繪制）被环，也就是展示給我們看的內(nèi)容。這里需要注意兩個詞：構(gòu)建和渲染详幽。這是兩個階段筛欢。
參考：渲染樹構(gòu)建、布局及繪制 | Web | Google-Developers
2. 阻塞渲染的 CSS
在上文我們提及到唇聘，渲染樹是在 CSSOM 和 DOM 構(gòu)建好之后開始的版姑，也就是說，CSS 和 HTML 是阻塞瀏覽器渲染的迟郎，因?yàn)槿绻煌暾x取 CSS 和 HTML 剥险，就無法構(gòu)建 CSSOM 和 DOM ，也就無法渲染宪肖。通常第一個請求就已經(jīng)下載好完整的 HTML 了表制，也就是說，構(gòu)建 DOM 是比 CSSOM 快的控乾，因?yàn)樵诮馕?HTML 時么介，才會知道并請求 CSS（CSS 通過
<link>和<style>引入），所以 CSS 會阻塞渲染樹的構(gòu)建阱持。這也是為什么通常把 CSS 文件的引入放在<head>夭拌，早引入，早生成 CSSOM衷咽「氡猓可以通過媒體查詢來跳過某些 CSS，不納入 CSSOM 的生成過程镶骗，加快 CSSOM 構(gòu)建桶现。
參考：阻塞渲染的 CSS | Web | Google-developers
3. JS 引入
我們知道 JS 是可以修改 DOM 節(jié)點(diǎn)和 DOM 樣式的，所以 JS 既阻塞 DOM鼎姊、CSSOM 的構(gòu)建骡和，也阻塞渲染樹的生成相赁。在解析 HTML 中發(fā)現(xiàn)引入了 JS 后，會下載完 JS 并執(zhí)行之后慰于，才會繼續(xù)解析钮科、構(gòu)建 HTML。因此我們常常把
<script>放到</body>前面婆赠，加快網(wǎng)頁生成速度绵脯。
參考：使用 JavaScript 添加交互 | Web | Google-developers
4. 完整的瀏覽器渲染過程
實(shí)際中，瀏覽器有自己的策略去優(yōu)化頁面的渲染速度休里，雖然默認(rèn)情況下蛆挫。 CSSOM 和 DOM 應(yīng)該先構(gòu)建再渲染，但假如網(wǎng)速太慢妙黍，瀏覽器有可能先渲染部分內(nèi)容悴侵。至于更復(fù)雜的優(yōu)化，這里就不討論了拭嫁。以下是完整的渲染過程：
二可免、CSS 和 JS 在網(wǎng)頁中的放置順序是怎樣的？
從上文我們知道噩凹，為了加快瀏覽器渲染巴元，我們應(yīng)該盡早獲取 CSS 和構(gòu)建 DOM，因此 CSS 通常放在 HTML 的
<head>里面驮宴，而 JS 放到</body>之前逮刨。
三、解釋白屏和 FOUC
1. 白屏
瀏覽器的渲染需要先生成 DOM 和 CSSOM 樹堵泽，假如 CSS 獲取時間過長（比如 CSS 在最后引入）修己，就會導(dǎo)致 CSSOM 生成過久，瀏覽器只能等待迎罗，這時候就會出現(xiàn)長時間白屏睬愤，直到 DOM 和 CSSOM 構(gòu)建完成。通常打開頁面都會短暫白屏纹安，因?yàn)?DOM 和 CSSOM 構(gòu)建需要時間尤辱。
2. FOUC (flash of unstyled content)
有些瀏覽器（如：FireFox）會先渲染 DOM ，等到 CSSOM 生成了厢岂，再重繪渲染光督，這樣就會看到一部分沒樣式的內(nèi)容，然后再看到有樣式的塔粒。這種分塊分步的渲染结借。
四、async 和 defer 的作用是什么卒茬？有什么區(qū)別
JS 在 HTML 中引入有三種<script> <script async> <script defer>船老。
1. 直接引入<script>
會阻塞瀏覽器渲染咖熟，必須等到 JS 下載并執(zhí)行才繼續(xù)解析 HTML
2. async 方式引入
JS 的下載和 HTML 的解析并行進(jìn)行，但只要 JS 下載完成柳畔，就馬上開始執(zhí)行馍管，同時阻塞 HTML 解析。
3. defer 方式引入
JS 的下載和 HTML 的解析并行進(jìn)行薪韩，但直到 HTML 解析結(jié)束咽斧，才執(zhí)行 JS。
如圖：
