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

Question

人眼可以感知加载150ms的图像和需要160ms下载的另一个图像之间的差异吗？ 如果一个页面有30-40张图片，那么这10毫秒的差异开始有所作为？

Answer 1

如果页面加载需要150毫秒，图片需要160毫秒，总共310毫秒。人眼可以每秒读取10-12张图像，或者每100毫秒读取约1张图像。所以是的，如果他们看起来足够硬，他们会注意到负载。

Answer 2

10毫秒可能只是几乎没有引人注目。在典型的刷新频率为60Hz的笔记本电脑上，每帧在屏幕上显示约16-17毫秒，所以（所有其他情况相同）10毫秒的延迟意味着将图像显示一帧的概率大约为66％后来。

但是，一个1帧的延迟（这是可能的最大延迟）很可能不会被大多数用户注意到。对于动画而言，这一点非常明显，但在静态图像出现时不太明显。

Answer 3

根据3D开发者约翰·卡马克，"Human sensory systems can detect very small relative delays in parts of the visual or, especially, audio fields, but when absolute delays are below approximately 20 milliseconds they are generally imperceptible."

也就是说，20毫秒是一个很好的经验法则，即使闪烁可能会出现明显更快。所以10ms（150对160ms）不应该被察觉。但是，您正在询问用户是否会注意到150ms和160ms之间的差异。如果这是一次性事件（而不是15或16 kHz闪烁的事件），我不明白人们怎么会注意到这种差异。

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

1. 网络加上操作系统延迟差异远远超过10毫秒，因此即使您正在与本地主机通话，您的150毫秒加载时间也会有所不同。
2. 浏览器通常会一次打开多个连接以更高效地加载文件。所以文件似乎会同时加载或乱序加载。如果有任何文件大小需要注意，它就是一个以太网数据包的大小。如果完整响应适合于一个数据包（通常为1500字节，包括数据包标头），则将其缩小应该不会提高性能。
3. 浏览器可能会延迟显示图像几毫秒，以尽量减少帧缓冲区（窗口）重新写入。
4. 浏览器需要解析显示图像的CSS规则。浏览器在完成CSS解析之前开始加载图像，并且CSS解析可能需要比图像加载更长的时间。
5. 如果您正在测试动画，您对事件的了解和预期会让它看起来更慢。其他用户不会注意到对你来说显而易见的事情。

这么久以来，图像文件大小可能是您最担心的问题。如果它很重要，不要依赖启发式 - 做你自己的测试。所有现代网页浏览器都有很好的计时工具，但Google最关注的是延迟。 （尽管如此，他们可能会随时跳跃）

此外，还可以测试不同类型的Internet连接（本地网络，1000英里以上，蜂窝网络）以及不同浏览器和设备上的测试。 Cellular networks are particularly weird，因为初始网络连接需要很长时间，然后很快关闭。