JS相關(guān)概念

CSS和JS在網(wǎng)頁中的放置順序是怎樣的？

  • CSS寫在HTML文件中的<head></head>標簽內(nèi)的<style></style>中，JS寫在HTML中<body></body>標簽的最底部的<script></script>中

解釋白屏和FOUC

  • 白屏
  • 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)，如果使用 @import 標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
  • 腳本會阻塞后面內(nèi)容的呈現(xiàn)和阻塞其后組件的下載
    對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件). 但在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致 白屏 現(xiàn)象
  • FOUC (Flash of Unstyled Content) 無樣式內(nèi)容閃爍
    如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC。

async和defer的作用是什么？有什么區(qū)別

  • <script async src="script.js"></script>
    有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）。腳本延遲到文檔解析和顯示后執(zhí)行，有順序
    <script defer src="script.js"></script>
    有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。不保證順序

簡述網(wǎng)頁的渲染機制

解析 HTML 標簽, 構(gòu)建 DOM 樹
解析 CSS 標簽, 構(gòu)建 CSSOM 樹
把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
把每個節(jié)點繪制到屏幕上 (painting)

image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容