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)圈，或者等了好長時(shí)間才打開頁面……

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

這一現(xiàn)象，除了網(wǎng)絡(luò)不穩(wěn)定、網(wǎng)速過慢等原因，大多數(shù)都是由于頁面設(shè)計(jì)不合理導(dǎo)致加載時(shí)間過長導(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í)間很長（比如一直無法完成下載），就會(huì)造成網(wǎ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ù)量內(nèi)容較大的時(shí)候，對(duì)成千上萬節(jié)點(diǎn)進(jìn)行事件監(jiān)聽，也是不小的性能消耗。使用事件委托的方式，我們可以大量減少瀏覽器對(duì)元素的監(jiān)聽，也是在前端性能優(yōu)化中比較簡單和基礎(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)概念。

為工作中接觸到一些代碼的使用，本小白開始學(xué)習(xí)編程知識(shí)，每天記錄一些自學(xué)編程過程中的一些知識(shí)點(diǎn)，一是為了方便跟大家分享，另外就是為了以后復(fù)習(xí)使用。

一、前端環(huán)境搭建

Visual Studio Code

安裝Visual Studio Code，Chrome（谷歌瀏覽器）
安裝VS和Chrome插件

Visual Studio Code常用插件：

1.語言、格式化：

Chinese Language Pack for Visual Studio Code 中文簡體語音包
Prettier-Code Formatter 幾乎支持所有前端代碼的格式化
Simple icons小巧實(shí)用的文件圖標(biāo)集合
One Dark Pro個(gè)人非常喜歡的一款主題

2.HTML/CSS插件：

Auto Close Tag 標(biāo)簽自動(dòng)關(guān)閉
Auto Rename Tag 標(biāo)簽自動(dòng)更名
Auto Complete Tag 標(biāo)簽自動(dòng)完成
HTML CSS Support 自動(dòng)補(bǔ)全樣式表
HTML Snippetshtml 代碼片段
highlight matching tag 自動(dòng)高亮顯示結(jié)束括號(hào)/標(biāo)簽

3.JS/Vue插件：

JavaScript(ES6) Code snippets JS/ES6代碼片段
Vue Vue語法提示
Vue2 Snippets Vue代碼片段
Vue-beautify Vue代碼格式化

4.PHP/MySQL相關(guān)插件：

PHP Intelephense 代碼提示與函數(shù)跳轉(zhuǎn)
PHP IntelliSense 代碼智能感知（可選）
PHP DocBlocker代碼塊注釋（可選）
Format HTML in PHP格式化 PHP 中的 html 代碼
MySQL MySQL 語法高亮

5.MarkDown語法插件：

Markdownlint Markdown 語法檢查器
Markdown Rreview Enhancedmardown 文件預(yù)覽

6.提高工作效率的插件：

Path Intellisense 智能路徑提示
Bracket Pair Colorizer 不同顏色表示不同層級(jí)括號(hào)
Code Runner 支持常見的編程語言運(yùn)行調(diào)試
Live Server 內(nèi)置 web 服務(wù)器

7.如何在VSCode中配置PHP代碼檢查器：在VSCode配置文件（setting.json）

// 版本與路徑替換成系統(tǒng)中的php可執(zhí)行文件路徑與版本號(hào)
"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
"intelephense.environment.phpVersion": "7.3.4",

二、初識(shí)HTML

1.標(biāo)題和段落

頁面的內(nèi)容均由元素組成；
元素是由標(biāo)簽來描述的，標(biāo)簽根據(jù)元素的類型分為單標(biāo)簽、雙標(biāo)簽，每個(gè)元素的特征由屬性來描述，需要將屬性寫到起始標(biāo)簽中。

<h1>開會(huì)通知：本周五進(jìn)行大掃除</h1>
<p>開會(huì)通知：本周五進(jìn)行大掃除</p>

元素是由標(biāo)簽和屬性共同描述的；

<male sex="famale" sw="80, 90, 100" height="170" weight="200">男朋友</male>

html中的所有內(nèi)容，如果想要添加到html文檔中，就必須要使用一個(gè)標(biāo)簽。

// JS代碼必須寫到一個(gè)script標(biāo)簽中
<script>
    const SITE = "Hello World！";
</script>

<?php
// php代碼必須放在一對(duì)php標(biāo)簽中
echo "Hello World！";
?>

<!-- 標(biāo)題標(biāo)簽：除了設(shè)置文檔標(biāo)題之外，還可以用來劃分頁面結(jié)構(gòu)的 -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

<!-- 內(nèi)容標(biāo)簽 <p></p> -->
<p>程序猿界有一句話：每一個(gè)程序猿都應(yīng)該擁有一臺(tái)MacBook Pro</p>

2.鏈接與錨點(diǎn)

