HTML頁面基本結(jié)構(gòu)和加載過程

家好，我是皮皮。

前言

對(duì)于前端來說，HTML 都是最基礎(chǔ)的內(nèi)容。

今天，我們來了解一下 HTML 和網(wǎng)頁有什么關(guān)系，以及與 DOM 有什么不同。通過本講內(nèi)容，你將掌握瀏覽器是怎么處理 HTML 內(nèi)容的，以及在這個(gè)過程中我們可以進(jìn)行怎樣的處理來提升網(wǎng)頁的性能，從而提升用戶的體驗(yàn)。

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗(yàn)：當(dāng)打開某個(gè)瀏覽器的時(shí)候，發(fā)現(xiàn)一直在轉(zhuǎn)圈，或者等了好長(zhǎng)時(shí)間才打開頁面……

此時(shí)的你，會(huì)選擇關(guān)掉頁面還是耐心等待呢？

這一現(xiàn)象，除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過慢等原因，大多數(shù)都是由于頁面設(shè)計(jì)不合理導(dǎo)致加載時(shí)間過長(zhǎng)導(dǎo)致的。

我們都知道，頁面是用 HTML/CSS/JavaScript 來編寫的。

HTML 的職責(zé)在于告知瀏覽器如何組織頁面，以及搭建頁面的基本結(jié)構(gòu)；
CSS 用來裝飾 HTML，讓我們的頁面更好看；
JavaScript 則可以豐富頁面功能，使靜態(tài)頁面動(dòng)起來。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個(gè)網(wǎng)頁結(jié)構(gòu)，基本上所有網(wǎng)頁都是這樣的 HTML 結(jié)構(gòu)：

<html>
    <head></head>
    <body></body>
</html>

其中：

html元素是頁面的根元素，它描述完整的網(wǎng)頁；
head元素包含了我們想包含在 HTML 頁面中，但不希望顯示在網(wǎng)頁里的內(nèi)容；
body元素包含了我們?cè)L問頁面時(shí)所有顯示在頁面上的內(nèi)容，是用戶最終能看到的內(nèi)容;

HTML 中的元素特別多，其中還包括可用于 Web Components 的自定義元素。

前面我們提到頁面 HTML 結(jié)構(gòu)不合理可能會(huì)導(dǎo)致頁面響應(yīng)慢，這個(gè)過程很多時(shí)候體現(xiàn)在<script>和<style>元素的設(shè)計(jì)上，它們會(huì)影響頁面加載過程中對(duì) Javascript 和 CSS 代碼的處理。

因此，如果想要提升頁面的加載速度，就需要了解瀏覽器頁面的加載過程是怎樣的，從根本上來解決問題。

瀏覽器在加載頁面的時(shí)候會(huì)用到 GUI 渲染線程和 JavaScript 引擎線程（更詳細(xì)的瀏覽器加載和渲染機(jī)制將在第 7 講中介紹）。其中，GUI 渲染線程負(fù)責(zé)渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負(fù)責(zé)處理 JavaScript 腳本程序。

由于 JavaScript 在執(zhí)行過程中還可能會(huì)改動(dòng)界面結(jié)構(gòu)和樣式，因此它們之間被設(shè)計(jì)為互斥的關(guān)系。也就是說，當(dāng) JavaScript 引擎執(zhí)行時(shí)，GUI 線程會(huì)被掛起。

以網(wǎng)易云課堂官網(wǎng)為例，我們來看看網(wǎng)頁加載流程。

（1）當(dāng)我們打開官網(wǎng)的時(shí)候，瀏覽器會(huì)從服務(wù)器中獲取到 HTML 內(nèi)容。

（2）瀏覽器獲取到 HTML 內(nèi)容后，就開始從上到下解析 HTML 的元素。

（3）<head>元素內(nèi)容會(huì)先被解析，此時(shí)瀏覽器還沒開始渲染頁面。

我們看到<head>元素里有用于描述頁面元數(shù)據(jù)的<meta>元素，還有一些<link>元素涉及外部資源（如圖片、CSS 樣式等），此時(shí)瀏覽器會(huì)去獲取這些外部資源。除此之外，我們還能看到<head>元素中還包含著不少的<script>元素，這些<script>元素通過src屬性指向外部資源。

（4）當(dāng)瀏覽器解析到這里時(shí)（步驟 3），會(huì)暫停解析并下載 JavaScript 腳本。

（5）當(dāng) JavaScript 腳本下載完成后，瀏覽器的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。當(dāng)腳本執(zhí)行完成后，控制權(quán)會(huì)交回給渲染引擎，渲染引擎繼續(xù)往下解析 HTML 頁面。

（6）此時(shí)<body>元素內(nèi)容開始被解析，瀏覽器開始渲染頁面。

