前端
面试题
前端
面试题

在地址栏输入URL后按下回车，会发生那些事情？

在浏览器中输入URL到页面加载完成的过程中，涉及到了一系列复杂的HTTP技术及流程，主要包括以下步骤：

1.1 URL检测

  • 作用：检查和纠错
  • 当在浏览器中输入一个URL比如baidu.com时，浏览器首先解析用户输入的URL，补全协议、主机名、路径、端口
  • 地址栏中写入一些中文会进行转义ascii码

1.2 DNS解析

  • 作用：查找域名对应的服务器ip地址

缓存查找过程：

  • 浏览器缓存：⾸先，浏览器会检查它的缓存中是否有这个域名的记录，因为之前访问过的⽹址的解析结果可能会被存储在浏览器缓存中
  • 操作系统缓存：如果浏览器缓存中没有找到，浏览器会询问操作系统，因为操作系统也可能有⾃⼰的DNS缓存
  • 路由器缓存：如果操作系统中也没有找到，请求会发送到本地⽹络的路由器，它同样可能有⾃⼰的DNS缓存
  • ISP(Internet service provider)缓存：如果以上都没有缓存记录，请求最终会发送到你的互联⽹服务提供商（ISP），它们通常会有更⼤范围的DNS缓存

DNS递归解析：

如果所有本地缓存查找都失败，DNS查询就变成了⼀个递归查询过程，涉及到多个DNS服务器：

  • 根域名服务器：⾸先，你的DNS查询会被发送到根域名服务器。根服务器是最⾼级别的DNS服务器，负责重定向到负责管理顶级域名（如.com、.net等）的顶级域名服务器
  • 顶级域名服务器（TLD服务器）：根服务器会告诉你的ISP的DNS服务器去查询哪个顶级域名服务器来找到.com 域的信息。这个服务器掌握所有.com 域名及其相应服务器的信息
  • 权威域名服务器：⼀旦你的DNS查询到达了正确的顶级域名服务器，它会进⼀步定向到负责example.com的权威服务器。权威服务器有该域名对应的具体IP地址

IP地址的获取：

  • 最终，权威域名服务器会提供 www.example.com 域名对应的IP地址（如图中的93.184.216.34），这个信息会被发送回⽤户的电脑

缓存结果：⼀旦IP地址被找到，它通常会被存储在浏览器、操作系统、路由器或ISP的DNS缓存中，以便未来的查询可以更快得到解析

1.3 建立TCP连接

  • 虽然我们是发送的HTTP请求，但是HTTP协议是应⽤层协议，它是建⽴在TCP传输层协议之上的，所以我们需要先进⾏TCP连接。

  • TCP的连接会经常三次握⼿，客户端发送SYN包，服务器接收到后返回⼀个SYN-ACK包，客户端再次发送⼀个ACK包，完成握⼿过程。

  • 此时TCP连接建⽴完成，双⽅就可以开始传输数据了。

1.4 准备请求

  • 浏览器需要准备请求头并向请求头里面添加数据：
    • Cookie
    • user-Agent
    • host

1.5 发送HTTP请求

  • 发送的是一个get请求，请求到达服务器

1.6 服务器处理请求

  • 路由解析：服务器根据URL路径解析请求，决定由哪个后端服务或脚本来处理。
  • 处理：服务器处理请求，
    • 可能涉及数据库查询(mysql/redis)
    • 也可能是一个BFF层、也可能是后端服务器，也可能是一个微服务架构，也可能是一个反向代理
    • 也可能是文件读取、业务逻辑处理等操作。
  • 响应：服务器处理完成后，构造HTTP响应报文，包括状态码（如200表示成功）、响应头（如Content-Type、Set-Cookie等）和响应体（如HTML页面、图片数据、JSON数据等）。

1.7 接收响应

  • 浏览器接收服务器返回的HTTP响应，分为两步先解析响应头后解析响应体
    • 首先处理响应头：对Cookie进行处理，对content-type(服务器发送过来的是什么东西，图片、网页、css等等)进行处理，对缓存进行一些处理，对状态码(302进行重定向，500错误处理)进行处理
    • 处理响应体：收到多少内容处理多少内容(比如大的图片就是先显示上面的，后显示下面的图片)，比如处理html：：
      • 就是渲染页面

1.8 渲染页面

  1. 第一步解析html
    1. 解析过程中遇到css就解析css，遇到js就解析js
    2. 解析完之后就会得到DOM树和CSSOM树，浏览器的默认样式、内部样式、外部样式、行内样式均包含在CSSOM树中
  2. 第二步样式计算
    1. 为树中的每个节点计算出来最终的样式，比如说样式的优先级，比如说red转换为rgb(255,0,0),比如说相对单位em会变为px
    2. 这一步之后就会得到一颗带有样式的DOM树
  3. 第三步布局
    1. 布局阶段会依次遍历DOM额每个节点，计算每个节点的几何信息，例如宽高相对位置等等
  4. 第四步分层
    1. 主线程会使用一套复杂的策略来对整个布局树进行分层
    2. 分层的好处在于，将来改变的时候只是对这一层进行修改
  5. 第五步绘制
    1. 为每个层进行绘制，完成绘制后，将每个图层的绘制信息交给合成线程，剩下的工作由合成线程完成
    2. 合成线程会将每个图层划分为更新的区域，然后从线程池中拿取多个线程来完成分块工作
  6. 第六步光栅化
    1. 合成线程将块信息交给GPU来处理，以极高的速度完成光栅化
    2. GPU会开启多个线程来完成光栅化，并且优先处理靠近视口的块
    3. 光栅化的结果，就是一块一块的位图
  7. 第七步画

    1. 合成线程拿到了每个层每个块的位图，生成一个个指引的信息

    2. 指引信息会标识出每个位图所在屏幕的位置，是否旋转、缩放等等

    3. 然后交给GPU处理，完成最终的屏幕成像

1.9 连接管理

数据已经传输完毕后，根据实际的情况(connection:keep-alive)是否断开连接：四次挥手

1.9 页面交互

  • 页面加载完成后，用户可以与页面交互，触发更多HTTP请求，如Ajax请求，此过程可能重复上述部分步骤。

以上流程概括了从输入URL到页面完全加载完成涉及的主要HTTP技术和流程，展示了浏览器与服务器间复杂的交互和数据交换过程。