javascript - 表单值缓存如何在浏览器中工作？

Question

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

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

Answer 1

DOM 元素具有属性和属性。

如果你改变了一个属性，例如，value=""那么 DOM 就会改变。
但是value表单元素的当前值存储在属性 value中，当用户在输入字段中输入某些内容时，它会发生变化。

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

这里有一个小例子：

CSS

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

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

HTML

<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>

JS

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;
};

现场演示（JSFiddle）

如果您在当前的 FireFox 或 Chrome 中尝试此操作并键入bar或单击prop-change颜色不会变为green。

但是如果你点击attr-change它会变成绿色，因为属性发生了变化。

此外，如果您重新加载并在其中键入 egtest然后按attr-change，您会看到它会变成绿色，但test仍将是当前值。