一、URL到页面渲染的过程
当用户在浏览器中输入一个URL并访问一个网页时，浏览器会经历一系列复杂的步骤来将URL转换为用户可见的页面，以下是这一过程的详细分解：
1. 输入URL并解析
用户输入URL：用户在浏览器的地址栏中输入URL（https://www.example.com）并按下回车键。
URL解析：浏览器解析URL，确定协议（如HTTP/HTTPS）、主机名（如 www.example.com）、端口号（默认80或443）、路径、查询参数等。
2. DNS查询
检查浏览器缓存：浏览器首先检查本地DNS缓存，看看是否已经存储了该主机名对应的IP地址。
操作系统缓存：如果浏览器缓存中没有，浏览器会请求操作系统的DNS缓存。
路由器和ISP：如果操作系统缓存中也没有，DNS请求会被发送到路由器，进一步传递到互联网服务提供商（ISP）的DNS服务器。
DNS解析过程：如果ISP的DNS服务器没有缓存该域名，它会递归查询根DNS服务器、顶级域（TLD）DNS服务器，直到找到权威DNS服务器并获取IP地址。
返回IP地址：解析到的IP地址会被返回给浏览器，并存储在本地缓存中以备未来使用。
3. 建立TCP连接
TCP三次握手：浏览器与服务器之间建立TCP连接，过程包括发送SYN包、接收SYNACK包、发送ACK包，完成三次握手。
HTTPS中的TLS握手：如果使用HTTPS协议，还需要进行TLS握手，确保数据传输的加密和安全，TLS握手包括协商加密算法、交换证书、生成会话密钥等步骤。
4. 发送HTTP请求
构建HTTP请求：浏览器构建包含请求方法（如GET、POST）、URL路径、请求头（如UserAgent、Accept）、Cookies等信息的HTTP请求。
发送请求：通过已建立的TCP连接，将HTTP请求发送到服务器。
5. 服务器处理请求
服务器接收请求：服务器接收并解析HTTP请求，确定所需资源。
处理业务逻辑：服务器可能需要处理数据库查询、执行业务逻辑、调用其他服务等。
生成HTTP响应：服务器生成HTTP响应，包含状态码（如200 OK、404 Not Found）、响应头（如ContentType、SetCookie）、响应体（如HTML、JSON数据等）。
发送响应：通过TCP连接，将HTTP响应发送回浏览器。
6. 浏览器接收响应并渲染页面
接收响应：浏览器接收到服务器的HTTP响应。
处理响应头：浏览器解析响应头，处理缓存策略（如CacheControl、Expires）、内容类型等。
解析HTML：浏览器开始解析HTML文档，构建DOM树（Document Object Model）。
解析CSS：解析所有关联的CSS文件，构建CSSOM树（CSS Object Model）。
构建渲染树：将DOM树和CSSOM树结合，生成渲染树（Render Tree），只包含可见元素及其样式。
布局（Reflow）：根据渲染树计算每个节点的位置和大小，执行布局过程，确定元素在页面上的具体位置。
绘制（Paint）：将渲染树中的每个节点绘制到屏幕上，形成可见的页面。
合成（Composite）：对页面进行合成处理，将不同的绘制层（如固定元素、动画元素）合成最终的像素图像。
7. 资源加载与异步操作
JavaScript执行：解析和执行JavaScript代码，可能会修改DOM或CSS，触发重排（Reflow）或重绘（Repaint）。
异步资源加载：异步加载的资源（如图片、视频、Ajax请求）会在页面渲染完成后继续加载和处理。
事件处理：用户交互事件（如点击、滚动、输入）会被监听和处理，可能会引发动态的DOM更新和重新渲染。
二、详细解析过程
在URL到页面渲染的过程中，涉及多个解析过程，这些解析对于正确显示网页非常重要，以下是关于HTML、CSS、JavaScript的详细解析过程：
1. HTML解析过程
当浏览器接收到服务器返回的HTML文档时，HTML解析器会按照以下步骤解析HTML并生成DOM树：
标记化（Tokenization）：浏览器将HTML文档的内容逐字读取，并将其转化为不同的标记（Token），这些标记包括开始标签、结束标签、文本节点、注释等。<div> 是一个开始标签，而 </div> 是对应的结束标签。
树构建：在标记化的同时，浏览器根据这些标记构建DOM树，每个HTML标记会被转换为一个DOM节点，并按照嵌套关系构成树形结构。<div><p>text</p></div> 会生成一个<div>元素节点，内部包含一个<p>元素节点，<p>节点包含一个文本节点。
错误处理：HTML具有容错性，当HTML文档中有不合规的部分时，浏览器会自动修正这些错误，如果某个标签未闭合，浏览器会尝试推断它的闭合位置，以保持解析的顺利进行。
2. CSS解析过程
浏览器解析CSS的过程稍微复杂一些，因为CSS不仅描述了样式，还涉及到继承、层叠和优先级的计算，CSS解析的主要步骤如下：
CSS标记化：浏览器首先将CSS代码分割为若干个标记（Tokens），每个标记代表一个样式规则，color: red; 会被解析为属性（color）和值（red）。
规则解析：CSS解析器将每个样式规则解析为对象，这些对象描述了选择器和对应的样式属性，选择器 h1 对应的样式属性可能是 fontsize: 20px;。
层叠计算：浏览器根据CSS层叠样式表模型计算优先级（CSS Specificity），确定哪些样式规则应用于哪个元素，当多个规则作用于同一个元素时，浏览器根据优先级、继承关系和样式来源（内联样式、内部样式、外部样式表）决定最终应用的样式。
构建CSSOM：浏览器将解析后的CSS规则应用到DOM树中的元素上，并构建CSSOM树（CSS对象模型），CSSOM树是与DOM树对应的另一种树结构，表示每个DOM元素的样式信息。
3. JavaScript解析与执行
JavaScript的解析和执行会影响DOM和CSSOM的构建，具体步骤如下：
标记化：浏览器将JavaScript代码分割成标记（Tokens），这些标记包括关键字、操作符、变量名等。
解析：将标记转换为抽象语法树（AST），表示代码的结构和语法。
执行：根据AST执行代码，JavaScript是解释型语言，代码在执行过程中会改变DOM或CSSOM的结构，从而影响页面的渲染。
三、优化建议
为了提高页面性能，开发者可以采取以下优化措施：
1、减少HTTP请求：合并CSS和JavaScript文件，减少文件数量，从而减少HTTP请求次数。
2、使用CDN分发网络（CDN）加速资源的加载速度。
3、启用压缩：启用Gzip压缩，减少传输的数据量。
4、添加缓存控制：通过设置合理的缓存策略，减少重复加载相同资源的次数。
5、优化图片：使用适当的图片格式和压缩技术，减少图片的大小。
6、延迟加载：对于非关键资源，可以使用延迟加载技术，提高首屏加载速度。
四、FAQs
Q1: CSS加载会阻塞页面的渲染吗？
A1: 是的，CSS加载会阻塞页面的渲染，当浏览器遇到<link>标签引用外部CSS文件时，会暂停HTML的解析，直到CSS文件下载并解析完成，这是因为CSSOM树需要构建完成才能与DOM树结合生成渲染树，为了提高页面加载速度，应尽量将CSS文件放在<head>标签内，并尽量减少CSS文件的大小。
Q2: JavaScript的执行会阻塞DOM树的构建吗？
A2: JavaScript的执行会阻塞DOM树的构建，当浏览器遇到<script>标签时，会暂停HTML的解析，执行JavaScript代码，然后再继续解析HTML，这是因为JavaScript代码可能会修改DOM树或CSSOM树，从而影响页面的渲染，为了避免这种情况，可以将<script>标签放在<body>标签的底部，或者使用defer和async属性，Defer属性会使脚本在DOM树构建完成后再执行，而async属性会使脚本异步加载并在准备好后立即执行。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1242760.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复