1. CSS和JS在網頁中的放置順序是怎樣的？
- CSS應該放置在頂部，最好在head中引入；
如果CSS放置在底部，會引發白屏或無樣式內容閃爍 - JS應放在底部，最好放置在body內的最后；
如果JS放置在頂部，對于圖片和CSS, 在加載時會并發加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發,并且阻止其他內容的下載而立即執行JS腳本. 所以把 JavaScript 放入頁面頂部也會導致 白屏 現象.
2. 解釋白屏和FOUC
如果將CSS引入放在頁面代碼結構靠后的位置（如body的最后），
- 對于IE及Chrome等瀏覽器，需將html內容及引入的CSS內容都加載完成后，瀏覽器才會對頁面代碼進行渲染呈現到用戶面前，此時如果html內容很多，瀏覽器處理請求、加載需要較長時間，會出現瀏覽器一段時間內無內容呈現給用戶，就是典型的白屏效果；
- 對于Firefox瀏覽器
參見4.2Firefox瀏覽器渲染流程，如果CSS放置在底部，firebox會將html結構先展示到頁面上，然后再讀取CSS并對html結構進行渲染，對相關元素進行渲染之后會刷新頁面，表現為html內容無樣式內容閃爍，隨著頁面的不斷刷新，樣式逐漸的展示出來
3. async和defer的作用是什么？有什么區別
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
- 有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
- 有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
區別： - defer:腳本延遲到文檔解析和顯示后執行，有順序
- async:不保證順序
4. 簡述網頁的渲染機制
4.1 Chrome等瀏覽器：
webkitflow.png
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節點的幾何結構
- 把每個節點繪制到屏幕上 (painting)
4.2 Firefox瀏覽器
image008.jpg
- 解析 HTML 標簽到Content Sink
- 這時，先加載Content Sink里面的內容，頁面上會顯示一個無樣式的內容
- 循環加載css樣式，每次加載一部分css樣式后，都會重現渲染頁面
