粥里有勺糖

Appearance

在浏览器中输入URL到页面渲染的整个过程 ​

构建请求行 ​

sh
GET   /     HTTP/1.1
方法  请求路径 请求的协议/版本

查找强缓存 ​

检查资源是否存在强缓存,存在的话直接进行资源解析

读取DNS缓存 ​

  1. 浏览器先检查自身缓存中有没有被解析过的这个域名对应的ip地址，如果有，解析结束
  2. 检查操作系统缓存中有没有对应的已解析过的结果(win中的hosts文件)
  3. 都没有则进行下一步

DNS解析 ​

  1. 请求本地域名服务器（LDNS）来解析这个域名,没有则进行下一步
  2. DNS 根服务器查询

建立TCP连接 ​

可以在此简述建立TCP链接的3次握手的过程

  1. 客户端向服务端发送请求报文
  2. 服务端收到请求报文,同意连接则向客户端发送一个应答
  3. 客户端收到服务端的应答,并告知服务端我准备好了

TCP 的一些特性

  • 建立连接需要进行三次握手
  • 断开连接都需要四次握手
  • 在传输数据的过程中，通过各种算法保证数据的可靠性
  • 相比 UDP 来说不那么的高效。

判断是否是Https请求 ​

是:进行TLS握手

  1. 客户端发送一个随机值以及支持的协议和加密方式
  2. 服务端收到客户端的随机值，自己也产生一个随机值，确定使用的协议与加密方式，并且发送自己的证书（如果需要验证客户端证书需要说明）
  3. 客户端收到服务端的证书并验证是否有效，验证通过会再生成一个随机值，通过服务端发送的证书中的公钥去加密这个随机值并发送给服务端
  4. 服务端收到加密过的随机值并使用私钥解密获得第三个随机值，这时候两端都拥有了三个随机值，结合之前的两个明文随机数，计算生成本次会话所用的"会话密钥"，接下来的通信就可以通过该密钥来加密解密

基本过程

  1. 客户端向服务器端索要并验证公钥
  2. 双方协商生成”对话密钥”
  3. 双方采用”对话密钥”进行加密通信

详细握手过程

  1. 客户端发出请求:
    • 一个随机值(用于生成对话秘钥)
    • 支持的协议
    • 支持加密方式
    • 支持压缩的方法
  2. 服务端收到客户端的请求，向客户端发出回应:
    • 一个随机值(用于生成对话秘钥)
    • 确定使用的协议
    • 确定使用的加密方式
    • 发送自己的证书（如果需要验证客户端证书需要说明）
  3. 客户端收到服务端的证书并验证是否有效，如果证书没问题,向服务端发送一个请求:
    • 生成一个随机值(用证书公钥加密)
    • 编码改变通知(随后的信息将使用双方商定的加密方法和秘钥发送)
    • 客户端握手结束通知(前面发送的所有内容的hash值，用来提供给服务器校验)
  4. 服务端最后响应
    • 服务器收到客户端的第三个随机数之后(用私钥解密)结合之前的两个明文随机数，计算生成本次会话所用的"会话密钥"
    • 编码改变通知(随后的信息都将用双方商定的加密方法和密钥发送)
    • 服务器握手结束通知(前面发送的所有内容的hash值，用来提供给客户端校验)

在 TLS 握手阶段，两端使用非对称加密的方式来通信，但是因为非对称加密损耗的性能比对称加密大，所以在正式传输数据时，两端使用对称加密的方式通信

否:发起Http请求

发送HTTP请求 ​

向服务端正式发送http请求

返回HTTP报文 ​

服务器处理请求响应结果,并返回Http报文

判断状态码是什么?

200:继续解析，如果 4xx 或 5xx 的话就会报错，如果 3xx 进行重定向

如果是gzip格式的话会先解压一下，然后通过文件的编码格式去解码文件

浏览器解析渲染页面 ​

  1. 针对下载完成后的HTML文件
    • 词法分析:标记化
    • 语法分析:构建DOM树
  2. 解析HTML(超文本标记语言)-->DOM(文档对象模型)树
    • 遇到 script 标签的话，会判断是否存在 async 或者 defer属性
      • async:并行进行下载,下载完成后并执行js
      • defer:先并行下载文件，然后等待 HTML 解析完成后顺序执行。
      • 如果都没有:就会阻塞住渲染流程直到 JS 下载并执行完毕
    • 遇到link下载并解析CSS(层叠样式表)-->CSSOM(CSS对象模型)树
      • link标签引用
      • style标签中的样式
      • 元素的内嵌style属性
  3. DOM树 + CSSOM树 --> Render Tree(渲染树):CSSOM 树和 DOM 树构建完成后开始生成渲染树
  4. 回流(Layout):根据生成的渲染树,回流得到节点的几何信息(位置,尺寸)
    • 计算可见的Dom节点在设备视口的位置和尺寸,这个计算阶段就是回流
    • 为了知道每个可见节点在视口的确切大小和位置,浏览器从渲染树的根节点进行遍历
  5. 重绘(Painting):根据渲染树与回流得到的节点几何信息,得到节点的绝对像素
    • 经过生成的渲染树和回流阶段,得到了所有可见节点具体的几何信息与样式,然后将渲染树的每个节点转换成屏幕上的实际像素,这个阶段就叫重绘节点
  6. 将像素发送给GPU绘制,合成图层,然后展示在页面上

在下载文件时可以使用 HTTP/2 协议(多路复用)可以解决队头阻塞的问题

断开TCP连接 ​

断开进行4次数握手

  1. 客户端对服务端发送释放连接的请求
  2. 服务端收到客户端的请求后,告知应用层释放连接
  3. 服务端将数据发送完毕后,再向客户端发送释放连接请求
  4. 客户端收到释放请求后,并向服务端发送确认释放的应答,同意释放