浏览器在繁重的工作量之前不应用样式[关闭]

【问题标题】：Browser does not apply style before heavy workload [closed]浏览器在繁重的工作量之前不应用样式[关闭]
【发布时间】：2014-11-26 21:23:42
【问题描述】：

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

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

万一SO代码sn-p不起作用，我还发了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>

【问题讨论】：

  • 在没有任何 DOM 操作代码的情况下，我们如何才能确定您的 DOM 操作是如何落后于 Chrome 的？没有什么可处理的了。请发布您的实际 DOM 代码，以便我们知道发生了什么。
  • 也许我的标题具有误导性，但我的代码显示 Chrome 挂起。所以这不是 DOM 操作代码。
  • 那么标题 具有误导性 - 我无法弄清楚您到底想问什么，但我建议将其更新为更清晰的内容。就目前而言，我根本不明白这个问题。

标签： javascript html css google-chrome dom


【解决方案1】：

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 个大单线程进程。

【讨论】：

  • 谢谢，效果很好！仅供参考，我必须将延迟更改为至少 10 毫秒或 100 毫秒才能正常工作。
猜你喜欢
  • 1970-01-01
  • 2010-10-13
  • 1970-01-01
  • 1970-01-01
  • 2012-11-05
  • 2012-02-03
  • 1970-01-01
  • 2012-08-05
  • 2015-07-27
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode