CSS和JS在網(wǎng)頁中的放置順序是怎樣的？

• CSS要放頭部head中的link標(biāo)簽內(nèi)引入。如果CSS放在后面可能頁面會(huì)出現(xiàn)閃跳的感覺，或者是白屏或者布局混亂樣式很丑直到CSS加載完成。
• js文件要放在<script></script>標(biāo)簽中，置于</body>最后 </html>之前，用于最后渲染。js是阻塞加載，會(huì)影響頁面加載的速度，如果js文件比較大，算法也比較復(fù)雜的話，影響更大。

解釋白屏和FOUC

產(chǎn)生白屏與FOUC（無樣式內(nèi)容閃爍）的根本原因是由于瀏覽器加載與顯示頁面方式不同造成的。
在不同瀏覽器對(duì)css和html的處理方式不同，一種（IE和Chrome）是等待css加載完成后，對(duì)html進(jìn)行渲染并顯示，另一種（Firefox）是先對(duì)html元素進(jìn)行展示，等css加載完成之后，再對(duì)html進(jìn)行樣式的設(shè)置；前者會(huì)造成白屏，后者則會(huì)造成FOUC。

async和defer的作用是什么？有什么區(qū)別

• 作用：是script標(biāo)簽的兩個(gè)屬性，腳本引用異步設(shè)置。用于在不阻塞頁面文檔解析的前提下，控制腳本的下載和執(zhí)行。
• 區(qū)別：
  • async <script async src="script.js"></script>
    有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
  • defer <script defer src="script.js"></script>
    有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

簡(jiǎn)述網(wǎng)頁的渲染機(jī)制

1. 構(gòu)建DOM樹(DOM tree)：從上到下解析HTML文檔生成DOM節(jié)點(diǎn)樹（DOM tree），也叫內(nèi)容樹（content tree）；
2. 構(gòu)建CSSOM(CSS Object Model)樹：加載解析樣式生成CSSOM樹；
3. 執(zhí)行JavaScript：加載并執(zhí)行JavaScript代碼（包括內(nèi)聯(lián)代碼或外聯(lián)JavaScript文件）；
4. 構(gòu)建渲染樹(render tree)：根據(jù)DOM樹和CSSOM樹,生成渲染樹(render tree)；
   渲染樹：按順序展示在屏幕上的一系列矩形，這些矩形帶有字體，顏色和尺寸等視覺屬性。
5. 布局（layout）：根據(jù)渲染樹將節(jié)點(diǎn)樹的每一個(gè)節(jié)點(diǎn)布局在屏幕上的正確位置；

6. 繪制（painting）：遍歷渲染樹繪制所有節(jié)點(diǎn)，為每一個(gè)節(jié)點(diǎn)適用對(duì)應(yīng)的樣式，這一過程是通過UI后端模塊完成；

   
   
   流程.png
   
   
   Webkit渲染引擎流程.png

參考1
參考2