HTML: 前端页面结构和加载过程

Myth丶恋晨 2022-10-05 10:44 221阅读 0赞

### 前端页面结构和加载过程 ###

*  页面结构
 *   *  举例说明：
 *  HTML 与 DOM 有什么不同
 *   *  操作 DOM
     *  虚拟 DOM

# 页面结构 #

最基本的页面结构：

*  < html>元素是页面的根元素，它描述完整的网页；
 *  < head>元素包含了我们想包含在 HTML 页面中，但不希望显示在网页里的内容；
 *  < body>元素包含了我们访问页面时所有显示在页面上的内容，是用户最终能看到的内容

页面 HTML 结构不合理可能会导致页面响应慢，这个过程很多时候体现在< script>和< style>元素的设计上，它们会影响页面加载过程中对 Javascript 和 CSS 代码的处理。

## 举例说明： ##

（1）当我们打开百度首页的时候，浏览器会从服务器中获取到 HTML 内容。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]

（2）浏览器获取到 HTML 内容后，就开始从上到下解析 HTML 的元素。

（3）< head>元素内容会先被解析，此时浏览器还没开始渲染页面。我们看到元素里有用于描述页面元数据的元素，还有一些元素涉及外部资源（如图片、CSS 样式等），此时浏览器会去获取这些外部资源。  
除此之外，我们还能看到元素中还包含着不少的

（5）当 JavaScript 脚本下载完成后，浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后，控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML 页面。

（6）此时< body>元素内容开始被解析，浏览器开始渲染页面。在这个过程中，我们看到< head>中放置的< script>元素会阻塞页面的渲染过程：把 JavaScript 放在< head>里，意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。  
到这里，我们就明白了：如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕。

因此，对于对性能要求较高、需要快速将内容呈现给用户的网页，常常会将 JavaScript 脚本放在< body>的最后面。这样可以避免资源阻塞，页面得以迅速展示。我们还可以使用**defer/async/preload**等属性来标记< script>标签，来控制 JavaScript 的加载顺序。

# HTML 与 DOM 有什么不同 #

根据 MDN 官方描述：文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。

也就是说，**DOM 是用来操作和描述 HTML 文档的接口**。如果说浏览器用 HTML 来描述网页的结构并渲染，那么使用 DOM 则可以获取网页的结构并进行操作。一般来说，我们使用 JavaScript 来操作 DOM 接口，从而实现页面的动态变化，以及用户的交互操作。

在开发过程中，常常用对象的方式来描述某一类事物，用特定的结构集合来描述某些事物的集合。DOM 也一样，它将 HTML 文档解析成一个由 DOM 节点以及包含属性和方法的相关对象组成的结构集合。

## 操作 DOM ##

除了获取 DOM 结构以外，通过 HTML DOM 相关接口，我们还可以使用 JavaScript 来访问 DOM 树中的节点，也可以创建或删除节点。比如我们想在className为wrapper的父元素里面删除它的第一个子元素，可以这么操作：

// 获取到 class 为 swiper-control 的第一个节点，这里得到我们的滚动控制面板
    const controlPanel = document.getElementsByClassName("wrapper")[0];
    // 获取className为wrapper的第一个子节点
    const firstChild = controlPanel.firstElementChild;
    // 删除滚动控制面板的子节点
    controlPanel.removeChild(firstChild);

## 虚拟 DOM ##

随着应用程序越来越复杂，DOM 操作越来越频繁，需要监听事件和在事件回调更新页面的 DOM 操作也越来越多，频繁的 DOM 操作会导致页面频繁地进行计算和渲染，导致不小的性能开销。于是虚拟 DOM 的想法便被人提出，并在许多框架中都有实现。

虚拟 DOM 其实是用来模拟真实 DOM 的中间产物，它的设计大致可分成 3 个过程：

*  用JavaScript 对象模拟 DOM 树，得到一棵虚拟 DOM 树；
 *  当页面数据变更时，生成新的虚拟 DOM 树，比较新旧两棵虚拟 DOM 树的差异；
 *  把差异应用到真正的 DOM 树上。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bmRheTk3_size_16_color_FFFFFF_t_70]: /images/20221005/fcb2dd25521a43ceb7c50d7ed8f20fe0.png