#发生的事情
从输入url到页面显示大致有这样9个步骤。
- 浏览器对输入的地址进行
URL解析
- 触发缓存,如
浏览器缓存
DNS解析
把主机域名转换为ip地址
- 根据
ip地址
找到对应的服务器,发起tcp连接
- 建立
tcp连接
后,发起http请求
- 服务器
响应http请求
,客户端获得html文件 - 浏览器
解析html代码
,请求html中的外部资源
(js、img、css等) - 浏览器解析渲染视图页面
- 服务器断开
tcp连接
#URL解析
如果输入的是url而非ip地址,那么浏览器会对url进行编码,使用encodeURL函数
编码有两个函数:
encodeURIComponent()
和 encodeURI()
encodeURIComponent()
- 会对特殊字符进行编码,包括
:
、/
、?
、&
、=
和空格等。 - 一般用于对
查询字符串
中的参数进行编码。
encodeURI()
- 用于对整个 URI 进行编码,但不会对某些特殊字符进行编码,如
:/?#[]@
等。 - 通常用于对
整个 URI
进行编码,但不希望影响 URI 结构的部分。
#DNS解析
- 计算机之间的通信是通过唯一的网络地址标识(即ip地址)
- ip难以记忆,面向网络。域名方便记忆,面向用户
- 一个ip可以对应多个域名,而一个域名只能对应一个ip
- 域名解析是通过专用的服务器进行的,被称为DNS服务器
即DNS解析有本地、本地DNS服务器、根DNS服务器、顶级DNS服务器、NameServer服务器五个节点,依次请求DNS解析,最后返回DNS解析结果。
- 本地电脑检查浏览器缓存
- 本地电脑检查host配置文件
- 本地发起DNS解析请求
- 向根DNS服务器发起解析请求
- 根DNS服务器返回顶级DNS服务器地址
- 本地DNS服务器向顶级DNS服务器发起解析请求
- 顶级DNS服务器返回NameServer服务器地址(阿里云)
- 本地DNS服务器向NameServer服务器发起解析请求
- NameServer服务器返回正确的DNS解析结果
- 本地DNS服务器给本地返回正确的DNS解析结果
#DNS解析优化
DNS解析延迟较高,DNS解析优化多用于优化CDN资源
在页面头部添加
<link rel="dns-prefetch" href="域名">
可以告知浏览器预取指定域名的 DNS,加速后续资源的加载。#TCP连接
#建立TCP连接
通过
三次握手
,客户端与服务器用SYN报文段交换彼此的初始序列号,维持连接状态seq
:序列号ack
:确认号- 第一次握手:客户端发送一个带有随机序列号的SYN包
- 第二次握手:服务器收到客户端的SYN包后,服务器发送一个带有随机序列号和确认号(确认好是之前客户端发送的序列号+1)的SYN包,表示服务器已收到请求,并已准备好发送数据
- 第三次握手:客户端收到服务器的SYN-ACK包后,发送一个带有确认号(确认好是之前服务器发送的序列号+1)的SYN包,表示客户端已收到服务器的确认,双方已准备好通信。
#断开TCP连接
通过四次挥手,确保数据传输的完整性,当被动方的数据全部传输给主动方后进行连接的关闭。
seq
:序列号- 在四次挥手中,每个数据包的序列号表示发送方下一个准备发送的数据包的序列号。
ack
:确认号:- 在四次挥手中,确认号表示接收方期望接收的下一个数据包的序列号。
四次挥手的过程如下:
- 第一次挥手:当一端(通常是客户端)决定关闭连接时,发送一个带有 FIN(Finish)标志位的数据包,表示数据发送完成。
- 第二次挥手:另一端(通常是服务器端)收到 FIN 包后,会发送一个 ACK 包作为确认,同时表明自己也准备关闭发送数据。
- 第三次挥手:服务器端发送一个带有 FIN 标志位的数据包,表示服务器已经完成数据发送。
- 第四次挥手:客户端收到服务器端的 FIN 包后,发送一个 ACK 包作为确认,表示接收到了服务器端的关闭请求。
#浏览器解析渲染页面
解析渲染流程
1、根据
HTML
解析出 DOM
树2、根据
CSS
解析出 CSS
规则树3、结合
DOM
树和 CSS
规则树,生成渲染树
4、根据渲染树计算
DOM
节点的信息(节点的大小、位置)5、根据计算好的信息绘制页面(CSS的颜色、背景、字体等)