CSS和JS在網頁中的放置位置是怎樣的?
CSS和JS可以放置在頁面的任何位置,但是為了避免一些問題,一般將CSS放置在head標簽里面,而將JS放置在body標簽的最下面。
解釋白屏和FOUC
白屏:對于IE,如果將樣式表放置在底部,在某些場景(如:新窗口打開,刷新等)會出現頁面白屏,而不是內容逐步展開。
如果使用了@import,不管樣式表位于何處,都有可能出現白屏。
如果將JS放置在頂部,在加載JavaScript時,會禁用并發,并且阻止其他內容的加載,這時也會出現白屏。
FOUC:flash of unstyled content ,無樣式內容閃爍,逐步加載無樣式的內容,等CSS加載完成后頁面突然展現樣式。如果將樣式表放在底部:對于IE,在某些場景(如:點擊鏈接,輸入URL,從書簽進入等)會出現FOUC;對于Firefox,則一直表現出FOUC。
async和defer的作用是什么?有什么區別?
async和defer的作用是加載和渲染后續文檔元素的過程將和JS的加載與執行并行進行,即加載異步。
區別
async:文檔解析時,遇到async腳本,加載腳本,但是文檔解析不中斷,當腳本加載完成后,文檔停止解析,執行腳本,執行完成后,文檔繼續解析。
defer:文檔解析是,遇到defer腳本,加載腳本,同時文檔解析不中斷,但腳本加載完成后,不立刻執行,等到文檔解析完成后,再按順序執行腳本。
defer和async.png
簡述網頁的渲染機制
- 解析HTML標簽,生成DOM樹(文檔對象模型)
- 解析CSS標簽,生成CSSOM(CSS對象模型)
- 將DOM樹和CSSOM組合成渲染樹(render tree)
- 在渲染樹的基礎上對各個節點進行布局(layout)
- 將每個節點繪制帶屏幕上(paint)