一.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
<html>
<head>
<meta charset="utf-8">
<title>JS test</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
……
<script src="index.js"></script>
</body>
</html>
??????一般而言找爱，css是放在<head>標(biāo)簽內(nèi)，用<link>進(jìn)行引用泡孩；而javascript的位置在<body>的閉合標(biāo)簽之前车摄，但是也可以放置在<head>標(biāo)簽內(nèi)，但是由于在進(jìn)行頁面渲染的時(shí)候仑鸥，js會(huì)阻塞html以及css的解析吮播，從而造成白屏現(xiàn)象，所以放置于最后就可以避免這種情況的發(fā)生锈候。
二.解釋白屏和FOUC
- 白屏現(xiàn)象：
- 如果把樣式放在底部薄料，對(duì)于ie瀏覽器，在某些場景下(新窗口打開泵琳，刷新等)摄职，頁面會(huì)等到html加載完再進(jìn)行加載css樣式，會(huì)出現(xiàn)白屏获列，而不是內(nèi)容逐步呈現(xiàn)谷市。
- 如果使用@import標(biāo)簽，即使css放入
<link>击孩，并且放在頭部迫悠，也有可能白屏。 - 腳本會(huì)阻塞后面內(nèi)容的呈現(xiàn)和下載巩梢，所以js放置在
<head>中也會(huì)導(dǎo)致白屏的可能创泄，外部腳本加載過長(比如一直無法下載完成)，就會(huì)出現(xiàn)出現(xiàn)網(wǎng)頁暫時(shí)失去響應(yīng)括蝠。
- FOUC(Flash of Unstyled Content) 無樣式內(nèi)容閃爍：
??????如果把樣式放在底部鞠抑，對(duì)于IE瀏覽器，在某些場景下(點(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。
??????這是由于這些瀏覽器在繪制頁面時(shí)并不需要等待css全部加載完成朋譬，只要html加載完成就開始繪制頁面盐茎，而在加載CSS文件的過程中不斷刷新樣式，重新繪制頁面徙赢。
三.async和defer的作用是什么字柠？有什么區(qū)別
JS 在 HTML 中引入有三種<script> <script async> <script defer>滑进。
- 直接引入<script>
<script src="script.js"></script>
瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前募谎，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行阴汇。這樣會(huì)阻塞瀏覽器渲染数冬，必須等到 JS 下載并執(zhí)行才繼續(xù)解析 HTML。
2.async 方式引入
<script async src="script.js"></script>
加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）搀庶，同時(shí)阻塞 HTML 解析拐纱。
3.defer 方式引入
<script defer src="script.js"></script>
加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后哥倔，DOMContentLoaded 事件觸發(fā)之前完成秸架。
如圖所示：
四.簡述網(wǎng)頁的渲染機(jī)制
- 解析html構(gòu)建DOM樹。
- 解析CSS構(gòu)建CSSOM樹咆蒿。
- 把DOM和CSSOM組合成渲染樹（Render Tree）东抹。
- 在渲染樹的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)（Layout Tree）沃测。
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上（Painting)缭黔。
