DNS 解析

DNS 解析就是将 URL 转化为 IP 的过程,电脑会不断地在域名服务器中查询 IP 地址,直到找到为止,所以当我们输入网址到浏览器找到 IP 时会有 10~50 ms 的延迟。
DNS 会将查询过的 DNS 进行缓存,分为浏览器缓存,系统缓存,路由器缓存,IPS服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。浏览器缓存如 chrome 在 chrome://dns/ 内可以看到,系统缓存在 hosts 文件内。

TCP 连接

浏览器得到 IP 后,就像服务器发送 TCP 请求,TCP 是传输层的一种可靠的请求,HTTP 就是基于 TCP 的连接方式。

TCP 标志位
  • SYN 建立连接
  • ACK 确认
  • PSH push 传送
  • FIN 结束
  • RST 重置
  • URG 紧急
三次握手

当客户端要与服务端通信时,需要三次握手:

  • 第一次握手,客户端发送 SYN 包到 服务器,并进入 SYN_SEND 状态等待确认
  • 第二次握手,服务器接收到 SYN 包后,也发送给客户端一个 SYN+ACK 包,并进入 SYN_RECV 状态
  • 第三次握手, 客户端收到 SYN+ACK 包,向服务端发送一个 ACK 包,双方都进入 ESTABLISHED 状态,代表可以互相通信。

为什么要三次握手,因为通信双方不能保证对方一定能收到信息,网络在信道中传输是具有不稳定性的。用通俗的话来将三次握手就是:

A:喂你听到了吗,B:喂我听到了你听得到吗,A:嗯我也听得到

四次挥手

TCP 连接时全双工的,就是互相都可收发信息,所以当断开连接时,需要互相确认对方是否断开连接了,否则当信号发送不稳定时会出现一方已断开另一方还在连接的情况。
例如当客户端要断开连接

  • 客户端发送一个 FIN 包
  • 服务器收到 FIN,发送一个 ACK 包
  • 服务器关闭连接,并发送一个 FIN 包后进入关闭状态
  • 客户端回 ACK 包确认,并进入关闭状态,一段时间后无反应就断开连接,服务器端收到后也关闭连接

HTTP 请求

TCP 连接建立成功后,可以互相通信,HTTP 就发送请求下载服务器资源。HTTP 请求分为三部分组成:请求行、消息报头、请求正文

  • 请求行
    请求行格式如下:Method Request-URI HTTP-Version CRLF
    Method 为请求方法,Request-URI 为请求的资源路径 HTTP-Version 为版本,CRLF 表示回车或换行结尾。
    Method 各个方法解释如下:

    • GET 请求获取Request-URI所标识的资源
    • POST 在Request-URI所标识的资源后附加新的数据
    • HEAD 请求获取由Request-URI所标识的资源的响应消息报头
    • PUT 请求服务器存储一个资源,并用Request-URI作为其标识
    • DELETE 请求服务器删除Request-URI所标识的资源
    • TRACE 请求服务器回送收到的请求信息,主要用于测试或诊断
    • CONNECT 保留将来使用
    • OPTIONS 请求查询服务器的性能,或者查询与资源相关的选项和需求

所以,一个 GET 请求格式如下:eg:GET/index.html HTTP/1.1(CRLF)

  • 消息报头
    请求报头允许客户端向服务器传递请求的附加信息和客户端自身的信息。常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等。
  • 请求正文
    当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。在请求包头中有一些与请求正文相关的信息,请求的数据格式一般为json。

HTTP 响应

服务器接收请求后,会返回相应,分为是:状态行、消息报头、响应正文。这里主要看状态行。
状态行格式如下:HTTP-Version Status-Code Reason-Phrase CRLF
HTTP-Version 表示服务器HTTP协议的版本;Status-Code 表示服务器发回的响应状态代码;Reason-Phrase 表示状态代码的文本描述。
Status-Code 分为 5 类:

  • 1xx:指示信息 – 表示请求已接收,继续处理
  • 2xx:成功–表示请求已被成功接收、理解、接受
  • 3xx:重定向–要完成请求必须进行更进一步的操作
  • 4xx:客户端错误–请求有语法错误或请求无法实现
  • 5xx:服务器端错误–服务器未能实现合法的请求

常见的有如下:

  • 200 OK:请求成功
  • 400 Bad Request:客户端请求有语法错误
  • 401 Unauthorized:请求未经授权
  • 403 Forbidden:服务器收到请求,但是拒绝提供服务
  • 404 Not Found:请求资源不存在
  • 500 Internal Server Error:服务器发生不可预期的错误
  • 503 Server Unavailable:服务器当前不能处理客户端的请求

如一个成功的响应状态行如下:eg:HTTP/1.1 200 OK

渲染页面

获取服务器代码后,浏览器开始下载并解析 HTML、SVG、CSS、JavaScript 等脚本。
解析后会生成两个内部数据结构,DOM 树和 渲染树,DOM 树表示页面结构,渲染树表示 DOM 节点如何显示。一旦两棵树构建完成,浏览器就开始绘制页面元素。
可以看出,DOM 树和渲染树主要由 HTML 和 CSS 解析得来,当浏览器遇到 <script> 脚本时,会停止 DOM 树的构建,先下载和解析 JS 脚本,所以最好将 JS 放页面底部,CSS 放 head 内,这样可以让浏览器最优先绘制出页面。

重排(reflow)与重绘(repaint)

当 DOM 变化影响到元素的几何属性,如宽高的变化,增加段落等,这时浏览器需要重新计算元素的几何属性,并重新构造渲染树,这个过程称为重排,重排完成后,浏览器将所有受影响的部分重绘到屏幕上。
当然不是所有的情况都需要重排,例如修改某个元素的背景颜色,元素位置不发生变化,就只需要执行一次重绘。
重排和重绘都是需要耗费昂贵的代价,所以要尽可能避免。

  • 当修改元素位置或大小时,尽可能不要使整个页面都发生变化,而是只变化一小部分。如使用 display:none 先将其脱离文档流
  • 批量的修改 DOM,使其一次性渲染
  • 使用事件委托,减少被绑定的事件处理器。事件委托