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

02- 浏览器运行原理

article 2025/9/17 12:27:43

文章目录

  • 1. 网页的解析过程
    • 浏览器内核
  • 2. 浏览器渲染流程
    • 2.1 解析html
    • 2.2 生成css规则
    • 2.3 构建render tree
    • 2.4 布局(Layout)
    • 2.5 绘制(Paint)
  • 3. 回流和重绘
    • 3.1 回流reflow
      • （1）理解：
      • （2）出现情况
    • 3.2 重绘repaint
      • （1）理解：
      • （2）出现情况
  • 3. 特殊解析composite合成 和性能优化
  • 4. defer和async属性
    • 4.1 defer
    • 4.2 async

注：整个JS高级专栏依托于coderwhy老师的课程，相关图片、代码均来自于其课程。

1. 网页的解析过程

输入地址 —> DNS解析 —> 服务器响应 —> 浏览器响应
一个网页URL从输入到浏览器中，到显示经历怎样的过程呢？
在这里插入图片描述

浏览器内核

常见的浏览器内核：
在这里插入图片描述
我们常说的浏览器内核指的是浏览器的排版引擎，也称之为页面渲染引擎或样板引擎。

2. 浏览器渲染流程

详细内容可看我的另一篇博客：
浏览器渲染原理
在这里插入图片描述

2.1 解析html

因为默认情况下服务器会给浏览器返回index…html文件，所以解析HTML是所有步骤的开始：
解析HTML，会构建DOM Tree:
在这里插入图片描述

2.2 生成css规则

浏览器在解析html时遇到 css 的<link>时会开启另外一个线程对css文件进行下载，这也就不会影响到dom tree的生成；
下载完css文件后就会对其进行解析，生成对应的cssom树。
在这里插入图片描述

2.3 构建render tree

当有了DOM Tree和CSSOM Tree两部分之后，就可以结合来生成Render Tree了。
在这里插入图片描述

注意❗️

  1. link元素不会阻塞DOM Tree的构建，但是会阻塞Render Tree的构建，因为构建Render Tree需要对应的CSSOM Tree；
  2. DOM Tree和Render Tree并不是一一对应的，有些dom可能设置了display: none;，不会在Render Tree中出现。

2.4 布局(Layout)

布局是确定呈现树中所有节点的宽度、高度和位置信息

Render Tree形成之后，就可以对dom的style进行计算：

  1. em、rem或%等转换成px；
  2. …

2.5 绘制(Paint)

  • 在绘制阶段，浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点；
  • 包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）
    在这里插入图片描述

3. 回流和重绘

3.1 回流reflow

（1）理解：

  • 第一次确定节点的位置和大小叫做布局(Layout)；
  • 之后对于节点大小以及位置等的计算叫做回流。

（2）出现情况

  1. DOM结构发生改变（添加新节点或者移除节点）；
  2. 布局改变（修改了width、height、padding等值）；
  3. 窗口resize（修改了窗口的尺寸）；
  4. 调用getComputedStyle方法获取尺寸、位置信息；

3.2 重绘repaint

（1）理解：

  • 第一次渲染内容叫做绘制(Paint)；
  • 之后重新渲染叫做重绘（repaint）。

（2）出现情况

  1. 修改背景色、边框颜色、文字颜色、模糊样式等
  2. 回流一定引起重绘，所以回流是很消耗性能的事情。

所以在开发中要尽量避免回流：

  1. 修改样式时尽量一次性修改
    • 比如通过cssText修改，通过添加class修改。
  2. 尽量避免频繁的操作DOM
    • 我们可以在一个DocumentFragment(了解即可)或者是父元素中将要操作的DOM操作完成，在一次性的操作。
  3. 尽量避免通过getComputedStyle获取尺寸、位置等信息
  4. 对某些元素使用position的absolute或fixed
    • 这种操作并不是不会引起回流，而是相对来说开销较小，不会对其他元素造成影响。

3. 特殊解析composite合成 和性能优化

绘制的过程，浏览器会将布局后的元素绘制到多个合成图层中（这是浏览器的一种优化手段）；

  • 默认情况下，标准流的元素会被绘制到同一个图层中；
  • 而某些特殊的属性，会单独创建一个新的合成层，并且新的图层可以使用GPU加速绘制（每个合成层都是单独进行渲染）

哪些属性可以形成新的合成层呢？下面是常见的一下属性：

  • 3D transforms
  • video、canvas、iframe
  • opacity动画转换
  • position: fixed
  • will-cahnge：一个实验性的属性，提前告诉浏览器可能会发生哪些变化
  • animation或transition设置了opacity、transform

注❗️：
分层确实可以提高性能，但是它以内存管理为代价，因此不应作为web性能优化策略的一部分过度使用！

4. defer和async属性

首先来了解一下 script和页面解析的关系 !

前面我们已经知道了，浏览器在解析html时遇到<link>不会影响DOM Tree的构建，那遇到<script>呢？会影响吗？
答案是：会的！

  • 浏览器在遇到<script>时会先停止对DOM Tree构建，转而去下载、执行js脚本；
  • 只有js脚本执行完毕后，DOM Tree才能继续进行构建；

那这是为什么呢？

  • 因为js文件中可能存在对DOM的操作；
  • 若先构建DOM Tree，再执行js脚本，可能会造成严重的回流和重绘，影响页面性能。

但是这也会带来新的问题，特别是现在主流框架：

  • 目前主要流行的Vue、React，脚本往往比html页面更"重"，处理时间更长，
  • 也就是在js脚本执行结束前，页面可能出现空白

（有些浏览器可能对此做了优化，也就是在js脚本执行接受之前，先将已经构建的DOM Tree进行展示）
在这里插入图片描述

为了解决这个问题，<script>给我们提供了两个属性：defer和async

4.1 defer

  • defer会告诉浏览器不要等待脚本的下载，继续执行DOM Tree的构建
  • 脚本的下载有浏览器完成，不会影响DOM Tree的构建；
  • 若脚本先下载完，那它会等待DOM Tree构建完成，在DOMContentLoaded事件执行前执行defer中的代码

在这里插入图片描述
总结：

  1. defer不会影响DOM Tree的构建；
  2. 在defer中DOM Tree已经构建完成，可进行对dom的操作；
  3. defer总是在DOMContentLoaded时间发出前执行；
  4. 另外，有多个defer会按照编写顺序执行；
  5. 从某种角度来说，defer会提高页面性能，并且推荐放在<head>中（提前下载js脚本）；
  6. 注意：defer仅适用于外部脚本，对于<script>默认内容会被忽略。

4.2 async

  • async和defer相似，都能够让脚本不堵塞页面；
  • async是完全独立于浏览器的：
    • 浏览器页面不会因为script脚本而暂停DOM Tree的构建；
    • async脚本不能保证顺序执行脚本，它独立下载，独立运行，不会等待其他脚本；
    • async不一定在DOMContentLoaded时间执行前执行

总结：

  1. defer通常需要在文档解析后操作DOM的javascript代码，并且对多个script文件有顺序要求；
  2. async通常用于独立的脚本，对其他脚本，甚至DOM没有依赖的：

相关文章：

02- 浏览器运行原理

文章目录 1. 网页的解析过程浏览器内核 2. 浏览器渲染流程2.1 解析html2.2 生成css规则2.3 构建render tree2.4 布局(Layout)2.5 绘制(Paint) 3. 回流和重绘3.1 回流reflow&#xff08;1&#xff09;理解&#xff1a;&#xff08;2&#xff09;出现情况 3.2 重绘repaint&#x…...

编程日记 2025/9/17 12:27:43

Reactor模型详解与C++实现

Reactor模型详解与C实现 一、Reactor模型核心思想 Reactor模式是一种事件驱动的并发处理模型&#xff0c;核心通过同步I/O多路复用实现对多个I/O源的监听&#xff0c;当有事件触发时&#xff0c;派发给对应处理器进行非阻塞处理。 关键特征&#xff1a; 非阻塞I/O&#xff…...

编程日记 2025/7/23 18:27:50

人工智能重塑医疗健康：从辅助诊断到个性化治疗的全方位变革

人工智能正在以前所未有的速度改变着医疗健康领域&#xff0c;从影像诊断到药物研发&#xff0c;从医院管理到远程医疗&#xff0c;AI 技术已渗透到医疗服务的各个环节。本文将深入探讨人工智能如何赋能医疗健康产业&#xff0c;分析其在医学影像、临床决策、药物研发、个性化医…...

