JS相關概念

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)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 簡單介紹JavaScript的發展歷史 JavaScript因互聯網而生,回顧它的歷史要從瀏覽器的歷史講起。 19...
    _Dot912閱讀 514評論 0 3
  • 1. CSS和JS在網頁中的放置順序是怎樣的? css放在head標簽內,防止渲染時出現白屏 js放在最后body...
    billa_8f6b閱讀 588評論 0 0
  • 1、CSS和JS在網頁中的放置順序是怎樣的? (1)CSS 對于谷歌瀏覽器和Safari放在head里或body里...
    徐國軍_plus閱讀 470評論 0 0
  • CSS和JS在網頁中的放置順序 網站加載的整個完整過程:首先瀏覽器從服務器接收到html代碼,然后開始解析html...
    Joey的企鵝閱讀 285評論 1 0
  • 1.CSS和JS在網頁中的放置順序是怎樣的? CSS:css樣式放在head中,因為如果放在 標簽的前面,那么當D...
    gigi1226閱讀 635評論 0 0