`window.matchMedia` 会触发回流吗？

Posted 2023-02-21

【中文标题】`window.matchMedia` 会触发回流吗？

【英文标题】：Does `window.matchMedia` trigger a reflow?

【发布时间】：2020-10-13 16:40:39

【问题描述】：

在构建页面时，我知道当浏览器重新计算页面上所有元素的尺寸和位置时，尽量减少“布局抖动”或“reflow”是一种很好的做法。 Paul Irish 制作了一个handy list 触发回流的过程。他说：

一般来说，所有同步提供布局指标的API都会触发强制回流/布局。

https://developer.mozilla.org/en/docs/Web/API/Window/matchMedia 方法为什么不在此列表中？这不涉及测量窗口大小吗？可以不用担心造成回流吗？

【参考方案1】：

我相信列表是正确的，matchMedia 不会触发重排。所有媒体查询都经过精心设计，不依赖于页面内容。例如，width 已被指定为视口宽度包括滚动条，因此无论是否有滚动条，结果都不会改变。