编程日记 2025/9/9 2:32:46

移除链表元素数据结构oj题(力扣题206)

目录 题目描述&#xff1a; 题目解读&#xff08;分析&#xff09; 解决代码 题目描述&#xff1a; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 题目解读&#xff08;分析&#…...

编程日记 2025/9/12 5:32:18

学习记录：DAY29

项目开发日志&#xff1a;技术实践与成长之路 前言 回顾这几天的状态&#xff0c;热情总是比我想象中更快被消耗完。比起茫然徘徊的小丑&#xff0c;我更希望自己是对着风车冲锋的疯子。 今天继续深入项目的实际业务。 状态好点的时候&#xff0c;再看自己EMO时写的东西&…...

编程日记 2025/6/25 10:36:01

OpenTelemetry 从入门到精通

快速入门 OpenTelemetry 是一个可观测性框架和工具包&#xff0c; 旨在创建和管理遥测数据&#xff0c;如链路、 指标和日志。 重要的是&#xff0c;OpenTelemetry 是供应商和工具无关的&#xff0c;这意味着它可以与各种可观测性后端一起使用&#xff0c; 包括 Jaeger 和 Pro…...

编程日记 2025/9/7 12:38:35

数学复习笔记 17

前言 复盘泰勒公式&#xff0c;极限四则运算&#xff0c;洛必达&#xff0c;拉格朗日。 1.27 因为是复习泰勒公式&#xff0c;所以就算有别的方法&#xff0c;我也硬是要用泰勒公式。就是为了记一下泰勒公式。泰勒公式确实是能做&#xff0c;但是做的我非常非常难受。公式确…...

编程日记 2025/6/10 0:23:17

C语言：在操作系统中，链表有什么应用？

在操作系统中&#xff0c;链表是一种重要的数据结构&#xff0c;凭借其灵活的内存管理和高效的插入/删除特性&#xff0c;被广泛应用于多个核心模块。以下是其主要应用场景及详细说明&#xff1a; 1. 内存管理&#xff1a;空闲内存块管理 应用场景&#xff1a;操作系统需要管…...

编程日记 2025/6/25 2:16:51

解锁MySQL性能调优：高级SQL技巧实战指南

高级SQL技巧&#xff1a;解锁MySQL性能调优的终极指南 开篇 当前&#xff0c;随着业务系统的复杂化和数据量的爆炸式增长&#xff0c;数据库性能调优成为了技术人员面临的核心挑战之一。尤其是在高并发、大数据量的场景下&#xff0c;SQL 查询的性能直接影响到整个系统的响应…...

编程日记 2025/8/11 22:58:30

裸金属服务器和云服务器之间的差别

裸金属服务器能够直接在硬件上运行&#xff0c;不需要额外的虚化层&#xff0c;让每个应用程序或者是服务都能够在实际的硬件上运行&#xff0c;不需要和其他虚拟服务器来共享资源&#xff1b;而云服务器作为一种虚拟服务器&#xff0c;是通过虚拟化技术为企业提供一个独立的计…...

编程日记 2025/7/16 18:32:24

WebSocket实时双向通信：从基础到实战

一、WebSocket 基础概念 1. 什么是 WebSocket&#xff1f; 双向通信协议&#xff1a;与 HTTP 的单向请求不同&#xff0c;WebSocket 支持服务端和客户端实时双向通信。 低延迟&#xff1a;适用于聊天室、实时数据推送、在线游戏等场景。 协议标识&#xff1a;ws://&#xff…...

编程日记 2025/6/14 2:07:17

【免杀】C2免杀技术（六）进程镂空(傀儡进程)

一、技术定位与核心思想 进程镂空&#xff08;Process Hollowing&#xff09;属于 MITRE ATT&CK 中 T1055.012 子技术&#xff1a;先创建一个合法进程并挂起&#xff0c;随后把其主模块从内存“掏空”并替换为恶意映像&#xff0c;最后恢复线程执行&#xff0c;从而让…...

编程日记 2025/9/11 8:10:42

ETL数据集成产品选型需要关注哪些方面？