在這個(gè)過程中，我們看到<head>中放置的<script>元素會(huì)阻塞頁面的渲染過程：把 JavaScript 放在<head>里，意味著必須把所有 JavaScript 代碼都下載、解析和解釋完成后，才能開始渲染頁面。

到這里，我們就明白了：如果外部腳本加載時(shí)間很長(zhǎng)（比如一直無法完成下載），就會(huì)造成網(wǎng)頁長(zhǎng)時(shí)間失去響應(yīng)，瀏覽器就會(huì)呈現(xiàn)“假死”狀態(tài)，用戶體驗(yàn)會(huì)變得很糟糕。

因此，對(duì)于對(duì)性能要求較高、需要快速將內(nèi)容呈現(xiàn)給用戶的網(wǎng)頁，常常會(huì)將 JavaScript 腳本放在<body>的最后面。這樣可以避免資源阻塞，頁面得以迅速展示。我們還可以使用defer/async/preload等屬性來標(biāo)記<script>標(biāo)簽，來控制 JavaScript 的加載順序。

百度首頁

三、DOM 解析

對(duì)于百度這樣的搜索引擎來說，必須要在最短的時(shí)間內(nèi)提供到可用的服務(wù)給用戶，其中就包括搜索框的顯示及可交互，除此之外的內(nèi)容優(yōu)先級(jí)會(huì)相對(duì)較低。

瀏覽器在渲染頁面的過程需要解析 HTML、CSS 以得到 DOM 樹和 CSS 規(guī)則樹，它們結(jié)合后才生成最終的渲染樹并渲染。因此，我們還常常將 CSS 放在<head>里，可用來避免瀏覽器渲染的重復(fù)計(jì)算。

二、HTML 與 DOM 有什么不同

我們知道<p>是 HTML 元素，但又常常將<p>這樣一個(gè)元素稱為 DOM 節(jié)點(diǎn)，那么 HTML 和 DOM 到底有什么不一樣呢？

根據(jù) MDN 官方描述：文檔對(duì)象模型（DOM）是 HTML 和 XML 文檔的編程接口。

也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網(wǎng)頁的結(jié)構(gòu)并渲染，那么使用 DOM 則可以獲取網(wǎng)頁的結(jié)構(gòu)并進(jìn)行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實(shí)現(xiàn)頁面的動(dòng)態(tài)變化，以及用戶的交互操作。

在開發(fā)過程中，常常用對(duì)象的方式來描述某一類事物，用特定的結(jié)構(gòu)集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個(gè)由 DOM 節(jié)點(diǎn)以及包含屬性和方法的相關(guān)對(duì)象組成的結(jié)構(gòu)集合。

三、DOM 解析

我們常見的 HTML 元素，在瀏覽器中會(huì)被解析成節(jié)點(diǎn)。比如下面這樣的 HTML 內(nèi)容：

<html>
    <head>
        <title>標(biāo)題</title>
    </head>
    <body>
        <a href='xx.com'>我的超鏈接</a>
        <h1>頁面第一標(biāo)題</h1>
    </body>
</html>

打開控制臺(tái) Elements 面板，可以看到這樣的 HTML 結(jié)構(gòu)，如下圖所示：

在瀏覽器中，上面的 HTML 會(huì)被解析成這樣的 DOM 樹，如下圖所示：

我們都知道，對(duì)于樹狀結(jié)構(gòu)來說，常常使用parent/child/sibling等方式來描述各個(gè)節(jié)點(diǎn)之間的關(guān)系，對(duì)于 DOM 樹也不例外。

舉個(gè)例子，我們常常會(huì)對(duì)頁面功能進(jìn)行抽象，并封裝成組件。但不管怎么進(jìn)行整理，頁面最終依然是基于 DOM 的樹狀結(jié)構(gòu)，因此組件也是呈樹狀結(jié)構(gòu)，組件間的關(guān)系也同樣可以使用parent/child/sibling這樣的方式來描述。同時(shí)，現(xiàn)在大多數(shù)應(yīng)用程序同樣以root為根節(jié)點(diǎn)展開，我們進(jìn)行狀態(tài)管理、數(shù)據(jù)管理也常常會(huì)呈現(xiàn)出樹狀結(jié)構(gòu)。

四、事件委托

我們知道，瀏覽器中各個(gè)元素從頁面中接收事件的順序包括事件捕獲階段、目標(biāo)階段、事件冒泡階段。其中，基于事件冒泡機(jī)制，我們可以實(shí)現(xiàn)將子元素的事件委托給父級(jí)元素來進(jìn)行處理，這便是事件委托。

如果我們?cè)诿總€(gè)元素上都進(jìn)行監(jiān)聽的話，則需要綁定三個(gè)事件;(假設(shè)頁面上有a,b,c三個(gè)兄弟節(jié)點(diǎn))

