Question

我正在尝试强制进行同步重绘。这可能吗？

不幸的是，我正在使用的库通过XMLHttpRequest.prototype.open(_, _, false)发送长时间运行的同步请求。我试图通过猴子修补XMLHttpRequest.prototype.send发送请求之前使用加载指示器更新页面，但是，opacity: 0.7样式从未见过：

const oldSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(...args) {
  document.body.style.opacity = "0.7";

  // is there something I can do to force a repaint on this line?

  const retVal = oldSend.bind(this)(...args);
  document.body.style.opacity = "1";
  return retVal;
}

我的大多数研究建议重构异步的东西：

但是，我无法控制发出同步请求的代码。

编辑：另一篇相关文章：

Force UI repaint in Webkit (Safari & Chrome) right before Synchronous "Ajax" request

Answer 1

在执行同步代码的过程中无法进行屏幕更新的原因说明可以在HTML spec中找到：

8.1.4.1定义

要协调事件，用户交互，脚本，呈现，网络等，用户代理必须使用本节中所述的事件循环。

这意味着渲染是与事件循环相关的单独调用，与执行脚本的调用相关。

这在处理模型下进一步详述：

8.1.4.2处理模型

....选择一个任务并运行它[步骤1-6]


更新渲染：如果此事件循环是浏览上下文事件循环（而不是工作程序事件循环），则运行以下子步骤。

...

因此，在从事件循环中的单个调用中执行同步代码的过程中，无法从浏览上下文中更新屏幕。

将同步代码移动到Web worker可能构成解决方案的基础（worker在单独的线程中执行）但不在此答案的范围内。

Answer 2

根据对问题，研究和我自己的经验的评论，看起来这是不可能的。

对于我的用例，我将通过在页面上始终设置动画的内容使页面“冻结”加载指示符。或者，更有可能的是，放弃加载指示器功能。

是否可以强制在js中进行同步重绘？

2 个答案: