How expensive is it to set/read the disabled property in HTML form fields?

Question

I am working on an application which has a lot of validations in the form:

...
// oversimplified and abstracted away from the real code
disableField: function() {
    var disable = this.canDisableField();
    if (this._wasDisabled != disable) {
        this.field.setDisabled(disable);
        this._wasDisabled = disable;
    }
    ...
},

...

I understand what it's doing is preventing the field (which ends up being an HTML button) to be disabled again and again if it's already disabled.

My question is, is it reading and seting the disabled property on HTML form fields really expensive operations? and, do the cost really compensates the extra code for preventing them?

I know that touching the DOM always has a cost, but today I had to do some hard debugging just to find out that these kinds of validations were injecting problems in the subclasses, I would never have found the problem if I hadn't had access to the base class code.

Answer 1

Any single operation in doom is very negligible performance wise. Unless you're gonna repeat this operation more than 10000 times a second, it is not expensive.

As people always say: "premature optimization is the root of all evil".

If the page becomes slow, you should try to do something, until then, you should focus on making it work properly.