浏览器首次渲染网页的过程

最新推荐文章于 2025-12-18 11:32:02 发布

AvskBug

最新推荐文章于 2025-12-18 11:32:02 发布

阅读量176

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/AvskBug/article/details/132934492

前端专栏收录该内容

299 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了浏览器从发送HTTP请求到呈现页面的首次渲染过程，包括构建DOM树、CSSOM树、渲染树，以及布局和绘制。此外，还讨论了优化网页加载性能的策略，如减少HTTP请求数、利用缓存、延迟加载和代码优化等。

在前端开发中，浏览器的首次渲染网页是一个关键的过程。这个过程包括了从发送HTTP请求到呈现页面的一系列步骤。下面我将详细介绍浏览器首次渲染网页的过程，并提供相应的源代码示例。

发送HTTP请求
当用户在浏览器中输入网址或点击链接时，浏览器会发送HTTP请求到服务器。这个请求包含了要获取的网页的URL，以及其他相关的请求头信息。
接收HTML文件
服务器接收到浏览器发送的HTTP请求后，会返回相应的HTML文件。浏览器开始下载HTML文件，并在下载过程中进行解析。
构建DOM树
在下载HTML文件的同时，浏览器会解析HTML标记，并构建DOM（文档对象模型）树。DOM树是由HTML标记表示的网页的逻辑结构，它将网页的每个标记表示为一个节点，并组织为一棵树。

以下是一个简单的HTML示例：
```
<html>
  <head>
    
```

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AvskBug

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

【浏览器页面渲染流程】

baidu_41564215的博客

04-28

1045

位置，此时外部 CSS 文件还没下载解析好，主线程不会等待，继续解析后续的 HTML。的操作比较慢，Chrome 采用了一个策略: 在首次合成图块时只采用一个低分辨率的图片，这样首屏展示的时候只是展示出低分辨率的图片，以提升首屏加载性能。：由于 HTML 标记定义不同标记之间的关系，创建的对象会链接在一个树数据结构内，此结构也会捕获原始标记中定义的父项-子项关系。如果主线程解析到 link 位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。非视口内的图块数据要进入。

浏览器渲染机制-从输入url到渲染出页面的整个过程

博哥的二进制世界

05-16

1102

浏览器是我们日常开发的重要的工具，那么你了解浏览器吗？即使在前端面试中，我们也经常会遇到：在浏览器地址中从输入url地址到出现页面，这个过程发生了什么？介绍一下重绘和回流？这一类关于浏览器的问题。我们可能会知道大概的轮廓但对于具体的细节却是不那么清楚，那么今天我们就从浏览器组成开始来了解一下浏览器的渲染机制。

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

优快云-Ada助手 2023.09.24
恭喜您创作第18篇博客！标题《浏览器首次渲染网页的过程》非常吸引人。您对于这一过程的深入研究令人佩服，阐述得非常清晰易懂。在这个数字化时代，了解浏览器渲染网页的过程对于网页开发和优化非常重要。在下一步的创作中，您可以考虑探索一下浏览器渲染的优化技巧，例如如何减少关键渲染路径中的阻塞资源，或者如何提高首次渲染的速度。这些内容将对读者来说非常有益，并且展示了您的专业知识和研究能力。总之，非常期待您未来的创作！谦虚地说，您的博客给读者带来了很多价值，希望您能继续分享您的见解和经验。加油！

页面首屏渲染性能指南

前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改

05-31

804

我们知道渲染页面是一个将服务器的响应内容翻译成图片的过程。但是，如果你页面的渲染性能比较糟糕的话，可能会带来相对较高的跳出率。在本文中，我将重点关注网页的初始渲染，即它从解析 HTML 开始。我将探索可能导致高渲染时间的问题，以及如何解决它们。关键渲染路径（CRP）关键渲染路径 (CRP) 是浏览器将代码转换为屏幕上可显示像素的过程。它有几个阶段，其中一些可以并行执行以节省时间，但有些部分必须依次完成。如下图所示：首先，一旦浏览器得到响应，它就会开始解析它。当它遇到依赖项时，它会尝试下载它

浏览器渲染网页的过程

weixin_59017683的博客

12-20

557

