描述一下浏览器中页面的渲染过程?

发布于 2024-12-06 03:12:38 字数 463 浏览 3 评论 0原文

首先,我对此问题所解决的整个请求响应过程不感兴趣

从浏览器地址栏输入url到在浏览器中获取渲染页面的完整过程是什么?

我想知道发生了什么在浏览器内部,一旦它收到来自服务器的 html 响应。提出这个问题的目的是为了了解客户端脚本的内部细节。如果您能用抽象概念解释网络浏览器的组成部分,也会很有帮助。您可以将它们称为 CSS 引擎、javascript 引擎等。目标是精确可视化我正在进行的 Web 开发。

不幸的是,我没有找到任何解决此问题的 Web 资源。如果有资源可以解释这些概念,请原谅我。如果这个问题太详尽而无法回答,您可以指出资源(书籍等)。

First of all, I am not interested in the entire request-response process as addressed by this question

What is the complete process from entering a url to the browser's address bar to get the rendered page in browser?

I want to know what goes on inside a browser, once it receives the html response from the server. The intent behind asking this question is to understand the inner details of client side scripting. Also it would be beneficial if you can explain in abstract concepts what a web browser comprises of. You may call them as CSS engine, javascript engine etc.The goal is to precisely visualize the web development I am doing.

Unfortunately, I did not find any web resources addressing this issue. Please forgive me if there are resources out there which explain these concepts. You may point to the resources (books, etc) if this question is too exhaustive to answer.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

初懵 2024-12-13 03:12:39

请完成以下步骤,您应该清楚请求生命周期以及如何呈现响应。

  1. 您在首选浏览器的地址栏中输入 URL。

  2. 浏览器解析 URL 以查找协议、主机、端口和路径。

  3. 它形成一个 HTTP 请求(这很可能是协议)

  4. 要到达主机,它首先需要翻译人类可读的主机 主机上进行 DNS 查找来实现此目的

  5. 然后需要从主机打开一个套接字用户的计算机在指定的端口(通常是端口 80)上连接到该 IP 号码

  6. 当连接打开时,HTTP 请求被发送到主机 主机将请求转发到配置为侦听指定端口的服务器软件(最常见的是 Apache)

  7. 服务器检查请求(通常仅检查路径),并启动处理请求所需的服务器插件(对应于您使用的服务器语言,PHP 、Java、.NET、Python?)

  8. 插件获取完整请求的访问权限,并开始准备 HTTP 响应。

  9. 为了构造响应,数据库(很可能)被访问。根据请求路径(或数据)中的参数进行数据库搜索

  10. 数据库中的数据与插件决定添加的其他信息一起组合成一长串文本(可能是 HTML)。

  11. 该插件将该数据与一些元数据(以 HTTP 标头的形式)结合起来,并将 HTTP 响应发送回浏览器。

  12. 浏览器收到响应,并解析响应中的 HTML(95% 概率已损坏)

  13. DOM 树是用损坏的 HTML 构建的

  14. 针对在 HTML 源中找到的每个新资源向服务器发出新请求(通常是图像、样式表和 JavaScript文件)。

  15. 返回到步骤 3 并对每个资源重复。

  16. 解析样式表,并将每个样式表中的渲染信息附加到 DOM 树中的匹配节点

  17. JavaScript 被解析并执行,DOM 节点被移动并相应更新样式信息

  18. 浏览器根据内容在屏幕上渲染页面到 DOM 树和每个节点的样式信息

  19. 你在屏幕上看到页面

  20. 您对整个过程太慢感到恼火。

Please go through below steps and you should be clear with request lifecycle and how response is rendered.

  1. You type an URL into address bar in your preferred browser.

  2. The browser parses the URL to find the protocol, host, port,and path.

  3. It forms a HTTP request (that was most likely the protocol)

  4. To reach the host, it first needs to translate the human readable host into an IP number, and it does this by doing a DNS lookup on the host

  5. Then a socket needs to be opened from the user’s computer to that IP number, on the port specified (most often port 80)

  6. When a connection is open, the HTTP request is sent to the host The host forwards the request to the server software (most often Apache) configured to listen on the specified port

  7. The server inspects the request (most often only the path), and launches the server plugin needed to handle the request (corresponding to the server language you use, PHP, Java, .NET, Python?)

  8. The plugin gets access to the full request, and starts to prepare a HTTP response.

  9. To construct the response a database is (most likely) accessed. A database search is made, based on parameters in the path (or data) of the request

  10. Data from the database, together with other information the plugin decides to add, is combined into a long string of text (probably HTML).

  11. The plugin combines that data with some meta data (in the form of HTTP headers), and sends the HTTP response back to the browser.

  12. The browser receives the response, and parses the HTML (which with 95% probability is broken) in the response

  13. A DOM tree is built out of the broken HTML

  14. New requests are made to the server for each new resource that is found in the HTML source (typically images, style sheets, and JavaScript files).

  15. Go back to step 3 and repeat for each resource.

  16. Stylesheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree

  17. JavaScript is parsed and executed, and DOM nodes are moved and style information is updated accordingly

  18. The browser renders the page on the screen according to the DOM tree and the style information for each node

  19. You see the page on the screen

  20. You get annoyed the whole process was too slow.

一桥轻雨一伞开 2024-12-13 03:12:39

Mozilla 的 David Baron 的精彩演讲详细讨论了这一点。这是一个名为更快的 HTML 和 CSS:面向 Web 开发人员的布局引擎内部原理的视频,它的内容是您将完成将 DOM 树渲染到屏幕的五个步骤:

  1. 构建 DOM
  2. 计算样式
  3. 构建渲染树
  4. 计算布局
  5. Paint

An excellent talk by Mozilla's David Baron discusses this in detail. It's a video entitled Faster HTML and CSS: Layout Engine Internals for Web Developers, and it walks you through the five steps of rendering a DOM tree to the screen:

  1. Construct the DOM
  2. Calculate styles
  3. Construct the rendering tree
  4. Compute layout
  5. Paint
滿滿的愛 2024-12-13 03:12:39

我将尝试深入解释页面渲染过程。请注意,我并不关注OP在问题中提出的请求响应过程。

一旦服务器向浏览器提供资源(HTML、CSS、JS、图像等),它就会经历以下过程:

解析 - HTML、CSS、JS
渲染 - 构建 DOM 树 → 渲染树 → 渲染树布局 → 绘制渲染树

  1. 渲染引擎开始从网络层获取所请求文档的内容。这通常以 8kB 块的形式完成。
  2. DOM 树是根据损坏的响应构建的。
  3. 针对在 HTML 源(通常是图像、样式表和 JavaScript 文件)中找到的每个新资源,向服务器发出新请求。
  4. 在此阶段,浏览器将文档标记为交互式,并开始解析处于“延迟”模式的脚本:那些应在解析文档后执行的脚本。文档状态设置为“完成”并触发“加载”事件。
  5. 每个 CSS 文件都被解析为一个 StyleSheet 对象,其中每个对象包含带有选择器的 CSS 规则以及对应 CSS 语法的对象。构建的树称为 CSSCOM。
  6. 在 DOM 和 CSSOM 之上,创建了渲染树,它是一组要渲染的对象。每个渲染对象都包含其相应的 DOM 对象(或文本块)以及计算出的样式。换句话说,渲染树描述了 DOM 的视觉表示。
  7. 构建渲染树后,它会经历一个“布局”过程。这意味着为每个节点提供它应该出现在屏幕上的确切坐标。
  8. 下一阶段是绘制 - 将遍历渲染树并使用 UI 后端层绘制每个节点。
  9. 重新绘制:当更改不影响元素在页面上的位置的元素样式(例如背景颜色、边框颜色、可见性)时,浏览器只是使用应用的新样式再次重新绘制元素(这意味着“重新绘制”或“重新设计”正在发生)。
  10. 重排:当更改影响文档内容或结构或元素位置时,就会发生重排(或重新布局)。

网络浏览器的内部结构是什么?
浏览器结构
为了理解上述几点所解释的页面渲染过程,我们还需要了解网络浏览器的结构。

