CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS要放頭部head中的link標簽內引入。
js文件要放在<script></script>標簽中，該標簽可置于</body>之后</html>之前，用于最后渲染。
白屏和FOUC
關于白屏，形成原因是瀏覽器在渲染的時候請求時間過長導致的，比如Chrome的渲染流程大致是HTML-->Dom-->Css-->Cssom-->Render Tree-->進行計算-->painting 最終才是我們看到的網(wǎng)頁界面，但是如果你是在一些國外的網(wǎng)站，或者被墻的地方進行反問，瀏覽器就回一直現(xiàn)實它的加載動作而沒有最終頁面，也就網(wǎng)頁響應時間過長而導致的白屏，另一種情況就是當使用@import(),屬性的時候也可能導致瀏覽器渲染不及時，又或者我們把標簽放在了body的底部位置，都可能導致不及時的現(xiàn)象。
關于FOUC（無樣式內容閃爍），對于IE瀏覽器，在某些場景下（點擊鏈接，輸入URL,使用書簽進入等），會出現(xiàn)FOUC（Flash of Unstyled Content）無樣式內容閃爍現(xiàn)象（逐步加載無樣式的內容，等CSS加載后頁面突然展現(xiàn)樣式）。對于Firefox會一直表現(xiàn)出FOUC，F(xiàn)ireFox的渲染邏輯和Chrome的不太一樣，一開始Chrome是等待渲染樹和位置計算好才會出來網(wǎng)頁的內容，但到了FireFox每加載一次dom樹就會重繪一次網(wǎng)頁樣式，一直到所有內容完成為止，所以一般我們用link把css放在header內。
async和defer的作用是什么？有什么區(qū)別
沒有defer或async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該script標簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
- 有async，加載和渲染后續(xù)文檔元素的過程將和 該script的加載與執(zhí)行并行進行（異步）
- 有defer，加載后續(xù)文檔元素的過程將和 該script的加載并行進行（異步），但該script的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
網(wǎng)頁的渲染機制
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節(jié)點的幾何結構
- 把每個節(jié)點繪制到屏幕上 (painting)
