HTML頁面基本結構和加載過程

家好，我是皮皮。

前言

對于前端來說，HTML 都是最基礎的內容。

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

一、瀏覽器頁面加載過程

不知你是否有過這樣的體驗：當打開某個瀏覽器的時候，發現一直在轉圈，或者等了好長時間才打開頁面……

此時的你，會選擇關掉頁面還是耐心等待呢？

這一現象，除了網絡不穩定、網速過慢等原因，大多數都是由于頁面設計不合理導致加載時間過長導致的。

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

HTML 的職責在于告知瀏覽器如何組織頁面，以及搭建頁面的基本結構；
CSS 用來裝飾 HTML，讓我們的頁面更好看；
JavaScript 則可以豐富頁面功能，使靜態頁面動起來。

HTML由一系列的元素組成，通常稱為HTML元素。HTML 元素通常被用來定義一個網頁結構，基本上所有網頁都是這樣的 HTML 結構：

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

其中：

html元素是頁面的根元素，它描述完整的網頁；
head元素包含了我們想包含在 HTML 頁面中，但不希望顯示在網頁里的內容；
body元素包含了我們訪問頁面時所有顯示在頁面上的內容，是用戶最終能看到的內容;

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

前面我們提到頁面 HTML 結構不合理可能會導致頁面響應慢，這個過程很多時候體現在<script>和<style>元素的設計上，它們會影響頁面加載過程中對 Javascript 和 CSS 代碼的處理。

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

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

由于 JavaScript 在執行過程中還可能會改動界面結構和樣式，因此它們之間被設計為互斥的關系。也就是說，當 JavaScript 引擎執行時，GUI 線程會被掛起。

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

（1）當我們打開官網的時候，瀏覽器會從服務器中獲取到 HTML 內容。

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

（3）<head>元素內容會先被解析，此時瀏覽器還沒開始渲染頁面。

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

（4）當瀏覽器解析到這里時（步驟 3），會暫停解析并下載 JavaScript 腳本。

（5）當 JavaScript 腳本下載完成后，瀏覽器的控制權轉交給 JavaScript 引擎。當腳本執行完成后，控制權會交回給渲染引擎，渲染引擎繼續往下解析 HTML 頁面。

（6）此時<body>元素內容開始被解析，瀏覽器開始渲染頁面。

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

到這里，我們就明白了：如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網頁長時間失去響應，瀏覽器就會呈現“假死”狀態，用戶體驗會變得很糟糕。

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

百度首頁

三、DOM 解析

對于百度這樣的搜索引擎來說，必須要在最短的時間內提供到可用的服務給用戶，其中就包括搜索框的顯示及可交互，除此之外的內容優先級會相對較低。

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

二、HTML 與 DOM 有什么不同

我們知道<p>是 HTML 元素，但又常常將<p>這樣一個元素稱為 DOM 節點，那么 HTML 和 DOM 到底有什么不一樣呢？

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

也就是說，DOM 是用來操作和描述 HTML 文檔的接口。如果說瀏覽器用 HTML 來描述網頁的結構并渲染，那么使用 DOM 則可以獲取網頁的結構并進行操作。一般來說，我們使用 JavaScript 來操作 DOM 接口，從而實現頁面的動態變化，以及用戶的交互操作。

在開發過程中，常常用對象的方式來描述某一類事物，用特定的結構集合來描述某些事物的集合。DOM 也一樣，它將 HTML 文檔解析成一個由 DOM 節點以及包含屬性和方法的相關對象組成的結構集合。

三、DOM 解析

我們常見的 HTML 元素，在瀏覽器中會被解析成節點。比如下面這樣的 HTML 內容：

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

打開控制臺 Elements 面板，可以看到這樣的 HTML 結構，如下圖所示：

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

我們都知道，對于樹狀結構來說，常常使用parent/child/sibling等方式來描述各個節點之間的關系，對于 DOM 樹也不例外。

舉個例子，我們常常會對頁面功能進行抽象，并封裝成組件。但不管怎么進行整理，頁面最終依然是基于 DOM 的樹狀結構，因此組件也是呈樹狀結構，組件間的關系也同樣可以使用parent/child/sibling這樣的方式來描述。同時，現在大多數應用程序同樣以root為根節點展開，我們進行狀態管理、數據管理也常常會呈現出樹狀結構。

四、事件委托

我們知道，瀏覽器中各個元素從頁面中接收事件的順序包括事件捕獲階段、目標階段、事件冒泡階段。其中，基于事件冒泡機制，我們可以實現將子元素的事件委托給父級元素來進行處理，這便是事件委托。

