1.CSS和JS在網頁中的放置順序是怎樣的？
?css放在<head></head>標簽中間，是為了防止白屏的出現
js放在body標簽內的最后，因為圖片和css都是異步加載的，而js則是單個加載完成后才能執行下一步，如果將js放到head標簽中就會出現 執行完成某一個js后，沒有可以操作的內容，因為那是html還沒有加載成功就要被js來操作，所以js放到body標簽內部的最后面就可以避免這種情況的發生。。
2.解釋白屏和FOUC
白屏的根本原因是瀏覽器在渲染的時候請求的時間過長導致的。瀏覽器渲染時必須獲得DOM樹和CSSOM樹后才能組和渲染樹，然后在此基礎上把每個節點繪制到屏幕上。
因為將樣式放到了底部，雖然構建了DOM樹，但因為沒有及時構建CSSOM樹瀏覽器不會渲染網頁，就會造成白屏。
而使用@important標簽，也會出現白屏，請求期內不會構建CSSOM樹。從而不會組合成渲染樹，而由于構建 CSSOM 樹的時間過程從而導致了白屏。
如果將js放在head頭部中，因為js文件不同于css和圖片的異步加載方式，js是加載完成了才能進行下一個步驟的執行。這樣就會導致js下面的DOM樹和CSS樹的構建，從而導致白屏。
出現白屏的總結如下：
2.1.如果把樣式放在底部，對于IE瀏覽器，某些場景下會出現白屏，而不是頁面內容逐步展現。
2.2.如果使用@import標簽，即使css放入link,并且放在頭部，也可能出現白屏。
2.3.js放置在head中
FOUC：無樣式內容閃爍
如果把樣式放在底部，在某些場景下會出現FOUC現象（逐步加載無樣式的內容，等css加載后頁面會突然展現樣式）對于Firefox會一直出現FOUC
Firefox會一直出現FOUC的原因是因為Firefox的渲染機制有關，Firefox是和chrome的不太一樣的，chrome是等渲染樹完成后然后計算節點的幾何結構，等都計算完畢后再把全部的節點繪制到屏幕上。而Firefox則是每加載一次DOM樹就會重繪一次網頁樣式，一直到所有內容完成后停止。當firefox中DOM繪制完成后，css加載有延遲的時候，就會出現無樣式內容閃爍（FOUC）現象。
3.async和defer的作用是什么？有什么區別
async和defer的作用是讓js實現異步加載而不是從上到下一個js執行完成后才能執行下一個js文件。
區別是：defer：在頁面解析完畢后再執行，有先后執行的順序差別。
? ? ? ? ? ? ? ? async：頁面的加載和渲染后續文檔與script.js的加載與執行并行進行（異步的過程）是沒有順序的。
例如<script src="script.js"></script>沒有defer或async，瀏覽器會立即加載并執行script.js文件，而script標簽之后的文檔要等script.js文件加載完成后才能開始加載與渲染。而
<script async src="script.js"></script>則是加載與渲染后續的文檔將與script.js的加載與執行一起進行，不能保證執行順序，這是一個異步的過程。
<script defer src="script.js"></script>如果該script即使放在了head標簽內部，也會在HTML頁面解析完畢之后再執行。
4.簡述網頁的渲染機制
4.1解析HTML元素，構建DOM樹
4.2解析css樣式，構建CSSOM樹
4.3將DOM樹和CSSOM樹組合成渲染樹(render tree)
4.4在渲染樹的基礎上進行布局，計算每個節點的幾何結構
4.5把每個節點繪制到屏幕上（painting）
