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

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

news 2026/2/8 11:08:21

总结：浏览器解析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事件触发之前或之后。

3.DOMContentLoaded事件：

当初始HTML文档被完全加载和解析，DOM树构建完成时，浏览器会触发DOMContentLoaded事件。这个事件标志着DOM结构已经准备就绪，但不包括样式表、图像和其他外部资源。

4.加载外部资源：

在DOMContentLoaded事件之后，浏览器继续加载页面中的其他外部资源，如样式表、图片、字体等。

5.load事件：

当整个页面的所有内容（包括图像、样式表等所有外部资源）都已加载完毕，浏览器会触发window的load事件。这是页面完全加载的标志。

6.执行事件处理程序和用户交互：

在DOMContentLoaded和load事件之后，JavaScript代码可以注册事件处理程序来响应用户的交互，如点击按钮、滚动页面等。

7.卸载页面：

当用户离开当前页面（通过点击链接、输入新URL或者关闭窗口等方式）时，浏览器会触发beforeunload和unload事件，允许JavaScript执行清理工作，如取消网络请求、保存状态等。

注意：在整个生命周期中，JavaScript代码可以在不同的阶段执行相应的任务，如初始化页面元素、注册事件监听器、处理用户交互、以及在页面卸载前进行必要的清理工作。

三·相关参考文献：

1.JS高级：浏览器运行前端项目的原理及流程

https://blog.csdn.net/Yuanyuan__/article/details/128428923

2.js浏览器页面生命周期，以及各个阶段js调用示例：

https://blog.csdn.net/chehec2010/article/details/119990799

相关文章：

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

总结&#xff1a;浏览器解析html与执行JS之生命周期详解 一浏览器解析html的生命周期&#xff1a;1.请求HTML文档&#xff1a;2接收响应&#xff1a;3构建DOM树&#xff1a;4加载外部资源&#xff1a;5DOMContentLoaded事件&#xff1a;6样式计算与布局&#xff1a;7绘制与渲染…...

编程日记 2024/1/3 14:14:48

aspose通过开始和结束位置关键词截取word另存为新文件

关键词匹配实体类&#xff1a; Data EqualsAndHashCode(callSuper false) public class TextConfig implements Serializable {private static final long serialVersionUID 1L;/*** 开始关键词&#xff0c;多个逗号分隔*/private String textStart ;/*** 结束关键词&#x…...

编程日记 2024/1/3 14:13:46

深入解析美颜SDK：绿幕抠图功能的算法原理

当下&#xff0c;美颜SDK绿幕抠图功能成为许多应用中不可或缺的一环。本文将深入解析美颜SDK中绿幕抠图功能的算法原理&#xff0c;揭示其背后的技术奥秘。 一、什么是美颜SDK绿幕抠图&#xff1f; 美颜SDK的绿幕抠图功能是一种通过计算机视觉技术&#xff0c;将视频或图像中…...

编程日记 2024/1/3 14:09:42

从有向带权图判断最短路径里各目标顶点顺序

对如下有向带权图&#xff0c;若采用迪杰斯特拉(Dijkstra)算法求从源点a到其他各顶点的最短路径&#xff0c;则得到的第一路径的目标顶点是b&#xff0c;第二条最短路径的目标顶点是c&#xff0c;后续得到的其余各最短路径的目标顶点依次是() A.d,e,f B.e,d,f C.f,d,e D.f,…...

编程日记 2024/1/3 14:08:41

鼠标驱动框架：模拟键盘按键

/* 参考: drivers\hid\usbhid\usbmouse.c */ #include <linux/kernel.h> #include <linux/slab.h> #include <linux/module.h> #include <linux/init.h> #include <linux/usb.h> #include <linux/input.h> #include <linux/hid.h>st…...

编程日记 2024/1/3 14:05:38

ES6之Promise的链式调用

✨ 专栏介绍 在现代Web开发中&#xff0c;JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性&#xff0c;还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言&#xff0c;JavaScript具有广泛的应用场景&#x…...

编程日记 2024/1/3 14:04:37

HTML----JavaScript操作对象BOM对象

文章目录 目录 文章目录 本章要求 一.BOM模型概述 二.BOM核心&#xff1a;window对象 常用属性 常用方法&#xff1a; confirm() 案例 open ()close()案例 setTimeout( ) 案例 setInterval( ) 案例 document对象 练习 本章要求 了解BOM模型掌握BOM模型实际应用 一.BOM模型…...

编程日记 2024/1/3 14:03:36

隆道数智大会回顾|第13期《如何构建绿色产业供应链新生态》（完）

本期演讲嘉宾&#xff1a; 史文月 采购与供应链专家 邢庆峰 品类管理和质量管理专家 刘婷婷 中兴通讯供应链规划总监 张燕华 正大生物CIO 吴树贵 隆道公司总裁 本期演讲主题&#xff1a; 如何构建绿色产业供应链新生态 本期内容要点&#xff1a; 1.供应链管理的核心问…...

编程日记 2024/1/3 14:00:33

粒子群优化pso结合bp神经网络优化对csv文件预测matlab(3)

1.csv数据为密西西比数据集&#xff0c;获取数据集可以管我要&#xff0c;数据集内容形式如下图&#xff1a; 2.代码 这里参考的是b站的一位博主。 数据集导入教程在我的另一篇文章bp写过&#xff0c;需要的话可以去看一下 psobp.m close all clc%读取数据 inputX; outputY;…...