如果我們在每個元素上都進行監聽的話，則需要綁定三個事件;(假設頁面上有a,b,c三個兄弟節點)

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

使用事件委托，可以通過將事件添加到它們的父節點，而將事件委托給父節點來觸發處理函數：

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

這樣能解決什么問題呢？

綁定子元素會綁定很多次的事件，而綁定父元素只需要一次綁定。
將事件委托給父節點，這樣我們對子元素的增加和刪除、移動等，都不需要重新進行事件綁定。

常見的使用方式主要是上述這種列表結構，每個選項都可以進行編輯、刪除、添加標簽等功能，而把事件委托給父元素，不管我們新增、刪除、更新選項，都不需要手動去綁定和移除事件。

如果在列表數量內容較大的時候，對成千上萬節點進行事件監聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對元素的監聽，也是在前端性能優化中比較簡單和基礎的一個做法。

注意:

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

五、總結

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

txt文件變成html網頁文件

如果您看過《HTML是什么？——零基礎自學網頁制作》這篇教程，請按照其中說明創建一個txt文件。具體過程如下：

step1：在您方便的磁盤中建立一個文件夾，命名為"零基礎自學網頁制作"。例如我在D盤中建立了"零基礎自學網頁制作"文件夾。

step2：在文件夾中創建"HTML框架.txt"文件。鼠標移動到空白處點擊右鍵選擇"文本文檔"。

命名為"html框架"，如下圖所示。

如果您的電腦沒有顯示".txt"后綴的話，請做如下操作：點擊"工具"，找到"文件夾選項"

菜單如下：點擊"查看選項"。

下拉滑條，找到"隱藏已知文件類型的擴展名"選項，將前面的對勾去掉。

如果您使用的是win10的話請參考《邊學邊做網頁篇------初識HTML》，這也是我做的教程，不過以后都使用這個賬號來發了。

step3：把"HTML框架"復制粘貼到"html框架.txt"文件中。HTML框架代碼如下：

<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>

代碼講解請參照《HTML是什么？——零基礎自學網頁制作》這篇教程中的講解。

粘貼后效果如下：使用CTRL+s組合鍵保存文件。

step4：復制"html框架.txt"文件，更名為"第一個網頁.txt"。原始的"html框架.txt"文件為以后備用。

如圖所示：

step5：把"第一個網頁.txt"的后綴名".txt"改為".html"。

首先將光標放在"第一個網頁.txt"文件上，點擊右鍵，選擇"重命名"。如圖：

選擇".txt"

更改為".html",敲擊回車鍵。這時會彈出一個對話框，如圖:

大膽的點擊"是"即可。

修改后文件是這樣的，如圖：因為我的默認瀏覽器是360，所以，".html"文件圖標顯示為360瀏覽器的圖標，顯示其他瀏覽器的圖標也沒有問題。

step6：將鼠標移動到"第一個網頁.html"文件上，單擊右鍵，選擇打開方式，如圖：

選擇任何一個瀏覽器打開即可，我使用的是火狐瀏覽器（Firefox），打開后如圖所示：空白一片。

點擊鍵盤F12鍵，看一下控制臺，如圖：查看器中已經顯示我們的代碼框架了。成功！

如果網頁是一道菜，那么，html框架我們可以理解為裝菜的白盤子，所以我們打開框架時，瀏覽器顯示一片白。下面我們為盤子中加些簡單的"菜"。

為html頁面添加標題與段落

首先我們為頁面添加"標題"

在添加標題前，我們來看一下html框架代碼中的內容，在<html></html>標簽中有<head></head>和<body></body>兩個兄弟標簽。

我們在頁面中看到的所有的內容都是添加到<body></body>標簽中間！

<head></head>標簽中的內容并不會顯示在頁面中。

那么如何添加"標題"呢？

標題在HTML中用<h></h>標簽表示。在<h></h>中間加入文字內容即可。如下所示：

<h>第一個頁面</h>

右鍵，使用"記事本"打開"第一個網頁.html"文件。如圖所示：如果您的"打開方式"中沒有"記事本"請點擊"選擇默認程序"

在"其他程序"中找到"記事本"。點擊"確定"。從此，"記事本"就一直存在于"打開方式"中了。

我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開。

<!DOCTYPE HTML><html><head> </head> <body> <h>第一個頁面</h> </body> </html>

然后，使用瀏覽器打開，如圖所示：標題出現在頁面中了。

下面，我們來添加段落內容。

段落在HTML中使用<p></p>標簽添加。代碼如下

<p>千里之行始于足下</p>

請各位自行將代碼添加到"第一個網頁.html"文件中吧！示例代碼如下：

<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個網頁</h><p>千里之行始于足下</p> </body> </html>

結果如圖所示：

通過這個練習，我們可以發現一個規律，在<body></body>中，子元素代碼的上下順序代表了它在頁面中顯示的排版順序。

這也簡單回答了代碼結構與排版的關系，html的標簽語句只是標記了它所承載的信息的屬性和版面位置。

基于這個特性，html被稱為超文本標記語言。

下一期我們具體討論頁面中文字編輯的技巧。

喜歡的小伙伴請加關注，有任何問題請給我留言，歡迎大家給與指正！感激不盡！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

TML是什么

HTML的全稱是超文本標記語言，英文全稱是HyperText Markup Language。如果您是零基礎的話，看到這個名字，即使是漢語的，估計也會不知所云。

超文本指的是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起，這些相互連接的文本集合稱為"超文本"。超文本是網頁制作一個非常重要的概念，可以說網絡的精髓就在于"互聯"。

這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。（孫素華編著．Dreamweaver CS5 Flash CS5 Photoshop CS5網頁設計從入門到精通：中國青年出版社，2014.10：第16頁）

標記語言的概念比較復雜，簡單來說，HTML并不是程序語言（不同于C或Python），只是一種在網頁中顯示資料排版位置的標記結構語言。這句話提煉一下就是"標記信息在頁面中排版結構的語言"。

如果讀的不太明白，在下一節"HTML基本框架"中會對HTML的排版結構規則進行直觀展示，如果您讀不懂可以盡情的跳過，畢竟我們的重點是怎么用。

HTML基本框架

HTML框架簡單說就是任何HTML網頁文件中都會包含的基本代碼內容。如果我們打算寫一個頁面，就一定要把框架代碼寫入后才能正式開始添加內容。框架代碼如下：

<!DOCTYPE HTML><html> <head> </head> <body> </body> </html>

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

這七行代碼是所有HTML頁面所共有的，也就是HTML的框架了。不信我們來驗證一下。

例子一，頭條的文章頁面（電腦版）網址：https://www.toutiao.com/i6785149184245760516/

筆者使用Firefox（火狐）瀏覽器，輸入網址后點擊鍵盤上的F12,，如圖所示

我們可以看到頁面下半部分出現了一個調控臺。

點擊查看器即可看頁面代碼。代碼如下：

放大一些，大家看看，<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標簽是不是一個不少，只是中間多了很多內容而已。

一個例子不具有普適性，下面我們再看一個例子，我隨便找了個新聞頁面，網址：https://mil.eastday.com/a/200125113254400.html

使用同樣的方法打開查看器看代碼，如圖：

是不是框架中的代碼一個也不少吧。

所以，大家請在自己的電腦中新建一個txt文件，將HTML框架粘貼到txt文件中，并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。

通過對框架中的代碼進行觀察，細心的讀者可能已經發現了HTML這種標記語言的書寫規律。

規律1：每一個語句都是包含在<>尖括號內的。這是HTML標記語言的基本特點之一，大家一定記牢。

規律2：除了<!DOCTYPE HTML>這個標簽外，其他標簽都是成對出現！例如<html>與</html>，<head>與</head>，<body>與</body>。

規律3：這個規律通過觀察代碼也不難發現，即<html></html>兩個標簽中間夾著<head></head>和<body></body>，我們把<head></head>標簽稱為<html></html>標簽的子標簽，反過來<html></html>標簽是<head></head>標簽的父標簽，<head></head>和<body></body>稱為并列關系或者兄弟關系。而<!DOCTYPE HTML>是一個聲明語句，屬于六親不認的。

各種關系如下圖所示：

這樣就回到了之前我們解釋"標記語言"的問題上。我們說"標記語言"是"標記信息在頁面中排版結構的語言"，這種父子關系、兄弟關系就可以理解為一個頁面的"結構"，這種結構又與頁面的排版有關。

在下一期中，我們會通過練習來解釋"結構"與排版的關系。

喜歡的小伙伴請加關注，有任何問題可以留言給我，歡迎指正批評，感激不盡！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

在線咨詢

上一篇：不得不佩服，美觀小巧的網頁內容編輯器-ContentTools
下一篇：通過將 JavaScript 移動到外部文件來改進網頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML頁面基本結構和加載過程

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結

txt文件變成html網頁文件

為html頁面添加標題與段落

HTML完整學習目錄

TML是什么

HTML基本框架

HTML完整學習目錄

您的項目需求