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.链接与锚点

三、图片元素

性化设置窗体是否启用通用查询的即时搜索功能(边录边搜索)。

您的项目需求