CSS和JS在網頁中的放置順序是怎樣的？

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

解釋白屏和FOUC

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

async和defer的作用是什么？有什么區別

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

簡述網頁的渲染機制

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

6. 繪制（painting）：遍歷渲染樹繪制所有節點，為每一個節點適用對應的樣式，這一過程是通過UI后端模塊完成；

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

參考1
參考2