eb開(kāi)發(fā)是一個(gè)很依賴(lài)經(jīng)驗(yàn)的領(lǐng)域，然而這對(duì)初學(xué)者很不友好。

知識(shí)一旦脫離了應(yīng)用場(chǎng)景就會(huì)變得晦澀、空洞，且知識(shí)本身也滿足“二八定律”，“抓大放小”是提高學(xué)習(xí)效率的關(guān)鍵。

下文向大家介紹了HTML和CSS之間的關(guān)系。內(nèi)容選自《HTML 5與CSS 3核心技法（全彩）》一書(shū)。本書(shū)主線清晰，講解簡(jiǎn)潔，并提供在線效果演示效果，非常適合小白上手！

1 HTML是骨架

很難想象一個(gè)人在桌前對(duì)著一塊砧板坐一夜，隔一會(huì)兒就噼里啪啦敲幾下，一會(huì)兒哭一會(huì)兒笑，是一種什么景象。事實(shí)上，在貓眼中我們就是這樣的。只不過(guò)我們面對(duì)的是一塊會(huì)發(fā)光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網(wǎng)”到底是在做什么？

獲取信息。

重點(diǎn)在“信息”，一種看不見(jiàn)摸不著卻真實(shí)存在的東西。無(wú)論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會(huì)影響它傳遞了完整的信息，以及這條信息的內(nèi)在邏輯是正確的，不是嗎？HTML就是用來(lái)盛放最核心的內(nèi)容——信息。

所以，在CSS和JavaScript出現(xiàn)之前，HTML就出現(xiàn)了。這是必然的，因?yàn)槿绻B最核心的信息都無(wú)法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無(wú)意義的。

除滿足承載核心信息的需求外，HTML還解決了一個(gè)重要的問(wèn)題——將信息結(jié)構(gòu)化。

試想有這樣一篇文章：

背影

我說(shuō)道：“爸爸，你走吧。”他望車(chē)外看了看，說(shuō)：“我買(mǎi)幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

評(píng)論

王花花 大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧

李拴蛋 我們都不愿意承認(rèn)他老了

劉備備 想吃橘子...

此時(shí)上面的信息基本沒(méi)有結(jié)構(gòu)，只能通過(guò)斷行或縮進(jìn)盡可能讓內(nèi)容更易讀，編輯時(shí)的狀態(tài)就是其最終的顯示效果。

HTML就派上了用場(chǎng)，見(jiàn)下方的代碼：

代碼

<artcle>

<h1>背影</h1>

<p>

我說(shuō)道：“爸爸，你走吧。”他望車(chē)外看了看，說(shuō)：“我買(mǎi)幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<section id="comment-list">

<div class="title">評(píng)論</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>

</div>

<divclass="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我們都不愿意承認(rèn)他老了</span>

</div>

<div class="comment">

<strong class="username">劉備備</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

一頭霧水沒(méi)關(guān)系，后面我們會(huì)細(xì)說(shuō)每一個(gè)部分。總之這段內(nèi)容給人感覺(jué)反而更繁瑣。但繁瑣是代價(jià)，重要的是現(xiàn)在這段信息有結(jié)構(gòu)了。這就意味著計(jì)算機(jī)可以通過(guò)結(jié)構(gòu)的規(guī)律將其顯示得更便于閱讀（甚至是交互）。

以下是不加任何裝飾性?xún)?nèi)容直接讓瀏覽器呈現(xiàn)的結(jié)果：

效果

這是純HTML在沒(méi)有引入任何裝飾時(shí)的顯示效果。很明顯，即便是這樣也比純文字狀態(tài)易讀了許多。但注意，HTML本身沒(méi)有樣式，字體大小和粗細(xì)有變化的原因是瀏覽器的默認(rèn)樣式起了作用，與HTML沒(méi)有關(guān)系。而重點(diǎn)就在這里，這意味著我們可以基于這個(gè)結(jié)構(gòu)設(shè)計(jì)自己的頁(yè)面效果，見(jiàn)下方的示例。

代碼

<style>

body { font-family: 'Microsoft YaHei', sans-serif; }

#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

#comment-list .title {

color: #777; font-size: 1.1rem; padding-bottom: 5px;

