在设备方向更改期间隐藏DOM元素？

Question

在移动设备（低端/中间层）上更改方向时，例如在浏览器中打开stackoverflow，在一小段时间内可以看到明显的白色区域。见下面的gif。

要为自己重现，请打开stackoverflow.com或Chrome中包含大量DOM元素的任何网站。按f12，按ctrl + shift + m（打开设备工具栏），选择一个设备并将Online更改为例如Mid-tier mobile，然后您只需点击rotate按钮即可观察白色区域。

当然，根本原因是存在的DOM元素的数量（它们不必在视口本身中）。如果您要执行与上述相同的操作，例如，在此问题的页面上，则很难观察滞后/白色区域。

解决方案是隐藏那些包含大量DOM元素的容器，并进一步提高性能，隐藏那些落在视口之外的元素（带有给定的安全区域）。

但是，不幸的是，没有ondeviceorientationStart和ondeviceorientationEnd这样的东西，或者可以利用的媒体查询...所以问题是，是否存在钩子/技术在方向更改 期间隐藏元素？

编辑：按照建议，resize事件是我们所有人都会开始的地方。然而，这一事件来得很晚。如果我们继续使用stackoverflow站点并隐藏所有元素，那么在方向更改发生后，这些元素将被隐藏。片段：

window.addEventListener("resize", function() {
  var els = document.querySelectorAll(".-summary"),
    i = 0,
    l = els.length;

  for (i; i < l; i++) {
    els[i].style.display = "none";
  }
});

Answer 1

css media query有这个选项：

@media screen and (min-width: 300px) and (orientation: landscape) { }

@media (min-height: 680px), screen and (orientation: portrait) { }