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

<强> Live Demo (JSFiddle)

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

但如果您点击attr-change，它就会变为绿色，因为该属性会发生变化。

此外，如果您重新加载并输入例如test进入attr-change，然后按test您会看到它将变为绿色，但{{1}}仍将是当前值。

表单值缓存如何在浏览器中运行？

1 个答案: