从输入URL到页面加载的过程_输入url地址到到页面加载的全过程-优快云博客

本文链接：https://blog.youkuaiyun.com/u013450405/article/details/79563810

本文深入解析从浏览器输入URL到后台处理的全过程，涵盖DNS解析、TCP/IP连接建立、HTTP请求与响应、服务器负载均衡及后台处理流程等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经典面试题之一，这次得搞得明明白白的，顺便把计网也复习复习。
首先感谢知乎的up主：撒网要见鱼，这是他的原文，本篇文章也是基于他的文章总结启发而来，主要就是记录记录笔记。

面试前复习

浏览器输入url，查看缓存，解析域名，涉及dns相关知识
- dns 使用udp，占53号端口
- dns服务器分为四种本地域名服务器、权威域名服务器、顶级域名服务器、根域名服务器
- dns查询分为两种方式，递归查询，迭代查询
查询到ip地址，进行tcp链接
- tcp面向连接，可靠传输，保证数据包无错、不重复、不缺失、按序到达
- 一对一传输、全双工、面向字节流、有发送和接收缓存
- 三次握手、四次挥手
- 拥塞控制：慢启动、拥塞避免、快重传、快恢复
生成HTTP数据包
- http是应用层面向事务的协议，能够传输文本、声音、图像等各种多媒体文件
- http的持久连接分为非流水线和流水线方式，http/1.1默认使用流水线的持久连接
- http请求报文：有方法、url、版本、首部字段名和值、实体主体
- http响应报文：有版本、状态码、短语、首部字段名和值、实体主体
封装TCP报文
封装成ip数据包
- 报头（ipv4 20字节，ipv6 40字节），报头里存储了源ip和目的ip，tcp\udp报头里存储了源和目标端口
- 数据可能过长会被分片，因此有标识字段，相同标识号的分组为同一数据的不同部分。mf（more fragment） = 1表示后面还有分片，mf = 0表示为最后一个分片。df（dont fragment） = 0时才可以分片。片偏移字段用于表示当前数据在原始数据的起始位置
- 报头的总长度字段包括报头和数据
- ipv4 报文首部长度单位4B，总长度单位为1B（一共16位，最大65535B），片偏移单位为8B
进行分组转发
- 路由器检查路由表
  - 先提取出目的ip，记为D
  - 判断是否能够直接交付，将路由器各个直接相连的网络逐个检查，将各个网络的子网掩码与D进行与操作，查看网络号是否匹配。如果匹配则直接交付，否则间接交付，不匹配则执行下一条
  - 检查路由表里是否有目的地址为D的特定主机路由，如果有则转发给路由表的下一条路由器，如果没有则执行下一条
  - 将路由表的每一行（目的网络地址，子网掩码，下一条地址）的子网掩码和D相与，如果结果和目的网络地址相匹配，则发往对应的下一条路由器，如果都不匹配否则进行下一条
  - 如果路由器有默认路由，则将分组转发个路由表中指明的默认路由器，如果没有则报告转发分组出错
- 内部网关协议IGP（一般有RIP[routing information protocol]路由信息协议、OSPF[Open Shortest Path First]开放最短路径优先）、外部网关协议EGP（BGP[border gateway protocol]边界网关协议）
  - RIP协议
    - RIP协议路由器每次和直接相邻路由器交换自己所有的路由表，其中用跳数表示经过的路由器个数，最大个数为15个，当为16时表示不可达。限定了网络规模，最大距离为15
    - 正常情况下每隔30秒更新一次
    - RIP协议最终是收敛的，因为每隔一次交换就能够知道距离自己条数加一的路由信息
    - 当180秒还没有收到相邻路由器的更新路由表时，将该相邻路由器设为不可达，即把距离设为16
    - 特点是收敛快，坏消息传的慢（180秒才超时），应用层协议，使用UDP传送数据，默认520端口，选择的路径不一定是时间最短的，但是是具有最少路由器的路径
    - 使用的是距离向量协议
  - OSPF协议
    - OSPF向本自治系统中所有的路由器发送消息，使用洪泛法
    - 发送的消息是与本路由器相邻的所有路由器的链路状态
    - 只有链路状态发生变化时才使用洪泛法向所有路由器发送此消息，并且更新过程收敛快，不会出现RIP协议“坏消息传的慢”的问题
    - OSPF是网络层协议，使用IP数据报传送，RIP是应用层协议，用UDP传送
    - 使用Dijkstra计算最短路径
    - 使用链路状态协议
  - BGP协议
    - 使用路径向量路由选择协议，属于应用层协议，使用TCP传输
    - 每个自治系统要选择一个路由器作为该自治系统的“BGP发言人”，与其他自治系统的发言人建立TCP连接，交换路由信息
    - BGP发言人除了运行BGP协议外，还要运行IGP协议
    - 交换的信息为和本节点直接相邻的路由器
    - 首次运行时交换整个路由表，非首次是只交换更新的部分
