1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS：css樣式放在head中,因?yàn)槿绻旁?lt;/body>標(biāo)簽的前面，那么當(dāng)DOM樹構(gòu)建完成了，渲染樹才構(gòu)建，那么當(dāng)渲染樹構(gòu)建完成，瀏覽器不得不再重新渲染整個(gè)頁面，這樣造成了資源的浪費(fèi)。如果放在<head> </head>之間，瀏覽器邊構(gòu)建邊渲染，效率高得多。
JS：js放在body 標(biāo)簽內(nèi)的最后，script 標(biāo)簽內(nèi)。外鏈接用 <script src=""></script>，內(nèi)部的用 <script></script>。這樣就不會(huì)出現(xiàn)網(wǎng)頁加載時(shí)白屏和FOUC的情況，可以確保在腳本執(zhí)行前頁面已經(jīng)完成了渲染。
2.解釋白屏和FOUC
白屏：
- 如果把樣式放在底部，對于IE瀏覽器，在某些情景下，新窗口對于IE瀏覽器，在某些情景下（新窗口打開，刷新等）頁面會(huì)出現(xiàn)白屏，而不是內(nèi)容逐漸展現(xiàn)
- 如果使用@import標(biāo)簽，即使CSS放入link,并且放在頭部，也可能出現(xiàn)白屏
- 對于圖片和CSS, 在加載時(shí)會(huì)并發(fā)加載(如一個(gè)域名下同時(shí)加載兩個(gè)文件)。 但在加載 JavaScript 時(shí)，會(huì)禁用并發(fā)，并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會(huì)導(dǎo)致 白屏 現(xiàn)象.
FOUC(flash of unstyled content)無樣式內(nèi)容閃爍：
- 如果把樣式放在底部，對于IE瀏覽器，在某些場景下（點(diǎn)擊鏈接，輸入U(xiǎn)RL，使用書簽進(jìn)入等），會(huì)出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式的內(nèi)容，等CSS記載后頁面突然展現(xiàn)樣式）。對于Firefox會(huì)一直表現(xiàn)出FOUC
3.async和defer的作用是什么？有什么區(qū)別
- 沒有defer或async，瀏覽器會(huì)立即加載并指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
- 有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
- 有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
- 瀏覽器在解析HTML文件時(shí)，遇上沒有設(shè)置defer或async屬性的腳本，瀏覽器讀到該腳本就加載并執(zhí)行，腳本會(huì)阻塞其后內(nèi)容的執(zhí)行；
- 遇上設(shè)有async屬性的腳本，會(huì)在HTML解析過程中下載該腳本，并在完成下載后暫停HTML的解析來執(zhí)行這個(gè)異步腳本，直到執(zhí)行完成后再繼續(xù)HTML的解析；
- 遇上有defer屬性的腳本，會(huì)在HTML解析過程中下載該腳本，在HTML解析完成后才執(zhí)行該文件，延遲腳本按照它們在文檔中出現(xiàn)的順序執(zhí)行。
- async屬性可以保證腳本下載的同時(shí)，瀏覽器進(jìn)行渲染。需要注意的是，一旦采用這個(gè)屬性就無法保證腳本的執(zhí)行順序。哪個(gè)腳本先下載結(jié)束，就先執(zhí)行哪個(gè)腳本。
4.簡述網(wǎng)頁的渲染機(jī)制
- 解析html標(biāo)簽，構(gòu)建dom樹
- 解析css標(biāo)簽，構(gòu)建cssom樹
- 把dom和cssom組合成渲染樹（render tree）
- 在渲染樹的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
-
把每個(gè)節(jié)點(diǎn)繪制到屏幕上（painting）
chrome等瀏覽器
1739898-56a58b58bb5dcc0e.png
Mozilla 的 Gecko 呈現(xiàn)引擎主流程（firefox瀏覽器）
image008.jpg
解析 HTML 標(biāo)簽到 Content Sink
這時(shí)，先加載Content Sink 里面的內(nèi)容，頁面上會(huì)顯示一個(gè)無樣式的內(nèi)容
循環(huán)加載 CSS 樣式，每次加載一部分 CSS 樣式后，會(huì)重新渲染頁面
