css和js的放置位置、白屏和FOUC贱田、async和defer、簡述網(wǎng)頁的渲染機(jī)制嘴脾、
一男摧、CSS和JS在網(wǎng)頁中的放置順序是怎樣的蔬墩？
將CSS使用link標(biāo)簽放在head標(biāo)簽中。
將JS使用script標(biāo)簽包裹或者引入耗拓，并且放在body標(biāo)簽的最后拇颅。
二、解釋白屏和FOUC
白屏問題
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
- 如果使用 @import 標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
- JS放在
head部分時乔询，JS的下載會優(yōu)先于body中內(nèi)容樟插，導(dǎo)致JS腳本阻塞后面內(nèi)容的呈現(xiàn)和其他組件的下載。
FOUC(Flash of unstyled content)無樣式內(nèi)容閃爍
如果把樣式放在底部竿刁，對于IE瀏覽器黄锤，在某些場景下(點擊鏈接,輸入URL，使用書簽進(jìn)入等)食拜，會出現(xiàn) FOUC 現(xiàn)象對于 Firefox 會一直表現(xiàn)出 FOUC鸵熟。
FOUC的表現(xiàn)為——先把HTML解析出來并渲染到頁面上，然后不斷加載CSS负甸，每加載一次樣式頁面就重新繪制一次頁面流强，直到所有內(nèi)容加載完成。
三呻待、async和defer的作用是什么打月？有什么區(qū)別
-
<script src="script.js"></script>
沒有 defer或 async，瀏覽器會立即加載并執(zhí)行指定的腳本带污，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前僵控，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行鱼冀。 -
<script async src="script.js"></script>
有 async报破，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。 -
<script defer src="myscript.js"></script>
有 defer千绪，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步）充易，但是 script.js 的執(zhí)行要在所有元素解析完成之后趟径，DOMContentLoaded 事件觸發(fā)之前完成尊流。
藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時間二驰，這倆都是針對腳本的瑞妇；綠色線代表 HTML 解析稿静。
此圖告訴我們以下幾個要點：
defer 和 async 在網(wǎng)絡(luò)讀取（下載）這塊兒是一樣的辕狰，都是異步的（相較于 HTML 解析）
它倆的差別在于腳本下載完之后何時執(zhí)行改备，顯然 defer 是最接近我們對于應(yīng)用腳本加載和執(zhí)行的要求的
關(guān)于 defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的蔓倍。
async 則是一個亂序執(zhí)行悬钳，反正對它來說腳本的加載和執(zhí)行是緊緊挨著的盐捷，所以不管你聲明的順序如何，只要它加載完了就會立刻執(zhí)行默勾。
參考來源(https://segmentfault.com/q/1010000000640869)
四碉渡、簡述網(wǎng)頁的渲染機(jī)制
- 解析HTML標(biāo)簽，構(gòu)建DOM樹母剥。
- 解析CSS標(biāo)簽滞诺，構(gòu)建CSSOM樹。
- 將DOM與CSSOM進(jìn)行組合構(gòu)建渲染樹 Render Tree环疼。
- 在渲染樹的基礎(chǔ)上進(jìn)行布局铭段，計算每個節(jié)點的幾何結(jié)構(gòu)。
-
把每個節(jié)點繪制到屏幕上 (painting)秦爆。
對于Firefox瀏覽器則有所不同
- 解析HTML標(biāo)簽，構(gòu)建DOM樹憔披。
- 解析CSS標(biāo)簽
- 每解析出一個CSS標(biāo)簽就與對應(yīng)的DOM進(jìn)行組合構(gòu)建成渲染樹的一部分等限。
- 在渲染樹的基礎(chǔ)上進(jìn)行布局，計算每個節(jié)點的幾何結(jié)構(gòu)芬膝。
- 把每個節(jié)點繪制到屏幕上 (painting)望门。