ETL&#xff08;Extract&#xff0c;Transform&#xff0c;Load&#xff09;工具作为数据仓库和数据分析流程中的关键环节&#xff0c;其选型对于企业的数据战略实施有着深远的影响。谷云科技在 ETL 领域耕耘多年&#xff0c;通过自身产品的实践应用&#xff0c;对 ETL 产品选型…...

编程日记 2025/6/27 21:25:03

Eclipse Java 开发调优：如何让 Eclipse 运行更快？

Eclipse Java 开发调优&#xff1a;如何让 Eclipse 运行更快&#xff1f; 在 Java 开发领域&#xff0c;Eclipse 是一款被广泛使用的集成开发环境&#xff08;IDE&#xff09;。然而&#xff0c;随着项目的日益庞大和复杂&#xff0c;Eclipse 的运行速度可能会逐渐变慢&#x…...

编程日记 2025/9/11 11:39:21

彻底理解事件循环（Event Loop）：从单线程到异步世界的桥梁

关于事件循环被问了很多次&#xff0c;也遇到过很多次&#xff0c;一直没有系统整理&#xff0c;网上搜的&#xff0c;基本明白但总感觉不够透彻&#xff0c;最后&#xff0c;自己动手&#xff0c;丰衣足食&#xff0c;哈哈 一、为什么需要事件循环&#xff1f;—— 单线程的困…...

编程日记 2025/9/11 9:09:11

java加强 -stream流

Stream流是jdk8开始新增的一套api&#xff0c;可以用于操作集合或数组的内容。 Stream流大量的结合了Lambda的语法风格来编程&#xff0c;功能强大&#xff0c;性能高效&#xff0c;代码简洁&#xff0c;可读性好。 体验Stream流 把集合中所有以三开头并且三个字的元素存储到…...

编程日记 2025/8/9 0:50:00

Vue百日学习计划Day33-35天详细计划-Gemini版

总目标: 在 Day 33-35 理解 Vue 组件从创建到销毁的完整生命周期&#xff0c;熟练掌握 Composition API 中主要的生命周期钩子&#xff0c;并知道在不同阶段执行哪些操作。 所需资源: Vue 3 官方文档 (生命周期钩子): https://cn.vuejs.org/guide/essentials/lifecycle.html你…...

编程日记 2025/9/10 21:59:22

Linux（2）——shell原理及Linux中的权限

目录 一、shell的运行原理 二、Linux中权限的问题 1.权限的概念 2.如何进行用户的切换 1&#xff09;从普通用户切到超级用户 2&#xff09;从root用户切到普通用户 3.如何实现提权操作 4.如何将普通用户添加到信用列表&#xff08;sudoers&#xff09; ​编辑5.Lin…...

编程日记 2025/9/11 9:09:10

如何在线免费压缩PDF文档？

PDF文件太大&#xff0c;通常是因为内部嵌入字体和图片。怎么才能将文件大小减减肥呢&#xff0c;主要有降低图片清晰度和去除相关字体两个方向来实现文档效果。接下来介绍三个免费压缩PDF实用工具。 &#xff08;一&#xff09;iLoveOFD在线转换工具 iLoveOFD在线转换工具&a…...

编程日记 2025/9/12 3:07:05

EasyExcel动态表头

专家官方解答 &#xff1a; 在使用EasyExcel处理Excel动态表头的问题时&#xff0c;官方并不推荐使用includecolumnfieldnames方法。根据提供的知识内容&#xff0c;以下是如何实现动态表头的详细步骤和解释&#xff1a; 原因分析 动态表头的需求通常来源于希望根据用户的选…...

编程日记 2025/9/17 17:27:28

汽车装配又又又升级，ethernetip转profinet进阶跃迁指南

1. 场景描述&#xff1a;汽车装配线中&#xff0c;使用EtherNet/IP协议的机器人与使用PROFINET协议的PLC进行数据交互。 2. 连接设备&#xff1a;EtherNet/IP机器人控制器&#xff08;如ABB、FANUC&#xff09;与PROFINET PLC&#xff08;如西门子S7-1500&#xff09;。 3. 连…...

编程日记 2025/9/11 19:11:17

css：无限滚动波浪线

