使用onLoad事件提高前端性能

Question

我一直试图提高我们的前端网页性能，并尝试使用万维网作为一些见解。我们当前的页面加载时间是8秒。

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

下面是另一个站点的瀑布，其页面加载时间为4秒- http://i.imgur.com/NuO1Mao.png。

这两个站点的瀑布看起来很相似，除了一个明显的差异--，第二个站点的蓝线(load event )比早得多，尽管很多内容是在onLoad触发事件之后加载的。

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

1. 我们已经在使用lazyload.js来延迟加载图像
2. 我们的第三部分js文件(Google / Analytics)大部分都是在body元素底部附近调用的。

非常感谢!

Answer 1

还有另一种“多址”事件，这也是jQuery所使用的。它是在构建DOM树时触发的，并且不会等待外部资源(大部分是图像)加载，即onload事件所做的事情。

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

您可能需要重写大部分脚本，主要是如果您期望图像宽度/高度被正确设置的话。

如果您可以访问jQuery，您可以使用如下内容：

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

如果jQuery不是解决方案，那么您应该看看这提取jQueries域函数，因为有很多奇怪的地方需要注意。