function clickEventFunction(e) {
  console.log(e.target === this); // logs `true`
  // 這里可以用 this 獲取當(dāng)前元素
}
// 元素a,b,c綁定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托，可以通過將事件添加到它們的父節(jié)點(diǎn)，而將事件委托給父節(jié)點(diǎn)來觸發(fā)處理函數(shù)：

function clickEventFunction(event) {
  console.log(e.target === this); // logs `false`
  // 獲取被點(diǎn)擊的元素
  const eventTarget = event.target;
  // 檢查源元素`event.target`是否符合預(yù)期
  // 此處控制廣告面板的展示內(nèi)容
}
// 元素1綁定
element1.addEventListener("click", clickEventFunction, false);

這樣能解決什么問題呢？

綁定子元素會(huì)綁定很多次的事件，而綁定父元素只需要一次綁定。
將事件委托給父節(jié)點(diǎn)，這樣我們對(duì)子元素的增加和刪除、移動(dòng)等，都不需要重新進(jìn)行事件綁定。

常見的使用方式主要是上述這種列表結(jié)構(gòu)，每個(gè)選項(xiàng)都可以進(jìn)行編輯、刪除、添加標(biāo)簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項(xiàng)，都不需要手動(dòng)去綁定和移除事件。

如果在列表數(shù)量?jī)?nèi)容較大的時(shí)候，對(duì)成千上萬節(jié)點(diǎn)進(jìn)行事件監(jiān)聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對(duì)元素的監(jiān)聽，也是在前端性能優(yōu)化中比較簡(jiǎn)單和基礎(chǔ)的一個(gè)做法。

注意:

如果我們直接在document.body上進(jìn)行事件委托，可能會(huì)帶來額外的問題;
由于瀏覽器在進(jìn)行頁面渲染的時(shí)候會(huì)有合成的步驟，合成的過程會(huì)先將頁面分成不同的合成層，而用戶與瀏覽器進(jìn)行交互的時(shí)候需要接收事件。此時(shí)，瀏覽器會(huì)將頁面上具有事件處理程序的區(qū)域進(jìn)行標(biāo)記，被標(biāo)記的區(qū)域會(huì)與主線程進(jìn)行通信。
如果我們document.body上被綁定了事件，這時(shí)候整個(gè)頁面都會(huì)被標(biāo)記;
即使我們的頁面不關(guān)心某些部分的用戶交互，合成器線程也必須與主線程進(jìn)行通信，并在每次事件發(fā)生時(shí)進(jìn)行等待。這種情況，我們可以使用passive: true選項(xiàng)來解決

五、總結(jié)

我們了解了 HTML 的作用，以及它是如何影響瀏覽器中頁面的加載過程的，同時(shí)還介紹了使用 DOM 接口來控制 HTML 的展示和功能邏輯。我們了解了DOM解析事件委托等相關(guān)概念。

口文檔是一個(gè)項(xiàng)目開發(fā)中必需的說明文檔，但時(shí)接口文檔編寫起來比較費(fèi)事費(fèi)力。本文為大家推薦一款特別好用的接口文檔生成工具--apipost

apipost是一款國(guó)產(chǎn)的接口測(cè)試和接口文檔生成的工具。其中它接口文檔生成的功能特別強(qiáng)大。

打開apipost編寫一個(gè)登錄的接口請(qǐng)求

它這里有兩個(gè)功能，成功響應(yīng)示例及文檔和錯(cuò)誤響應(yīng)示例及文檔

成功響應(yīng)示例文檔，我們點(diǎn)擊從現(xiàn)有響應(yīng)結(jié)果導(dǎo)入和導(dǎo)出字段，獲得如圖效果

分享文檔查看

還可以添加錯(cuò)誤響應(yīng)示例文檔

分享查看，成功和失敗的響應(yīng)示例都會(huì)出現(xiàn)

它還支持html、markdown和word格式的接口文檔

看一下word格式的接口文檔效果（word只生成成功響應(yīng)示例文檔）

這就是apipost生成接口文檔的具體流程了

工具下載地址：https://www.apipost.cn

紹

每當(dāng)我們接管其他人開發(fā)的模塊或項(xiàng)目時(shí)，我們總是會(huì)瘋狂地看著那些沒有注釋的代碼。程序員經(jīng)常希望其他人寫技術(shù)文檔，而不希望自己寫技術(shù)文檔。因?yàn)榫帉懠夹g(shù)文檔需要花費(fèi)大量時(shí)間來處理格式和布局，所以編寫該文檔的人必須考慮各種非技術(shù)細(xì)節(jié)，例如在新建的Word文檔中應(yīng)放入哪個(gè)目錄，各種文檔由不同的人分散地保存在一個(gè)團(tuán)隊(duì)中。然后通過IM或電子郵件從其他人那里接收文件。這種通信還不錯(cuò)，但是效率不高。ShowDoc是非常適合IT團(tuán)隊(duì)在線共享文檔的工具。它可以提高團(tuán)隊(duì)成員之間的溝通效率。

Github坐標(biāo)

https://github.com/star7th/showdoc

它能做什么？

API文檔

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，BaaS（后端即服務(wù)）越來越流行。服務(wù)端提供API，APP端或者網(wǎng)頁前端便可方便調(diào)用數(shù)據(jù)。用ShowDoc可以非常方便快速地編寫出美觀的API文檔。

數(shù)據(jù)字典

一份好的數(shù)據(jù)字典可以很方便地向別人說明你的數(shù)據(jù)庫(kù)結(jié)構(gòu)，如各個(gè)字段的釋義等。

說明文檔

你完全可以使用showdoc來編寫一些工具的說明書,也可以編寫一些技術(shù)規(guī)范說明文檔以供團(tuán)隊(duì)查閱

功能

分享與導(dǎo)出

響應(yīng)式網(wǎng)頁設(shè)計(jì)，可將項(xiàng)目文檔分享到電腦或移動(dòng)設(shè)備查看。同時(shí)也可以將項(xiàng)目導(dǎo)出成word文件，以便離線瀏覽。

權(quán)限管理

公開項(xiàng)目與私密項(xiàng)目

ShowDoc上的項(xiàng)目有公開項(xiàng)目和私密項(xiàng)目?jī)煞N。公開項(xiàng)目可供任何登錄與非登錄的用戶訪問，而私密項(xiàng)目則需要輸入密碼驗(yàn)證訪問。密碼由項(xiàng)目創(chuàng)建者設(shè)置。

2、項(xiàng)目轉(zhuǎn)讓

項(xiàng)目創(chuàng)建者可以自由地把項(xiàng)目轉(zhuǎn)讓給網(wǎng)站的其他用戶。

3、項(xiàng)目成員

你可以很方便地為ShowDoc的項(xiàng)目添加、刪除項(xiàng)目成員。項(xiàng)目成員可以對(duì)項(xiàng)目進(jìn)行編輯，但不可轉(zhuǎn)讓或刪除項(xiàng)目（只有項(xiàng)目創(chuàng)建者才有權(quán)限）

4、團(tuán)隊(duì)管理

利用showdoc的團(tuán)隊(duì)功能你可以更好地進(jìn)行團(tuán)隊(duì)協(xié)作

編輯功能

1、markdown編輯

ShowDoc采用markdown編輯器，無論是編輯還是閱讀體驗(yàn)都極佳很棒。如果你不了解Markdown，請(qǐng)?jiān)谒阉饕嫠阉鳌闭J(rèn)識(shí)與入門 Markdown”

2、模板插入

在ShowDoc的編輯頁面，點(diǎn)擊編輯器上方的按鈕可方便地插入API接口模板和數(shù)據(jù)字典模板。插入模板后，剩下的就是改動(dòng)數(shù)據(jù)了，省去了很多編輯的力氣。

3、歷史版本

ShowDoc為頁面提供歷史版本功能，你可以方便地把頁面恢復(fù)到之前的版本。

使用方式

你可以選擇使用在線版本或者部署到自己的服務(wù)器兩種方式可供選擇，在線版本長(zhǎng)期支持維護(hù)，或者參考部署手冊(cè)部署到自己的服務(wù)器：

官方提供了詳細(xì)的部署安裝文檔，還包括二次開發(fā)的一些說明

在線版本

首先需要注冊(cè)賬號(hào)

文檔管理首頁

API文檔示例

數(shù)據(jù)字典示例

技術(shù)文檔示例

新建文檔頁面

在線API測(cè)試

總結(jié)

文檔管理有很多方式，ShowDoc的主要目的就是解決團(tuán)隊(duì)之間的這種文檔之間的協(xié)作，而且管理起來非常方便，方便互相分享和使用！既可以使用在線版本也可以選擇在自己本地部署非常方便！

PS:Javascript和Python的經(jīng)典書籍，有哪位仁兄可以推薦一二，在此感謝！

在線咨詢

上一篇：5分鐘帶你看懂 GCanvas渲染引擎的演進(jìn)
下一篇：用WebRTC和Node.js開發(fā)實(shí)時(shí)視頻聊天應(yīng)用

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML頁面基本結(jié)構(gòu)和加載過程

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結(jié)

紹

Github坐標(biāo)

它能做什么？

功能

使用方式

在線版本

總結(jié)

您的項(xiàng)目需求