以上是需要实现的效果&#xff0c;一条无限滚动波浪线&#xff0c;可以用来做区块的分割线。 要形成上下交替的圆形&#xff0c;思路是给div加圆角边框&#xff0c;第一个只有上边框&#xff0c;第二个只有下边框。 循环了100个div&#xff0c;这个数量根据自己容器宽度调整&…...

编程日记 2025/9/13 6:36:04

显示器无法接受键盘/鼠标问题解决

我们将键盘、鼠标的u盘插到显示器上后&#xff0c;仍然无法通过键盘和鼠标操控显示器是因为我们的显示器和笔记本/主机之间的连接只有一个typec对typec&#xff0c;无法满足信号传输 我们需要一根上行线&#xff1a;一头 typec/usb 接到主机/笔记本&#xff0c;然后另一头是 m…...

编程日记 2025/8/12 1:10:27

w~自动驾驶~合集3

我自己的原文哦~ https://blog.51cto.com/whaosoft/13269720 #FastOcc 推理更快、部署友好Occ算法来啦&#xff01; 在自动驾驶系统当中&#xff0c;感知任务是整个自驾系统中至关重要的组成部分。感知任务的主要目标是使自动驾驶车辆能够理解和感知周围的环境元素&…...

编程日记 2025/9/11 21:33:53

＜C++＞ MFC自动关闭对话框（MessageBoxTimeout）

MFC自动关闭对话框&#xff08;MessageBoxTimeout&#xff09; 记录一下今天在界面开发中的解决方案。自动关闭对话框有两种方案&#xff1a; 1.使用定时器实现延迟关闭&#xff08;DeepSeek方案&#xff09; 提示框显示几秒后自动关闭&#xff0c;可以使用 SetTimer KillT…...

编程日记 2025/6/19 0:16:39

山东大学计算机图形学期末复习整理5——CG10上

CG10上 Frenet-Serret框架 空间中一条曲线可以写成参数形式&#xff1a; C ( u ) ( x ( u ) , y ( u ) , z ( u ) ) \mathbf{C}(u) (x(u), y(u), z(u)) C(u)(x(u),y(u),z(u)) 这表示&#xff1a;当参数 u u u 变化时&#xff0c;曲线在三维空间中移动&#xff0c;生成一条轨…...

编程日记 2025/9/11 22:01:25

STM32移植LVGL8.3 （保姆级图文教程）

目录 前言设备清单2.8寸TFT-LCD屏原理与应用1️⃣基本参数2️⃣引脚说明3️⃣程序移植4️⃣硬件接线 LVGL8.3 移植流程1️⃣硬件及平台要求2️⃣版本说明3️⃣源码下载4️⃣源码移植 工程配置修改配置文件1️⃣lvgl_config.h2️⃣适配屏幕驱动3️⃣配置输入设备(触摸功能) 提供…...

编程日记 2025/9/15 0:42:07

AT 指令详解：基于 MCU 的通信控制实战指南AT 指令详解

在 MCU&#xff08;单片机&#xff09;项目中&#xff0c;我们经常需要与各种通信模组&#xff08;GSM、Wi-Fi、蓝牙等&#xff09;交互。而这类模组通常都通过串口&#xff08;UART&#xff09;与 MCU 通信&#xff0c;控制它们的“语言”就是——AT 指令。 一、什么是 AT 指…...

编程日记 2025/9/14 19:52:19

虚幻引擎5-Unreal Engine笔记之Default Pawn与GamMode、Camera的关系

虚幻引擎5-Unreal Engine笔记之Default Pawn与GamMode、Camera的关系 code review! 文章目录 虚幻引擎5-Unreal Engine笔记之Default Pawn与GamMode、Camera的关系1.Default Pawn与Camera的关系1.1. Default Pawn 是什么&#xff1f;1.2. Default Pawn 的主要组件1.3. Default…...

编程日记 2025/9/11 9:09:11

C++多态的详细讲解

【本节目标】 1. 多态的概念 2. 多态的定义及实现 3. 抽象类 4. 多态的原理 5. 单继承和多继承关系中的虚函数表 前言 需要声明的&#xff0c;本博客中的代码及解释都是在 vs2013 下的 x86 程序中&#xff0c;涉及的指针都是 4bytes 。 如果要其他平台下&#xff0c;部…...

编程日记 2025/9/11 9:04:16