• 从Chrome 117 开始unload 事件将逐渐弃用
  • 发布于 2个月前
  • 349 热度
    0 评论
简单的说:从 Chrome 117 开始,unload 事件将逐渐弃用。通常情况,在 HTML 文档即将被卸载时,unload 事件将会调用。理论上,它可用来在用户离开页面时运行一些代码,或者作为会话回调结束时运行代码。
<!doctype html>
<html>
  <head>
    <title>堆代码 duidaima.com</title>
    <script>
      window.addEventListener("beforeunload", function (event) {
        console.log("即将卸载");
      });
      window.addEventListener("unload", function (event) {
        console.log("卸载");
      });
    </script>
  </head>
  <body>
      ConardLi ...
  </body>
</html>
一般我们会用于以下场景:
1.保存用户数据:离开页面前保存数据;
2.执行清理任务:在离开页面之前关闭打开的资源;

3.发送分析:在离开页面时发送与用户交互相关的数据。


为啥要弃用
这个 unload 事件非常不可靠。在很多浏览器中代码都不会按照预期运行。另外,因为它是早于 bfcache (浏览器的前进,后退,缓存操作)的,所以会对正常的 bfcache 进行阻塞,对网站的性能产生负面影响(正常根据规范来讲,unload 是不应该阻止用户的 bfcache 操作的)。这算是一个历史遗留问题,其实 Safari 也早就对它进行了弃用。

有什么替代方案
第一个替代方式就是 visibilitychange ,当用户切换选项卡、最小化浏览器窗口或打开新页面时,都会触发这个事件。当我们需要在页面不可见是做点操作时,可以判断这个 document.visibilityState 是否为 hidden 。
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // 堆代码 duidaima.com
    // 页面变为可见状态时的操作
    console.log('页面可见');
  } else if (document.visibilityState === 'hidden') {
    // 页面变为不可见状态时的操作
    console.log('页面不可见');
  }
});
第二个替代事件为 pagehide ,它会在用户点击跳转其他链接、前进或后退按钮,或关闭浏览器选项卡时触发,也能够用来确定用户什么时候离开界面:
window.addEventListener('pagehide', function(event) {
  console.log('页面即将隐藏或关闭');
  // 执行相应的操作
});
pagehide 不会像 unload 一样让页面不符合bfcache (浏览器的前进,后退,缓存操作)的条件。

怎么检测
Lighthouse 有一项专门的 no-unload-listeners 检测,如果页面上的任何 JavaScript(包括来自第三方库的 JavaScript)添加了unload 事件侦听器,就会发出警告。

另外 Chrome DevTools 也有一个 back-foward-cache 检测,可帮助我们识别可能阻止页面有后退/前进缓存资格的问题,这里面就包括使用 unload 事件。

使用 Permissions-Policy 禁用
如果你知道自己的网站有用到这个事件,但是又不知道怎么移除,可以使用 Permissions-Policy 来进行限制,Chrome 115 版本专门增加了对 unload 的配置:
递归地禁用当前页面及其所有子 iframe 的 unload事件,可以添加如下 Header:
Permissions-Policy: unload=()
递归地禁用当前页面及其所有子 iframe 的 unload事件,但是想保留部分页面的:
Permissions-Policy: unload=(https://www.duidaima.com)
只是上知道网站上是否有调用 unload 事件,但不进行拦截:
Permissions-Policy-Report-Only: unload=()

用户评论