如果页面中的节点（元素）的样式的改变并不影响它在文档流中的位置和文档布局时（如：与颜色相关的部分发生了改变），那么浏览器就会进行重绘。：如果页面中标签的结构、大小、位置、布局等发生了改变，那么浏览器就会重新渲染部分或全部文档，这个过程称为回流。5.根据生成的渲染树，将整个页面的标签样式部分进行渲染显示（文字颜色、背景颜色……5.内容的变化（如：图片的大小，input框的输入）4.根据生成的渲染树，得到节点的元素的位置（回流/重排）1.先将网页中的标签及标签之间的布局关系渲染成DOM树。

浏览器页面渲染全解析过程优化及实战指南详解

sinat_37775891的博客

05-22

1167

本文详细解析了浏览器页面渲染的全过程，包括渲染机制、关键渲染路径（CRP）优化、重排与重绘、合成层优化等内容。首先，浏览器通过解析HTML和CSS构建DOM树和CSSOM树，合并后生成渲染树，随后进行布局计算、绘制和合成，最终将页面呈现给用户。文章还介绍了如何通过减少关键资源、优化加载顺序、减少重排和重绘等手段来优化CRP，提升页面性能。此外，合成层的创建与优化也被详细讨论，特别是在动画和滚动场景中的应用。最后，通过一个高性能滚动组件的实例，展示了如何利用合成层和requestAnimationFrame等

浏览器渲染过程

热爱可抵岁月漫长

03-27

708

最后，总结浏览器渲染过程的所有步骤：DNS 查找：当输入 URL 时，浏览器执行 DNS 查找，将域名转换为 IP 地址，以便定位到网站服务器TCP/TLS 握手：浏览器发起 TCP 握手与服务器建立连接。如果网站是基于 https 的，还会进行 TLS 握手来加密传输的数据HTTP 请求/响应周期：建立连接后，浏览器发送一个 HTTP 请求获取网站的内容，服务器响应以必要的 HTML、CSS、JavaScript 或其他其他资源。

浏览器DOM渲染解析过程总结

u012475786的专栏

05-16

5071

