javascript - 浏览器在繁重的工作量之前不应用样式

标签 javascript html css google-chrome dom

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 8 年前。

Improve this question

我想重绘页面中包含大量 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 线程释放或某些原因导致它必须呈现。

您可以将您的代码移动到一个回调函数中，该回调函数将在……好吧，0 毫秒后运行，或者在 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 更改要渲染，所以它会这样做并重新绘制。然后运行您的回调。

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

关于javascript - 浏览器在繁重的工作量之前不应用样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26151493/

上一篇：html - Flexbox:设置边框

下一篇：html - 如何在将图像设置为我的网站背景时避免图像重复？

相关文章：

javascript - 为什么我的脚本不会在鼠标单击时更新？

javascript - 在将 ajax 请求发送到服务器之前，我如何实现确认对话框/框？

javascript - while 循环中的链接 promise 未正确返回值

HTML/CSS - div 内的环绕矩形？

html - 我将如何重新排列 CSS 中内联 block 的顺序？

javascript - backbone fetch前的.css()样式不起作用-Jquery

javascript: <body onload =""> 和 window.onload

html - 图像 slider 中 div 之间的神秘差距

javascript - 添加 css 类后选择选项文本部分消失

javascript - Fancybox.. 一张图片包含更多图片

©2024 IT工具网  联系我们