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解析事件委托等相關概念。

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

一、前端環境搭建

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小巧實用的文件圖標集合
One Dark Pro個人非常喜歡的一款主題

2.HTML/CSS插件：

Auto Close Tag 標簽自動關閉
Auto Rename Tag 標簽自動更名
Auto Complete Tag 標簽自動完成
HTML CSS Support 自動補全樣式表
HTML Snippetshtml 代碼片段
highlight matching tag 自動高亮顯示結束括號/標簽

3.JS/Vue插件：

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

4.PHP/MySQL相關插件：

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

5.MarkDown語法插件：

Markdownlint Markdown 語法檢查器
Markdown Rreview Enhancedmardown 文件預覽

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

Path Intellisense 智能路徑提示
Bracket Pair Colorizer 不同顏色表示不同層級括號
Code Runner 支持常見的編程語言運行調試
Live Server 內置 web 服務器

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

// 版本與路徑替換成系統中的php可執行文件路徑與版本號
"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
"intelephense.environment.phpVersion": "7.3.4",

二、初識HTML

1.標題和段落

頁面的內容均由元素組成；
元素是由標簽來描述的，標簽根據元素的類型分為單標簽、雙標簽，每個元素的特征由屬性來描述，需要將屬性寫到起始標簽中。

<h1>開會通知：本周五進行大掃除</h1>
<p>開會通知：本周五進行大掃除</p>

元素是由標簽和屬性共同描述的；

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

html中的所有內容，如果想要添加到html文檔中，就必須要使用一個標簽。

// JS代碼必須寫到一個script標簽中
<script>
    const SITE = "Hello World！";
</script>

<?php
// php代碼必須放在一對php標簽中
echo "Hello World！";
?>

<!-- 標題標簽：除了設置文檔標題之外，還可以用來劃分頁面結構的 -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

<!-- 內容標簽 <p></p> -->
<p>程序猿界有一句話：每一個程序猿都應該擁有一臺MacBook Pro</p>

2.鏈接與錨點

鏈接標簽 a標簽-當今互聯網的靈魂，實現了全球資源之間的共享

1.target屬性：

規定在何處打開鏈接文檔。

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

鏈接地址

代碼案例：

<!-- _self 當前窗口打開 -->
<a href="跳轉目標" target="_self">Hello World</a>

<!-- _blank 跳轉到新的頁面，在新窗口打開 -->
<a href="跳轉目標" target="_blank">Hello World</a>

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

注意：
使用target="iframename"時，需要注意a標簽的target值需要跟iframe的name值相等。

2.錨點

使用錨點可以實現在當前頁面中的任意位置進行跳轉。

<a href="#footer">跳轉到底部</a>

<!-- 創建錨點 -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>

div：通用元素標簽，內部可以放任意元素類型。
如何返回當前頁面頂部？
直接將a標簽的href值設置為#即可，如：<a href="#">回到頂部</a>。
備注：
vue.js、react等單頁面應用，路由就是使用錨點實現的。

三、圖片元素

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

必須屬性：

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

案例：

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

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

個人總結：有些代碼看起來簡單，但是自己上手起來真的是難，屬于那種一看就會，一寫就錯，看來只能通過多寫，多練才可以熟能生巧，這是個細活，急不得，要戒驕戒躁，平穩心態來面對這么多難題，加油！

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

一、問題描述：

在快速開發平臺創建的窗體用到通用查詢功能的，怎樣設置部分窗體啟用即時搜索，部分窗體不啟用即時搜索功能？

二、解決方法：

Access快速開發平臺中窗體的通用查詢即時搜索功能在我的設置中設置，這個設置是針對所有模塊的。但是可以通過單獨設置某窗體的通用查詢調用代碼，可以單獨控制這個窗體是否啟用即時搜索功能。如下圖：

查看Access快速開發平臺的幫助說明:

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

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

三、閱讀原文：

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

在線咨詢

上一篇：HTML頁面數據顯示到jsp頁面中
下一篇：前端必學 40個精選案例實戰一課吃透HTML5+CSS3+JS(超清完結)

您的項目需求

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

整合營銷服務商

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

家好，我是皮皮。

前言

一、瀏覽器頁面加載過程

三、DOM 解析

二、HTML 與 DOM 有什么不同

三、DOM 解析

四、事件委托

五、總結

一、前端環境搭建

二、初識HTML

1.標題和段落

2.鏈接與錨點

三、圖片元素

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

您的項目需求