javascript - 如果我在 Javascript 事件处理程序中更改 DOM，这些更改是递增呈现的，还是只在最后呈现一次？

Question

假设我有以下 javascript 事件处理程序:

function handleEvent(e){
    document.body.style.backgroundColor = 'green';
    longRunningFunction();
    document.body.style.backgroundColor = 'red';
}

浏览器会先显示绿色背景然后再切换成红色吗？还是直接显示红色背景？

根据我的测试，它直接在事件处理程序的末尾显示红色。但那是规范的一部分，还是浏览器恰好是如何实现的？

更新:

我应该澄清一下，我并不是“瞄准”这种效果。相反，我想保证它不会发生。我的一些事件处理程序改变了很多东西，如果我可以假设没有呈现任何中间状态，它会让我的生活更轻松。

Answer 1

这是在 JavaScript 执行环境中会发生的事情:

1. document.body.style.backgroundColor 会将其值更改为 'green'。
2. 将运行一个长时间运行的进程。
3. document.body.style.backgroundColor 会将其值更改为 'red'。

未指定如果 JavaScript 线程被阻塞，backgroundColor 属性的更改将如何影响页面的外观。

这是一个例子。如果你点击单词 hello，你会看到一个轻微的延迟，然后背景会变成红色:

function handleEvent(e){
    document.body.style.backgroundColor = 'green';
    longRunningFunction();
    document.body.style.backgroundColor = 'red';
}

function longRunningFunction() {
    for(var i=0; i<2000000000; ++i) { +i; }
}

document.body.addEventListener("click", handleEvent);

<div>hello</div>

这是因为响应 CSS 属性更改而重绘的浏览器渲染引擎被长时间运行的阻塞 JavaScript 函数阻塞。这不是指定的行为，而是所有浏览器的实现现实。参见 How can I force the browser to redraw while my script is doing some heavy processing?对于类似的问题。

我认为任何给定的浏览器都可以选择与 JavaScript 线程并发运行一个单独的重绘线程，但我认为目前没有任何主流浏览器这样做。这种方法可能存在固有的竞争条件复杂性；我从来没有写过浏览器，所以我不知道。

---

如果您想要显示中间状态，您可以在将backgroundColor 设置为绿色后使用非常快速的setTiemout 调用来清除JavaScript函数堆栈并允许渲染器重绘页面:

function handleEvent(e){
    document.body.style.backgroundColor = 'green';
    setTimeout(function() {
        longRunningFunction();
        document.body.style.backgroundColor = 'red';
    }, 4);
}

这会将 longRunningFunction 和第二次颜色更改排队，以便在未来 4 毫秒内运行。在那空闲的 4 毫秒内，渲染器有机会重绘页面。