- 分组向目的地址转发，靠ARP协议找到目标路由器或主机MAC地址
  - 数据链路层
    - 停止-等待协议，发送窗口=1，接收窗口=1，效率低
    - 后退N帧协议，发送窗口>1，接收窗口=1
      - 发送方一次可以发送N个帧，接收方一次只能接收一个帧，并且按序接收，返回ACKn，表示n之前的帧都已收到，期望下次收到n+1号帧，因此可以累计收到多个正确帧后再发送最后一个序号的ACK。
      - 若中间某个序号i没有收到ACK，或者超时，发送方需要将i号以及以后的所有的帧再次重发一遍
      - 若采用N个比特对帧编号，则发送方的窗口大小为1<= Wt<=2^n - 1
      - 传输信道质量很差，误码率很高时，该方法不一定优于停止等待协议
    - 选择重传协议，发送窗口>1，接收窗口>1
      - 发送方对接收到的nak帧或超时帧进行重传
      - 接收方窗口Wr，发送方窗口Wt，满足Wtmax + Wrmax <= 2^n，n为帧编号的比特数。
      - 接收方窗口应该小于等于发送方窗口，当接收窗口最大值时Wr = Wr = 2^(n-1)
    - 数据链路层的可靠传输通常使用确认和超时重传两种机制来完成。自动重传请求（auto repeat reQuest ARQ）分为三种，分别为停止等待、后退N帧、选择重传
    - -

大纲

主要有以下几个部分，并不会所有的部分都详细记录，主要记录和网络相关的部分

从浏览器接收url到开启网络请求线程
- 多进程的浏览器
- 多线程的浏览器内核
- 解析URL
- 网络请求都是单独的线程
- 更多
开启网络线程到发出一个完整的http请求
- DNS查询得到IP
- tcp/ip请求
- 五层因特网协议栈
从服务器接收到请求到对应后台接收到请求
负载均衡
- 后台的处理
后台和前台的http交互
- http报文结构
- cookie以及优化
- gzip压缩
- 长连接与短连接
- http 2.0
- https
单独拎出来的缓存问题，http的缓存
- 强缓存与弱缓存
- 缓存头部简述
- 头部的区别
解析页面流程
- 流程简述
- HTML解析，构建DOM
- 生成CSS规则
- 构建渲染树
- 渲染
- 简单层与复合层
- Chrome中的调试
- 资源外链的下载
- loaded和domcontentloaded
CSS的可视化格式模型
- 包含块（Containing Block）
- 控制框（Controlling Box）
- BFC（Block Formatting Context）
- IFC（Inline Formatting Context）
- 其它
JS引擎解析过程
- JS的解释阶段
- JS的预处理阶段
- JS的执行阶段
- 回收机制

或者简单点，这么看：
1. 从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）
2. 开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）
3. 从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
4. 后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）
5. 单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）
6. 浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）
7. CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）
8. JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
9. 其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容

从浏览器接受url到开启网络请求线程

这里会设计到浏览器开启线程处理请求，这点不说，先来看url解析

解析URL

输入URL后，会进行解析（URL的本质就是统一资源定位符）

URL一般包括几大部分：

protocol，协议头，譬如有http，ftp等
host，主机域名或IP地址
port，端口号
path，目录路径
query，即查询参数
fragment，即#后的hash值，一般用来定位到某个位置
清晰易懂，需要记住protocol://host:port/path?query#fragment大概就是这样了

开启网络线程到发出一个完整的http请求

到这步，浏览器就要开始发送请求了，但是在发送请求之前，需要进行诸如dns解析，tcp/ip建立链接，五层因特网协议栈之类的操作。
首先，第一步就是进行dns解析。此处依次分为如下几步：

检查浏览器DNS缓存
检查本地DNS缓存
检查HOST文件
向DNS域名服务器查询

DNS查询用的是UDP协议，DNS协议工作在应用层，使用53号端口，UDP协议工作在传输层

TCP/IP请求

http的本质就是tcp/ip请求

首先TCP协议有以下特点：

面向连接，可靠传输（无差错，不丢失，不重复且有序）
每个TCP连接只能有两个端点，即点对点，一对一连接
TCP提供全双工通信，所以TCP连接的两端都有缓存
发送方缓存存储：1.需要发送但还未发送的数据 2.已发送，但还未收到确认的数据
接收方缓存存储：1.按序到达，但未被应用程序读取的数据 2.未按序到达的数据
工作在传输层（传输层的作用是负责应用程序之间的通信，是端到端的通信，这也是为什么TCP报文首部固定字段【20字节】中最先存的就是源端口号和目的端口号）

需要了解3次握手规则建立连接以及断开连接时的四次挥手

tcp将http长报文划分为短报文，通过三次握手与服务端建立连接，进行可靠传输

三次握手的步骤：（抽象派）

