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

我想重新绘制页面中包含大量DOM元素的部分。理想情况下，我想设置

可见性：隐藏，重新绘制部分，然后设置
可见性：可见。然而，Chrome似乎忽略了我设置CSS的javascript

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

如果SO代码片段不起作用，我还做了一个修改


//调试器；
var container=document.getElementById（“容器”）；
container.style.visibility=“hidden”；
//调试器；
//在我的例子中，一些绘制SVG元素的d3代码
//在本例中，是使浏览器工作x秒的东西
var延迟=3000，
计数器=1000；
var t0=新日期（）.getTime（），
t1=未定义；
而（（t1=新日期（）.getTime（））=t0+计数器）{
控制台日志（计数器）；
计数器+=1000；
}
}
container.style.visibility=“可见”
#容器{
边框：1px点红色；
宽度：100%；
身高：100%；
}

一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
一些DOM元素
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);

var container=document.getElementById（“容器”）；
container.style.visibility=“hidden”；
setTimeout（函数（）{
//在我的例子中，一些绘制SVG元素的d3代码
//在本例中，是使浏览器工作x秒的东西
var延迟=3000，计数器=1000；
var t0=新日期（）.getTime（），t1=未定义；
而（（t1=新日期（）.getTime（））=t0+计数器）{
控制台日志（计数器）；
计数器+=1000；
}
}
container.style.visibility=“可见”；
}, 0);

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

基本上，可以将其视为一个大的单线程进程。
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);

var container=document.getElementById（“容器”）；
container.style.visibility=“hidden”；
setTimeout（函数（）{
//在我的例子中，一些绘制SVG元素的d3代码
//在本例中，是使浏览器工作x秒的东西
var延迟=3000，计数器=1000；
var t0=新日期（）.getTime（），t1=未定义；
而（（t1=新日期（）.getTime（））=t0+计数器）{
控制台日志（计数器）；
计数器+=1000；
}
}
container.style.visibility=“可见”；
}, 0);

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

基本上，把它看作一个大的单线程进程