border-bottom: 1px solid #ccc;

}

</style>

<artcle>

<h1>背影</h1>

<p>

我說(shuō)道：“爸爸，你走吧。”他望車(chē)外看了看，說(shuō)：“我買(mǎi)幾個(gè)橘子去。你就在此地，不要走動(dòng)。”我看那邊月臺(tái)的柵欄外有幾個(gè)賣(mài)東西的等著顧客。走到那邊月臺(tái)，須穿過(guò)鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過(guò)去自然要費(fèi)事些。我本來(lái)要去的，他不肯，只好讓他去。我看見(jiàn)他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過(guò)鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<section id="comment-list">

<div class="title">評(píng)論</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>

</div>

<div class="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我們都不愿意承認(rèn)他老了</span>

</div>

<div class="comment">

<strong class="username">劉備備</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

效果

這里只是舉了一個(gè)小示例。你可以輕而易舉地讓頁(yè)面的風(fēng)格千變?nèi)f化，進(jìn)而讓用戶體驗(yàn)有所差異（或差距）。“千變?nèi)f化”因CSS靈活、強(qiáng)大，“輕而易舉”因HTML簡(jiǎn)潔、有序。結(jié)構(gòu)的力量！

CSS是皮膚

一個(gè)充滿活力的生態(tài)是不滿足于現(xiàn)狀的。人們?cè)谶m應(yīng)了便利地瀏覽核心信息之后，就會(huì)想方設(shè)法改進(jìn)瀏覽的體驗(yàn)。比如，讓自己的博客以多欄顯示，以便在視覺(jué)上區(qū)分不同板塊；修改字體顏色，以便強(qiáng)調(diào)一些重要信息等。

起初的做法是——準(zhǔn)備幾種特殊的標(biāo)簽，專(zhuān)門(mén)用于樣式的指定。涉及布局的地方，如果沒(méi)有特殊標(biāo)簽就直接用表格布局。以下沒(méi)有任何樣式的狀態(tài)（以下代碼均不需要看懂）：

代碼

<h1>標(biāo)題</h1>

<p>

從前有座山，山里有個(gè)廟，廟里...

</p>

效果

此時(shí)的頁(yè)面結(jié)構(gòu)下。

如果想讓標(biāo)題居中，則需要給其添加元素<center>，見(jiàn)下方的示例。

代碼

<center>

<h1>標(biāo)題</h1>

</center>

<p>

從前有座山，山里有個(gè)廟，廟里...

</p>

效果

此時(shí)的頁(yè)面結(jié)構(gòu)如下。

居中標(biāo)題的目的確實(shí)達(dá)到了，但是有一個(gè)很大的問(wèn)題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對(duì)于簡(jiǎn)單的頁(yè)面確實(shí)可行，但如果是復(fù)雜的頁(yè)面，這種做法的工作量就是噩夢(mèng)，因?yàn)槊總€(gè)地方都得修改，無(wú)論是對(duì)齊方式、顏色、背景色，還是大的布局都必須通過(guò)修改結(jié)構(gòu)才能完成。這種做法的最大問(wèn)題是可維護(hù)性太差，很多時(shí)候?yàn)榱艘环N樣式要修改很多不必要的結(jié)構(gòu)，枯燥、重復(fù)、削足適履的工作太多，基本上寫(xiě)一次就再也不想改了。

這個(gè)問(wèn)題亟待解決，而且解決方案還要兼容現(xiàn)有規(guī)則。現(xiàn)有規(guī)則是什么？HTML的語(yǔ)法及結(jié)構(gòu)。不過(guò)既然HTML已經(jīng)有結(jié)構(gòu)了，為什么不好好利用呢？

以前面示例中的文章頁(yè)面為例，如果我們想更改標(biāo)題，是否可以先統(tǒng)一選中所有標(biāo)題，然后說(shuō)明想要什么樣式規(guī)則呢？就像下面這樣：

所有h1 元素聽(tīng)著

對(duì)齊方式 居中。

字體顏色 黑色。

如果想將所有段落字體放大，則像下面這樣：

所有p 元素聽(tīng)著

字體大小 150%。

