浏览器从输入 URL 开始到页面显示内容,中间发生了什么?

输入地址,浏览器查找域名的 IP 地址(DNS解析)

浏览器向该 IP 地址的web 服务器发送一个 HTTP 请求,在发送请求之前浏览器和服务器建立TCP的三次握手,判断是否是HTTP缓存,如果是强制缓存且在有效期内,不再向服务器发请求,如果是HTTP协商缓存向后端发送请求且和后端服务器对比,在有效期内,服务器返回304,直接从浏览器获取数据,如果不在有效期内服务器返回200,返回新数据。


请求发送出去服务器返回重定向,浏览器再按照重定向的地址重新发送请求。
如果请求的参数有问题,服务器端返回404,如果服务器端挂了返回500。
如果有数据一切正常,当浏览器拿到服务器的数据之后,开始渲染页面同时获取HTML页面中图片、音频、视频、CSS、JS,在这期间获取到JS文件之后,会直接执行JS代码,阻塞浏览器渲染,因为渲染引擎和JS引擎互斥,不能同时工作,所以通常把Script标签放在body标签的底部。

渲染过程就是先将HTML转换成dom树,再将CSS样式转换成stylesheet,根据dom树和stylesheet创建布局树,对布局树进行分层,为每个图层生成绘制列表,再将图层分成图块,紧接着光栅化将图块转换成位图,最后合成绘制生成页面。

当你在浏览器输入一个 URL(如 `https://www.example.com`)并按下回车后,**浏览器服务器之间会进行一系列复杂的网络通信过程**,最终将网页内容渲染展示出来。这个过程涉及多个协议、组件和步骤。 --- ## 一、整个过程的详细流程 ### 1. **输入 URL 并解析** 浏览器首先解析你输入URL,提取出: - 协议类型:如 `https://` - 域名:如 `www.example.com` - 端口号(可选,默认为 80 或 443) - 路径(如 `/index.html`) ### 2. **DNS 解析(域名解析成 IP 地址)** #### 流程如下: 1. **检查本地 Hosts 文件** 2. **查找本地 DNS 缓存** 3. **查询操作系统缓存** 4. **发送请求到 Local DNS Server(递归查询)** 5. **Local DNS 向根 DNS、顶级域(TLD)、权威 DNS 查询获取 IP** 最终获取目标服务器的 IP 地址。 #### 示例 Java 代码模拟 DNS 查询: ```java import java.net.InetAddress; public class DnsLookup { public static void main(String[] args) { try { InetAddress address = InetAddress.getByName("www.example.com"); System.out.println("IP Address: " + address.getHostAddress()); } catch (Exception e) { e.printStackTrace(); } } } ``` --- ### 3. **建立 TCP 连接(三次握手)** 使用 TCP 协议建立连接: 1. 客户端 → 服务端:SYN(同步) 2. 服务端 → 客户端:SYN-ACK(同步-确认) 3. 客户端 → 服务端:ACK(确认) > 如果是 HTTPS,还会在此阶段进行 TLS/SSL 握手加密通信。 --- ### 4. **发送 HTTP/HTTPS 请求** 建立连接后,浏览器发送 HTTP 请求报文,例如: ``` GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 ... Accept: text/html Connection: keep-alive ``` --- ### 5. **服务器接收请求并处理** 服务器接收到请求后,根据路径、方法等信息进行处理,可能包括: - 静态资源直接返回 - 动态请求由 Web 框架(如 Spring Boot)处理 - 数据库查询、业务逻辑执行等 #### 示例 Java Servlet 处理 GET 请求: ```java @WebServlet("/index.html") public class HelloServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<h1>Hello, World!</h1>"); } } ``` --- ### 6. **服务器返回响应** 服务器将响应返回给浏览器,包含状态码、响应头和响应体: ``` HTTP/1.1 200 OK Content-Type: text/html Content-Length: 137 <h1>Hello, World!</h1> ``` --- ### 7. **浏览器解析并渲染页面** 1. **HTML 解析器**解析 HTML 文档,构建 DOM 树。 2. **CSS 解析器**解析样式表,构建 CSSOM。 3. **JavaScript 引擎**执行脚本(可能会修改 DOM 和 CSSOM)。 4. **布局引擎**结合 DOM 和 CSSOM 构建渲染树。 5. **绘制页面**:将渲染树转换为屏幕上的像素。 --- ### 8. **关闭连接(四次挥手)** 如果连接不是 Keep-Alive,浏览器和服务端会通过四次挥手断开连接。 --- ## 二、总结图示 ``` URL 输入 → DNS 解析 → 建立 TCP 连接 → 发送 HTTP 请求 → 服务器处理 → 返回响应 → 渲染页面 → 断开连接 ``` --- ## 三、性能优化相关技术 | 技术 | 作用 | |------|------| | DNS 缓存 | 减少 DNS 查询时间 | | CDN 加速 | 接近用户节点,提高访问速度 | | HTTP/2 | 多路复用,减少延迟 | | 前端懒加载 | 提高首屏加载速度 | | 服务端缓存 | 减少数据库压力 | --- ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值