web前端 网络优化学习笔记

延迟

传播延迟

消息从发送端到接收端需要的时间，是信号传播距离和速度的函数

传输延迟

把消息中的所有比特转移到链路中需要的时间，是消息长度和链路速率的函数

处理延迟

处理分组首部、检查位错误及确定分组目标所需的时间

排队延迟

到来的分组排队等待处理的时间

TCP

连接前的三次握手

1. SYN。发送端发送SYN分组，包含一个随机序列号x；

2. SYN ACK。接收端在接收到SYN分组之后，给x加1，并选择自己的随机序列号y，将包括x和y的分组响应给发送端；

3. ACK。 发送端在接收到SYN ACK之后，给x和y加1，将包含x和y的分组发送给接收端。

4. 发送端在发送了ACK之后，就完成了3此握手。然后发送端可以立即向接收端发送自己的请求报文，等待响应。

当请求的数据比较小的时候，几乎可以忽略传输延迟，主要的是瓶颈是传播延迟，tcp三次握手的时间就会占据此请求的绝大部分时间！

拥塞控制

1. rwnd（接收窗口）。接收方和发送方都拥有此窗口，包括能够保存数据的缓冲区空间大小信息，且在建立连接的时候会通告对方自己的rwnd（一般为系统默认设置）。

2. cwnd（拥塞窗口大小）。发送端对从客户端接收确认之前可以发送数据量的限制，接收方和发送方并不会向对方共享这个数据。

3. 窗口缩放。rwnd初始默认设置16位，即接收窗口大小为2^16字节，无法充分使用带宽。所以再TCP三次握手期间，发送接收双方互相交换的报文有一个值用来表示在将来的ACK报文中左移rwnd的位数。这就是窗口缩放，在所有的平台默认启动。

4. 慢启动。发送端每次发送消息的长度都是rwnd和cwnd之间的最小值。cwnd初始值为n，当发送方接收到ACK之后，会将cwnd设置为2n，以此循环。这是慢启动。

HTTP

expires 字段

HTTP 1.0版本 响应头部字段。值为一个绝对时间。当再次请求此资源时，如果没有超过expires值，且缓存数据没有失效，则浏览器会从缓存获取此值，状态码为200。如果超过此时间值，浏览器会认为此资源过期，并向服务器请求此资源。

etag 字段

HTTP 1.1 响应头部字段。值为一个字符串。etag实际上就是一个资源的校验字段，当浏览器再次向服务器请求一个此资源时，如果etag值与服务器的相同，则表明此资源没有被改变，则返回304状态码，不返回此资源，减少传输延迟。否则则返回新的etag和此资源。这个和expires的区别在于使用etag校验数据是否改变时必须得发送一次http请求，而expires则不需要。

last-modified 字段

HTTP 1.0版本 响应头部字段。值为一个相对时间。当向服务器请求此资源时，如果服务器的last-modified的值一致，则返回304状态码，不返回此资源，减少传输延迟。其一般与expires头部一起使用。

短连接

短连接指需要发起请求时才建立TCP连接，请求结束之后就关闭连接。

长连接

长连接指发起了一次TCP连接，在结束此请求之后并未断开，还可以继续使用此链接来发起相同的请求。在P2P等实时通信应用中多采用长连接。

持久连接

持久连接是指发起了一次TCP连接，在结束此请求之后并未断开，还可以继续使用此链接来发起不同url的请求。http1.1新增的功能，极大的减少了因TCP三次握手带来的时间延迟。

网络优化规则

减少DNS查询

1. 浏览器内部储存DNS解析表

2. 预解析。基本已被大多数浏览器支持

<link rel="dns-prefetch" href="http://baidu.com">

 

减少HTTP请求

 使用webpack打包，将多文件压缩为单文件，将多个http请求变为一个。

使用CDN

从地理上把数据放到接近客户端的地方，可以显著减少每次TCP连接的网络延迟，增加吞吐量。

添加expires首部并配置ETag标签

HTTP部分已经解释了他们的工作机制

Gzip资源

所有文本资源都应该使用Gzip压缩，然后再在客户端与服务器间传输。一般来说，Gzip可以减少60~80%的文件大小，也是一个相对简单（只要在服务器上配置一个选项）但优化效果不错的举措。

避免HTTP重定向

HTTP重定向极其消耗时间，特别是把客户端重定向到一个完全不同域名的情况下，会导致额外的DNS查询和TCP连接延迟。解决措施是预渲染。