表单值缓存如何在浏览器中工作？答案

【问题标题】：How does form value caching work in browsers?表单值缓存如何在浏览器中工作？
【发布时间】：2013-09-25 21:50:10
【问题描述】：

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

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

【问题讨论】：

这很容易测试。你试过什么？
不确定我是否正确理解了您的问题。 DOM 元素有 properties 和 attributes。如果您更改属性，例如value="" 然后更改 DOM。但是 form 元素的当前值存储在 property value 中，这是当用户键入某些内容时更改的值，例如进入input 字段。如果属性发生更改，则需要重新检查 css 规则，如果有些不再适用，或者有些现在将适用。
canon：检查 Chrome 的 DOM Inspector，似乎所有输入字段值都保持不变。然而，在 Firefox 的调试器中，当我在任何输入字段中输入任何内容时，一切似乎都会立即更新。
t.niese：这似乎是正确的，但在这种情况下，为什么 Firefox 的 DOM 检查器也会显示更新的属性？
@kdani 我需要检查一下，但是如果您在当前的 firefox 或 chrome 中打开 jsfiddle.net/4nPnz 并输入 bar 或单击 prop-change，颜色不会变为绿色。但是如果你点击attr-change，它会变成绿色，因为属性发生了变化。此外，如果您重新加载并键入例如test 进入它，然后按 attr-change 你会看到它会变成绿色，但 test 仍然是当前值。

标签： javascript forms dom caching browser

【解决方案1】：

DOM 元素具有 properties 和 attributes。

如果您更改属性，例如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>

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 仍然是当前值。

【讨论】：