這種方式的確很高效！同時(shí)這個(gè)規(guī)則與HTML語(yǔ)法無(wú)關(guān)，相當(dāng)于另一種語(yǔ)言。這樣結(jié)構(gòu)和樣式就不會(huì)互相影響，結(jié)構(gòu)是結(jié)構(gòu)，樣式是樣式，兩者隔離開(kāi)了。如果想修改樣式，則完全不需要?jiǎng)贖TML大駕，只需要修改樣式文件即可，更便于管理和維護(hù)。這就是CSS，只不過(guò)其語(yǔ)法更簡(jiǎn)潔。

下面以修改標(biāo)題對(duì)齊方式為例：

h1 { /* 所有h1 元素聽(tīng)著 */

text-align: center; /* 對(duì)齊方式 居中 */

}

通過(guò)批量選擇和處理，極大地提高了開(kāi)發(fā)效率，降低了維護(hù)成本，四兩撥千斤。

（完）

圖書(shū)推薦

《HTML 5與CSS 3核心技法（全彩）》

表嚴(yán)肅 著

本書(shū)能夠為自學(xué)Web開(kāi)發(fā)初學(xué)者建立一套HTML與CSS的核心知識(shí)框架，同時(shí)借助豐富的示例讓初學(xué)者有一個(gè)愉悅、輕松的學(xué)習(xí)過(guò)程。

想從事前端開(kāi)發(fā)的，可將本書(shū)作為學(xué)習(xí)的起點(diǎn)。正從事前端開(kāi)發(fā)的，可將本書(shū)作為速查的手冊(cè)。

家好，我是皮皮。

前言

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

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

一、瀏覽器頁(yè)面加載過(guò)程

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

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

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

我們都知道，頁(yè)面是用 HTML/CSS/JavaScript 來(lái)編寫(xiě)的。

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

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

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

其中：

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

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

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

因此，如果想要提升頁(yè)面的加載速度，就需要了解瀏覽器頁(yè)面的加載過(guò)程是怎樣的，從根本上來(lái)解決問(wèn)題。

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

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

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

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

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

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

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

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

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

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

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

百度首頁(yè)

三、DOM 解析

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

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

二、HTML 與 DOM 有什么不同

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

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

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

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

三、DOM 解析

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

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

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

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

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

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

四、事件委托

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

如果我們?cè)诿總€(gè)元素上都進(jìn)行監(jiān)聽(tīng)的話，則需要綁定三個(gè)事件;(假設(shè)頁(yè)面上有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);

使用事件委托，可以通過(guò)將事件添加到它們的父節(jié)點(diǎn)，而將事件委托給父節(jié)點(diǎn)來(lái)觸發(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);

這樣能解決什么問(wèn)題呢？

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

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

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

注意:

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

五、總結(jié)

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

TML 是一種標(biāo)記語(yǔ)言，用于創(chuàng)建網(wǎng)頁(yè)和應(yīng)用程序。它的基本結(jié)構(gòu)由以下三個(gè)部分組成：

• 文檔類(lèi)型聲明（doctype declaration），用來(lái)告訴瀏覽器文檔的版本和規(guī)范。它以 <!DOCTYPE html> 開(kāi)頭，表示文檔遵循 HTML5 標(biāo)準(zhǔn)。
• html 標(biāo)簽（html tag），用來(lái)包含整個(gè)文檔的內(nèi)容。它以 <html> 開(kāi)始，以 </html> 結(jié)束。它還可以包含一個(gè) lang 屬性，用來(lái)指定文檔的主要語(yǔ)言。
• head 和 body 標(biāo)簽（head and body tags），用來(lái)分別包含文檔的元數(shù)據(jù)（metadata）和可見(jiàn)內(nèi)容（visible content）。head 標(biāo)簽以 <head> 開(kāi)始，以 </head> 結(jié)束。它可以包含一些不顯示在網(wǎng)頁(yè)上的信息，比如標(biāo)題、字符集、樣式表等。body 標(biāo)簽以 <body> 開(kāi)始，以 </body> 結(jié)束。它可以包含一些顯示在網(wǎng)頁(yè)上的內(nèi)容，比如文本、圖片、視頻、表單等。

一個(gè) HTML 的基本結(jié)構(gòu)示例如下：