关于浏览器渲染页面的过程

最新推荐文章于 2025-05-20 23:30:00 发布

原创最新推荐文章于 2025-05-20 23:30:00 发布 · 882 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

浏览器渲染页面的整个过程：浏览器会从上到下解析文档。

遇见HTML标记，调用HTML解析器解析为对用的token（一个token就是一个标签文本的序列化）并构建DOM树（就是一块内存，保存着token）
遇见style/link标记，调用解析器，处理CSS标记并构建CSS样式树
遇见script标记，调用JavaScript解析器，处理script标记，绑定事件、修改DOM树/CSS树等
将DOM树与CSS树合并成一个渲染树
根据渲染树来渲染，以计算每个节点的几何信息（这一过程需要依赖图形库）
将各个节点绘制到屏幕上

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

贝塔贝卡贝

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【浏览器页面渲染流程】

baidu_41564215的博客

04-28

1030

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

深入理解浏览器渲染原理

ZhangYu_010228的博客

10-04

1115

reflow的本质就是重新计算layout树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发布局。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当JS代码全部完成后再进行统一计算。所以，改动属性造成的reflow是异步完成的。也同样因为如此，当JS获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即reflow。

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

理解WebKit和Chromium: 网页渲染的基本过程

923723914

09-21

335

转载请注明原文地址：http://blog.youkuaiyun.com/milado_nju ## 概述前面介绍了一些渲染引擎的功能，包括网络，资源加载，DOM树，RenderObject树等等，但是，给人以零乱的感觉，因为没有一个整体的过程描述它们在这个过程中的位置，它们只是整个渲染引擎工作的一个或者多个步骤而已。渲染引擎的主要目的就是从一个网页的URL开始，经过一系列的复杂处理过程之后，变成一个可...

页面渲染的原理及流程

请叫我凤哥哥的博客

11-18

1724

页面渲染的原理及流程 浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。构建渲染树。页面的重绘与重排（也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进...

网页渲染流程

weixin_42790553的博客

07-28

335

首先是网页内容，输入到HTML解析器，HTML解析器解析，然后构建DOM树，在这期间如果遇到JavaScript代码则交给JavaScript引擎处理；如果来自CSS解析器的样式信息，构建一个内部绘图模型。该模型由布局模块计算模型内部各个元素的位置和大小信息，最后由绘图模块完成从该模型到图像的绘制。在网页渲染的过程中，大致可分为下面3个阶段。　　1.2....

详解浏览器渲染页面过程

08-31

浏览器渲染页面的过程是网页开发中至关重要的一环，它涉及到用户从输入URL到看到完整页面的整个体验。下面我们将深入探讨这个过程的各个阶段，并提供一些优化页面性能的策略。首先，浏览器接收到HTML文件后开始...

浏览器渲染页面全流程解读

秋来九月八

03-26

897

‌浏览器网络线程接收HTML文档‌：当浏览器的网络线程接收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。整个渲染流程分为多个阶段，包括HTML解析、样式计算、布局、分层、绘制、分块、光栅化和画面绘制。每个阶段都有明确的输入输出，前一阶段的输出会成为后一阶段的输入，形成一个组织严密的生产流水线。

结合Chrome源码详解浏览器渲染页面的过程以及原理

owo_ovo的博客

12-08

2127

浏览器渲染页面的完整过程以及原理

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

博哥的二进制世界

05-16

1079

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

页面渲染流程

weixin_49021723的博客

12-19

1086

页面渲染流程

页面渲染的过程

weixin_39307273的博客

03-17

7109

一、页面渲染是客户端请求页面的最后一步 DNS解析域名 TCP建立连接 HTTP发送请求服务器返回状态码及相应数据 浏览器解析渲染页面二、页面渲染 浏览器加载，解析，渲染页面　　解析html 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树：我们知道浏览器为了体验友好，并不是文档全部都解析才绘制到屏幕上...

页面渲染过程

weixin_48317236的博客

02-25

2561

详细讲解页面渲染的全过程！！！

浏览器加载和渲染网页的过程

iteye_12813的博客

09-24

335

关于网页加载和渲染的过程，在网络上的讨论并不多。可能是因为这个过程比较复杂，而且浏览器执行的速度太快，目前还没有发现什么比较好的工具可以清楚的看到浏览器解析网页的每一个过程。通过firedug和httpWatch可以看到浏览器的http请求，但是对于浏览器如何paint和flow处理html元素，我们仍然是不得而知。“flow”这个词借鉴于reflow，表示浏览器第一次加载网页的过程。在...

页面的渲染流程

cjx177187的博客

07-21

848

③domtree和样式结构体结合后构建呈现树(rendertree),rendertree有点类似于domtree，但有区别，rendertree能识别样式，rendertree中每个node都有自己的style，而且rendertree不包含隐藏的节点(比如displaynone的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到rendertree中。⑤还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)...

浏览器渲染过程与性能优化

weixin_34050427的博客

10-04

273

大家都知道万维网的应用层使用了HTTP协议，并且用浏览器作为入口访问网络上的资源。用户在使用浏览器访问一个网站时需要先通过HTTP协议向服务器发送请求，之后服务器返回HTML文件与响应信息。这时，浏览器会根据HTML文件来进行解析与渲染（该阶段还包括向服务器请求非内联的CSS文件与JavaScript文件或者其他资源），最终再将页面呈现在用户面前。现在知道了网页的渲染都是由浏览器完成的，那么如果...

