CSS和JS在網頁中的放置順序是怎樣的？
- 一般而言,CSS放置在網頁文檔的頭部,能夠保證用戶更早的看到頁面,提高用戶體驗,但缺陷是若放置的css文件過多,過大,會延長屏幕的白屏時間;JS放置在body內的尾部,同時也有時引入插件需要把JS放在頭部,如jQqury的引入,一般放在頭部
- 由于瀏覽器的解析方式是自上而下的加載html文檔,css是并行加載,js是阻塞加載,會影響頁面的加載速度,如果js的文件較大,很容易出現FOUC現象,并且js還有可能修改DOM,js的執行可能依賴最新的樣式,需要保證在js執行前所有css樣式加載和解析完畢
解釋白屏和FOUC
白屏發生情形:
- 將css文件放在html文檔的最后
- 使用@import引入css(因為通過@import引入的css文件會被最后加載 )
- 將js文件放在頭部阻塞html和css的加載
原因:
對于-webkit內核的瀏覽器(IE也會),在進行網頁渲染時,會同時加載html和css分別構建DOM樹和CSSOM樹,等兩者都構建完成后,再 繪制渲染樹,然后將頁面顯示出來.如果在HTML中將css文件放置在文檔的最后,那么將會導致CSSOM晚于DOM樹的建立,瀏覽器需要等待CSSOM建立,再進行網頁內容的繪制,這個等待的過程,沒有內容顯示導致了白屏的產生
FOUC: 仍是由于瀏覽器的解析造成的,如果把樣式放到底部,對于IE瀏覽器(主要是firfox)在某些場景下(點擊鏈接,URL,書簽)會出現FOUC現象(逐步加載無樣式的內容,等css加載后頁面突然展現樣式)
async和defer的作用是什么？有什么區別
- 一般情況下JS文件沒有async和defer,會立即加載文件并解析,"立即"是指在渲染該script標簽之下的文檔元素之前,也就是不等待后續載入的文檔元素,讀到就加載并執行;有了async和defer可以實現異步加載,async加載和渲染后續文檔的過程將和js的加載與執行并行進步(異步);defer同理,但js的執行要在所有元素解析完成之后,DOMContentLoaded事件觸發之前完成
簡述網頁的渲染機制
- 解析HTML標簽,構建DOM樹
- 解析CSS標簽,構建CSSOM樹
- 把DOM和CSSOM組合成渲染樹
- 在渲染樹的基礎上進行布局,計算每個節點的幾何結構
- 把每個節點繪制到屏幕上