浏览器DOM渲染解析过程总结一、浏览器的主要组件（如下图所示）备注：Interface表示人机交互界面。用户界面（User Interface）：是指浏览器功能模块的UI布局。例如：地址栏、前进/后台按钮、收藏夹等。不同浏览器他们的功能模块的UI布局是不一样的。 浏览器引擎（Browser engine）：在UI界面和渲染引擎之间传递指令；同时操作数据存储(Data Persiste...

浏览器的渲染过程

qq_34082921的博客

10-24

892

简单的说就是浏览器将 HTML 代码解析出来，把解析出来后的结果画到页面上，相当于就是，告诉浏览器，第一个像素点上应该呈现什么颜色，依次类推，占满整个页面静态，为什么说是静态的呢，因为当用户发生交互，页面变化（滚动、刷新、跳转等），使页面改变后，浏览器得重新计算整个页面的像素，可想而知，是一个庞大的工作量。

深度解析Web浏览器的渲染过程

weixin_33068055的博客

05-14

379

本文深入探讨了Web浏览器在渲染网页内容时所涉及的关键步骤和性能优化的重要性。文章首先介绍了页面首次加载时浏览器需要完成的绘制（painting）和重绘（repaint）过程，强调了避免不必要的回流（reflow）和重绘以提高性能的重要性。接着，通过实际操作演示了如何使用Chromium浏览器的特定参数来观察渲染过程，以及浏览器如何利用GPU加速内容的渲染。最后，文章总结了浏览器渲染过程中涉及到的各个组件，如Blink渲染引擎、DOM、CSSOM和Render Tree，以及它们如何协同工作以在用户屏幕上

前端浏览器的渲染过程及优化策略

2401_87546826的博客

12-05

1206

解析 HTML 和 CSS：浏览器解析 HTML 文件生成 DOM 树，解析 CSS 文件生成 CSSOM 树。构建渲染树：结合 DOM 树和 CSSOM 树，生成渲染树，表示页面中的可见元素及其样式。布局（Reflow）：根据渲染树，计算每个节点的几何信息，如位置和大小。绘制（Repaint）：将渲染树中的节点绘制到屏幕上。合成（Composite Layers）：将多个层合成最终的图像，呈现给用户。理解这些步骤有助于开发者识别性能瓶颈，并采取相应的优化措施。

初步理解浏览器渲染原理

ZhangYu_010228的博客

02-28

2546

显然这样子的效率更高，毕竟这个是在非主线程上合成的，没有占用主线程资源，另外也避开了布局和绘制两个子阶段，所以相对于重排和重绘，合成能大大提升绘制效率。浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。外部样式如果长时间没有加载完毕，浏览器为了用户体验，会使用浏览器会默认样式，确保首次渲染的速度。还有一种情况：就是更改了一个既不要布局也不要绘制的属性，那么渲染引擎会跳过布局和绘制，直接执行后续的合成操作，这个过程就叫合成。

【走进浏览器】谈一谈浏览器渲染的基本原理

web15085181368的博客

03-02

380

浏览器渲染基本原理 浏览器对于前端工程师，就相当于赛车于赛车手，想要更好的在赛道上驰骋，就需要对自己的赛车有更深入的了解，甚至人车合一，所以本篇文章我们就来打开浏览器的大门，一起努力吧！前言一篇文章很难将所有的细节覆盖，同时我们也不需要将所有流程和每一个环节都摸透，我们就依照脉络来聊一聊浏览器的渲染过程。我们都知道一个页面通常由三个部分组成，即HTMl+CSS+JS，并通过一系列的步骤转换。 HTML 的内容是由标记和文本组成 CSS 称为层叠样式表，是由选择器和属性组成 JS 是可以使网页的内

商城后台管理系统 02 添加规格参数-动态表单

weixin_52943021的博客

12-15

307

Boolean。

vue2/vue3前端创建脚手架并引入RBAC权限模型

demotang的博客

12-18

152

本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。

商城后台管理系统 03 规格参数配置

weixin_52943021的博客

12-15

237

【代码】商城后台管理系统 03 规格参数配置。

Harmony OS Web 组件：如何在新窗口中打开网页（实战分享）

Yihong1833100198的博客

12-17

885

摘要：本文分享了Harmony OS Web组件实现新窗口打开网页的实战经验。通过multiWindowAccess()设置允许新窗口，结合onWindowNew回调捕获并处理网页中的新窗口请求（如target="_blank"链接或window.open调用）。文章提供了典型应用场景（如区分内外链处理）、完整代码示例和常见问题解决方案，帮助开发者实现更智能的网页打开策略，提升应用体验。

网络安全中级阶段学习笔记（七）：Web 安全之文件上传漏洞笔记1（包含upload-labs-master靶场前三关实战）

2501_91976946的博客

12-15

885

摘要：本文系统梳理文件上传漏洞攻防要点，包含漏洞定义、危害（如Webshell控制服务器）、检测流程及多种绕过技巧（JS验证、MIME-Type、黑名单等）。重点提出"白名单+多环节验证"防御方案，包括严格后缀验证、文件类型检测、权限控制等。补充靶场实践案例，演示通过修改后缀、利用解析特性实现漏洞利用。强调防御需结合前端限制、服务端校验与安全监控，构建纵深防护体系。

万字讲解内网横向渗透vulnstack（七）：红日靶场7实战全流程1-提权Web1/Web2（CVE-2021-3493）

mooyuan的网络安全博客

12-18

931

本文详细记录了针对红日靶场7的多层渗透测试过程。首先通过外网攻击利用Redis未授权漏洞获取Web1跳板机权限，随后以此为跳板对内网Web2服务器进行渗透，先后利用Laravel漏洞获取初始访问权限、通过环境变量提权获取Docker容器内root权限，最后利用特权模式实现Docker逃逸，成功控制宿主机。整个渗透过程涉及信息收集、漏洞利用、权限提升、容器逃逸等多个环节，展示了从外网到内网的完整攻击链。

【每日算法】LeetCode 78. 子集

最新发布

LYFlied的博客

12-18

674

前端开发者学习算法的重要性与实践文章摘要：算法学习对前端开发者至关重要，是从"页面构建者"向"复杂系统设计者"转变的关键。以LeetCode 78题子集问题为例，展示了回溯法、迭代法和位运算三种解法，并分析了各自的优缺点。回溯法因其可读性和灵活性成为最优解，特别适合前端场景如权限系统、商品筛选器等。文章强调算法思想比具体实现更重要，建议前端开发者通过实际应用场景来理解和练习算法，从而提升技术视野和问题解决能力。

浏览器渲染机制

08-21

浏览器的渲染机制是一个复杂且高度优化的过程，涉及多个进程和阶段，以确保网页能够快速、稳定地呈现给用户。 ### 浏览器的多进程架构 浏览器采用多进程模型来提高安全性和稳定性。每个标签页通常对应一个独立的渲染进程，这样即使某个页面崩溃，也不会影响其他页面的正常运行。渲染进程的核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都运行在这个进程中。出于安全考虑，渲染进程运行在沙箱模式下，防止恶意代码对系统造成损害[^1]。除了渲染进程，浏览器还包含其他关键进程： - **浏览器进程**：负责界面显示、用户交互、子进程管理以及存储等功能。 - **GPU 进程**：负责处理 3D CSS 效果、网页和 Chrome UI 的绘制。 - **网络进程**：主要负责页面的网络资源加载，从浏览器进程中独立出来后，提升了资源加载的效率和稳定性。 - **插件进程**：负责插件的运行，插件通常容易崩溃，因此通过插件进程进行隔离，确保插件崩溃不会影响整个浏览器或页面。 ### 渲染流程 浏览器的渲染流程可以分为以下几个关键步骤： #### 1. **解析 HTML 和构建 DOM 树** 浏览器首先解析 HTML 文档，将其转换为文档对象模型（DOM）。DOM 是一个树状结构，表示网页的结构和内容。 #### 2. **解析 CSS 并构建 CSSOM** 在解析 HTML 的同时，浏览器也会解析 CSS 文件和内联样式，构建 CSS 对象模型（CSSOM），它定义了每个元素的样式规则。 #### 3. **构建渲染树** DOM 和 CSSOM 结合后，浏览器会构建渲染树（Render Tree）。渲染树包含了所有可见的 DOM 节点及其计算后的样式信息，用于后续的布局和绘制。 #### 4. **布局（Layout）** 布局阶段也称为“回流”（Reflow），浏览器会计算每个元素在页面中的确切位置和大小。这个过程非常耗时，尤其是当 DOM 发生变化时，可能会触发重新布局。常见的触发回流的操作包括： - 页面首次渲染 - 浏览器窗口大小发生变化 - 元素的内容、尺寸或位置发生变化 - 元素的字体大小发生变化 - 激活 CSS 伪类 - 查询某些属性或调用某些方法 - 添加或删除可见的 DOM 元素[^2] #### 5. **绘制（Paint）** 在布局完成后，浏览器会进入绘制阶段，将每个元素的可视部分绘制到屏幕上。绘制的内容包括文本、颜色、边框、阴影以及图像等替换元素。这个过程需要极高的速度，以确保页面能够快速呈现给用户[^4]。 #### 6. **合成（Composite）** 最后，浏览器会将各个图层进行合成，生成最终的屏幕图像。GPU 进程在此阶段发挥重要作用，负责处理 3D CSS 效果和复杂的图形渲染。 ### 优化机制为了提升性能，浏览器引入了一些优化机制来减少不必要的回流和重绘： - **批量处理**：浏览器会将多次的回流和重绘操作合并为一次，减少性能开销。 - **延迟回流**：对于频繁的 DOM 操作，浏览器会将其缓存，并在合适的时间一次性进行回流处理，从而减少回流的次数[^3] 此外，当样式发生变化但不涉及几何属性时，浏览器可以直接进行重绘，而无需重新布局。例如，修改 `color`、`background-color` 或 `border-color` 等属性只会触发重绘，不会导致回流[^5]。 ### 代码示例以下是一个简单的 JavaScript 示例，展示如何通过操作 DOM 来触发回流和重绘： ```javascript // 获取元素 const element = document.getElementById('myElement'); // 修改样式属性，触发重绘（不涉及几何属性） element.style.backgroundColor = 'red'; // 修改几何属性，触发回流和重绘 element.style.width = '200px'; ``` 在这个示例中，修改 `backgroundColor` 只会触发重绘，而修改 `width` 会导致回流和重绘，因为宽度的变化会影响布局。 ### 总结 浏览器的渲染机制是一个高度优化的过程，涉及多个进程和阶段。通过多进程架构、布局计算、绘制和合成等步骤，浏览器能够高效地将 HTML、CSS 和 JavaScript 转换为用户可见的网页。同时，浏览器还通过批量处理和延迟回流等优化机制来减少性能开销，确保页面的流畅性和响应性。