1.CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的？

css樣式放在head中，js放置在body標(biāo)簽內(nèi)的最后，script標(biāo)簽內(nèi)。外鏈用<script src=""></script>，內(nèi)部的用<script></script>。因?yàn)閖s一般會(huì)涉及到一些DOM操作，所以要等全部的dom元素都加載完再加載js。還有一個(gè)原因是相對(duì)于頁(yè)面中的圖片或css來(lái)說(shuō)js是阻塞的，css和圖片是可以同步加載的，但是js要執(zhí)行完之后才能加載后面的內(nèi)容，如果把js放在前面可能會(huì)造成白屏的現(xiàn)象。

2.解釋白屏和FOUC

白屏

• 如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開(kāi),刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
• 如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
• 因?yàn)槟_本會(huì)阻塞后面內(nèi)容的呈現(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（Flash of Unstyled Content）無(wú)樣式內(nèi)容閃爍現(xiàn)象（逐步加載無(wú)樣式的內(nèi)容，等CSS加載后頁(yè)面突然展現(xiàn)樣式）。對(duì)于Firefox會(huì)一直表現(xiàn)出FOUC

3.async和defer的作用是什么？有什么區(qū)別

沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該script標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成。
defer腳本延遲到文檔解析和顯示后執(zhí)行，有順序
async不保證順序

4.簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制

1.解析HTML標(biāo)簽，構(gòu)建DOM樹(shù)。
2.解析CSS標(biāo)簽，構(gòu)建CSSOM樹(shù)。
3.把DOM和CSSOM組合成渲染樹(shù)（render tree）。
4.在渲染樹(shù)的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)。
5.把每個(gè)節(jié)點(diǎn)繪制到屏幕上（painting）。