logo标签列表

我的图片加载得太慢了，为什么？

javascripthtmlperformancedom
11

我有几个JS和CSS文件在标签内加载。在最后一个JS文件之后，在Firefox上会有一个间隙，长达1311ms，直到浏览器开始加载图像。

image loading too late

Firebug没有显示任何空白区域的状态。

这是什么意思？为什么我的图像加载如此缓慢？

所有图像都在缓存中，但间隔仍然存在...

gap

完全无缓存加载：

huge gap

3
我也见过这种情况。实际上，我现在正在查看一个出���这种情况的页面！我一直认为这是Firefox解析和加载JavaScript文件所需的时间导致的。很想看看你的答案。 - Chris Baker
@SLaks 你是什么意思？第一张图片只是静态的... <img src="" /> - BrunoLM
很奇怪，因为它正在从缓存中获取图像...我还猜测Firefox首先完成客户端脚本和CSS的“编译”，然后才开始处理图像。如果省略几个JS文件，是否会影响间隙？ - Shadow The Spring Wizard
@Shadow 随着图像请求的中间部分下降，间隙变小... - BrunoLM
1
今天偶然发现了这篇文章，它讨论了这个差距：http://blog.teuntostring.net/2009/07/announcing-log-to-netpanel.html - Chris Baker
显示剩余2条评论
3个回答
1

可能有一些原因。

  • 这些静态文件在许多主机中，它们不在同一个主机中。
  • 您的浏览器解析这些文件速度较慢。
  • 这些文件中的JavaScript文件花费了很多时间。

您可以使用一些网络性能工具，如Yslow、Chrome控制台等来分析此问题。

1
你有一个300kb的JavaScript文件。这是很多JS需要解析和可能执行的。尝试使用Firebug或Chrome中的分析工具来查看在页面加载时运行的JavaScript。
0

如果我们谈论img标签，那么延迟可能是浏览器渲染页面所需的时间。我得找一下参考资料，但我记得浏览器在渲染页面之前不会开始获取图像。您可以通过添加一些分析来测试这一点，以显示页面何时完成渲染，并将其与第一张图像开始加载的时间进行比较。我在我的页面中插入了分析，将时间戳插入为第一个语句/元素（在head内），以及最后一个（在body内）。比较这两个时间戳可以给您近似的渲染时间。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接