前端性能优化(一)

我心飞翔 分类:javascript

网络请求过程示意图:

image.png

网络通信的过程示意图:

image.png

  1. 发送请求前,要确定IP地址:1.本地有ip地址,2.本地无ip地址,没有ip要求dns服务器上解析出来ip地址
  2. 三次握手,建立链接
  3. 发送请求
  4. 四次挥手,关闭链接

寻找能够优化的地方:

  • 客户端请求的发送时间:更快
  • 服务器接收到请求后,处理请求的时间(找数据...):更快
  • 服务端响应数据发送给客户端的时间:更快
  • 客户端拿到数据后渲染成页面的时间:更快
那么总结起来就是两个部分:
  1. 更快的网络通信
  2. 更高效的数据处理

具体实现性能优化的手段:

1. DNS(全局的负载均衡+缓存系统)

image.png

原理:建立了多个服务器,其中有一台主服务器,主服务器会挑选一个最佳(如:离你最近/负载情况较好)的服务器给你响应请求,以达到提升速度的目的。
全局的负载均衡:如果有一台服务器请求的人数过多,而其他的较远服务器空闲,那么可能会优先使用空闲的服务器响应数据。
缓存系统
  • 命中率

除主服务器外,其他的服务器会定时向主服务器同步数据,那么可能当前请求的服务器没有所需要的资源,那么则说命中率低。

  • 回源率

那如果服务器没有需要的数据,就会去主服务器去同步数据,那么就说回源率高。

2. 资源合并(雪碧图)不推荐用!

每一个发送请求结束之后,建立的链接就会被断开,那么再次链接是比较耗时的,所以尽量减少发送的次数。

3. 域名分片(多域名)不推荐用!
  • 关于并发请求
    标准:规定同一个域名只能同时并发2个请求。但是浏览器实现的时候并没有按照标准去做,现在浏览器的并发请求的个数为6-8个,其中chrome为6个。后面标准就被取消了。
    那么就可以对域名进行分片,也就是可以建立二级域名。
4. 数据传输层面-缓存(没有请求的请求,一定是最快的)(一般是前端的中间层去实现)

image.png

image.png

强缓存

image.png

协商缓存

image.png

会多一个字段,目的是用来对比数据是否发生了改变,改变就重传

5. 数据传输层面-压缩

image.png

  • 传输更小的数据,需求的时间更短,br目前只有chrome支持
  • webpack:treeshaking...
  • 用字体图标替代图片,元数据与图片的显示无关,但是比较占用内存
  • http1的头部有很多数据,http2头部会压缩。

image.png

  • 通过存储一张表,减少发送过程中的数据大小,只需要发送一个标志的字段,转为去表中查询相应的数据。

image.png

  • 对数据流的形式进行了更改

image.png

  • 链接已经建立,但没有使用(可能在处理数据...),那么就是一个浪费,可以让其他的请求去使用这一个链路。

回复

我来回复
  • 暂无回复内容