问题 人眼可以在图像加载时间内感知10毫秒的延迟


人眼可以感知到需要150ms加载的图像和需要160ms下载的另一个图像之间的差异吗? 如果一个页面有30-40个图像,那么这10ms的差异是否会开始产生影响?


2843
2017-10-24 22:29


起源



答案:


10毫秒可能只是几乎没有注意到。在刷新率为60 Hz的典型笔记本电脑上,每帧在屏幕上大约16-17 ms,因此(其他条件相同)10 ms延迟意味着大约66%的机会使图像显示为一帧后来。

然而,大多数用户都不会注意到1帧延迟(这是由此导致的最大延迟)。对于动画而言,这将是非常明显的,但就静态图像何时出现而言并不十分明显。


6
2017-10-24 22:35



对静态图像判断多少帧延迟?任何想法? - user855
所以你喜欢一个图像网格,你担心它们并非都在同一时刻出现在页面上?对于网页,我会说这几乎是不可避免的,完全是人们期望看到的。 - MusiGenesis


答案:


10毫秒可能只是几乎没有注意到。在刷新率为60 Hz的典型笔记本电脑上,每帧在屏幕上大约16-17 ms,因此(其他条件相同)10 ms延迟意味着大约66%的机会使图像显示为一帧后来。

然而,大多数用户都不会注意到1帧延迟(这是由此导致的最大延迟)。对于动画而言,这将是非常明显的,但就静态图像何时出现而言并不十分明显。


6
2017-10-24 22:35



对静态图像判断多少帧延迟?任何想法? - user855
所以你喜欢一个图像网格,你担心它们并非都在同一时刻出现在页面上?对于网页,我会说这几乎是不可避免的,完全是人们期望看到的。 - MusiGenesis


根据3D开发人员John Carmack的说法, “人体感觉系统可以检测到部分视觉或特别是音频场的非常小的相对延迟,但是当绝对延迟低于大约20毫秒时,它们通常是难以察觉的。”

也就是说,20ms是一个很好的经验法则,即使闪烁可能更快。所以10ms(150对160ms)不应该被察觉。但是,您询问用户是否会注意到150毫秒和160毫秒之间的差异。如果它是一次性事件(而不是在15或16 kHz时闪烁的东西),我不会看到人们如何注意到这种差异。

人们会看到30-40张图片加载,如果他们仔细观察并且没有缓冲。但是,网页还有很多其他的事情。

  1. 网络加操作系统延迟的变化远远超过10毫秒,因此您的150毫秒加载时间会有所不同 - 即使您正在与localhost通信。
  2. 浏览器通常会同时打开多个连接以更有效地加载文件。所以文件似乎同时加载或乱序。如果要注意任何文件大小,则它是一个以太网数据包的大小。如果完整响应适合一个数据包(通常为1500字节,包括数据包标头),则将其设置为较小不应提高性能。
  3. 浏览器可以延迟显示图像几毫秒以最小化帧缓冲(窗口)重写。
  4. 浏览器需要解析用于显示图像的CSS规则。浏览器在完成CSS解析之前就开始加载图像,而CSS解析可能需要比图像加载更长的时间。
  5. 如果您正在测试动画,那么您对事件的了解和预期会让它看起来变慢。其他用户不会注意到对您来说非常明显的事情。

长话短说,图像文件大小可能是您最不担心的问题。如果它很重要,不要依赖启发式 - 做自己的测试。所有现代网络浏览器都有很好的计时工具,尽管Google最关注延迟。 (不过,他们可能随时都会跳跃。)

此外,测试不同类型的Internet连接(本地网络,跨越1000英里,蜂窝网络)以及不同的浏览器和设备。 蜂窝网络特别奇怪,因为初始网络连接需要很长时间,然后很快关闭。


4
2018-05-20 19:55





如果页面加载150毫秒,图像需要160毫秒,总共310毫秒。人眼每秒可以读取10-12个图像,或者每100毫秒读取1个图像。所以是的,如果他们看起来很难,他们会注意到装载。


1
2017-10-24 22:34