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 结构不合理可能会导致页面响应慢，这个过程很多时候体现在
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
2020-02-22 手把手教你使用Python操控手机微信app（最新教程）
2019-02-22 手把手教你如何新建scrapy爬虫框架的第一个项目（上）