每个前端开发人员都应该知道的延迟数字

144 阅读4分钟

未命名__2024-06-20+10_07_01.png

在现代 web 开发中,理解和优化延迟对于提供卓越的用户体验至关重要。无论是网页加载时间、资源请求响应,还是用户操作反馈,每一毫秒都可能影响用户的满意度。下面我们一起来直观地感受一下延迟的手感。

下面是三个国外比较知名的指标。

Peter Norvig:

norvig.com/21-days.htm…

Jeff Dean:

www.cs.cornell.edu/projects/la…

伯克利大学:

colin-scott.github.io/personal_we…

  1. 执行典型指令1/1,000,000,000秒=1纳秒

  2. 从L1缓存存储器获取0.5纳秒

  3. 分支错误预测5纳秒

  4. 从L2缓存内存7纳秒获取

  5. Mutex锁定/解锁25纳秒

  6. 从主存储器获取100纳秒

  7. 在1Gbps网络20,000纳秒上发送2K字节

  8. 从内存中按顺序读取1MB 250,000纳秒

  9. 从新磁盘位置获取(寻求)8,000,000纳秒

  10. 从磁盘20,000,000纳秒连续读取1MB

  11. 将数据包美国发送到欧洲,然后返回150毫秒=150,000,000纳秒

注:

1 ns = 10^-9 s

1 ms = 10^-3 s = 1,000 us = 1,000,000 ns

从上面看到,有意思的事网速足够快的情况下,读取数据竟然比从内存中还快。另外内存、SSD、硬盘,他们的差别基本是10x左右。

再来看一个是Vercel上给出的:

数据是用2023年的安卓手机测量,笔记本和iPhone会更快。

1、网速影响:

Wifi延迟:可能会随着信号弱或旧硬件的增加而增加。延迟1-4ms。(影响指标TTFB、FCP、LCP)

5G高频网络:是当前部署最快的移动技术。延迟1-5ms。(影响指标TTFB、FCP、LCP)

5G中频网络:在信号不好或塔超载的情况下,体验可能会有所不同。延迟10-30ms。(影响指标TTFB、FCP、LCP)

4G网络:LTE延迟到互联网LTE。延迟15-50ms。(影响指标TTFB、FCP、LCP)

3G网络:当今最常用的最慢的蜂窝标准。延迟150ms (影响指标TTFB、FCP、LCP)

往返地球两侧的延迟:如果您将服务部署到单个区域,这是您应该看到的最糟糕的延迟。延迟150ms(影响指标TTFB、FCP、LCP)

往返城市的延迟:同一大陆上其他城市的延迟,如果您与用户部署到同一大陆的地区,这是您可以预期的延迟。它的计算距离为5000公里,因此实际延迟可能略高或略低。延迟33毫秒。(影响指标TTFB、FCP、LCP)

2、数据处理:

服务或数据库:同一云区域的服务或数据库的往返延迟这是在不访问互联网的情况下部署在您附近的不同服务的延迟。延迟10ms。(影响指标TTFB、FCP、LCP)

解析1MB CSS:浏览器渲染网页必须执行的工作的一部分。延迟100ms (影响指标FCP、LCP)

解析1MB的HTML:浏览器渲染网页必须执行的工作的一部分。虽然较短的网页通常可以忽略不计,但它可以成为很长文章的主要因素。120ms (影响指标FCP、LCP)

解析1MB的JavaScript:时间会对页面加载时间产生重大影响,因为它通常比CSS和JS增长得更快。代码拆分是最小化JS大小的主要技术。150ms (影响指标INP、FCP、LCP)

3、用户体验:

用户感知的最短时间:人类认为时间已过的最短持续时间当响应用户输入时,保持在此持续时间以下意味着您的用户将感知到响应是即时的。延迟 40-80ms。(影响指标INP)

用户感知流畅的帧率:每秒60帧。在60fps设备上,每16毫秒绘制一帧。延迟5-10毫秒(是指计算机绘制时间)

用户感知反应慢:人类认为缓慢的时间长度当对用户输入做出反应时,比这个值慢的反应将被视为必须等待。200ms也是INP中“需要改进”的阈值。延迟200ms (影响指标INP)

原文:

vercel.com/blog/latenc…