CSS和JS在網頁中的放置順序是怎樣的？
- css樣式放在head中。
- js放置在body標簽內的最后，script標簽內。外鏈用<script src=""></script>，內部的用<script></script>
解釋白屏和FOUC
- 如果把樣式放在頂部,對于IE瀏覽器、谷歌瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現白屏,而不是內容逐步展現。如果使用@import
標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現白屏。 - FOUC無樣式內容閃爍如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現FOUC現象(逐步加載無樣式的內容,等CSS加載后頁面突然展現樣式).對于Firefox會一直表現出 FOUC。
將JS放在頂部：
①腳本會阻塞后面內容的呈現
②腳本會阻塞其后組件的下載
對于圖片和CSS, 在加載時會并發加載(如一個域名下同時加載兩個文件). 但在加載JavaScript時,會禁用并發,并且阻止其他內容的下載. 所以把JavaScript放入頁面頂部也會導致白屏現象。
async和defer的作用是什么？有什么區別
- 沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該script標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但script.js的執行要在所有元素解析完成之后，DOMContentLoaded事件觸發之前完成。
- defer腳本延遲到文檔解析和顯示后執行，有順序async
- 不保證順序
簡述網頁的渲染機制
①解析HTML標簽, 構建DOM樹②解析CSS標簽, 構建CSSOM樹③把DOM和CSSOM組合成 渲染樹(render tree)④在渲染樹的基礎上進行布局, 計算每個節點的幾何結構⑤把每個節點繪制到屏幕上(painting)
