1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的色洞？
- css文件一般放在head里勋乾，css的解析是在html解析之內開始的隶症，css解析和html解析是可以同時進行的。當 html 構建生成 DOM许起， css 構建生成 CSSOM，兩者合并才能開始構建 Render Tree菩鲜，所以什么開始構建 Render Tree 取決于园细， DOM 和 CSSOM 的構建慢的一方。因此需要將css放在head中接校，盡早下載css資源猛频，盡快解析，縮短首次渲染時間蛛勉。
- JS一般放在 </body> 標簽前鹿寻，一方面：他會阻塞 DOM 的構建，當 html 解析碰到 script 標簽之后诽凌，如果是外聯(lián)腳本毡熏，瀏覽器會停止解析 html， 等待 js 資源被取回之后侣诵，執(zhí)行 js 代碼痢法，如果是內聯(lián)腳本，也會阻塞解析器窝趣，執(zhí)行 js 代碼疯暑。這就會使得 DOM 的構建比較耗時。
另一方面哑舒，雖然樣式不會影響 DOM 的構建，然后在阻塞解析器的JS在執(zhí)行過程中可能會請求樣式信息幻馁。如果當時還沒有加載和解析樣式洗鸵，腳本就會獲得錯誤的回復，這就會造成很多問題仗嗦。所以瀏覽器為了避免這樣的問題膘滨，會在加載和解析 css 的過程中，禁止腳本執(zhí)行稀拐。換句話說 CSSOM 的構建會阻塞 JavaScript 執(zhí)行火邓。
參考文章
2.解釋白屏和FOUC
不同的瀏覽器對于CSS和HTML的處理方式不同，有的是等待CSS加載完成之后德撬，對HTML元素進行渲染和展示（白屏問題）铲咨。有的是先對HTML元素進行展示，然后等待CSS加載完成之后重新對樣式進行修改（FOUC無樣式內容閃爍）
- Chrome瀏覽器：不論css放在head里還是放在body底部都會等待css樣式加載完再展示HTML蜓洪，網(wǎng)速慢會出現(xiàn)白屏問題纤勒。
- IE瀏覽器：只要看到一個HTML標簽就展示。
- Firefox 如果css文件在head里隆檀，那么一定等css下載完再展示HTML摇天；
如果CSS文件在body里粹湃，那么看到一個HTML標簽就展示。
3.async和defer的作用是什么泉坐？有什么區(qū)別
defer为鳄，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后腕让，DOMContentLoaded 事件觸發(fā)之前完成济赎。
async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）记某。
image.png
綠色：文檔元素加載 藍色：script.js加載 紅色：script.js執(zhí)行
4.簡述網(wǎng)頁的渲染機制
- 處理 HTML 標記并構建 DOM 樹司训。
- 處理 CSS 標記并構建 CSSOM 樹。
- 將 DOM 與 CSSOM 合并成一個渲染樹液南。
- 根據(jù)渲染樹來布局壳猜，以計算每個節(jié)點的幾何信息。
- 將各個節(jié)點繪制到屏幕上滑凉。
參考資料https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
https://www.chengrang.com/how-browsers-work.html
