Chrome 117 升级告警：unload 事件逐步退出历史舞台

为了不断优化并提供更加流畅的用户体验，浏览器始终在进行更新和迭代。其中，Chrome 117 带来的一个显著变动是：它将开始逐步弃用 unload 事件。那么，这究竟意味着什么呢？

1. unload 事件简介

unload 事件，从字面上理解，它是当 HTML 文档即将被卸载时触发的事件。这一事件为开发者提供了在用户离开页面之前执行某些操作的机会。例如，我们可以利用它来保存用户数据、执行清理任务或发送与用户交互相关的数据分析。

  
    
    
  
  
      ConardLi ...
  

2. unload 事件的短板

尽管 unload 事件在某些场景中非常有用，但它存在明显的缺陷。首先，该事件的行为在不同的浏览器中可能会有所不同，导致它变得不太可靠。更重要的是，unload 事件可能会阻塞浏览器的前进、后退和缓存操作（也称为 bfcache），这对网站性能造成了负面影响。

3. 推荐的替代方案

a. visibilitychange 事件: 当用户切换浏览器选项卡、最小化窗口或打开新页面时，会触发这个事件。开发者可以通过检查 document.visibilityState 属性来确定页面的可见性。

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    console.log('页面可见');
  } else if (document.visibilityState === 'hidden') {
    console.log('页面不可见');
  }
});

b. pagehide 事件: 用户在导航至其他页面或关闭浏览器选项卡时，此事件将被触发。与 unload 不同，使用 pagehide 不会影响浏览器的缓存操作。

window.addEventListener('pagehide', function(event) {
  console.log('页面即将隐藏或关闭');
});

4. 如何检测和处理 unload 事件的使用

对于开发者来说，知道自己的网站是否使用了 unload 事件是非常重要的。Lighthouse 和 Chrome DevTools 都提供了工具来检测这一事件的使用。如果开发者确认他们的网站使用了该事件，但又不确定如何移除，可以考虑使用 Permissions-Policy 进行限制。

5. 关于 unload 事件的历史背景

此次 unload 事件的弃用其实是浏览器长期优化的一个环节。事实上，这个事件存在的问题并非新鲜事。例如，Safari 浏览器在较早的版本中就已经决定弃用它。这是因为，在执行 unload 事件的过程中，经常会出现预期外的行为，影响了用户的浏览体验。

6. 关于 bfcache

bfcache 是浏览器的一种性能优化策略，可以极速地加载之前浏览的页面。但 unload 事件的执行可能会打破这种优化，导致页面加载时间明显延长。对于希望网站快速响应的开发者来说，这无疑是个坏消息。

7. 如何避免潜在的坑

虽然我们有了替代 unload 事件的方法，但开发者仍需要注意一些细节。在更改代码以使用新的事件时，务必进行全面的测试，确保新代码不仅可以正常工作，还能提供优质的用户体验。此外，使用前述的检测工具来定期扫描网站，确保不存在任何未预期的 unload 事件监听器。

8. 结语

技术领域的变化总是迅速的，而浏览器技术尤为如此。作为前端开发者，我们需要时刻保持警惕，及时适应并采纳这些变化，以保证我们的网站或应用始终处于最佳状态。而对于 unload 事件的弃用，我们不仅要理解背后的原因，还需要知道如何进行适当的调整，确保网站功能的平稳过渡。