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

Question

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

浏览器真的是这样工作的吗？是否有关于此行为的详尽文档？

Answer 1

DOM 元素具有属性 和特性。

如果您更改属性，例如value="" 然后 DOM 被更改。
但是表单元素的当前 value 存储在 property 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;
};

Live Demo (JSFiddle)

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

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

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