CSS和JS在網頁中的放置順序是怎樣的锋华？
- 由于瀏覽器渲染機制，Render Tree是由DOM樹和CSSOM樹組合成的坏匪，html頁面需要等到CSS解析完后才能完成渲染圃验，所以CSS應放在head標簽內，優(yōu)先下載解析细燎，以避免頁面元素由于樣式缺失造成瞬間的白頁或者給用戶閃爍感為
- js是使用script標簽在body的閉合標簽之前進行引入两曼，瀏覽器需要一個穩(wěn)定的dom樹結構，瀏覽器為了防止出現js修改dom樹玻驻，需要重新構建dom樹的情況悼凑，所以就會阻塞其他的下載和呈現，出現白屏
解釋白屏和FOUC
白屏
- 如果把樣式放在底部击狮，由于html頁面需要等到CSS解析完后才能完成渲染佛析，故頁面會出現白屏,而不是內容逐步展現， 如果使用 @import 標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現白屏（@import加載完html彪蓬，在引入外部文件）
- 對于圖片和CSS寸莫，在加載時會并發(fā)加載（如一個域名下同時加載兩個文件）。但在加載JavaScript 時档冬，會禁用并發(fā)膘茎，并且阻止其他內容的下載。所以把JavaScript放入頁面頂部也會導致白屏現象
FOUC
FOUC（Flash of Unstyled Content）無樣式內容閃爍現象（逐步加載無樣式的內容酷誓，等CSS加載后頁面突然展現樣式）披坏。由于瀏覽器渲染機制不同，css樣式放在底部,瀏覽器邊渲染邊逐步呈現組件盐数，Firefox會一直表現出FOUC
async和defer的作用是什么棒拂？有什么區(qū)別
async和defer的作用（加載異步）
沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本玫氢，“立即”指的是在渲染該script標簽之下的文檔元素之前帚屉，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行漾峡。有 defer 或 async攻旦，加載續(xù)文檔元素的過程將和 script.js 的加載并行進行
async和defer的區(qū)別
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）生逸。
有 defer牢屋，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步）且预，但script.js的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成烙无。
defer腳本延遲到文檔解析和顯示后執(zhí)行锋谐，有順序
async不保證腳本執(zhí)行順序
簡述網頁的渲染機制
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節(jié)點的幾何結構
-
把每個節(jié)點繪制到屏幕上 (painting)
截圖06.png
Gecko調用視覺格式化元素的樹 - 框架樹。每個元素都是一個框架皱炉。Webkit使用術語“渲染樹”怀估，它由“渲染對象”組成。