HTML页面渲染过程

长歌的博客

05-20

1490

文章很长，凡是我觉得好的东西统统都塞进来了。看了很多的文章，有些说法甚至都不统一，所以还动用了AI搜索。总之希望这篇文章能有点用，如有错误，欢迎指正。浏览器的主要组件包括：注意：Chrome 等浏览器会运行多个渲染引擎实例，每个标签页一个，每个标签页都在单独的进程中运行。不同的浏览器使用不同的渲染引擎：Internet Explorer 使用 Trident、Firefox 使用 Gecko、Safari 使用 WebKit。Chrome 和 Opera（从 15 版开始）使用 Blink，即 WebKit

说说页面渲染的过程

小草莓的博客

04-06

1549

浏览器是一个边解析边渲染的过程。 ① 浏览器解析HTML文件构建DOM树，然后解析CSS文件构建CSS规则树 ② DOM树和CSS规则树解析完成后，合成渲染树（Render Tree） ③ 等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上（重排和重绘）。

浏览器渲染过程

最新发布

08-12

浏览器的渲染过程是一个复杂但高效的机制，主要涉及多个关键步骤，包括构建DOM树、CSS规则树、渲染树、布局、绘制和合成等阶段。以下是详细说明： ### 构建DOM树当浏览器接收到HTML文档后，会解析HTML并生成DOM（Document Object Model）树。DOM树是一个由HTML标签转换而来的层次结构，每个节点代表一个HTML元素。解析过程中，浏览器会处理HTML标签并生成相应的节点对象，形成树状结构 [^3]。 ### 构建CSS规则树与此同时，浏览器会解析CSS样式表，将CSS规则转化为CSS对象模型（CSSOM），即CSS规则树。CSSOM与DOM树是分开构建的，但它决定了每个DOM节点的样式属性。CSSOM的构建需要解析CSS文件、内联样式以及浏览器默认样式 [^3]。 ### 构建渲染树在DOM树和CSSOM构建完成后，浏览器会将两者结合，生成渲染树（Render Tree）。渲染树包含所有可见元素及其样式信息，不包括隐藏元素（如`<head>`标签中的内容或`display: none`的元素）。渲染树的构建是为后续的布局和绘制做准备。 ### 布局（Layout）布局阶段也称为“回流”（Reflow），是计算每个元素在页面中的确切位置和大小的过程。浏览器会根据渲染树遍历所有节点，并将它们以盒模型的形式写入文档流。这个阶段决定了每个元素的几何属性，如宽度、高度、位置等 [^1]。 ### 绘制（Painting）在布局完成后，浏览器会进入绘制阶段。此阶段会将每个元素的视觉信息（如颜色、边框、文本、阴影等）绘制到屏幕上。绘制过程是逐层进行的，通常分为多个图层进行管理，以提高渲染效率 [^3]。 ### 合成（Compositing）最后，浏览器会将多个图层按照正确的顺序进行合成，最终呈现给用户。现代浏览器通常使用GPU进行合成操作，以提升性能。复合图层可以避免不必要的重绘和重排，提高页面渲染效率 [^3]。 ### 回流与重绘当DOM元素的几何属性发生变化时（如修改宽度、高度或位置），浏览器会触发回流（Reflow），重新计算元素的位置和大小。回流之后通常会触发重绘（Repaint），将新的几何属性绘制到屏幕上。频繁的回流和重绘会影响性能，因此在开发中应尽量减少此类操作 [^4]。 ### 浏览器渲染引擎的组件 浏览器的渲染引擎负责解析HTML和CSS，并将结果显示到窗口中。其核心组件包括： - **DOM解析器**：负责解析HTML文档并构建DOM树。 - **CSS解析器**：负责解析CSS样式并生成CSSOM。 - **布局引擎**：负责计算元素的几何属性。 - **绘制引擎**：负责将元素绘制到屏幕上。 - **JavaScript引擎**：负责解析和执行JavaScript代码，可能会影响DOM和CSSOM的更新 [^2]。 ### 优化渲染性能为了提升浏览器的渲染性能，开发者可以采取以下措施： - **减少DOM操作**：频繁的DOM修改会触发多次回流和重绘，应尽量合并DOM操作。 - **使用CSS动画优化**：使用`transform`和`opacity`属性进行动画操作，可以避免触发回流。 - **避免强制同步布局**：某些JavaScript操作会强制浏览器立即执行布局，影响性能。 - **使用复合图层**：将频繁变化的元素提升为复合图层，可以减少对其他元素的影响。 ```css /* 使用 transform 进行动画优化 */ .element { transition: transform 0.3s ease; } .element:hover { transform: scale(1.1); } ``` ### 相关问题 1. 什么是回流（Reflow）和重绘（Repaint）？它们对性能有什么影响？ 2. 如何通过CSS和JavaScript优化浏览器的渲染性能？ 3. 浏览器是如何处理复合图层的？复合图层有哪些优缺点？ 4. DOM树、CSSOM和渲染树之间有什么关系？ 5. JavaScript是如何影响浏览器渲染过程的？