客户端：喂，你听得到吗？
服务端：我听得到呀，你听得到我吗？
客户端：我能听到你，今天balabala……

从这个连接建立的过程，有以下几点知识点：

客户机向服务器发送一个连接请求，这时要将SYN（为1表示该报文为连接请求或者连接接收报文）标识为1，同时随机选择一个起始序列号seq = x
- 不能携带数据，但要消耗一个序号
服务器接收到连接请求后，返回确认报文，设置SYN = 1，ACK = 1，seq = y（随机设置），ack = x + 1（表示x已收到，期待x + 1的到来），表示确认。
- SYN = 1， ACK = 0 表示连接请求报文，SYN = 1，ACK = 1 表示连接接收报文
- SYN = 1时，报文段不能有数据部分，而且要消耗一个序号
- seq为序号字段，表示本报文数据的第一个字节的序号，不过三次握手前两次中，是不允许带数据的
- ack为确认号，表示期望收到对方下一个报文的数据的第一个字节的序号，也就是前面的数据都收到了
- 这步时，服务器已经开始给连接分配缓存和变量了，而客户机是在第三步才分配，所以服务器易收到SYN洪泛攻击
客户机收到服务器的连接接收报文，还要向服务器给出确认，并且也要给连接分配缓存和变量。此时返回ACK = 1，seq = x + 1，ack = y + 1，此时可以携带数据
- 客户机是在第三次握手时才分配连接缓存和变量
- 由于此时不用将SYN设置为1，所以报文可以携带数据
- 如果不携带数据，则不用消耗序号
之后就可以愉快的传输数据了，记得ACK得一直设为1

为何不是二次握手，四次握手？

简单来说不是二次握手是这样：

1：A发，B收， B知道A能发
2：B发，A收， A知道B能发收
3：A发，B收， B知道A能收

而不用四次或更多握手，是因为：
三次是保证双方互相明确对方能收能发的最低值。

理论上讲不论握手多少次都不能确认一条信道是“可靠”的，但通过3次握手可以至少确认它是“可用”的，再往上加握手次数不过是提高“它是可用的”这个结论的可信程度。

然后，待到断开连接时，需要进行四次挥手（因为是全双工的，所以需要四次挥手）

四次挥手的步骤：（抽象派）

主动方：我已经关闭了向你那边的主动通道了，只能被动接收了
被动方：收到通道关闭的信息
被动方：那我也告诉你，我这边向你的主动通道也关闭了
主动方：最后收到数据，之后双方无法通信

详细有以下知识点：

客户端请求关闭连接，发送FIN = 1, seq = u
服务器接收到客户端的关闭请求，返回ACK，返回ACK = 1, seq = v， ack = u + 1
- 此时服务器可以关闭读通道了，因为客户端不会再发送数据了
- 此时服务器还可以继续发送数据
- 服务端接收到ACK后，关闭写通道，它可以不再写数据了
服务器数据发送数据完毕，也要关闭连接了，发送FIN = 1, ACK = 1, seq = w, ack = u + 1
- 客户端收到该消息后，可以关闭读通道了，因为服务器不会再发送数据了
客户端发送最后的ACK，服务端关闭写通道，关闭连接，发送ACK = 1, seq = u + 1, ack = w + 1
- 客户端发送最后的ACK后还要等待2MSL。1.护送最后的ACK，避免服务端没收到，又发来FIN重传。2.假如连接立马释放，而客户端和服务器的ip和端口刚好被别的客户端和服务器占用，则新的客户端和服务器会收到不属于它们的报文。为此等待2MSL，使得链路中的原始报文都消失掉。2MSL的原因是，1MSL等待一方报文消失，1MSL等待报文ACK消失

五层因特网协议栈

七层协议中各层的主要功能和协议

OSI的七层	功能	TCP/IP协议族
应用层	文件传输、电子邮件、文件服务、虚拟终端	TFTP、HTTP、SNMP、FTP、SMTP、DNS、TELNET、DHCP、RIP（路由信息协议）、BGP
表示层	数据格式化、代码转换、数据加密、压缩解压	没有
会话层	解除或建立与别的节点的联系	没有
传输层	提供端对端的接口	TCP、UDP
网络层	为数据包选择路由	IP、ICMP、OSPF、IGMP
数据链路层	传输有地址的帧以及错误检测功能	SLIP、CSLIP、PPP、ARP、RARP、MTU
物理层	以二进制数据形式在物理媒体上传输数据	ISO2110、IEEE802、IEEE802.2

五层协议：

1.应用层(dns,http) DNS解析成IP并发送http请求

2.传输层(tcp,udp) 建立tcp连接（三次握手）

3.网络层(IP,ARP) IP寻址

4.数据链路层(PPP) 封装成帧

5.物理层(利用物理介质传输比特流) 物理传输（然后传输的时候通过双绞线，电磁波等各种介质）