一张动图告诉你，输入网址之后，发生了什么事情？
最新回答
南巷清风
2023-01-19 07:28:50
输入网址后，浏览器会通过一系列复杂步骤获取并渲染网页内容，具体过程如下：
- URL转换：用户在浏览器输入网址（如http://www.bytebytego.com）后，浏览器首先检查该域名是否已缓存为IP地址。缓存层级依次为：浏览器缓存、操作系统缓存、本地网络设备缓存、ISP（互联网服务提供商）缓存。
- DNS查询：若缓存中无对应IP，浏览器会向DNS服务器发起递归查询。DNS服务器会逐级向上查询（如本地DNS→根DNS→顶级域名DNS→权威DNS），直到获取目标服务器的IP地址。
- TCP三次握手：浏览器通过TCP协议与服务器建立连接。过程如下：
客户端发送SYN包请求连接；
服务器回复SYN-ACK包确认；
客户端再发送ACK包完成握手，此时连接建立。
- TLS握手（HTTPS）：若使用HTTPS，还需进行TLS加密协商：
服务器发送公钥证书至客户端；
客户端生成随机会话密钥，用公钥加密后发送至服务器；
服务器用私钥解密会话密钥，双方后续通过该密钥加密数据传输。
- HTTP请求：浏览器向服务器发送请求报文，包含请求方法（如GET）、目标路径、协议版本及请求头（如用户代理、接受内容类型等）。
- 服务器处理：服务器接收请求后，根据路径查找对应资源（如HTML文件），生成响应报文。成功响应状态码为200，报文包含响应头（如内容类型、缓存控制）和响应体（如HTML代码）。
- 解析HTML生成DOM树：浏览器逐行解析HTML，将标签转换为节点，构建树状结构的DOM（文档对象模型）。
- 解析CSS生成CSSOM树：浏览器解析CSS文件或内联样式，生成CSSOM（CSS对象模型），记录元素的样式规则。
- 合并渲染树：DOM树与CSSOM树合并为渲染树，仅包含需显示的节点及其样式信息（如<head>或display: none的节点不包含在内）。
- 布局与绘制：
布局（Layout/Reflow）：浏览器计算每个节点在视口中的精确位置和尺寸（如宽度、高度、边距）。
绘制（Paint）：将布局结果转换为像素，填充文本、颜色、边框等视觉元素。
合成（Composite）：若页面包含多层（如CSS动画、透明元素），浏览器会分层处理并合成最终图像。
- 显示页面：浏览器将渲染结果绘制到屏幕，用户看到完整网页。
- JavaScript执行：若HTML中包含JavaScript，浏览器会暂停渲染，先执行JS代码（如修改DOM或CSSOM），可能触发重新布局或绘制。
- 资源加载优化：现代浏览器会并行加载CSS、JS和图片等资源，并通过预加载扫描器提前发现需加载的资源，减少等待时间。
这一过程涉及网络协议、加密技术、渲染引擎等多领域知识，但浏览器通过高度优化的流程，使用户在毫秒级时间内即可看到网页内容。
热门标签
