1姐仅、CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的唯卖？
- CSS代碼放置于
head中用style包裹眠寿，這有由于瀏覽器的渲染順序所決定的，防止IE中出現(xiàn)白屏的情況山憨。 - JS放置一般是在
body閉合標(biāo)簽之前查乒，因?yàn)镴S一般會(huì)涉及到一些DOM操作，所以要等全部的DOM元素都加在完才繼續(xù)加在JS郁竟。還有一個(gè)因素是相對(duì)于頁(yè)面中的CSS和圖片玛迄，JS代碼是會(huì)造成堵塞的，而CSS和圖片則可以同步加載棚亩，但是JS要執(zhí)行完一個(gè)后才能執(zhí)行后續(xù)的內(nèi)容蓖议，這樣容易造成藍(lán)屏的情況。
2蔑舞、解釋白屏和FOUC
- 白屏的根本原因是頁(yè)面的請(qǐng)求過長(zhǎng)而造成的拒担；
如果把樣式放在網(wǎng)頁(yè)底部，對(duì)于瀏覽器來說在某些場(chǎng)景下頁(yè)面會(huì)出現(xiàn)白屏而不是出現(xiàn)內(nèi)容逐步展現(xiàn)的現(xiàn)象攻询。
這是因?yàn)闉g覽器渲染時(shí)必須獲得DOM樹和CSSOM樹后才能組合成渲染樹，再在此基礎(chǔ)上把每個(gè)節(jié)點(diǎn)繪制到屏幕上州弟。由于把樣式放在了底部钧栖，雖然瀏覽器構(gòu)建了DOM樹，但因?yàn)闆]有及時(shí)構(gòu)建CSSOM樹婆翔，因此瀏覽器是不會(huì)渲染網(wǎng)頁(yè)的拯杠，這時(shí)就會(huì)造成白屏。
如果使用@import標(biāo)簽啃奴，也會(huì)出現(xiàn)白屏潭陪，因?yàn)樗鼤?huì)向外請(qǐng)求樣式，請(qǐng)求期內(nèi)也不會(huì)構(gòu)建CSSOM樹最蕾。 - FOUC：Flash of Unstyled Content依溯，無樣式內(nèi)容閃爍。是指如果把樣式放在底部瘟则，對(duì)于某些瀏覽器黎炉，在某些場(chǎng)景下會(huì)出現(xiàn)逐步加載無樣式的內(nèi)容，等CSS加載后頁(yè)面突然展現(xiàn)樣式的現(xiàn)象醋拧。尤其是火狐瀏覽器慷嗜，因?yàn)槠滗秩緳C(jī)制淀弹，如果把CSS放在底部會(huì)一直表現(xiàn)出FOUC。
3庆械、async和defer的作用是什么薇溃？有什么區(qū)別
- 它們的作用主要是作用于script標(biāo)簽。對(duì)于沒有這兩個(gè)關(guān)鍵字的腳本標(biāo)簽缭乘，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本痊焊，即在渲染該script標(biāo)簽之下的文檔元素之前，不等待后續(xù)載入的文檔元素忿峻，讀到就加載并執(zhí)行薄啥。
- async: 加載和渲染后續(xù)文檔元素的過程將和腳本的加載于執(zhí)行并行進(jìn)行（異步），但不保證順序逛尚。
- defer：加載后續(xù)文檔元素的過程和腳本的加載并行進(jìn)行（異步）垄惧，但腳本的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成绰寞。它讓腳本延遲到文檔解析和顯示后執(zhí)行到逊，保證加載的順序。
4滤钱、簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
- 簡(jiǎn)單的說渲染過程主要是以下步驟：
1觉壶、解析HTML
2、構(gòu)建DOM樹
3件缸、DOM樹和CSS樣式進(jìn)行附著構(gòu)造呈現(xiàn)樹
4铜靶、布局
5、繪制
詳細(xì)的內(nèi)容可以參考該網(wǎng)頁(yè)：http://taligarsiel.com/Projects/howbrowserswork1.htm
