Question

过去，我还使用了将requestAnimationFrame与其绑定在一起的调整大小侦听器，作为轮询调整大小事件的某种优化版本：

/**
 * Resize listener
 * @return {function}
 */
export const optimizedResize = (function () {
  let callbacks = [],
    running = false;

  // fired on resize event
  function resize() {
    if (!running) {
      running = true;

      if (window.requestAnimationFrame) {
        window.requestAnimationFrame(runCallbacks);
      } else {
        setTimeout(runCallbacks, 66);
      }
    }
  }

  // run the actual callbacks
  function runCallbacks() {
    callbacks.forEach((callback) => {
      callback();
    });

    running = false;
  }

  // adds callback to loop
  function addCallback(callback) {
    if (callback) {
      callbacks.push(callback);
    }
  }

  return {
    // public method to add additional callback
    add(callback) {
      if (!callbacks.length) {
        window.addEventListener('resize', resize);
      }
      addCallback(callback);
    },
  };
}());

我最近遇到addListener()，这很尴尬，我必须说我不熟悉。尽管它说它只是addEventListener()的别名，但语法似乎很简单，可以监听更改：

const viewportMediumMin = window.matchMedia(`(min-width: 768px)`);

viewportMediumMin.addListener(checkScreenSize);

但是，我要找出的是addListener()等同于：

window.addEventListener('resize', function() {
    console.log('addEventListener - resize');
}, true);

或者，如果它在幕后做些“更聪明”的事情，那么我应该专门依靠它，而与我提到的optimizedResize方法相比。我真的只对媒体查询更改的特定事件感兴趣，而不是找出每个像素宽度的变化。感谢您的帮助！

Answer 1

这基本上是在重新发明轮子。 CSS3可以在不同的屏幕尺寸上优雅地设置页面内容的样式，并添加了媒体查询以在某个断点处更改页面的外观。这些断点在当今的Web开发中很常见，并且现代CSS引擎经过了优化，可以尽快执行更改。因此

 window.matchMedia(`(min-width: 768px)`).addListener(/*...*/)

可能非常高效，因为CSS引擎检测到该事件，然后将该事件重定向到JS引擎。将监听器添加到resize可能会更慢，因为每个像素变化都会导致JS事件，而未经优化的JavaScript必须弄清楚是否传递了断点。您的optimizeResize并没有真正改变。

幕后的addListener

1 个答案: