从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系
在浏览器中输入url到页面显示出来的过程发生了什么
- 输入关键词
- 浏览器联想
- 键入Enter
- 分析url
- url组成
- 协议
- 主机
- 虚拟目录
- url参数
- url组成
- 提取url中的域名
- 检查浏览器缓存
- Service Worker
- 运行在浏览器背后的独立线程
- 可用作缓存
- Memory Cache
- 内存缓存
- 页面关闭释放
- 一般用作
JS
、CSS
文件
- Disk Cache
- 磁盘缓存
- 长期有效
- 一般用作
图片
资源缓存
- Push Cache
HTTP/2
新功能- 在一次资源请求中, 服务器可以主动推送客户端可能需要的资源
- 可与
H5
的SSE
(监听服务端发送事件)配合使用
- New Request
- Service Worker
- DNS解析
- 提取url中的域名信息
- 检查浏览器缓存
- 检查操作系统缓存的
Hosts
文件 - 检查路由器缓存
- 检查运营商提供的本地DNS服务器(
localDNS
)缓存, 不具有权威性 - 检查是否在
本地区域配置文件
中, 返回解析结果, 具有权威性 - 本地DNS服务器
- 转发模式
- 依次寻找上一级DNS服务器解析
- 非转发模式
- 本地DNS发送请求到根DNS
- 根DNS返回
顶级域名服务器
(.com、.top、…)地址 - 本地DNS联系该
顶级域名服务器
来具体子级域名(xx.com、xxx.xx.com)
- 转发模式
- 本地DNS服务器接收到IP地址
- 写入缓存
- 返回给客户端
- CDN
- 提取url中的域名
- 本地DNS服务器解析
- 将域名解析权交给CNAME指向的CDN的DNS负载均衡系统
- DNS负载均衡返回离用户最近的IP地址给本地DNS服务器
- 本地DNS返回IP地址给用户
- TLS/SSL四次握手
- Client Hello(随机数X, 支持的加密方法)
- Server Hello(rsa公钥, 随机选取客户端支持的加密方法, 随机数Y, 证书)
- Client生成随机数secret, 发送使用公钥加密后的secret
- Server通过私钥解密secret, 利用X、Y、secret生成
session-key
(唯一的对话密钥)
- TCP三次握手
- 客户端发送SYN(seq = x)到服务器, 进入
SYN-SEND
状态 - 服务端发送SYN + (ACK = x + 1) + (seq = y)到服务器, 进入
SYN-RECEIVED
状态 - 客户端发送ACK = y + 1, 确认接受连接, 双方进入
ESTABLISHED
状态 - 超时重传机制
- 停止等待ARQ
- 正常传输
- 一方发送数据报文, 在规定的时间内对方接收到应答, 就取消定时器
- 报文丢失
- 发送备份的数据
- ACK超时
- 重传报文
- 正常传输
- 连续ARQ
- 滑动窗口机制
- 控制流量
- 滑动窗口机制
- 停止等待ARQ
- 客户端发送SYN(seq = x)到服务器, 进入
- IP、ICMP
- IP
- 寻址
- 路由功能
- 分段
- 数据包的分片和重组, 以适应数据链路层的传输限制
- 寻址
- ICMP
ping
命令- 报告无法传送的数据包的错误
- IP
- ARP
- 地址解析协议
- IP地址 -> MAC地址(路由器、网卡的‘身份证号’)
- 以太网
- 信道传输
- 回溯⬆
- 服务端返回各种资源
- 浏览器渲染机制
- 解析构建DOM树
- 浏览器根据html文件的编码方式, 将字节转化为对应字符
- 将字符串转化为符合
H5
标准的令牌(尖括号字符串) - 转化为对应的DOM节点, 并完善其属性
- 根据节点的对应关系构建DOM树
- 解析构建CSSOM树
- 浏览器根据css文件的编码方式, 将字节转化为对应字符
- 将字符串转化为符合
H5
标准的令牌(尖括号字符串) - 将令牌转化为相应的CSS Rules样式对象
- 根据CSS样式的层级关系, 构建CSSOM树
- 构建Render Tree
- 从DOM树的根节点开始遍历
- 只添加可见节点
- 计算节点(flow)
- 绘制(paint)
- 解析构建DOM树
- TCP四次分手
- 客户端发送FIN + (seq = x)至服务器, 进入
FIN-WAIT-1
状态 - 服务端发送(ACK = x + 1) + (seq = y)到客户端, 进入
CLOSE-WAIT
状态, 此时仍然可以发送数据到client - 等待资源发送完成, 再次发送FIN + (seq = z)到客户端, 进入
LAST-ACK
状态, 此时客户端进入FIN-WAIT-2
状态. - 客户端发送(ACK = z + 1)确认应答, 通过
延时确认
机制, 等待2MSL
, 确保服务端接收到消息.
- 客户端发送FIN + (seq = x)至服务器, 进入