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
白屏：
- 如果把樣式放在底部鼻由，對(duì)于IE瀏覽器暇榴，在某些情景下，新窗口對(duì)于IE瀏覽器蕉世，在某些情景下（新窗口打開蔼紧，刷新等）頁面會(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 放入頁面頂部也會(huì)導(dǎo)致 白屏 現(xiàn)象.
FOUC(flash of unstyled content)無樣式內(nèi)容閃爍：
- 如果把樣式放在底部，對(duì)于IE瀏覽器湖蜕，在某些場(chǎng)景下（點(diǎn)擊鏈接逻卖，輸入U(xiǎn)RL，使用書簽進(jìn)入等）昭抒，會(huì)出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式的內(nèi)容评也，等CSS記載后頁面突然展現(xiàn)樣式）炼杖。對(duì)于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í)行該文件听盖，延遲腳本按照它們?cè)谖臋n中出現(xiàn)的順序執(zhí)行。
- async屬性可以保證腳本下載的同時(shí)裂七，瀏覽器進(jìn)行渲染皆看。需要注意的是，一旦采用這個(gè)屬性就無法保證腳本的執(zhí)行順序背零。哪個(gè)腳本先下載結(jié)束腰吟，就先執(zhí)行哪個(gè)腳本。
4.簡(jiǎn)述網(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ì)重新渲染頁面
