如何在浏览器形式的价值缓存的工作？ [英] How does form value caching work in browsers?

问题描述

我，作为表单值改变大多数浏览器不更新DOM，因为频繁的DOM操作需要繁重的计算性能文档中某处读取。相反，他们创建表单值的高速缓存登记表格操作，只有更新时，提交表单的DOM。

I've read somewhere in a documentation that most browsers don't update DOM as form values change, because frequent DOM manipulation need heavy computing performance. Instead, they create a cache of form values to register form manipulation, and only update the DOM when a the form is submitted.

难道真的浏览器这种方式工作？有没有关于此行为的大量文件？

Do browsers really work this way? Is there an extensive documentation about this behavior?

推荐答案

DOM元素具有的属性的和的属性的

DOM elements have properties and attributes.

如果您更改属性如在值=则DOM被改变。结果
但表单元素的电流值存储在属性的值，这是被改变，当用户键入的东西如一个到输入字段

If you change an attribute e.g. the value="" then the DOM is changed.
But the current value of a form element is stored in the property value and this is the one that is changed when the user types something e.g. into an input field.

如果属性改变的CSS规则需要重新检查，如果有些不适用了或者某些人现在都将适用。

If the attribute changes the css rules needs to be rechecked if some don't apply anymore or some others will apply now.

这里一个小例子：

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

Live Demo (JSFiddle)

如果您在目前的Firefox或Chrome，然后键入栏或点击试试这件托换颜色不改变到的绿色的

If you try this in current FireFox or Chrome and type bar or click on prop-change the color is not changing to green.

但是，如果你点击 ATTR变化它原来的绿色的，因为属性的变化。

But if you click on attr-change it turns green because the attribute changes.

此外，如果你重新加载并键入例如测试到它，然后preSS ATTR变化你看，它会变成的绿色但测试将仍然是当前值。

Additionally if you reload and type e.g. test into it and then press attr-change you see that it will turn green but test will still be the current value.

这篇关于如何在浏览器形式的价值缓存的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！