javascript - 是否可以在浏览器中检测重绘/回流？

Question

不确定是否有解决此问题的方法。我想知道是否有一种方法可以检测浏览器何时实际更新用户界面。

假设我想在运行长时间运行的同步代码块之前向元素添加一个类，在同步函数运行之后，该类将被删除。

el.classList.add('waiting');
longRunningSynchronousTask();
el.classList.remove('waiting');

如果我运行这段代码，长时间运行的任务将启动，并在添加类之前阻止 UI。我尝试使用 MutationObserver，并使用 getComputedStyle 检查元素，但这不起作用，因为这些不会反射(reflect)实时更新 UI 的时间。

使用 worker 可能是最好的解决方案(将长时间运行的代码放在 worker 中，并在完成时发布消息以删除该类)。这不是我真正的选择，因为需要支持旧版浏览器。

除了实现 worker 之外，唯一可行的解​​决方案是使用 setTimeout。我很想知道是否有人遇到过这个问题，以及是否有任何方法可以检测浏览器中 UI 的重绘/回流。

请参阅我的示例以更好地说明问题。

const el = document.querySelector('.target');
const isRed = c => c === 'red' || 'rgb(255, 0, 0)';

let classActuallyApplied = false;

let requestId;

const longRunningTask = (mil, onComplete) => {
  if (classActuallyApplied) {
    cancelAnimationFrame(requestId);
    var start = new Date().getTime();
    while (new Date().getTime() < start + mil);
    onComplete();
  } else {
     requestId = requestAnimationFrame(longRunningTask.bind(null, mil, onComplete));
  }
}

const observer = new MutationObserver(function(mutations) {
	classActuallyApplied = mutations
  	.filter(mutation => {
			return mutation.type === 'attributes' &&
      	mutation.attributeName === 'class' &&
        mutation.target.classList.contains('waiting');
		}).length > 0;
});

const observerConfig = {
	attributes: true, 
	childList: false, 
	characterData: false 
};

observer.observe(el, observerConfig);

el.addEventListener('click', e => {
	el.classList.add('waiting');
  longRunningTask(1000 * 5, () => {
  	// el.classList.remove('waiting');
  });
});

.target {
  height: 100px;
  width: 100px;
  background-color: gray;
}

.waiting {
  background-color: red;
}

<div class="target">
  target
</div>

Answer 1

我相信requestIdleCallback正是您要找的。

来自 developers.google.com 2016 :

In the same way that adopting requestAnimationFrame allowed us to schedule animations properly and maximize our chances of hitting 60fps, requestIdleCallback will schedule work when there is free time at the end of a frame, or when the user is inactive.

这是一项实验性功能，但(截至 2021 年 3 月)大多数现代浏览器都支持它。参见 MDN Compatibility Table和 caniuse.com .