如何检测网站是否被Chrome内存优化机制后台丢弃？

嘿，这个问题我刚好踩过坑！Chrome其实有专门的机制让你检测标签页是不是被内存丢弃机制干掉的，而不是用户主动关闭的，下面给你分享几个靠谱的实现方案：

这是Chrome官方为这个场景提供的API，简直是量身定做！当标签页被内存丢弃后，用户再次打开这个页面时，document.wasDiscarded会返回true；如果是用户主动关闭再重新打开，这个属性会是false或者直接不存在（Chrome 79及以上版本都支持该属性）。

直接上代码：

window.addEventListener('load', () => {
  if (document.wasDiscarded) {
    // 这里就是被Chrome内存优化丢弃的情况，直接提示用户
    alert('你的页面刚才被Chrome自动关闭以节省内存啦！可以访问 chrome://discards 页面，找到我们的网站并把「Auto Discardable」设为「No」来避免这种情况哦～');
  }
});

这个方法完全不需要额外的状态存储，依赖原生API，准确率100%，是首选方案。

如果需要兼容Chrome 79以下的版本，可以用Session Storage配合Page Visibility API来做判断：

核心思路是：当页面被用户切换到后台（变成隐藏状态）时，我们在Session Storage里记个标记；如果页面重新加载时这个标记还存在，说明不是用户主动关闭的（主动关闭的话Session Storage会被清空），大概率是被Chrome内存丢弃了。

代码示例：

window.addEventListener('load', () => {
  const wasPageHidden = sessionStorage.getItem('pageWasHidden');
  if (wasPageHidden === 'true') {
    // 这里判断为被内存丢弃的情况
    alert('你的页面刚才被Chrome自动关闭以节省内存啦！可以访问 chrome://discards 页面调整设置避免哦～');
  }
  // 重置标记
  sessionStorage.setItem('pageWasHidden', 'false');
});

// 监听页面可见性变化
document.addEventListener('visibilitychange', () => {
  sessionStorage.setItem('pageWasHidden', document.hidden.toString());
});

这个方法有个小前提：用户不会在页面隐藏状态下主动关闭标签（不过这种场景占比很低，大部分用户都是在页面可见时关闭），所以准确率也很高，适合做兼容方案。

别用beforeunload事件来判断！因为Chrome在内存丢弃标签页时，不会触发beforeunload事件，而用户主动关闭页面会触发。如果要反向判断的话，需要用Session Storage记录beforeunload是否触发过，但这个实现比上面两个方案复杂多了，完全没必要舍近求远。

内容的提问来源于stack exchange，提问作者dukitieneflow