描述一下浏览器中页面的渲染过程?
首先,我对此问题所解决的整个请求响应过程不感兴趣
从浏览器地址栏输入url到在浏览器中获取渲染页面的完整过程是什么?
我想知道发生了什么在浏览器内部,一旦它收到来自服务器的 html 响应。提出这个问题的目的是为了了解客户端脚本的内部细节。如果您能用抽象概念解释网络浏览器的组成部分,也会很有帮助。您可以将它们称为 CSS 引擎、javascript 引擎等。目标是精确可视化我正在进行的 Web 开发。
不幸的是,我没有找到任何解决此问题的 Web 资源。如果有资源可以解释这些概念,请原谅我。如果这个问题太详尽而无法回答,您可以指出资源(书籍等)。
First of all, I am not interested in the entire request-response process as addressed by this question
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
请完成以下步骤,您应该清楚请求生命周期以及如何呈现响应。
您在首选浏览器的地址栏中输入 URL。
浏览器解析 URL 以查找协议、主机、端口和路径。
它形成一个 HTTP 请求(这很可能是协议)
要到达主机,它首先需要翻译人类可读的主机 主机上进行 DNS 查找来实现此目的
然后需要从主机打开一个套接字用户的计算机在指定的端口(通常是端口 80)上连接到该 IP 号码
当连接打开时,HTTP 请求被发送到主机 主机将请求转发到配置为侦听指定端口的服务器软件(最常见的是 Apache)
服务器检查请求(通常仅检查路径),并启动处理请求所需的服务器插件(对应于您使用的服务器语言,PHP 、Java、.NET、Python?)
插件获取完整请求的访问权限,并开始准备 HTTP 响应。
为了构造响应,数据库(很可能)被访问。根据请求路径(或数据)中的参数进行数据库搜索
数据库中的数据与插件决定添加的其他信息一起组合成一长串文本(可能是 HTML)。
该插件将该数据与一些元数据(以 HTTP 标头的形式)结合起来,并将 HTTP 响应发送回浏览器。
浏览器收到响应,并解析响应中的 HTML(95% 概率已损坏)
DOM 树是用损坏的 HTML 构建的
针对在 HTML 源中找到的每个新资源向服务器发出新请求(通常是图像、样式表和 JavaScript文件)。
返回到步骤 3 并对每个资源重复。
解析样式表,并将每个样式表中的渲染信息附加到 DOM 树中的匹配节点
JavaScript 被解析并执行,DOM 节点被移动并相应更新样式信息
浏览器根据内容在屏幕上渲染页面到 DOM 树和每个节点的样式信息
你在屏幕上看到页面
您对整个过程太慢感到恼火。
Please go through below steps and you should be clear with request lifecycle and how response is rendered.
You type an URL into address bar in your preferred browser.
The browser parses the URL to find the protocol, host, port,and path.
It forms a HTTP request (that was most likely the protocol)
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
Then a socket needs to be opened from the user’s computer to that IP number, on the port specified (most often port 80)
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
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?)
The plugin gets access to the full request, and starts to prepare a HTTP response.
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
Data from the database, together with other information the plugin decides to add, is combined into a long string of text (probably HTML).
The plugin combines that data with some meta data (in the form of HTTP headers), and sends the HTTP response back to the browser.
The browser receives the response, and parses the HTML (which with 95% probability is broken) in the response
A DOM tree is built out of the broken HTML
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).
Go back to step 3 and repeat for each resource.
Stylesheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree
JavaScript is parsed and executed, and DOM nodes are moved and style information is updated accordingly
The browser renders the page on the screen according to the DOM tree and the style information for each node
You see the page on the screen
You get annoyed the whole process was too slow.
Mozilla 的 David Baron 的精彩演讲详细讨论了这一点。这是一个名为更快的 HTML 和 CSS:面向 Web 开发人员的布局引擎内部原理的视频,它的内容是您将完成将 DOM 树渲染到屏幕的五个步骤:
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:
我将尝试深入解释页面渲染过程。请注意,我并不关注OP在问题中提出的请求响应过程。
一旦服务器向浏览器提供资源(HTML、CSS、JS、图像等),它就会经历以下过程:
解析 - HTML、CSS、JS
渲染 - 构建 DOM 树 → 渲染树 → 渲染树布局 → 绘制渲染树
网络浏览器的内部结构是什么?
为了理解上述几点所解释的页面渲染过程,我们还需要了解网络浏览器的结构。
用户界面:用户界面包括地址栏、后退/前进按钮、书签菜单等。除了您看到所请求页面的窗口之外,浏览器显示的每个部分。
浏览器引擎:浏览器引擎对 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
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.
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