我的图片加载得太晚,为什么?
我有一些加载在 head
上的 js 和 css 文件。在最后一个 js 文件之后,有一个 1311ms
的间隙(在 Firefox 上),直到浏览器开始加载图像。
Firebug 在此空白区域不显示任何状态。
这是什么意思?为什么我的图片加载这么晚?
缓存上的所有图像,间隙仍然存在...
完全无缓存加载:
I have a few js and css files that loads on the head
. After the last js file there is a gap (on Firefox) of 1311ms
until the browser starts to load the images.
Firebug doesn't show any status on this blank space.
What does it mean? Why are my images loading so late?
All images on cache, the gap is still there...
Full no-cache load:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您有一个 300kb 的 JavaScript 文件。有大量的 JS 需要解析并可能执行。尝试使用 Firebug 或 Chrome 中的分析工具来查看页面加载时运行的 JavaScript。
You have a 300kb JavaScript file. That's a lot of JS to parse and possibly execute. Try the profiling tool in Firebug or Chrome to see what JavaScript is being run on page load.
也许有一些原因。
您可以使用一些Web性能工具,例如Yslow,chrome控制台..来分析这个问题。
there some maybe reason.
you can use some web preformance tool, like Yslow, chrome console .. to analysis this problem.
如果我们谈论 img 标签,那么延迟可能是浏览器渲染页面所需的时间。我必须寻找参考,但我记得浏览器在渲染页面之前不会开始获取图像。您可以通过添加一些分析来测试这一点,这些分析显示页面何时完成渲染,并将其与第一个图像开始加载的时间进行比较。我在页面中插入了分析,将时间戳插入为第一个语句/元素(在头部内)和最后一个语句/元素(在正文中)。比较两者可以得出大致的渲染时间。
If we're talking img tags, then the delay might be the time it takes the browser to render the page. I'd have to look for a reference, but I recall that the browser doesn't start to fetch images until it has rendered the page. You could test this out by adding some profiling that shows when the page has completed rendering, and compare that to the time the first image starts loading. I have profiling inserted in my pages that inserts timestamps as the very first statement/element (inside the head), and the very last (in the body). Comparing the two gives you the approximate render time.