javascript - 在 javascript dom 操作后强制在 Internet Explorer 中刷新 DOM

Question

情况是这样的。我有一些如下所示的 JavaScript:

function onSubmit() {
    doSomeStuff();
    someSpan.style.display="block";
    otherSpan.style.display="none";
    return doLongRunningOperation;
}

当我将其设为表单提交操作并从非 IE 浏览器运行它时，它会快速交换两个跨度可见性并运行长 JavaScript 操作。如果我在 IE 中执行此操作，直到 onSubmit() 完全返回后才会进行交换。

我可以通过像这样粘贴警报框来强制 dom 重绘:

function onSubmit() {
    doSomeStuff();
    someSpan.style.display="block";
    otherSpan.style.display="none";
    alert("refresh forced");
    return doLongRunningOperation;
}

此外，明显的 jquery 重构不会影响 IE 行为:

function onSubmit() {
    doSomeStuff();
    $("#someSpan").show();
    $("#otherSpan").hide();
    return doLongRunningOperation;
}

此行为存在于 IE8 和 IE6 上。在这些浏览器中是否有强制重绘 DOM 的方法？

Answer 1

Mozilla(也许还有 IE)将缓存/延迟执行影响显示的 DOM 更改，以便它可以立即计算所有更改，而不是在每个语句后重复计算。

要强制更新(强制立即、同步重排或重新布局)，您的 JavaScript 应读取受更改影响的属性，例如someSpan 和 otherSpan 的位置。

(视频 Faster HTML and CSS: Layout Engine Internals for Web Developers 中提到了 Mozilla 实现细节。)