浏览器在繁重的工作负载之前不应用样式

Browser does not apply style before heavy workload

本文关键字：应用 样式 负载 工作 浏览器      更新时间：2023-09-26

我想重新绘制页面中包含大量DOM元素的部分。理想情况下，我想设置visibility: hidden;，重新绘制部分，然后设置visibility: visible;。然而，Chrome似乎忽略了我设置CSS的javascript。

如果取消对debugger行的注释，您将看到Chrome在调试时确实正确地呈现了内容。这可能不是Chrome特有的。

如果SO代码片段不起作用，我还制作了一个jsFiddle。

//debugger;
var container = document.getElementById("container");
container.style.visibility = "hidden";
//debugger;
// In my case, some d3 code that draws SVG elements
// In this case, something that makes the browser work for x seconds
var delay = 3000,
  counter = 1000;
var t0 = new Date().getTime(),
  t1 = undefined;
while ((t1 = new Date().getTime()) <= t0 + delay) {
  if (t1 >= t0 + counter) {
    console.log(counter);
    counter += 1000;
  }
}
container.style.visibility = "visible";
#container {
  border: 1px dotted red;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
  <div>Some DOM Element</div>
</div>

Chrome不会立即应用您的DOM更改，直到javascript线程释放或某些原因导致它必须进行渲染。

您可以将代码移动到回调函数中，该函数将在…之后运行。。。嗯，0ms，或者JS引擎下次可以运行它的时候。

var container = document.getElementById("container");
container.style.visibility = "hidden";
setTimeout(function () {
    // In my case, some d3 code that draws SVG elements
    // In this case, something that makes the browser work for x seconds
    var delay = 3000, counter = 1000;
    var t0 = new Date().getTime(), t1 = undefined;
    while ((t1 = new Date().getTime()) <= t0 + delay) {
        if (t1 >= t0 + counter) {
            console.log(counter);
            counter += 1000;
        }
    }
    container.style.visibility = "visible";
}, 0);

所以你的代码会改变你的可见性CSS，注册一个回调来运行下一个，然后返回。然后浏览器有一个要渲染的dom更改，所以它会这样做并重新绘制。然后运行回调。

基本上，将其视为一个大型的单线程进程。

相关文章：