输入url到返回页面的过程

http://blog.youkuaiyun.com/wdzxl198/article/details/11265475

当用户在浏览器中输入一个 URL 并按下回车键后,浏览器会经历多个步骤来加载并最终展示网页内容。整个流程可以分为以下几个关键阶段: ### 域名解析(DNS Lookup) 在浏览器发起请求之前,首先需要将用户输入的域名(如 `www.example.com`)转换为对应的 IP 地址。这个过程通过 DNS(Domain Name System)完成,浏览器会依次查询本地缓存、本地 hosts 文件、递归 DNS 服务器等,最终获取目标服务器的 IP 地址[^3]。 ### 建立 TCP 连接 一旦获取了服务器的 IP 地址,浏览器会与服务器建立 TCP 连接,通常使用三次握手的方式完成连接建立。如果网站使用 HTTPS 协议,还会在此阶段进行 TLS/SSL 握手,确保通信安全[^1]。 ### 发送 HTTP 请求 浏览器向服务器发送 HTTP 请求,请求的内容包括请求方法(如 GET、POST)、请求头(Headers)以及可选的请求体(Body)。请求头中可能包含 User-Agent、Accept-Language、Cookie 等信息,用于告知服务器客户端的能力和偏好[^3]。 ### 服务器处理请求并返回响应 服务器接收到请求后,会根据请求内容生成响应。如果请求的资源存在且无需重定向,服务器将返回状态码 200 及响应体(通常是 HTML 文档)。如果资源未改变,服务器可能返回 304 Not Modified 以节省带宽。若需重定向,则返回 301 或 302 状态码及新的 URL 地址[^4]。 ### 浏览器解析与渲染 浏览器接收到服务器返回的 HTML 文档后,开始解析文档内容。首先构建 DOM 树(文档对象模型),然后解析 CSS 样式,构建 CSSOM(样式对象模型)。JavaScript 可能会修改 DOM 和 CSSOM,因此浏览器会暂停解析直到脚本执行完毕。最终,浏览器将 DOM 和 CSSOM 合并生成渲染树,并进行布局(Layout)和绘制(Paint),将页面内容呈现在屏幕上[^2]。 ### 加载额外资源 在解析 HTML 的过程中,浏览器会发现页面中引用的其他资源(如图片、CSS、JS 文件等),并针对这些资源发起额外的 HTTP 请求。这些资源可能并行加载,以提高页面加载速度[^1]。 ### 断开 TCP 连接 当所有资源加载完成后,浏览器可能会根据服务器的响应头(如 `Connection: close`)或默认行为(HTTP/1.1 默认使用持久连接)决定是否断开与服务器的 TCP 连接。如果断开,将通过 TCP 四次挥手完成连接关闭[^1]。 ### 示例代码:HTTP 请求与响应示例 ```http GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 ... Accept: text/html,application/xhtml+xml Accept-Language: en-US,en;q=0.5 Connection: keep-alive HTTP/1.1 200 OK Date: Mon, 27 Jul 2020 12:28:53 GMT Server: Apache Last-Modified: Wed, 22 Jul 2020 19:15:56 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 847 Connection: keep-alive <!DOCTYPE html> <html> <head> <title>Example Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello, World!</h1> <script src="script.js"></script> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值