当前位置：首页 > news >正文

总结：浏览器解析html与执行JS之生命周期详解

news 2025/8/26 9:17:02

总结：浏览器解析html与执行JS之生命周期详解

一·浏览器解析html的生命周期：
- 1.请求HTML文档：
- 2·接收响应：
- 3·构建DOM树：
- 4·加载外部资源：
- 5·DOMContentLoaded事件：
- 6·样式计算与布局：
- 7·绘制与渲染：
- 8·后续交互与事件循环：
- 9·资源加载完成与load事件：
- 10·卸载与垃圾回收：
二·浏览器执行JS的生命周期：
- 1.下载和解析HTML：
- 2.处理脚本标签：
- 3.DOMContentLoaded事件：
- 4.加载外部资源：
- 5.load事件：
- 6.执行事件处理程序和用户交互：
- 7.卸载页面：
三·相关参考文献：
- 1.JS高级：浏览器运行前端项目的原理及流程
- 2.js浏览器页面生命周期，以及各个阶段js调用示例：

一·浏览器解析html的生命周期：

1.请求HTML文档：

当用户输入URL或者点击链接时，浏览器向服务器发起HTTP（或HTTPS）请求以获取HTML文档数据。

2·接收响应：

服务器将HTML内容返回给浏览器，浏览器开始接收数据流。

3·构建DOM树：

浏览器接收到HTML内容后，开始解析这些文本并将其转换成DOM（Document Object Model）树结构。在这个过程中，浏览器会从上到下逐行读取HTML代码，并创建相应的DOM节点。

4·加载外部资源：

（1）在解析HTML的同时，浏览器遇到< script>、<link>（样式表）、<img>、<video>、<audio>等标签时，会根据需要异步下载CSS、JavaScript和其他媒体文件。
（2）如果遇到没有async或defer属性的<script>标签，浏览器会暂停DOM构建来执行脚本，等待脚本执行完成后再继续构建DOM。

5·DOMContentLoaded事件：

当初始HTML文档被完全加载和解析，DOM树构建完成后，浏览器会触发DOMContentLoaded事件。这意味着DOM已经准备好，但不保证所有外部资源如图片、样式表等已加载完毕。

6·样式计算与布局：

浏览器接着进行样式计算（包括CSSOM树构建），确定每个DOM元素的具体样式，并基于计算出的样式进行布局操作（也称为回流或重排layout/reflow）。

7·绘制与渲染：

最后，浏览器将布局后的各个部分按照正确顺序绘制到屏幕上，这一过程可能涉及多个步骤，包括合成层处理、绘制以及GPU加速渲染等。

8·后续交互与事件循环：

页面加载完毕后，浏览器进入事件循环阶段，监听用户的交互以及其他异步事件，例如网络请求完成、定时器到期等，并根据事件做出相应更新。

9·资源加载完成与load事件：

所有资源（包括样式表、图片、字体等）全部加载完成后，浏览器会触发window对象上的load事件，标志着整个页面的加载过程结束。

10·卸载与垃圾回收：

当用户离开当前页面时，浏览器会停止渲染当前页面，并开始卸载相关的资源和执行必要的清理工作，如垃圾回收机制回收不再使用的内存对象。

注意：在整个html生命周期中，浏览器会持续监控网络状态、内存使用情况以及用户交互，以便及时响应和更新页面内容。

二·浏览器执行JS的生命周期：

1.下载和解析HTML：

浏览器接收到HTML文档后，开始解析HTML标记并构建DOM（Document Object Model）树。

2.处理脚本标签：

在构建DOM的过程中，浏览器遇到<script>标签时会进行以下操作：
如果没有async或defer属性，浏览器会暂停DOM构建，下载并执行脚本。脚本执行完成后，继续构建DOM。
如果有defer属性，浏览器会继续构建DOM，同时下载脚本。DOMContentLoaded事件触发之前，按照脚本在文档中的顺序执行这些脚本。
如果有async属性，浏览器会在可用时异步下载脚本，并在下载完成后尽快执行脚本，这可能在DOMContentLoaded事件触发之前或之后。