从输入URL到页面加载的全过程

最新推荐文章于 2024-08-20 19:30:52 发布

zhaojjjjjj163

最新推荐文章于 2024-08-20 19:30:52 发布

阅读量918

点赞数 15

分类专栏： WEB 文章标签：前端

本文链接：https://blog.csdn.net/zhaojjjjjj163/article/details/136194201

版权

WEB 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

从输入URL到页面加载的全过程涉及多个步骤，这些步骤由浏览器和服务器协同完成。

1.输入URL

用户在浏览器的地址栏中输入一个URL，或者通过点击一个链接、书签等方式触发一个URL请求。

2. DNS解析：

如果URL中包含域名（如www.example.com），浏览器首先会查询DNS（域名系统）服务器，将域名解析成对应的IP地址。

3. 建立TCP连接：

浏览器通过解析后的IP地址和默认的HTTP端口（通常是80或443，后者用于HTTPS）与服务器建立TCP连接。对于HTTPS，还会进行SSL/TLS握手，以加密通信内容。

4. 发送HTTP请求：

一旦TCP连接建立，浏览器会向服务器发送一个HTTP请求。这个请求通常包括请求行（如GET或POST）、请求头（如User-Agent、Accept-Language等）和请求体（对于POST请求，包含提交的数据）。

5. 服务器处理请求：

服务器接收到请求后，会根据请求的内容进行相应的处理。这可能包括查询数据库、执行脚本、生成动态内容等。

6. 服务器响应：

服务器完成处理后，会返回一个HTTP响应。这个响应包括响应行（如HTTP/1.1 200 OK）、响应头（如Content-Type、Content-Length等）和响应体（即实际返回给浏览器的数据，通常是HTML文档）。

7. 浏览器接收响应：

浏览器接收到服务器的响应后，会开始解析响应内容。对于HTML文档，浏览器会首先解析文档的头部信息（如<head>标签内的内容），然后解析文档的主体部分（<body>标签内的内容）。

8. 解析和渲染页面：

浏览器开始解析HTML文档，将文档转换为DOM（文档对象模型）树。同时，浏览器也会解析CSS样式信息，生成CSSOM（CSS对象模型）树。

一旦DOM和CSSOM都构建完成，浏览器会将它们合并成渲染树（Render Tree）。渲染树只包含需要显示的节点和这些节点的样式信息。

浏览器根据渲染树开始布局过程，计算每个元素在屏幕上的确切位置和大小。

最后，浏览器进行绘制操作，将每个元素转换为屏幕上的实际像素。

9. 加载并应用JavaScript：