1.CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的也切？
- css樣式放在head中。
- js放在body標(biāo)簽內(nèi)的最后,外部鏈用<script src=""></script>來(lái)引入js代碼饵筑，內(nèi)部（html）要用js的話就用<script></script>這組標(biāo)簽就可以了埃篓，寫(xiě)標(biāo)簽時(shí)要時(shí)刻注意 標(biāo)簽是成對(duì)出現(xiàn)的不能忘了尾巴。
2.解釋白屏和FOUC
白屏
如果把css放在底部,對(duì)于IE瀏覽器,在一些場(chǎng)景下比如新窗口打開(kāi),刷新等根资，頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)架专。因?yàn)槎喾N公司的瀏覽器在渲染上都有各自小的差異，為了將這種差異降到最低玄帕，我們統(tǒng)一把css放到<head>標(biāo)簽中部脚，同時(shí)應(yīng)該注意如果使用@import標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。（雖然@import標(biāo)簽基本上不怎么用裤纹。委刘。）FOUC（無(wú)樣式內(nèi)容閃爍）
這個(gè)也是因?yàn)楦鱾€(gè)公司所開(kāi)發(fā)的瀏覽器差異所造成的，若把樣式放在底部,對(duì)于IE瀏覽器,在一些場(chǎng)景下比如點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書(shū)簽進(jìn)入等,會(huì)出現(xiàn)FOUC現(xiàn)象(會(huì)先加載無(wú)樣式的內(nèi)容,等CSS加載完成之后鹰椒，頁(yè)面突然展現(xiàn)加載完成后的樣式).對(duì)于Firefox會(huì)一直表現(xiàn)出 FOUC锡移。
3.async和defer的作用是什么？有什么區(qū)別
- async 如果有 async 如
<script async src="script.js"></script>吹零，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行. - defer罩抗，如果給script標(biāo)簽添加了defer屬性
<script defer src="scropt.js"></script>，即使js放在head里面灿椅，它也會(huì)在HTML頁(yè)面解析完畢之后再執(zhí)行套蒂，也就是相當(dāng)于把這個(gè)js放在了頁(yè)面底部。 - 當(dāng)沒(méi)有使用
defer或async的話茫蛹，瀏覽器讀到代碼會(huì)馬上開(kāi)始按照代碼的內(nèi)容來(lái)渲染操刀，不會(huì)等待后續(xù)載入的文檔元素。
4.簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
- 先讀取html標(biāo)簽建立DOM樹(shù)
- 在讀取css建立CSSOM樹(shù)
- 然后把兩樹(shù)拼裝成渲染樹(shù)（render tree）
- 在渲染樹(shù)的基礎(chǔ)上進(jìn)行布局婴洼，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)骨坑。
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上（painting）
