2

我一直在尝试改善我们的前端网页性能，并尝试使用网页测试来获得一些见解。我们当前的页面加载时间是 8 秒。

这是我们网站的瀑布视图 - http://i.imgur.com/D4sPLfs.png 蓝线表示触发的加载事件，它决定了加载时间。

这是另一个页面加载时间为 4 秒的网站的瀑布 - http://i.imgur.com/NuO1Mao.png

两个站点的瀑布看起来很相似，除了一个明显的区别 -第二个站点的蓝线（加载事件触发）要早得多，即使在onLoad触发事件之后加载了很多内容。

我是否正确地认为，如果我能以某种方式onLoad在我的网站上更早地触发，我会看到用户感知性能的改善？如果是，我该怎么做？

  1. 我们已经在使用lazyload.js延迟加载图像
  2. 我们的大部分第三方 js 文件（Google Ads / Analytics）在 body 元素的底部附近被调用

非常感谢！

4

1 回答 1

1

还有另一种“domready”事件，这也是 jQuery 使用的。它在构建 DOM 树时触发，并且不等待外部资源（主要是图像）加载，onload 事件的作用。

有了这个加载时间，您很可能正在使用一个已经支持 domready 事件的 JS 框架，那么您应该考虑使用它。

您可能必须重写大部分脚本，主要是在您期望正确设置图像宽度/高度时。

如果你可以访问 jQuery，你可以使用类似的东西：

$().ready(function() {
    loadHandler();
});

如果 jQuery 没有解决方案，你应该看看这个jQueries domready 函数的提取，因为有很多怪癖需要注意。

于 2013-10-29T08:16:30.163 回答