浏览器输入url到显示页面的过程

2021-9-01 22:37:037

#前端

前言

像我们前端最常接触的就是网页开发了吧，因此了解浏览器从输入url到显示页面的这一过程也还是挺重要的。

正文

浏览器地址栏输入url
浏览首先查看缓存，如果请求资源存在缓存且没有过期则跳过
- 如果资源没有缓存，则发起新请求
- 如果已缓存，却过期了，便与服务端进行验证
- 如何检验过期？
  - HTTP协议有Expires和Cache-Control两个头用于检验
    - HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
    - HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器对url将进行解析，获取协议，主机，端口，路径
浏览器组装一个HTTP（GET）请求报文
浏览器获取主机ip
- 浏览器缓存查找
- 本机缓存查找
- hosts文件查找
- 路由器缓存
- IPS DNS缓存
- DNS服务器请求查询，DNS递归查询
打开一个与目标IP地址的socket，端口建立TCP链接，进行三次握手
- 客户端发送一个TCP的SYN=1（同步序列包），Seq=X的包到服务器
- 服务器发回SYN=1， ACK=X+1（确认包）， Seq=Y的响应包
- 客户端发送ACK=Y+1， Seq=Z
TCP链接后开始发起HTTP请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
服务器检查HTTP请求头是否包含缓存验证信息，若缓存新鲜，返回304等状态码
后端读取请求，进行相应程序处理数据，准备HTTP请求
服务器将响应报文通过TCP返回浏览器
浏览器接收HTTP请求，根据情况关闭TCP连接或保留
- 四次挥手
  - 客户端发送Fin=1,Ack=Z,Seq=X
  - 服务器发送ACK=X+1,Seq=Z
  - 服务器发送Fin=1,ACK=X,Seq=Y
  - 客户端发送ACK=Y，Seq=X
浏览器检查响应码并作出对应反应
尝试缓存
若服务端使用了gzip等压缩，浏览器进行解码
对HTML文档进行解析
构建DOM树
- Tokenizing：将HTML文档解析为词元（token）
- Lexing：进行词法分析，将词元转换为对象并定义相关属性和规则。
- DOM construction：讲上步的对象构建为DOM树
- 在此过程中遇到图片，样式文件，js文件，自动下载
构建CSSOM树
- Tokenizing：解析为词元（token）
- Node：根据词元创建节点
- CSSOM：由节点构建CSSOM树
根据DOM树和CSSOM树构建渲染树
- 从DOM树的根节点遍历所有可见节点（script,meta等标签或display:none的节点为不可见节点）
- 对每个可见节点应用对应的CSSOM规则
- 发布可视节点的内容和计算样式
对JS的解析
- 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
- 解析HTML时遇到没有async和defer的script文件，会将它们添加到文档中并执行脚本，此过程会阻塞DOM渲染，暂停解析器。这样方便使用document.write()把文本插入到输入流中。
- async（异步）
  - 会开始下载script文件，解析器继续解析不会暂停等待下载完毕，下载完毕便执行script文件。因此异步脚本禁止使用document.write()方法，只可以访问自己和之前的文档元素。
- defer
  - 与async（异步）类似，不同的是如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script，而不是像async一样加载完就执行。
- 文档解析完毕，document.readState变成interactive
- 在Document对象上触发DOMContentLoaded事件
- 完全解析完毕，并且等待图片等静态资源以及异步脚本完成载入和执行，document.readState变为complete
- window触发load事件
整个解析过程中逐步显示页面

Github登录