1.DNS解析

根据域名解析出IP地址

  • DNS 解析过程：
  1. 查询 www.baidu.com
  2. 访问客户端 DNS 缓存： 浏览器缓存 -> 系统缓存（host） -> 路由器缓存
  3. 访问 ISP DNS 服务器（ISP，互联网服务提供商，有联通电信移动等。如果你是电信网络，则进入电信的 DNS 缓存服务器，以下简称本地），如果本地服务器有，则直接返回；如果没有，让本地 DNS 服务器去咨询查找。
  4. 本地去咨询 DNS 根服务器，DNS 根服务器发现是 .com 区域 管理的，告诉本地去咨询它。
  5. 本地去咨询 .com 顶级域名服务器，.com 顶级域名服务器不太清楚，告诉本地去咨询 baidu.com 主区域 的服务器。
  6. 本地去咨询 baidu.com 主域名服务器，baidu.com 域服务器查找到对应的 IP 地址，返回给本地。
  7. 本地服务器通知用户， baidu.com 对应的 IP 地址，同时缓存这个 IP 地址，下次就直接访问了。

2.TCP连接

  • 建立连接阶段：3 次握手。建立客户端和服务器之间的连接。
  • 传输数据阶段
  • 断开连接阶段：4 次挥手。断开客户端和服务器之间的连接。

3.发送HTTP请求

构建 HTTP 请求报文，并通过 TCP 协议发送到服务器指定端口（HTTP 协议默认端口 80/8080，HTTPS 协议默认端口 443）

HTTP 请求报文由 3 部分组成：请求行、请求报文 和 请求正文。

  • 请求行：常用方法有：GET、POST、PUT、DELETE、OPTIONS、HEAD。
  • 请求报头：允许客户端向服务器传递请求的附加信息和客户端自身的信息。
  • 请求正文：通过 POST、PUT 等方法时，通常需要客户端向服务器传递数据，这些数据就储存在请求正文中。

4.服务器响应

服务器处理请求完毕后，会返回 HTTP 报文。

HTTP 响应报文也是由 3 部分组成：状态码、响应报头 和 响应报文

  • 状态码： 1xx 指示信息-表示请求已接收； 2xx 请求成功-表示请求成功接收并解析； 3xx 重定向-表示要完成请求需要更进一步操作； 4xx 客户端错误-请求有语法错误或者请求无法实现； 5xx：服务端错误-服务端未能实现合法的请求。 常见状态码：200（成功）、304（请求内容有缓存，不需要更新）、404（网页或者文件找不到）、500（服务器-后端处理错误）。
  • 响应报头：常见的响应报头字段 Server、 Connection 等。
  • 响应报文：服务器返回给浏览器的文本信息，通常 HTML、CSS、JS、图片等文件就放在这一部分

5.浏览器渲染

  1. 解析 HTML，生成 DOM 树
  2. 解析 CSS，生成 CSS 规则树（CSS Rule Tree）
  3. 将 DOM Tree 和 CSS Rule Tree 相结合，生成 渲染树（ Render Tree）
  4. 从根节点开始，计算每一个元素的大小、位置，给出每个节点所应该出现的屏幕精确坐标，从而得到基于渲染树的 布局渲染树（ Layout of the render tree）。
  5. 遍历渲染树，将每个节点用 UI 渲染引擎来绘制，从而将整棵树绘制到页面上，这个步骤叫 绘制渲染树（ Painting the render tree）

在解析渲染过程中，可能会产生 回流 和 重绘：

  • 重绘(repaint)**：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此 **损耗较少。
  • **回流(reflow)**：又叫重排（ layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

在构建 DOM 的时候，HTML 解析器如果碰到 JavaScript，那么就会停止构建 DOM，将控制权交给 JavaScript 引擎，等 JavaScript 运行完毕，浏览器再从中断的地方恢复 DOM 构建

也就是说：首屏渲染越快，就越不应该在首屏的时候加载 JS 文件，这也就是建议将 script 标签放到 body 标签底部，或者给 script 标签添加 defer/async 属性的原因

最后更新： 2021年11月18日 13:33