CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS的放置順序：CSS放在head中，如果放在</body>標(biāo)簽的里面，那么當(dāng)DOM樹構(gòu)建完成了，渲染樹才構(gòu)建。渲染樹構(gòu)建完成，瀏覽器不得不再重新渲染整個頁面，這樣造成了資源的浪費。如果放在<head> </head>之間，瀏覽器邊構(gòu)建邊渲染（并發(fā)），頁面加載效率高，用戶體驗也更好。
JS的放置順序：JS放在body 標(biāo)簽內(nèi)的最后。外鏈接用 <script src=""></script>，內(nèi)部的用 <script></script>。普通的<script>標(biāo)簽的加載和解析都是同步的，會阻塞DOM的渲染，這也就是我們經(jīng)常會把<script>寫在<body>底部的原因之一，為了防止加載資源而導(dǎo)致的長時間的白屏，另一個原因是js可能會進行DOM操作，所以要在DOM全部渲染完后再執(zhí)行。
解釋白屏和FOUC。
- 白屏
- 如果把樣式放在底部，對于IE瀏覽器，在某些情景下（新窗口打開，刷新等）頁面會出現(xiàn)白屏，而不是內(nèi)容逐漸展現(xiàn)。
- 如果使用@import標(biāo)簽，即使CSS放入link,并且放在頭部，也可能出現(xiàn)白屏。
- 對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件)。 但在加載 JavaScript 時，會禁用并發(fā)，并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致白屏現(xiàn)象。
FOUC (Flash of Unstyled Content)
-
如果把樣式放在底部，對于IE瀏覽器，在某些場景下（點擊鏈接，輸入URL，使用書簽進入等），會出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式的內(nèi)容，等CSS加載完成后頁面突然展現(xiàn)樣式）。對于Firefox會一直表現(xiàn)出FOUC，這是由于Firefox內(nèi)核 Gecko 渲染機制造成的。
Mozilla's Gecko rendering engine main flow.png
async和defer的作用是什么？有什么區(qū)別？
- 普通的<script>標(biāo)簽的加載和解析都是同步的，會阻塞DOM的渲染，這也就是我們經(jīng)常會把<script>寫在<body>底部的原因之一，為了防止加載資源而導(dǎo)致的長時間的白屏，另一個原因是js可能會進行DOM操作，所以要在DOM全部渲染完后再執(zhí)行， 有什么方法可以防止這些問題的產(chǎn)生呢，就有了async （異步）和defer （延遲）。
- async(異步)，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）。
- defer（延遲），加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
- 遇上設(shè)有async屬性的腳本，會在HTML解析過程中下載該腳本，并在完成下載后暫停HTML的解析來執(zhí)行這個異步腳本，直到執(zhí)行完成后再繼續(xù)HTML的解析。打個比方，做飯的同時，也品嘗自己做的菜，感覺味道很好了，才出鍋，繼續(xù)做下一道菜。
- 遇上有defer屬性的腳本，會在HTML解析過程中下載該腳本，在HTML解析完成后才執(zhí)行該文件，延遲腳本按照它們在文檔中出現(xiàn)的順序執(zhí)行。打個比方，做好飯后，才品嘗自己做的菜，不管好不好吃，都已經(jīng)出鍋了。
- async屬性可以保證腳本下載的同時，瀏覽器進行渲染。需要注意的是，一旦采用這個屬性就無法保證腳本的執(zhí)行順序。哪個腳本先下載結(jié)束，就先執(zhí)行哪個腳本。
翻到一篇博客，講解的不錯，更多內(nèi)容可以參考這篇博客 async和defer的作用和區(qū)別
簡述網(wǎng)頁的渲染機制
- webkit內(nèi)核渲染機制
- 解析html標(biāo)簽，構(gòu)建dom樹。
- 解析css標(biāo)簽，構(gòu)建cssom樹。
- 把dom和cssom組合成渲染樹（render tree）。
- 在渲染樹的基礎(chǔ)上進行布局，計算每個節(jié)點的結(jié)構(gòu)。
- 把每個節(jié)點繪制到屏幕上（painting）。
Webkit main flow.png
- Gecko內(nèi)核渲染機制
- 解析 HTML 標(biāo)簽到 Content Sink。
- 這時，先加載Content Sink 里面的內(nèi)容，頁面上會顯示一個無樣式的內(nèi)容（HTML標(biāo)簽，網(wǎng)頁內(nèi)容優(yōu)先）。
- 循環(huán)加載 CSS 樣式， 構(gòu)建渲染結(jié)構(gòu)。
- 重新渲染頁面， 繪制到屏幕上（painting）。
Mozilla's Gecko rendering engine main flow.png
