Javascript 描述浏览器中的页面渲染过程？

Describe the page rendering process in a browser?

提问by pphanireddy

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?

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

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.

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

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.

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

回答by Subhash Chandra

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.

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

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

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

4. 要到达主机，它首先需要将人类可读的主机转换为 IP 号，并通过在主机上进行 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. 你会因为整个过程太慢而烦恼。

回答by Chris Calo

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:

Mozilla 的 David Baron 的精彩演讲详细讨论了这一点。这是一个名为Faster HTML and CSS: Layout Engine Internals for Web Developers 的视频，它引导您完成将 DOM 树渲染到屏幕的五个步骤：

1. Construct the DOM
2. Calculate styles
3. Construct the rendering tree
4. Compute layout
5. Paint

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

回答by Shwetabh Shekhar

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.

我将尝试深入解释页面渲染过程。请注意，我并没有像 OP 在问题中提出的那样关注请求-响应过程。

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

一旦服务器向浏览器提供资源（HTML、CSS、JS、图像等），它就会经历以下过程：

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

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

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.
    

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

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

网页浏览器的内部结构是怎样的？要理解上述各点中解释的页面渲染过程，我们还需要了解 Web 浏览器的结构。

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.

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

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

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

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