使用 onLoad 事件提高前端性能答案

【问题标题】：Improving front-end performance using the onLoad event使用 onLoad 事件提高前端性能
【发布时间】：2013-10-29 16:22:47
【问题描述】：

我一直在努力提高我们的前端网页性能，并尝试使用 webpagetest 获得一些见解。我们当前的页面加载时间是 8 秒。

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

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

这两个网站的瀑布看起来很相似，除了一个明显的区别 - 第二个网站的蓝线（加载事件触发）要早得多，尽管很多内容是在 @ 之后加载的987654324@ 触发事件。

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

非常感谢！

【问题讨论】：

【解决方案1】：

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

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

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

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

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

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

【讨论】：

我不确定我是否明白我需要做什么。是的，我们正在使用 jquery，并且我们正在 domready 上运行代码。提前调用 onLoad 事件是否需要使用上面的代码？
您不能提前调用onload 事件。您只能迁移脚本以使用 domready 而不是 onload。对于不需要图像或其父元素的宽度/高度的任何东西，这应该不是问题。