HTML渲染过程和原理

type

status

date

slug

summary

📝 介绍

HTML渲染过程涉及浏览器将HTML、CSS和JavaScript转换为用户可见页面的一系列步骤。以下是HTML渲染过程的详细解释：

1. 解析 HTML：

浏览器首先下载HTML文件，并解析其中的标记。解析的过程包括：

构建DOM树：将HTML标记解析成DOM（文档对象模型）树的形式，其中每个HTML标签都被表示为树中的一个节点，形成了文档的结构化表示。

解析样式和脚本：浏览器同时也会解析HTML中的CSS和JavaScript资源。CSS解析器会解析样式表，构建CSSOM（CSS对象模型）树；JavaScript引擎会解析脚本并执行其中的代码。

2. 构建渲染树（Render Tree）：

在构建DOM树和CSSOM树之后，浏览器将它们合并成一个渲染树（Render Tree），渲染树只包含页面上需要显示的内容，即包含DOM树中的节点以及与之关联的样式信息。这个过程叫做渲染树构建。

3. 布局（Layout）：

渲染树构建完成后，浏览器会对渲染树进行布局（Layout），计算每个节点在页面中的几何位置。布局过程也称为回流（Reflow），浏览器会根据CSS盒模型计算每个元素的大小、位置、边距、边框等属性，并确定它们在页面中的最终位置。

4. 绘制（Paint）：

布局完成后，浏览器会根据渲染树的信息将页面内容绘制到屏幕上。这个过程称为绘制（Paint），浏览器会根据每个元素的位置、大小、样式等属性，在屏幕上绘制相应的像素。

5. 合成（Composite）：

在绘制完成后，浏览器会将绘制好的图层按照合适的顺序合成到页面中，形成最终的用户可见页面。合成（Composite）过程包括将各个图层按照合适的顺序合并，并应用一些特效和动画效果。

6. 触发 JavaScript：

在上述过程中，如果遇到了需要执行的JavaScript代码，浏览器会暂停渲染过程，执行JavaScript代码，然后继续渲染。JavaScript的执行可能会改变DOM结构或样式，因此可能需要重新进行布局和绘制。

🤗 总结归纳

HTML渲染过程涉及浏览器对HTML、CSS和JavaScript的解析、合并、布局、绘制和合成等一系列步骤。通过这些步骤，浏览器能够将网页内容转换为用户可见的页面。理解HTML渲染过程对于优化页面性能和提升用户体验至关重要。

📎 参考文章

💬 Q&A

Q: 当你从浏览器输入一个网址时，到底发生了什么？

当你在浏览器中输入一个网址并按下回车键时，浏览器会经历一系列步骤来加载和显示页面。以下是从输入网址到页面显示的整个过程：

地址解析：

浏览器首先解析输入的网址，判断输入的是一个网址还是搜索关键词。

如果是网址，浏览器会解析网址，提取协议（如HTTP或HTTPS）、主机名、端口号和路径等信息。

DNS解析：

浏览器根据主机名（域名）查询DNS（域名解析系统）服务器，获取对应的IP地址。

如果DNS缓存中已经存在相应的IP地址，浏览器会直接使用缓存的IP地址；否则，浏览器会向DNS服务器发出DNS查询请求，获取对应的IP地址。

建立TCP连接：

浏览器使用HTTP或HTTPS协议与服务器建立TCP连接。

这个过程包括三次握手，即浏览器发送SYN包，服务器返回SYN-ACK包，浏览器发送ACK包，完成连接的建立。

发送HTTP请求：

浏览器向服务器发送HTTP请求，包括请求的方法（如GET、POST等）、请求的URL、请求头部和请求体等信息。

服务器处理请求：

服务器接收到请求后，根据请求的URL和其他信息进行处理，例如获取请求的资源、执行服务器端脚本等。

服务器将处理结果（如HTML文件、CSS文件、JavaScript文件等）以HTTP响应的形式返回给浏览器。

接收响应：

浏览器接收到服务器的HTTP响应后，根据响应头部的状态码判断请求是否成功。

如果请求成功（状态码为200），浏览器会根据响应内容类型（如text/html、text/css、application/javascript等）对响应内容进行处理；如果请求失败（如404 Not Found），浏览器会显示相应的错误页面。

渲染页面：

浏览器根据响应内容生成DOM树、CSSOM树和渲染树，并进行布局和绘制，最终在屏幕上显示页面内容。

连接关闭：

当页面加载完成后，浏览器与服务器之间的TCP连接会被关闭，释放资源。

以上是从输入网址到页面显示的整个过程，涉及了地址解析、DNS解析、建立TCP连接、发送HTTP请求、服务器处理请求、接收响应、渲染页面等一系列步骤。