1，CSS和JS在網頁中的放置順序是怎樣的？
網站加載的整個完整過程是：1、首先瀏覽器從服務器接收到html代碼，然后開始解析html。2、構件DOM樹（根據Html代碼自頂向下進行構件），并且在同時構件渲染樹。3、遇到js文件加載執行，將阻塞DOM樹的構建，遇到css文件，將阻塞渲染樹的構建。（script標簽中的defer屬性：構建DOM樹的過程和js文件的加載異步（并行）進行，但是Js文件執行需要在DOM樹構建完成之后。
script標簽中的async屬性：構建DOM樹、渲染樹的過程和js文件的加載和執行異步（并行）進行。）
從以上過程可以知道，當Js文件放在head中時，瀏覽器構建DOM樹的時候遇到Js文件加載會阻塞，也就是說，瀏覽器不會加載body中的標簽，一旦這個Js文件的數量和內容都比較大，那么就會造成剛剛遇到的情況，就不會給用戶一個十分良好的可視化回饋，而在前端開發中，給予用戶的可視化回饋是十分重要的。
綜上，script標簽最好放在</body>標簽的前面 ，因為放在所有body中的后面就不會出現網頁加載時出現空白的情況，可以持續的給用戶提供視覺反饋，同時在有些情況下，會降低錯誤的發生。
而css標簽應該放在<head></head>標簽之間，因為如果放在</body>標簽的前面，那么當DOM樹構建完成了，渲染樹才構建，那么當渲染樹構建完成，瀏覽器不得不在重新渲染整個頁面，這樣就造成了資源的浪費，效率不高。
2，解釋白屏和FOUC
白屏:
首先要了解一下chrome和IE瀏覽器的渲染機制。
1.解析HTML標簽構建DOM樹；
2.解析CSS構建CSSOM樹；
3.把這兩者組合成渲染樹，根據渲染樹進行布局，計算每個節點，再繪制到屏幕上。
如果把樣式放在文檔底部,瀏覽器會等HTML和CSS完全加載完成之后再繪制到屏幕上去，譬如我們打開某些國外的網站可能出現加載時間過長，頁面會出現白屏,而不是內容逐步展現。
FOUC:
如果把樣式放在底部,對于FireFox瀏覽器，會逐步加載無樣式的內容，等CSS加載完成之后突然展現樣式。
這是由于FireFox的渲染邏輯是解析HTML就會直接畫到頁面上，這時你會看到沒有樣式的內容，CSS再通過不斷的解析將頁面重繪一遍，也就是閃爍一下突然展現樣式，這就是FOUC。
3，async和defer的作用是什么？有什么區別
作用
defer：用于開啟新的線程下載腳本文件，并使腳本在文檔解析完成后執行。
async：新增屬性，用于異步下載腳本文件，下載完畢立即解釋執行代碼。
區別
一、<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
二、<script async src="script.js"></script>
有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
三、<script defer src="myscript.js"></script>
有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
4，簡述網頁的渲染機制
上圖為主流兩種主流內核的渲染主流程
雖然 Webkit 和 Gecko 使用的術語略有不同，但整體流程是基本相同的。
Gecko 將視覺格式化元素組成的樹稱為“框架樹”。每個元素都是一個框架。Webkit 使用的術語是“呈現樹”，它由“呈現對象”組成。對于元素的放置，Webkit 使用的術語是“布局”，而 Gecko 稱之為“重排”。對于連接 DOM 節點和可視化信息從而創建呈現樹的過程，Webkit 使用的術語是“附加”。有一個細微的非語義差別，就是 Gecko 在 HTML 與 DOM 樹之間還有一個稱為“內容槽”的層，用于生成 DOM 元素。
根據上圖，依次介紹每一步
Html、Style Sheets、Script加載
當我們的瀏覽器獲得html文件后，會自上而下的加載，并在加載過程中進行解析和渲染。 加載說的就是獲取資源文件的過程，如果在加載的過程中，遇到外部css文件和圖片，瀏覽器會另外發出一個請求，來獲取css文件和相應的圖片，這個請求是異步的，并不會影響html文件。 但是如果遇到javascript文件，html文件會掛起渲染的線程，等待javascript加載完畢后，html文件再繼續渲染。
為什么html需要等待javascript呢？因為javascript可能會修改DOM，導致后續的html資源白白加載，所以html必須等待javascript文件加載完畢后，再繼續渲染。這也就是為什么javascript文件要寫在底部body標簽前的原因。構造樹
html的渲染過程就是將html代碼按照深度優先遍歷來生成DOM樹。 css文件下載完后也會進行渲染，生成相應的CSSOM。 當所有的css文件下載完且所有的CSSOM構建結束后，就會和DOM一起生成Render TreeDOM: Document Object Model，瀏覽器將HTML解析成樹形的數據結構，簡稱DOMCSSOM: CSS Object Model，瀏覽器將CSS解析成樹形的數據結構，簡稱CSSOM。Render Tree: DOM和CSSOM合并后生成Render Tree，如下圖：
- layout和reflow
計算每個Frame（也就是每個Element）的位置，這又叫layout和reflow過程。
Repaint——屏幕的一部分要重畫，比如某個CSS的背景色變了。但是元素的幾何尺寸沒有變。
Reflow——意味著元件的幾何尺寸變了，我們需要重新驗證并計算Render Tree。是Render Tree的一部分或全部發生了變化。這就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的幾何尺寸發生了變化，需要重新布局，也就叫reflow）reflow 會從<html>這個root frame開始遞歸往下，依次計算所有的結點幾何尺寸和位置，在reflow過程中，可能會增加一些frame，比如一個文本字符串必需被包裝起來。