鏈接標(biāo)簽 a標(biāo)簽-當(dāng)今互聯(lián)網(wǎng)的靈魂，實(shí)現(xiàn)了全球資源之間的共享

1.target屬性：

規(guī)定在何處打開鏈接文檔。

_blank跳轉(zhuǎn)到新的頁面，在新窗口打開
_self(默認(rèn)值) 在相同的框架中打開鏈接文檔；
_parent在父框架集中打開被鏈接文檔；
_top在整個(gè)窗口中打開被鏈接文檔；
iframename在指定窗口打開。

鏈接地址

代碼案例：

<!-- _self 當(dāng)前窗口打開 -->
<a href="跳轉(zhuǎn)目標(biāo)" target="_self">Hello World</a>

<!-- _blank 跳轉(zhuǎn)到新的頁面，在新窗口打開 -->
<a href="跳轉(zhuǎn)目標(biāo)" target="_blank">Hello World</a>

<!-- 在指定窗口打開 target="iframe內(nèi)聯(lián)框架的name值" 此時(shí)a標(biāo)簽的target值需要跟iframe里的name值保持一致 -->
<a href="https://www.baidu.com/" target="baidu">打開百度</a>
<iframe srcdoc="點(diǎn)擊上面的按鈕打開百度" name="baidu" frameborder="0" width="600" height="500"></iframe>

注意：
使用target="iframename"時(shí)，需要注意a標(biāo)簽的target值需要跟iframe的name值相等。

2.錨點(diǎn)

使用錨點(diǎn)可以實(shí)現(xiàn)在當(dāng)前頁面中的任意位置進(jìn)行跳轉(zhuǎn)。

<a href="#footer">跳轉(zhuǎn)到底部</a>

<!-- 創(chuàng)建錨點(diǎn) -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>

div：通用元素標(biāo)簽，內(nèi)部可以放任意元素類型。
如何返回當(dāng)前頁面頂部？
直接將a標(biāo)簽的href值設(shè)置為#即可，如：<a href="#">回到頂部</a>。
備注：
vue.js、react等單頁面應(yīng)用，路由就是使用錨點(diǎn)實(shí)現(xiàn)的。

三、圖片元素

如果我們想要在頁面添加一張圖片，可以使用img標(biāo)簽

必須屬性：

src 圖片的URL地址；
alt 圖片的描述信息。

案例：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">

備注：
設(shè)置圖片大小時(shí)，可以只設(shè)置寬度或者高度，另一個(gè)屬性就會(huì)進(jìn)行等比縮放，不需要同時(shí)設(shè)置。在實(shí)際開發(fā)中，一般在CSS中設(shè)置圖片的樣式，圖片很少單獨(dú)使用，基本都是用在鏈接中。

個(gè)人總結(jié)：有些代碼看起來簡單，但是自己上手起來真的是難，屬于那種一看就會(huì)，一寫就錯(cuò)，看來只能通過多寫，多練才可以熟能生巧，這是個(gè)細(xì)活，急不得，要戒驕戒躁，平穩(wěn)心態(tài)來面對(duì)這么多難題，加油！

性化設(shè)置窗體是否啟用通用查詢的即時(shí)搜索功能(邊錄邊搜索)。

一、問題描述：

在快速開發(fā)平臺(tái)創(chuàng)建的窗體用到通用查詢功能的，怎樣設(shè)置部分窗體啟用即時(shí)搜索，部分窗體不啟用即時(shí)搜索功能？

二、解決方法：

Access快速開發(fā)平臺(tái)中窗體的通用查詢即時(shí)搜索功能在我的設(shè)置中設(shè)置，這個(gè)設(shè)置是針對(duì)所有模塊的。但是可以通過單獨(dú)設(shè)置某窗體的通用查詢調(diào)用代碼，可以單獨(dú)控制這個(gè)窗體是否啟用即時(shí)搜索功能。如下圖：

查看Access快速開發(fā)平臺(tái)的幫助說明:

http://www.accessgood.com/help/Main.html

然后在生成的主窗體加載事件中添加如下代碼：

三、閱讀原文：

http://www.accessoft.com/article-show.asp?id=19923

在線咨詢

上一篇：HTML頁面數(shù)據(jù)顯示到j(luò)sp頁面中
下一篇：前端必學(xué) 40個(gè)精選案例實(shí)戰(zhàn) 一課吃透HTML5+CSS3+JS(超清完結(jié))

您的項(xiàng)目需求

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

整合營銷服務(wù)商

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

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結(jié)

一、前端環(huán)境搭建

二、初識(shí)HTML

1.標(biāo)題和段落

2.鏈接與錨點(diǎn)

三、圖片元素

性化設(shè)置窗體是否啟用通用查詢的即時(shí)搜索功能(邊錄邊搜索)。

您的項(xiàng)目需求