javascript - 使用 onLoad 事件提高前端性能

Question

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

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

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

这两个网站的瀑布图除了一个明显的区别外看起来很相似——第二个网站的蓝线(加载事件触发)要早得多，尽管很多内容都是在 onLoad 触发事件。

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

1. 我们已经在使用 lazyload.js 延迟加载图片
2. 我们的大多数第三方 js 文件(Google Ads/Analytics)都在 body 元素底部附近被调用

非常感谢!

Answer 1

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

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

您可能不得不重写大部分脚本，主要是如果您希望正确设置图像宽度/高度。

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

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

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