从输入URL到页面打开

蓝蓝蓝凤梨
1,418 阅读5分钟

1.输入URL并敲下回车键
2.浏览器查找当前URL是否存在缓存，并比较是否过期。
3.DNS解析域名

  • 浏览器缓存解析
  • 本地hosts文件解析
  • 操作系统解析
  • 路由器解析
  • 根域名服务器解析、顶级域名服务器解析、主域名服务器解析（IPV4\IPV6）

IPV4: 十进制，0.0.0.0 , 13台顶级域名服务器
IPV6: 十六进制，X:X:X:X:X:X:X:X, 25台顶级域名服务器

4.TCP链接建立（3次握手）

  • 客户端发送SYN包（SYN = 1, seq = x）至服务端，并处于SYN_SENT状态，等待服务器确认
  • 服务端解析SYN，并发送SYN + ACK（SYN = 1, ACK = x + 1, seq = y） 包至客户端，并处于SYN_RECV状态，允许建立链接（告知服务器已做好准备，可以发送数据）
  • 客户端获取SYN + ACK 并发送ACK（ACK = y + 1， seq = z）包至服务端，链接建立成功。（即将开始发送数据）

5.客户端发起HTTP请求

  • 完整的HTTP请求包含请求起始行，请求头部，请求主体
  • 服务端收到浏览器的HTTP请求后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的WEB服务器进行处理，处理完的结果以Response对象返回，主要包括状态码，响应头，响应报文三个部分
  • 综合起来，完整的HTTP报文包括了：通用头部，请求/响应 头部，请求/响应体
//General
Request Url: 服务器地址
Request Method: 请求方式（get, post, options, put, head, delete, connect, trace）
Status Code: 请求返回的状态码
Remote Address: 请求的远程服务器地址（IP）
Referrer Policy: （引用策略）用来监管哪些访问来源信息【not IE】

// Request Head
Accept: 接受类型，浏览器支持的MIME类型（对标服务端放回的Content-Type）
Accept-Encoding: 浏览器支持的压缩类型，如gzip等，超出类型不能接受
Content-Type: 客户端发送出去的实体内容的类型
Cache-Control: 指定请求和响应遵循的缓存机制，如no-cache,no-store
If-Modified-Since: 对应服务端你的Last-Modified, 用来匹配文件是否变动，只能精确到1s之内，http1.0中
Expires: 缓存到期时间，（服务端时间）http1.0中
Max-age: 代表资源在本地缓存多少秒， http 1.1中
If-None-Match: 对应的服务端的ETag，用来匹配文件内容是否改变（非常精确），http1.1中
Cookie: 有cookie并且同域访问会自动带上
Connection: 当浏览器与服务器通信时对于长链接如何进行处理，如keep-alive;
Host: 请求的服务器URL
Origin: 最初的请求是从哪里发起的（只会精确到端口）,origin比Referrer更尊重隐私
Referrer: 该页面的来源URL（适用于所有类型的请求，会精确到详细页面地址，CSRF拦截常用到这个字段）
User-Agent: 用户客户端的一些必要信息，如UA头部等;


// Response Head
Access-Control-Allow-Headers: 服务端允许的请求的headers
Access-Control-Allow-Methods: 服务端允许的请求方法
Access-Control-Allow-Origin: 服务端允许的Origin头部
Content-Type: 服务端返回的实体内容的类型
Date: 数据从服务端发送的时间
Cache-Control: 告诉浏览器或其他客户，什么环境可以安全的缓存文档
Last-Modified: 请求的资源最后修改时间
Expires: 文档什么时候过期，从而不再缓存
Max-age: 客户端的本地资源应该缓存多少秒，开启Cache-Control后有效
ETag: 请求变量的实体标签的当前值
Set-Cookie: 设置和页面关联的cookie,服务器通过这个头部把cookie传给客户端
keep-alive: 如果客户端有keep-alive, 服务端也会有相应（如timeout = 38）
Server: 服务器的一些相关信息

6.浏览器解析渲染页面

  • 解析HTML，构建DOM树（深度优先：即先构建当前节点的所有的子节点，再构建兄弟节点）；

若在此过程遇到script标签，则会暂停DOM树的构建。

  • 解析CSS，生成CSS规则树；

解析CSS规则的过程时JS将暂停执行，直到CSS规则树构建完成。

  • 合并DOM树和CSS规则，生成render树；

精简CSS可加快CSS树的构建，从而加快页面响应速度。

  • 布局render树（layout/reflow【回流\重排】），负责各元素尺寸、位置计算；

回流：由于DOM属性的改变（节点尺寸发生了变化，浏览器中受影响的部分失效），导致重新构建render树的过程；（回流必定导致重绘。） 重绘：一个元素的外观发生改变，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观（background, color, border-color ...）

  • 绘制render树（paint），绘制页面像素信息；
  • 浏览器将各层的信息发送给GPU，GPU将各层合成，显示在屏幕上；

7.TCP链接释放（4次挥手）

  • TCP向服务端发送带有FIN（FINISH）标记报文，客户端进入FIN_WAIT_1状态（通知服务器端准备关闭）
  • 服务端接受通知，向客户端发送ACK报文，确认序号为收到的序号加1，和SYN一样，一个FIN报文将占用一个序号。（告诉浏览器，请求报文接受完毕。我准备关闭了，你也准备吧）服务器进入CLOSE_WAIT状态。
  • 服务器端发送FIN，用来关闭服务器到客户端的数据传输，服务器进入LAST_ACK状态。（告诉浏览器，响应报文发送完毕。你准备关闭吧。）
  • 客户端接受FIN报文，服务器进入TIME_WAIT状态，发送ACK包给服务器（ACK = b + 1, seq = a + 1）,服务器进入CLOSED状态。（告诉服务器响应报文接受完毕，准备关闭。）
avatar
文章
阅读
粉丝