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

时间：2014-10-01 22:07:20

标签： javascript html css google-chrome dom

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

如果您取消注释debugger行，您会发现Chrome在调试时实际上正确呈现了内容。这可能不是特定于Chrome的。

如果SO代码段不起作用，我也制作了jsFiddle。

＆＃13;
＆＃13; 
//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";
＆＃13; 
#container {
  border: 1px dotted red;
  width: 100%;
  height: 100%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

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更改来渲染，所以它会这样做并重新绘制。然后运行你的回调。

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

相关问题
最新问题