網(wǎng)頁的基本組成結(jié)構(gòu)
網(wǎng)頁 = HTML + CSS + JavaScript
HTML：網(wǎng)頁元素內(nèi)容
CSS： 控制網(wǎng)頁樣式
Javascript： 操作網(wǎng)頁內(nèi)容赃梧，實(shí)現(xiàn)功能或效果
基本概念：
DOM：瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)忍疾。
CSSOM：瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)贮乳。
Render Tree: DOM和CSSOM合并后生成Render Tree。
Layout：計(jì)算出Render Tree每個(gè)節(jié)點(diǎn)的具體位置。
Painting：通過顯卡，將Layout后的節(jié)點(diǎn)內(nèi)容分別呈現(xiàn)到屏幕上。
操作流程
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎(chǔ)上進(jìn)行布局(layout), 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)
過程略講
瀏覽器獲得html文件后寡键，會(huì)自上而下的加載【1】，并在加載過程中進(jìn)行解析和渲染雪隧。如果在加載的過程中西轩，遇到外部css文件和圖片，瀏覽器會(huì)另外發(fā)出一個(gè)請(qǐng)求脑沿，來獲取css文件和相應(yīng)的圖片藕畔，這個(gè)請(qǐng)求是異步【2】的，并不會(huì)影響html文件庄拇。
js會(huì)阻塞【1】后面內(nèi)容的呈現(xiàn)和其后組件的下載注服。
html如果遇到JavaScript文件，html文件會(huì)將等待javascript加載完畢后措近，html文件再繼續(xù)渲染溶弟。
對(duì)于圖片和CSS, 在加載時(shí)會(huì)并發(fā)加載(如一個(gè)域名下同時(shí)加載兩個(gè)文件). 但在加載 JavaScript 時(shí),會(huì)禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會(huì)導(dǎo)致白屏【3】現(xiàn)象.
CSS和JS在網(wǎng)頁中的放置位置 【1】
CSS放置位置： head標(biāo)簽中（最常用，最優(yōu)選擇）
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css">
</head>-
JS放置位置: body結(jié)束標(biāo)簽前（最常用瞭郑，最優(yōu)選擇）
<body> <header></header> <main></main> <footer></footer> <script src="index.js"></script> </body>
async和defer的作用是什么辜御？有什么區(qū)別 【2】
-
加載異步
作用：defer:腳本延遲到文檔解析和顯示后執(zhí)行，有順序 <script defer src="script.js"></script>
-
async:不保證順序屈张，<script async src="script.js"></script>
沒有 defer 或 async擒权，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前阁谆，也就是說不等待后續(xù)載入的文檔元素碳抄，讀到就加載并執(zhí)行。
區(qū)別：
- 有 async场绿，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）剖效。
- 有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后贱鄙，DOMContentLoaded 事件觸發(fā)之前完成劝贸。
解釋白屏和FOUC問題 【3】
- 白屏問題
- 如果把樣式放在底部，對(duì)于IE瀏覽器逗宁，chrome等（css全部加載后再呈現(xiàn),有可能等待長），在某些場(chǎng)景下(新窗口打開梦湘，刷新等)頁面會(huì)出現(xiàn)白屏瞎颗，而不是內(nèi)容逐步展現(xiàn)。使用 @import 標(biāo)簽捌议，即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏哼拔。
使用 link 標(biāo)簽將樣式表放在頂部 - 對(duì)于圖片和CSS, 在加載時(shí)會(huì)并發(fā)加載(如一個(gè)域名下同時(shí)加載兩個(gè)文件). 但在加載 JavaScript 時(shí),會(huì)禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會(huì)導(dǎo)致 白屏 現(xiàn)象.
將JS放在body結(jié)束標(biāo)簽前
- 如果把樣式放在底部，對(duì)于IE瀏覽器逗宁，chrome等（css全部加載后再呈現(xiàn),有可能等待長），在某些場(chǎng)景下(新窗口打開梦湘，刷新等)頁面會(huì)出現(xiàn)白屏瞎颗，而不是內(nèi)容逐步展現(xiàn)。使用 @import 標(biāo)簽捌议，即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏哼拔。
- FOUC
Flash of Unstyled Content "無樣式內(nèi)容閃爍“：有些瀏覽器是邊渲染邊呈現(xiàn)，CSS放置body標(biāo)簽底部瓣颅，會(huì)出現(xiàn)加載html結(jié)束后才一次性加載css樣式倦逐，從而導(dǎo)致頁面閃爍。
