人眼能否感知到图像加载时间的 10 毫秒延迟
人眼能否感知加载 150 毫秒的图像和下载 160 毫秒的图像之间的差异？ 如果一个页面有 30-40 个图像，那么这 10 毫秒的差异是否会产生影响？
Can a human eye perceive a difference between an image that takes 150ms to load and another image that takes 160ms to download?
If a page has 30-40 images, then does this 10ms difference start making a difference?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
10 毫秒可能几乎察觉不到。在刷新率为 60 Hz 的典型笔记本电脑上，每一帧在屏幕上显示的时间约为 16-17 毫秒，因此（在其他条件相同的情况下）10 毫秒的延迟意味着大约 66% 的机会使图像显示一帧之后。
然而，1 帧延迟（这是由此可能导致的最大延迟）很可能不会被大多数用户注意到。对于动画来说它会非常明显，但对于静态图像出现时则不太明显。
10 ms might be just barely noticeable. On a typical laptop with a refresh rate of 60 Hz, each frame is on the screen for about 16-17 ms, so (all else being equal) a 10 ms delay means a roughly 66% chance of making the image show up one frame later.
However, a 1-frame delay (which is the maximum delay possible as a result of this) would in all likelihood not be noticed by most users. It would be very noticeable for animation, but not very noticeable in terms of when the static image appears.
根据 3D 开发人员 John Carmack 的说法，“人类感觉系统可以检测到非常小的相对物体视觉或特别是音频领域的部分延迟，但当绝对延迟低于大约 20 毫秒时，它们通常是难以察觉的。”
也就是说， 20 毫秒是一个很好的经验法则，尽管闪烁可能会更快。因此 10 毫秒（150 毫秒与 160 毫秒）不应该被察觉。但是，您询问用户是否会注意到 150 毫秒和 160 毫秒之间的差异。如果这是一次性事件（而不是在 15 或 16 kHz 下闪烁），我不知道人们如何注意到其中的差异。
如果仔细观察，人们会看到 30-40 张图像正在加载，并且没有缓冲。然而，网页上还发生了很多其他事情。
长话短说，图像文件大小可能是您最不用担心的。如果它很重要，请不要依赖启发式方法 - 进行自己的测试。所有现代网络浏览器都有出色的计时工具，尽管谷歌的浏览器最关注延迟。 （不过，它们随时可能会被超越。）
此外，还可以在不同类型的 Internet 连接（本地网络、跨越 1000 英里、蜂窝网络）以及不同的浏览器和设备上进行测试。 蜂窝网络特别奇怪，因为初始网络连接需要很长时间，然后不久就会关闭。
According to 3D Developer John Carmack, "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."
That is to say, 20ms is a good rule of thumb, even though flicker may be noticeable quicker. So 10ms (150 vs. 160ms) shouldn't be perceptible. However, you're asking about whether the user will notice the difference between 150ms and 160ms. If it's a one time event (as opposed to something blinking at 15 or 16 kHz), I don't see how people could notice the difference.
People will see the 30-40 images loading, if they look carefully and there's no buffering. However, there are a lot of other things going on with web pages.
So long story short, image file size is probably the least of your worries. If it's important, don't rely on heuristics-- do your own testing. All the modern web browsers have great timing tools, although Google's are the most focused on latency. (They may get leap-frogged at any time, though.)
Also, test over different types of Internet connections (local network, across 1000 miles, cellular network) and on different browsers and devices. Cellular networks are particularly weird, since the initial network connection takes a long time and then shuts down shortly thereafter.
如果加载页面需要 150 毫秒，而图像需要 160 毫秒，则总共需要 310 毫秒。人眼每秒可以读取 10-12 个图像，或者大约每 100 毫秒读取 1 个图像。所以，是的，如果他们看得足够仔细的话，他们会注意到负载。
If the page takes 150 ms to load and the image takes 160ms that's 310 ms total. The human eye can read 10-12 images per a second, or about 1 every 100 ms's. So yes they would notice the loading if they looked hard enough.