css和js的放置順序
css放在head中
js放置于body最后面的script標簽中
白屏問題
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
如果使用 @import 標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
在加載 JavaScript 時,會禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致白屏現(xiàn)象
FOUC
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC .
async和defer的作用及區(qū)別
沒有 defer 或 async圣拄，瀏覽器會立即加載并執(zhí)行指定的腳本嘴秸，“立即”指的是在渲染該 script 標簽之下的文檔元素之前毁欣，也就是說不等待后續(xù)載入的文檔元素庇谆，讀到就加載并執(zhí)行
采用async 或defer后，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步）
但使用defer時 script.js 的執(zhí)行要在所有元素解析完成之后凭疮，DOMContentLoaded 事件觸發(fā)之前完成
defer:腳本延遲到文檔解析和顯示后執(zhí)行饭耳，有順序
async:不保證順序
網(wǎng)頁的渲染機制
解析 HTML 標簽, 構(gòu)建 DOM 樹
解析 CSS 標簽, 構(gòu)建 CSSOM 樹
把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
把每個節(jié)點繪制到屏幕上 (painting)
