CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- css是使用link的標簽進行引入并放置在header標簽內(nèi),而js是使用script標簽進行引入不過一般的放置位置是在body的閉合標簽之前(當然也可以放在header標簽內(nèi))，這是因為頁面渲染的時候，相對于其他的圖片或css來說js是阻塞的,所以等頁面的渲染樹成行以后再引入js就可以避免白屏現(xiàn)象.
解釋白屏和FOUC
- 產(chǎn)生原因：如果把樣式放在底部，對于IE瀏覽器立肘，在某些場景下（新窗口打開筒狠，刷新等）頁面會出現(xiàn)白屏汪诉，而不是內(nèi)容逐步展示白胀。
如果使用@import標簽椭赋，即使css放入link,并且放在頭部，也可能出現(xiàn)白屏或杠。 - 對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導致 白屏 現(xiàn)象.
- FOUC（Flsh of Unstyled Content）無樣式內(nèi)容閃爍
如果把樣式放在底部哪怔，對于IE瀏覽器，在某些場景下（點擊連接向抢、輸入Url认境、使用書簽進入等），會出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式內(nèi)容挟鸠，等CSS加載后頁面突然展現(xiàn)樣式）元暴，對于Firfox頁面會一直表現(xiàn)FOUC。
async和defer的作用是什么兄猩？有什么區(qū)別
- 沒有defer或async茉盏，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該script標簽之下的文檔元素前枢冤，也就是說不等待后續(xù)載入的文檔元素鸠姨，讀到就加載并執(zhí)行。
- 有abync,加載和渲染后續(xù)文檔元素的過程將和srcpt,js的加載與執(zhí)行并行進行（異步）淹真。
- 有defer,加載后續(xù)文檔元素的過程將和script.js的加載并行進行（異步）讶迁，但script.js的執(zhí)行要在 所有的元素解析完成之后，DOMContentLoader事件觸發(fā)之前完成核蘸。
簡述網(wǎng)頁的渲染機制
** 瀏覽器的渲染機制 **
- 解析HTML標簽巍糯，構(gòu)建DOM樹。
- 解析CSS標簽客扎，構(gòu)建CSSOM樹祟峦。
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)。
- 在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)徙鱼。
- 把每個節(jié)點繪制到屏幕上 (painting)宅楞。
