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

港控/mmm° 2021-09-01 04:09 394阅读 0赞

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

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

#### 1. dns域名解析 ####

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

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

用图来看一下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

上面提到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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]

圈出来的部分显示了资源的来源： 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：释放一个连接

*  图解  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 3]

1.  服务器收到请求

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

1.  页面渲染

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

##### 相关问题 #####

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/0cfb9bf7c3824c5c8cad9b3fbd4bd037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/ad9530e1c074496cb6680e2098eabb1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210813/96a65e1a894f45108b911efbad8563af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210813/cf0d6f3ac5254a3995e8b89f5c9c83cb.png