本文作者Dreammin_chen,转载自简书,转载时有改动

在浏览器中输入URL后,浏览器都发生了哪些事情呢?跟我一起来看看吧:

我将该过程分为了以下六步:

1. DNS 域名解析

  • 在浏览器 DNS 缓存中搜索
  • 在操作系统 DNS 缓存中搜索
  • 读取系统 hosts 文件,查找其中是否有对应的 IP
  • 向本地配置的首选 DNS 服务器发起域名解析请求

2. 建立 TCP 连接

为了准确地传输数据,TCP 协议采用了三次握手策略。发送端首先发送一个带 SYN(synchronize)标志的数据包给接收方,接收方收到后,回传一个带有 SYN/ACK (acknowledegment) 标志的数据包以示传达确认信息。最后发送方再回传一个带 ACK 标志的数据包,代表握手结束。在这过程中若出现问题中断,TCP 会再次发送相同的数据包。
TCP 是一个端到端的可靠的面向连接的协议,所以 HTTP 基于传输层 TCP 协议不用担心数据的传输的各种问题

3. 发起 HTTP 请求

请求方法:

  • GET: 获取资源
  • POST: 传输实体主体
  • HEAD: 获取报文首部
  • PUT: 传输文件
  • DELETE: 删除文件
  • OPTIONS: 询问支持的方法
  • TRACE: 追踪路径

请求报文:

4. 接受响应结果

状态码:

  • 1**: 信息性状态码
  • 2**: 成功状态码
    200:OK 请求正常处理
    204:No Content 请求处理成功,但没有资源可返回
    206:Partial Content 对资源的某一部分的请求
  • 3**: 重定向状态码
    301:Moved Permanently 永久重定向
    302:Found 临时性重定向
    304:Not Modified 缓存中读取
  • 4**: 客户端错误状态码
    400:Bad Request 请求报文中存在语法错误
    401:Unauthorized 需要有通过 Http 认证的认证信息
    403:Forbidden 访问被拒绝
    404:Not Found 无法找到请求资源
  • 5**: 服务器错误状态码
    500:Internal Server Error 服务器端在执行时发生错误
    503:Service Unavailable 服务器处于超负载或者正在进行停机维护

响应报文:

5. 浏览器解析 HTML

浏览器按顺序解析 HTML 文件,构建 DOM 树,在解析到外部的 CSS 和 JS 文件时,向服务器发起请求下载资源,若是下载 CSS 文件,则解析器会在下载的同时继续解析后面的 HTML 来构建 DOM 树,则在下载 JS 文件和执行它时,解析器会停止对 HTML 的解析。这便出现了 JS 阻塞问题

预加载器
当浏览器被脚本文件阻塞时,预加载器(一个轻量级的解析器)会继续解析后面的 HTML,寻找需要下载的资源。如果发现有需要下载的资源,预加载器在开始接收这些资源。预加载器只能检索 HTML 标签中的 URL,无法检测到使用脚本添加的 URL,这些资源要等脚本代码执行时才会获取。
注:预解析并不改变 DOM 树,它将这个工作留给主解析过程

浏览器解析 CSS,形成 CSSOM 树,当 DOM 树构建完成后,浏览器引擎通过 DOM 树和 CSSOM 树构造出渲染树。渲染树中包含可视节点的样式信息(不可见节点将不会被添加到渲染树中,如:head 元素和 display 值为 none 的元素)

值得注意的是,这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的 HTML 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

6. 浏览器布局渲染

  • 布局:通过计算得到每个渲染对象在可视区域中的具体位置信息(大小和位置),这是一个递归的过程。
  • 绘制:将计算好的每个像素点信息绘制在屏幕上

在页面显示的过程中会多次进行 Reflow 和 Repaint 操作,而 Reflow 的成本比 Repaint 的成本高得多的多。因为 Repaint 只是将某个部分进行重新绘制而不用改变页面的布局,如:改变了某个元素的背景颜色。而如果将元素的 display 属性由 block 改为 none 则需要 Reflow