B站网页load事件多次触发：如何可靠地判断页面完全加载完成？

B站网页load事件多次触发及可靠加载完成判断

本文分析了一个油猴脚本在B站视频页面遇到的问题：window.onload事件多次触发。作者使用油猴脚本测试window.onload和window.addEventListener('load', ...)两种监听方式，发现前者只触发一次，后者却触发三次，两者同时使用则触发次数更多。作者怀疑是iframe导致，但需要更可靠的页面完全加载判断方法，因为多次触发load事件无法准确反映页面最终加载状态。

作者提供的油猴脚本如下：

// ==UserScript==
// @name         Temp
// @namespace    no
// @match        https://www.bilibili.com/video/*
// @run-at document-start
// ==/UserScript==

// 单独使用只会触发一次onload事件
// window.onload = alert("onload is triggered");

// 单独使用会触发3次load事件
// window.addEventListener("load", () => {
//     alert("load is triggered");
// });

// 两种方式同时使用，会触发多次
// window.onload = alert("onload is triggered");
// window.addEventListener("load", () => {
//     alert("load is triggered");
// });

作者在火狐浏览器，@run-at document-start注入时机下测试，发现addEventListener方法多次触发load事件。这可能是因为页面中存在iframe，iframe加载完成后也会触发load事件。如果页面有多个iframe，就会出现多次触发的情况。

问题可能原因：页面中存在其他油猴脚本或B站自身代码创建的未被作者注意到的iframe，这些iframe的加载也触发了load事件。

建议：

1. 禁用其他油猴脚本: 逐个禁用其他油猴脚本，观察load事件触发次数变化，以确定是否由其他脚本导致。

2. 检查iframe: 在脚本中添加条件判断，避免在iframe环境中运行代码。例如，检查window.parent === window，只有在顶级窗口才执行代码。

3. 使用更可靠的加载完成判断方法: load事件并非总是可靠的页面完全加载指标，特别是对于复杂的网页。考虑使用更可靠的方法，例如：

   • DOMContentLoaded事件: 该事件在HTML文档完全解析并构建DOM树后触发，比load事件更早发生，但资源（如图片、脚本）可能尚未完全加载。

   • MutationObserver: 监控DOM树的变化，当页面内容稳定后，可以认为页面加载完成。需要设置合适的观察条件和超时机制。

   • Performance.timing API: 获取页面加载性能数据，根据loadEventEnd属性判断页面加载完成时间。

通过以上方法，可以更准确地判断B站网页的加载完成状态，并解决load事件多次触发的困扰。