提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  大数据

当前栏目

Web性能优化之 延迟与带宽

性能Web 优化 延迟 带宽
2023-06-13 09:11:27 时间

前言

大家好，我是柒八九。今天我们来谈点“屠龙之术”。

「网页性能优化」，其实是一个捉摸不定的话题。在平时工作中，尤其现在框架盛行的今天，大家常常在写组件的时候就已经将性能优化考虑进去了。

例如：React中的类组件中的shouldComponentUpdate,函数组件中useMemo等。Vue中computed的计算属性，v-if与v-show的使用场景还有keep-alive保留组件状态并且避免重新渲染。

无论是React还是Vue在设计框架的时候，就考虑到一些优化方案。但是，这些优化方案仅仅是局限在「组件内部」。而一个页面的组成是由无数个小组件「堆砌」而成的。所以，在组件内部的优化只是「局部」小范围的。

如果，继续上升高度，有人会说利用打包工具的按需加载import()也算是一种优化；还有针对页面级别的路由懒加载也是一种页面范围的优化处理。

但是，这些都是一些细节点。要根据不同的项目进行合理利用。同时，「一千个人眼中有一千个哈姆雷特」，有些优化手段换了场景就不灵了。

所以，今天我们来谈点直击要害的优化角度。从更高的层面(「网络通信方向」)来分析一下。

时间不早了，干点正事哇。

简明扼要

  1. 对所有「网络通信」都有决定性影响的两个方面:延迟和带宽
  2. 传播延迟/传输延迟/处理延迟/排队延迟的时间总和，就是客户端到服务器的「总延迟时间」
  3. 光速与分组在介质中传播速度之比，叫做该「介质的折射率」
  4. 延迟中相当大的一部分往往花在了「最后几公里」
  5. 一条光纤连接的总带宽，等于每个信道的数据传输速率乘以可复用的信道数
  6. 用户可用带宽取决于客户端与目标服务器间「最低容量连接」
  7. 目标:「高带宽和低延迟」

❝面试点：提高网站性能 ==>目标:「高带宽和低延迟」 ❞

文章概要

  1. 速度是关键
  2. 延迟的构成
  3. 光速与传播延迟
  4. 延迟的最后一公里
  5. 网络核心带宽 VS 网络边缘带宽
  6. 目标:高带宽和低延迟

1. 速度是关键

对所有「网络通信」都有决定性影响的两个方面:延迟和带宽。

  • 「延迟」 分组从信息源发送到目的地所需的时间 (单位：ms)
  • 「带宽」 逻辑或物理通信路径最大的「吞吐量」 (单位：Mbit/s)

延迟和带宽

2. 延迟的构成

「延迟」是消息(message)或分组(packet)从起点到终点经历的时间。

延迟主要分为4类。

类型

解释

「传播延迟」

消息从发送端到接收端需要的时间是信号传播距离和速度的函数传播时间取决于距离和信号通过的媒介

「传输延迟」

把消息中的所有「比特」转移到链路中需要的时间是消息长度和链路速率的函数 传输延迟由传输链路的「速率决定」，与客户端到服务器的距离无关

「处理延迟」

处理分组首部、检查位错误及确定分组目标所需的时间 这些检查通常由硬件完成，延迟一般非常短

「排队延迟」

到来的分组排队等待处理的时间 分组到达的速度超过了接收器的处理能力，分组就要在入站缓冲区排队

❝传播延迟/传输延迟/处理延迟/排队延迟的时间总和，就是客户端到服务器的「总延迟时间」 ❞

发送端与接收端的距离越远，传播时间就越长。

3. 光速与传播延迟

光速是所有能量、物质和信息运动所能达到的「最高速度」。这个结论给网络分组的传播速度设定了上限。

网络中的分组是通过铜线、光纤等介质传播的，这些介质会导致传播速度变慢。光速与分组在介质中传播速度之比，叫做该「介质的折射率」。这个值「越大」，光在该介质中传播的速度就越慢。

不管环境如何变化，速度依旧是刚性需求。一个2秒内无法打开的web就意味着用户的流失。

Google提出1秒钟完成终端页面首屏的渲染。

耗时步骤

原因

1.服务器响应应该小于200ms 2. 尽量少的重定向 3. 尽量少的第一次渲染的请求数

网络消耗

4.避免过多堵塞的JS和CSS的堵塞5. 给浏览器留200ms的渲染时间6. 优化我们的JS执行效率和渲染时间

JS执行效率和渲染效率

4. 延迟的最后一公里

延迟中相当大的一部分往往花在了「最后几公里」，而不是在横跨大洋或大陆时产生的，这就是所谓的「最后一公里」问题。

为了让你家或你的办公室接入互联网，本地 ISP 需要在附近安装多个路由收集信号，然后再将信号转发到本地的路由节点。连接类型、路由技术和部署方法五花八门，分组传输中的这前几跳往往要花数十 ms 时间才能到达 ISP 的主路由器。

❝ISP：全称为Internet Service Provider，即「因特网服务提供商」，能提供拨号上网 服务、网上浏览、下载文件、收发电子邮件等服务，是网络最终用户进入Internet的「入口和桥梁」。 在国内就是大家耳熟能详的中国电信/移动/联通。 ❞

最后一公里的延迟与提供商、部署方法、网络拓扑，甚至一天中的哪个时段都有很大关系。作为最终用户，如果你想提高自己上网的速度，那选择延迟最短的 ISP 是最关键的。

5. 网络核心带宽 VS 网络边缘带宽

光纤就是一根「光导管」，比人的头发稍微粗一点，专门用来从一端向另一端「传送光信号」。金属线则用于传送电信号，但信号损失、电磁干扰较大，同时维护成本也较高。一般长距离的分组传输都是通过光纤完成的。

通过「波分复用」(WDM，Wavelength-Division Multiplexing)技术，光纤可以同时传输很多「不同波长(信道)的光」，因而具有明显的带宽优势。

❝「一条光纤连接的总带宽，等于每个信道的数据传输速率乘以可复用的信道数」。 ❞

构成因特网核心数据路径的骨干或光纤连接，「每秒能够移动数百T比特信息」。

然而，网络边缘的容量就小得多了，而且很大程度上取决于「部署技术」，比如拔号连接、 DSL、电缆、各种无线技术、光纤到户，甚至与局域网路由器的性能也有关系。

❝用户可用带宽取决于客户端与目标服务器间「最低容量连接」。 ❞

后记

分享是一种态度，这篇文章，大部分的篇幅来自于《Web性能权威指南》，算是一个自我学习过程中的一种记录和总结。主要是把自己认为重要的点，都罗列出来。同时，也是为大家节省一下排雷和踩坑的时间。当然，可能由于自己认知能力所限，有些点，没能表达的很好。如果大家想看原文，“墙裂推荐”看原文。

参考资料：

  1. Web性能权威指南
  2. 16ms的优化
  3. Google 性能优化
  4. ISP

相关文章