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

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

news 2026/2/10 5:32:35

总结：浏览器解析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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/2/10 1:20:48

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2026/1/21 14:29:57

Linux简单的操作

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

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

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2026/1/31 7:23:48