使用 localStorage / sessionStorage 的性能问题？

Question

我试图检测用户在一段时间内不活动，并根据它需要执行某些操作。

我为此使用 localStorage，以便我在所有打开的选项卡中设置空闲时间开始。

下面是我的代码的相关部分

  const detect = () => {
    //console.log(`time is ${idleStartTime}`);
    if(Date.now() - getIdleStartTime() > ONE_HOUR){
      console.log('idle time more than one hour....');
      console.log(`${getIdleStartTime()} ended`);
      alert('idle time more than one hour....');
    } else {
      idleAnimationFrameId = requestAnimationFrame(function() {
        detect();
      });
    }
  };

  const startTimer = () => {
    idleAnimationFrameId = requestAnimationFrame(function() {
      detect();
    });
  };

  function setIdleStartTime() {
    return new Promise((resolve, reject) => {
      if (storageAvailable('localStorage')) {
        // Yippee!
        localStorage.setItem('idleStartTime', Date.now());
        console.log('idle time has been set...');
        resolve(true);
      }
      else {
        // Too bad, no localStorage for us
        console.log('no local storage support...');
        reject('no local storage support.')
      }
    });
  }

如果通过列出以下事件，我将用户标记为活动。 ['mousedown', 'mousemove', 'keydown', 'scroll', 'touchstart'];

  function setEventListners() {
    activityEvents.forEach(function(eventName) {
      document.addEventListener(eventName, activity, true);
    });
  }

  function activity() {
    console.log('user activity detected...');
    localStorage.setItem('idleStartTime', Date.now());
  }

我看到在某些情况下，有 1.5K 请求在很短的时间内发送到 localstorage 以设置该值。 我看到user activity detected...在几秒钟内在控制台上打印了大约 1.5k 次。

我的几个问题是

1. 当我在 localStorage 中设置idleStartTime值时会出现任何性能问题，并且本地存储集将在几秒钟内被调用数千次。

2. 有没有比在我的场景中使用 localStorage 更好的警报器。

谢谢。

Answer 1

问题 1 的回答

不会有内存限制问题，因为每次调用localStorage.setItem ，都会覆盖之前的值。 但是您提到您的活动更改在很短的时间内触发了 1.5K 次。 这将增加磁盘使用（I/O）时间。

问题 2 的回答

1. 您可以使用 setTimeout 代替事件侦听器。 许多网站使用 setTimeout 1 或 2 分钟来检测空闲时间。 逻辑是检查您的所有输入字段是否与 2 分钟前相同。 如果它们相同，则认为该页面在这段时间内处于空闲模式。 我知道这种方法看起来很古老，但它会显着减少 I/O 时间。
2. 您可以跳过光标移动事件。 仅此一项就可以大量减少检查。