编程日记 2024/1/3 13:53:26

软性演员-评论家算法 SAC

软性演员-评论家算法 SAC 软性演员-评论家算法 SAC优势原理软性选择模型结构目标函数重参数化熵正则化代码实现 软性演员-评论家算法 SAC 优势原理 DDPG 的问题在于&#xff0c;训练不稳定、收敛差、依赖超参数、不适应复杂环境。 软性演员-评论家算法 SAC&#xff0c;更稳定…...

编程日记 2024/1/3 13:52:25

Nginx多域名部署多站点

目录 1.修改配置文件nginx.conf 2. 修改hosts文件 1.修改配置文件nginx.conf 在配置文件的 server_name 处修改成自己需要的域名&#xff0c;然后保存退出 j 查看语法是否错误&#xff0c;然后重启nginx nginx -t # 查看语法是否正确 systemctl restart nginx # 重启nginx …...

编程日记 2024/1/3 13:50:22

Java的常规面试题

Java的面试题主要涉及Java基础知识、并发编程、集合原理、JVM原理、I/O与网络编程、设计模式、互联网常用框架等多个领域[6]。一些常见的面试问题包括&#xff1a; 1. 面向对象的特征&#xff1a;继承、封装和多态性。 2. 访问修饰符public、private、protected以及默认时的区别…...

编程日记 2024/1/3 13:44:16

大数据技术发展史

文章目录 Google论文HadoopHive大数据生态 Google论文 今天我们常说的大数据技术&#xff0c;其实起源于Google在2004年前后发表的三篇论文&#xff0c;也就是我们经常听到的“三驾马车”&#xff0c;分别是分布式文件系统GFS、大数据分布式计算框架MapReduce和NoSQL数据库系统…...

编程日记 2024/1/3 13:42:14

linux常见基础指令

入门常见基础指令 ls、stat、 pwd 、cd、tree、 whoami、 touch、 mkdir、 rm 、 man、 cp、mv、cat、tac、echo、>、 >>、 < 、more、 less、 head、 tail、date、 cal、 find、 which、alias、whereis、grep、zip与unzip、 tar、bc、uname、xargs... 热键Tab、…...

编程日记 2024/1/3 13:40:13

“人家赚那么多”系列01：如何练习？练什么？

01 如何练习&#xff1f;练习什么&#xff1f; 今年计划重点围绕「在不骗自己的前提下&#xff0c;如何才能把事儿彻底做好&#xff0c;并做得有声有色&#xff1f;」为主题来写点儿东西&#xff0c;聊聊我是怎么做的&#xff0c;如何通过一些有效的方法来不断优化自己的。 想把…...

编程日记 2024/1/3 13:39:11

【Android】使用android studio查看内置数据库信息

要使用Android Studio查看内置数据库信息&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开Android Studio并打开你的项目。 在左侧的Project窗口中&#xff0c;找到并展开你的app模块。 找到并展开"app" > "src" > "main"文件夹。…...

编程日记 2024/1/3 13:36:08

PHP开发日志 ━━ 基于PHP和JS的AES相互加密解密方法详解(CryptoJS) 适合CryptoJS4.0和PHP8.0

最近客户在做安全等保&#xff0c;需要后台登录密码采用加密方式&#xff0c;原来用个base64变形一下就算了&#xff0c;现在不行&#xff0c;一定要加密加key加盐~~ 前端使用Cypto-JS加密&#xff0c;传输给后端使用PHP解密&#xff0c;当然&#xff0c;前端虽然有key有盐&…...

编程日记 2024/1/3 13:33:06

2021-01-03 excel实现列递增，行保持不变

需求&#xff1a;excel文档数据操作的时候发现自动递增只能实现列不变行号递增 我这里里需要的是列递增行不变 解决方式&#xff1a;通过一些函数的组合使用 INDIRECT("驻场明细!"&CHAR(ROW()62)&ROW(驻场明细!A$28)) INDIRECT()函数的使用&#xff1a; INDI…...

编程日记 2024/1/3 13:32:05

[Python]两个杯子取水问题

利用两个杯子巧取三升水&#xff1a; 今天的这个趣味数学小游戏是利用两个没有刻度的水杯&#xff0c;巧妙地取出三升水来。 题目的条件是&#xff1a;一个总容量为6升的杯子和一个总容量为5升的杯子&#xff0c;同时面前有无限容量的水供你使用。不借助其它任何的容器&#xf…...

编程日记 2024/1/3 13:31:04

C++汇编语言学习计划

前几天买了某游戏的外挂&#xff0c;感觉外挂在我计算机上进行了不少操作&#xff0c;我想一探究竟&#xff0c;可是只有exe&#xff0c;没办法&#xff0c;翻译成汇编我也看不懂&#xff0c;索性来简单学习下。访问Chatgpt4&#xff0c;给了如下学习计划。 要从零开始学习C生成…...

编程日记 2024/1/3 13:28:01

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/1/24 14:23:08

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2026/1/20 14:36:39

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/31 13:42:15

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2026/1/23 10:10:53

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2026/2/6 16:59:24

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/12/25 4:05:41