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