基于http网络层的前端性能优化

就是从地址栏输入url发生了什么这一个大问题，展开来说

1- dns域名解析
2- tcp连接，三次握手
3- 服务器收到请求
4- 页面渲染

1. dns域名解析

在地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就产生了，域名解析的过程实际是将域名还原为IP地址的过程。

• DNS域名解析有两种方法，分别是递归查询和迭代查询
  • 首先走递归查询
    • 主机向本地域名服务器的查询采用递归查询
  • 其次走迭代查询
    • 本地域名服务器向根域名服务器的查询采用迭代查询

用图来看一下

上面提到dns域名解析，第一步是递归查询。也就是主机向本地域名服务器的查询。那这就肯定必须要从缓存中查找！

• 缓存检查

  • 缓存位置

    • Memory Cache : 内存缓存
    • Disk Cache：硬盘缓存

  • 缓存优先级(分情况探讨)

    • 打开网页(新人第一次进来，肯定没有内存缓存，所以直接找硬盘缓存)：查找 disk cache 中是否有匹配，如有则使用，如没有则发送网络请求
    • 普通刷新 (F5)：因TAB没关闭，因此memory cache是可用的，会被优先使用，其次才是disk cache
    • 强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有 Cache-control: no-cache，服务器直接返回 200 和最新内容

  • 实践

在chrome中访问www.baidu.com/，不勾选 Disable cache

圈出来的部分显示了资源的来源： from disk cache ： 将资源缓存到磁盘中，等待下次访问时不需要重新下载资源，而直接从磁盘中获取；
from memory cache ：将资源缓存到内存中，等待下次访问时不需要重新下载资源，而直接从内存中获取；
可以看见资源的来源是缓存当中，从缓存当中获取了这些就可以直接显示在页面中，不需要发送http请求；
如果需要发送http请求，那就需要建立tcp连接

2. tcp连接，三次握手

• 首先明确，tcp IP http三者的关系
  tcp是建立连接通道，http是在通道里传输的数据 ，ip是传输的数据目的地是哪里

打个比方，你有一些想法，你把他们变成文字写在信纸上，这是http

你把这个信纸塞进信封，这个信封是tcp

你把这个信封写上地址交给邮局，这地址是IP

一层套一层

• 明白三次握手需要的一些含义

seq序号，用来标识从TCP源端向目的端发送的字节流，发起方发送数据时对此进行标记

ack确认序号，只有ACK标志位为1时，确认序号字段才有效，ack=seq+1

标志位

ACK：确认序号有效

RST：重置连接

SYN：发起一个新连接

FIN：释放一个连接

• 图解
  

3. 服务器收到请求

服务器收到浏览器发送的请求信息，返回一个响应头和一个响应体。

4. 页面渲染

浏览器收到服务器发送的响应头和响应体，进行客户端渲染，生成Dom树、解析css样式、js交互。

相关问题

1. 三次握手为什么不用两次，或者四次?

• TCP作为一种可靠传输控制协议，其核心思想：既要保证数据可靠传输，又要提高传输的效率！

2. 为什么连接的时候是三次握手，关闭的时候却是四次握手？

• 服务器端收到客户端的SYN连接请求报文后，可以直接发送SYN+ACK报文但关闭连接时，当服务器端收到FIN报文时，很可能并不会立即关闭链接，所以只能先回复一个ACK报文，告诉客户端：”你发的FIN报文我收到了”，只有等到服务器端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送，故需要四步握手。