Javascript 表单值缓存在浏览器中是如何工作的？

我在文档的某个地方读到，大多数浏览器不会随着表单值的变化而更新DOM，因为频繁的DOM操作需要很高的计算性能。相反，它们创建表单值缓存以注册表单操作，并且仅在提交表单时更新DOM

浏览器真的是这样工作的吗？有关于这种行为的大量文档吗

DOM元素具有属性和属性

如果更改属性，例如

值=“

，则DOM将更改。
但是表单元素的当前

值

存储在属性

值

中，当用户在输入字段中键入某个内容时，该属性会发生更改

如果属性更改，则需要重新检查css规则，如果某些规则不再适用，或者某些规则现在将适用

这里有一个小例子：

CSS

HTML

如果您在当前的FireFox或Chrome中尝试此操作，并键入

bar

或单击

prop change

则颜色不会变为绿色

但是，如果单击属性更改，则它将变为绿色

---

此外，如果重新加载并在其中键入例如

test

，然后按

attr change

，您会看到它将变为绿色，但

test

仍将是当前值。

这很容易测试。你试过什么？不确定我是否正确理解你的问题。DOM元素具有属性和属性。如果更改属性，例如

值=”

，则DOM将更改。但是

表单

元素的当前值存储在属性

值

中，当用户在

输入

字段中键入内容时，该值会发生更改。如果属性改变，css规则需要重新检查，如果一些不再适用，或者其他一些现在将适用。佳能：检查Chrome的DOM检查器，似乎所有输入字段值都保持不变。然而，在Firefox的调试器中，当我在任何输入字段中键入任何内容时，所有内容似乎都会立即更新。t.niese：这似乎是正确的，但在这种情况下，为什么Firefox的DOM检查器也会显示更新的属性？@kdani我需要检查，但是，如果在当前的firefox或chrome中打开并键入

bar

或单击

prop change

，则颜色不会变为绿色。但是，如果单击属性更改，则它将变为绿色。此外，如果重新加载并在其中键入例如

test

，然后按

attr change

，您会看到它将变为绿色，但

test

仍将是当前值。

[value='foo'] {
    color: red;
}

[value='bar'] {
    color: green;
}

<input id="text-element" type="text" value="foo"><br>

<a href="#" id="prop-change">prop-change</a>
<a href="#" id="attr-change">attr-change</a>

document.getElementById("attr-change").onclick = function() {
    document.getElementById("text-element").setAttribute("value","bar");
    return false;
};

document.getElementById("prop-change").onclick  = function(e) {
    document.getElementById("text-element").value = "bar";
    return false;
};