浏览器地址栏输入URL的过程

仰望星空的小猴子
6 阅读5分钟

浏览器地址栏输入一个URL(如www.baidu.com)按下回车，到页面显示整个过程

阶段一：输入处理与URL解析

  • 输入识别
    • 浏览器判断输入内容：若协议(如http://)或明显域名，视为URL；否则触发默认搜索引擎(如Chrome地址栏即搜索框)
    • 安全提示：若为http站点，部分浏览器会标记“不安全”；若该网站强制要求使用HTTPS,浏览器会自动将http://转换为https://，以防攻击
  • URL 解析
    • 拆解为：协议(https)、主机名(www.baidu.com)、端口(默认443)、路径(/index.html)、查询参数(?id=1)、哈希(#section)
    • 注意：哈希部分(#后)不会发送至服务器，仅用于前端路由

阶段二：DNS查询(将域名转换为IP地址)

  • 计算机只能通过IP地址(比如93.184.216.34)进行通信，因此要将域名转换为对应的IP地址
  • 依次查询：浏览器内存缓存-->磁盘缓存(强缓存：Cache-control/Expires;协商缓存：ETag/Last-Modified) --> Service Work(PWA场景)
  • 浏览器缓存：浏览器会检查自己是否在最近访问过该域名，如果有缓存且未过期直接使用
  • 操作系统缓存：如果浏览器没有，浏览器会向操作系统(如Windows的hosts文件或系统DNS缓存)发起请求，检查本地是否有记录
  • 路由缓存：如果操作系统没有，请求会发送到你本地路由器，路由器也有自己的DNS缓存
  • ISP(互联网服务提供商)DNS缓存：如果路由器也没有，请求会发送到你的网络服务器提供商的DNS服务器，这是绝大多数人能达到的最远的缓存层级，如果这里有，直接返回
  • DNS解析：如果ISP的DNS服务器也没有，进行递归查询
    • 访问根域名服务器：询问www.baidu.com的IP
    • 根服务器会指向顶级域名服务器 --> .com服务器
    • 顶级域名服务器会指向权威域名服务器-->baidu.com的权威服务器
    • 权威服务器最终返回www.baidu.com的真实IP地址

阶段三：建立TCP连接

  • 拿到IP地址后，浏览器就可以与木匾服务器建立连接了，HTTP协议通常是基于TCP的

  • TCP三次握手(建立连接)

    • SYN: 你的电脑向服务器发送一个同步数据包(SYN)，说我想和你建立连接
    • SYN-ACK：服务器回复一个确认包(SYN-ACK)，说好的，我收到了你的请求
    • ACK：你的电脑在回复一个确认包ACK，说好的连接已建立
    • 至此，连接通道打通

  • TLS/SSL握手(仅限HTTPS)

    • 如果是HTTPS，在TCP连接建立后，还需要进行TLS握手来加密通信
    • 双方协商加密算法
    • 服务器发送SSL证书(包含公钥)
    • 客户端验证证书是否有效、是否被吊销、是否过期

阶段四：发送HTTP请求并处理

  • 连接建立后，浏览器开始发送HTTP请求
  • 发送请求行和请求头
    • 请求包含方法(GET/POST)、路径(/)、协议版本(HTTP/2)、以及各种头部信息(User-Agent用户代理、Accept可接收的内容类型、Cookie、Connection等)
  • 服务器处理请求
    • 服务器接收到请求后，会进行路由匹配，交给后端程序处理，或直接读取静态文件
  • 服务器返回HTTP响应，将处理结果打包成HTTP响应包，包含
    • 状态码：200(成功)、301/302(重定向)、404(未找到)、500(服务器错误)等
    • 响应头：Content-Type(内容类型，如text/html)、Cache-control(缓存控制)、Set-Cookie(设置Cookie)等
    • 响应体：HTML代码、图片数据、JSON数据等

阶段五：浏览器渲染页面

  • 浏览器接收到服务器的响应后，开始进行渲染工作，这个过程通常称为关键渲染路径

  • HTML解析与DOM树解析

    • 浏览器解析HTML代码，将其转换成浏览器能理解的树状结构，叫做DOM树

  • CSS解析与CSSOM树构建

    • 在解析HTML的过程中，如果遇到<link>或<style>标签，浏览器会加载并解析CSS，生成CSSDOM树(CSS对象模型)

  • JavaScript执行

    • 如果在解析HTML时遇到
    • 默认情况：会暂停DOM的解析(阻塞)，立即下载并执行JS脚本，因为JS可能会修改DOM
    • 优化情况：如果脚本带有async或defer属性，浏览器会异步加载，以减少阻塞

  • 构建渲染树(Render Tree)

    • 浏览器将DOM树和CSSDOM树结合，生成渲染树，渲染树只包含需要显示在屏幕上的节点(排除display:none的节点和等不可见元素)

  • 布局(Layout/Reflow)

    • 浏览器计算渲染树中所有元素在视口(viewport)内的几何位置：宽、高、相对坐标，这一步也称为重排

  • 绘制(Painting)

    • 将布局计算后的像素填充到屏幕上，比如绘制文本、颜色、图像、边框、阴影等

  • 合成(Composite)

    • 如果页面有分层(如使用了transform:translateZ触发GPU加速)，浏览器会将不同的图层绘制后合成到一起显示

阶段六：连接结束

  • TCP四次挥手
    • 当数据传输完毕，如果Connection头部不是keep-alive，浏览器或服务器会发起断开连接的操作
    • FIN：一方(比如浏览器发送结束信号)
    • ACK：另一方(服务器)确认，并发送确认包
    • FIN：服务器也发送结束信号
    • ACK：浏览器确认关闭
    • 在现代HTTP/1.1或HTTP/2中，通常会保持长连接，复用同一个TCP连接来加载后续资源，知道页面关闭或超时
  • 继续加载

    • 浏览器看到HTML后，会发现里面还有图片、CSS、JS等资源，然后重复第二阶段(DNS) --> 第三阶段(连接) --> 第四阶段(请求) --> 第五阶段(处理)的循环，直到页面全部加载完毕

avatar
文章
阅读
粉丝