HTML頁(yè)面基本結(jié)構(gòu)和加載過程
點(diǎn)擊上方“IT共享之家”，進(jìn)行關(guān)注
回復(fù)“資料”可獲贈(zèng)Python學(xué)習(xí)福利
今
日
雞
湯
北斗七星高，哥舒夜帶刀。
大家好，我是皮皮。
前言
對(duì)于前端來說，HTML 都是最基礎(chǔ)的內(nèi)容。
今天，我們來了解一下 HTML 和網(wǎng)頁(yè)有什么關(guān)系，以及與 DOM 有什么不同。通過本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個(gè)過程中我們可以進(jìn)行怎樣的處理來提升網(wǎng)頁(yè)的性能，從而提升用戶的體驗(yàn)。
一、瀏覽器頁(yè)面加載過程
不知你是否有過這樣的體驗(yàn)：當(dāng)打開某個(gè)瀏覽器的時(shí)候，發(fā)現(xiàn)一直在轉(zhuǎn)圈，或者等了好長(zhǎng)時(shí)間才打開頁(yè)面……
此時(shí)的你，會(huì)選擇關(guān)掉頁(yè)面還是耐心等待呢？
這一現(xiàn)象，除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過慢等原因，大多數(shù)都是由于頁(yè)面設(shè)計(jì)不合理導(dǎo)致加載時(shí)間過長(zhǎng)導(dǎo)致的。
我們都知道，頁(yè)面是用 HTML/CSS/JavaScript 來編寫的。
HTML 的職責(zé)在于告知瀏覽器如何組織頁(yè)面，以及搭建頁(yè)面的基本結(jié)構(gòu)；
CSS 用來裝飾 HTML，讓我們的頁(yè)面更好看；
JavaScript 則可以豐富頁(yè)面功能，使靜態(tài)頁(yè)面動(dòng)起來。
HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個(gè)網(wǎng)頁(yè)結(jié)構(gòu)，基本上所有網(wǎng)頁(yè)都是這樣的 HTML 結(jié)構(gòu)：
其中：
html元素是頁(yè)面的根元素，它描述完整的網(wǎng)頁(yè)；
head元素包含了我們想包含在 HTML 頁(yè)面中，但不希望顯示在網(wǎng)頁(yè)里的內(nèi)容；
body元素包含了我們?cè)L問頁(yè)面時(shí)所有顯示在頁(yè)面上的內(nèi)容，是用戶最終能看到的內(nèi)容;
HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。
前面我們提到頁(yè)面 HTML 結(jié)構(gòu)不合理可能會(huì)導(dǎo)致頁(yè)面響應(yīng)慢，這個(gè)過程很多時(shí)候體現(xiàn)在