DOMContentLoaded / load(event),如何提高速度。

时间:2009-07-31 18:02:26

标签: html ajax performance

我正在尝试尽我所能来提高页面的加载速度,特别是加载ajax的组件。

在萤火虫中,我的外出看起来像这样

  

我不完全确定我是否正确读取它,但对于DOMContentLoaded来说它是+ 2.19s(如果我们应该从等待响应中减去它,那么它可能只有.8)。

然后4.67s为'加载'(事件)。

这两个看起来都是非常长的加载时间。

我无法弄清楚会导致这种情况的原因。 这些统计数据来自加载一个直接的html页面,我通常通过ajax加载。 但这只是HTML。页面中没有javascript,页面正在直接加载,而不是通过ajax请求加载。

然而,当我通过ajax加载此页面时,我发现页面尝试加载时会出现明显的延迟。

有什么建议吗?

我一直在浏览IE调试栏中的html,它看起来都非常干净。 页面中有30个图像。这可能是'加载'事件在等待什么?如果是这样,有什么方法可以加快速度吗?

特别是,由于用户永远不会直接加载此页面,而只是通过ajax请求,这是他们提高ajax中页面加载性能的方法。问题不在于ajax加载脚本,而是具体使用html页面。

---------------------- EDITTED ------------------------ ------ 页面的结果被加载到jquery循环中,其中一次可见多个图像,因此使用lazyloader提供了非常糟糕的用户体验。 (假设是导致此问题的图像)。

1 个答案:

答案 0 :(得分:7)

那些萤火虫的统计信息告诉你:

  • 从您开始请求服务器端代码开始返回响应时需要2.1秒
  • 然后需要19毫秒才能下载响应(即HTML)
  • 71ms左右之后,DOMContentLoaded事件触发
  • 页面完全加载后(图​​像全部下载完毕后),将触发加载事件。
一旦DOM准备好,就会触发DOMContentLoaded。 load事件一直等到整个页面被加载(包括任何外部资源,如图像)

您的请求中的大部分时间(除了下载图像)都花在等待服务器构建HTML上。也许你的服务器端代码可以优化运行得更快?