用户界面:用户界面包括地址栏、后退/前进按钮、书签菜单等。除了您看到所请求页面的窗口之外,浏览器显示的每个部分。
浏览器引擎:浏览器引擎对 UI 和渲染引擎之间的操作进行编组。
渲染引擎:渲染引擎负责显示请求的内容。例如,如果请求的内容是HTML,则渲染引擎解析HTML和CSS,并将解析后的内容显示在屏幕上。
网络:网络处理网络调用,例如 HTTP 请求,在独立于平台的接口后面针对不同平台使用不同的实现。
UI后端:UI后端用于绘制基本的小部件,例如组合框和窗口。该后端公开了一个不特定于平台的通用接口。它的底层使用操作系统用户界面方法。
JavaScript引擎 JavaScript引擎用于解析和执行JavaScript代码。
数据存储:数据存储是一个持久层。浏览器可能需要在本地保存各种数据,例如cookie。浏览器还支持 localStorage、IndexedDB、WebSQL 和 FileSystem 等存储机制。

注意:
在渲染过程中,图形计算层也可以使用通用CPU或图形处理器GPU。
当使用GPU进行图形渲染计算时,图形软件层将任务分成多个部分,因此它可以利用GPU大规模并行性来进行渲染过程所需的浮点计算。

有用链接:
1. https://github.com/alex/what-happens-when < br>
2. https://codeburst.io/how-browsers-work-6350a4234634

I will try to explain the page rendering process in depth. Kindly note that I am not focusing on the request-response process as the OP has asked in the question.

Once the server supplies the resources (HTML, CSS, JS, images, etc.) to the browser it undergoes the below process:

Parsing - HTML, CSS, JS
Rendering - Construct DOM Tree → Render Tree → Layout of Render Tree → Painting the render tree

  1. The rendering engine starts getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.
  2. A DOM tree is built out of the broken response.
  3. New requests are made to the server for each new resource that is found in the HTML source (typically images, style sheets, and JavaScript files).
  4. At this stage the browser marks the document as interactive and starts parsing scripts that are in "deferred" mode: those that should be executed after the document is parsed. The document state is set to "complete" and a "load" event is fired.
  5. Each CSS file is parsed into a StyleSheet object, where each object contains CSS rules with selectors and objects corresponding CSS grammar. The tree built is called CSSCOM.
  6. On top of DOM and CSSOM, a rendering tree is created, which is a set of objects to be rendered. Each of the rendering objects contains its corresponding DOM object (or a text block) plus the calculated styles. In other words, the render tree describes the visual representation of a DOM.
  7. After the construction of the render tree it goes through a "layout" process. This means giving each node the exact coordinates where it should appear on the screen.
  8. The next stage is painting–the render tree will be traversed and each node will be painted using the UI backend layer.
  9. Repaint: When changing element styles which don't affect the element's position on a page (such as background-color, border-color, visibility), the browser just repaints the element again with the new styles applied (that means a "repaint" or "restyle" is happening).
  10. Reflow: When the changes affect document contents or structure, or element position, a reflow (or relayout) happens.

What is the internal structure of a web browser?
browser structure
To understand the page rendering process explained in the above points we also need to understand the structure of a web browser.

User interface: The user interface includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
Browser engine: The browser engine marshals actions between the UI and the rendering engine.
Rendering engine: The rendering engine is responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
Networking: The networking handles network calls such as HTTP requests, using different implementations for different platforms behind a platform-independent interface.
UI backend: The UI backend is used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
JavaScript engine: The JavaScript engine is used to parse and execute JavaScript code.
Data storage: The data storage is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

Note:
During the rendering process the graphical computing layers can use general purpose CPU or the graphical processor GPU as well.
When using GPU for graphical rendering computations the graphical software layers split the task into multiple pieces, so it can take advantage of GPU massive parallelism for float point calculations required for the rendering process.

Useful Links:
1. https://github.com/alex/what-happens-when
2. https://codeburst.io/how-browsers-work-6350a4234634

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文