CSS和JS在網(wǎng)頁中的放置順序是怎樣的停做？
- 一般來說晤愧，在 head 標(biāo)簽中通過 link 標(biāo)簽引入CSS。在 body 底部通過 script 標(biāo)簽 引入 JS蛉腌，如果是進(jìn)行頁面初始化的 js 必須放在 head 里面
解釋白屏和FOUC
- 如果把樣式放在底部官份，對(duì)于 IE 瀏覽器，在某些場(chǎng)景下（新窗口打開烙丛、刷新等）頁面會(huì)出現(xiàn)白屏舅巷，而不是內(nèi)容逐步展現(xiàn)
- 如果使用
@import，即使 CSS 放入 link 標(biāo)簽河咽，并且放在頭部钠右，也可能出現(xiàn)白屏
- 頁面被加載的時(shí)，link 會(huì)同時(shí)被加載忘蟹，而 @import 引用的CSS會(huì)等到頁面被加載完再加載
- 對(duì)于圖片和CSS, 在加載時(shí)會(huì)并發(fā)加載（如一個(gè)域名下同時(shí)加載兩個(gè)文件）飒房。但在加載 JavaScript 時(shí)，會(huì)禁用并發(fā)媚值，并且阻止其他內(nèi)容的下載狠毯。所以把 JavaScript 放入頁面頂部也會(huì)導(dǎo)致 白屏 現(xiàn)象
-
FOUC（Flash of Unstyled Content）無樣式內(nèi)容閃爍
- 如果把樣式放在底部，對(duì)于IE瀏覽器褥芒，在某些場(chǎng)景下（點(diǎn)擊鏈接嚼松、輸入U(xiǎn)RL、使用書簽進(jìn)入等）锰扶，會(huì)出現(xiàn) FOUC 現(xiàn)象（逐步加載無樣式的內(nèi)容惜颇，等CSS加載后頁面突然展現(xiàn)樣式）。對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC
async 和 defer的作用是什么少辣？有什么區(qū)別
- async 和 defer 屬于 script 標(biāo)簽的屬性，僅適用于外部腳本
- 加載異步
- defer：腳本延遲到文檔解析和顯示后執(zhí)行羡蛾，有順序
- async：不保證順序
<script src="script.js"></script>
/*
沒有 defer 或 async漓帅，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前痴怨，也就是說不等待后續(xù)載入的文檔元素忙干，讀到就加載并執(zhí)行
*/
<script async src="script.js"></script>
/*
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）
*/
<script defer src="script.js"></script>
/*
有 defer浪藻，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步）捐迫，但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成爱葵。
*/
簡(jiǎn)述網(wǎng)頁的渲染機(jī)制
- 解析 HTML 標(biāo)簽施戴，構(gòu)建 DOM 樹
- 解析 CSS 標(biāo)簽反浓，構(gòu)建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹（render tree）
- 在渲染樹的基礎(chǔ)上進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上（painting）
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
