通过AJAX加载的<iframes>和图像是否会延迟window.onload事件？

Question

我试图让window.onload事件尽早触发，以便Google认为我的页面加载更快（这是一项令人沮丧的任务，因为从用户角度来看，到达window.onload需要多长时间基本上是无关紧要的，但我偏离了主题）

然而，我不知道延迟onload事件的原因！具体来说：

1. 如果我在页面中加载Facebook likebox，它会在<iframe>中加载，那么它的加载会延迟onload事件吗？如果likebox iframe必须加载一堆个人资料图片，那么onload是否等待它们完全加载？
2. 假设在文档准备好后，我对HTML blob进行异步AJAX请求并将其注入页面。如果此HTML blob包含许多<img>标记，则onload事件是否等待所有这些标记加载完成？

通常情况下，浏览器如何知道何时触发onload事件？哪些事情会阻塞onload，哪些事情不会阻塞？

- Tom Lehman

Answer 1

a) 除非减少页面“重量”，否则无法控制 window.onload。浏览器将决定何时声明该事件。

b) 谷歌对 window.onload 事件一无所知，因为它不解析JavaScript。

1) 使用Facebook的XFBML版本和异步加载Facebook JavaScript SDK（http://developers.facebook.com/docs/reference/javascript/FB.init/）可以完全消除Facebook的载荷。请注意，仅在启用JavaScript时才能正常工作。

2) 所有会显著增加网页“重量”的内容都应异步加载，最好在 window.onload 事件触发后加载。

- user188654

---

如果您查看Webmaster工具，Google确实会查看此数据，即页面完全呈现需要多长时间，包括JavaScript调用。 - Ibu

Google 在确定页面加载时间时绝对解析 JavaScript（爬虫可能不会，但我不是在谈论爬虫）。查看网站管理员工具。 - Tom Lehman

@Ibu，Horace Loeb 阅读和解析 JavaScript 代码之间有很大的区别。除了能够跟踪 JavaScript 嵌入链接并执行一些非常基本的 JavaScript 代码外，Google 无法解析（理解）JavaScript。因此，它无法理解 window.onload。它只能假设页面加载完全需要多长时间。 - user188654

@holodoc：在这种情况下，我们不是在谈论爬虫。Google不会假设页面加载时间，它会像其他浏览器一样打开您的页面并检查加载时间。我认为你的解决方案非常好，可以使用Facebook脚本而不是iframe。 - Ibu

Answer 2

如果您在firebug或chrome检查器中查看瀑布流，iframe和ajax调用会影响onload事件。我曾经遇到过类似的问题，Facebook严重减缓了网站速度。是的，在Webmaster工具中查看页面加载时间时，它显示了滞后。

我的解决方案是在页面完全加载时动态添加Facebook iframe，并且对于ajax调用，我只在加载时触发它们。

这将我的页面加载时间从嵌入式Facebook iframe的7秒降至动态附加iframe的2.6秒。

- Ibu

---

你如何从瀑布图中判断哪些项目会阻塞onload事件？一些在onload事件之前发起的请求不会阻塞。 - Tom Lehman

例如在Google Chrome上，您可以查看垂直红线之前的最后一项。只需查看其长度或开始时间即可。 - Ibu

红线之前的最后一个开始的项目？还是红线之前的最后一个结束的项目？ - Tom Lehman

那将会在红线之前。 - Ibu