Efficiency of if (domElem.att!=newVal) domElem.att=newVal

[Csaba Gabor]

Are the browsers generally efficient about checking when
domElem.att=newVal does not require any work, or (?) is this something
that it makes sense to do in my javascript via
if (domElem.att!=newVal) domElem.att=newVal

For example,
elemIFrame.src = possiblyNewURL;
elemSelect.options[optionIndex].text = possiblyNewVal;
elem.style.display = possiblyToggleDisplay; // "" or "none"
elem.style.visibitility = possiblyToggle; // "visible" or "hidden"
elem.innerHTML = possiblyNewHTML;

If I just consider this last case and suppose that I have a div whose
innerHTML is <font color=red>foo</font> and then update the innerHTML
of the div to be the same thing, then the browser must replace the
element. To see this, consider the following script - though the
behaviour is different in FF vs. IE, in both cases, the <font...>
element is replaced as is demonstrated by the fact that clicking the
first time gets you different behaviour than clicking the second time.

<div id=mydiv><font color=red onclick="
var iH=this.parentNode.innerHTML;
alert(iH);
this.parentNode.innerHTML=iH">Click me</font></div>
<script type='text/javascript'>
var mydiv=document.getElementById('mydiv');
var myfont=mydiv.childNodes[0];
myfont.onclick=function() {
var iH=this.parentNode.innerHTML;
alert("next Time around you won't see this message\n\n"+iH);
this.parentNode.innerHTML=iH; }
</script>

But the question for me is: does the browser take time to redo the
display or does it realize that there is no change? Of course, there
may be certain event handlers monitoring whether the DOM has changed,
in which case the page must be recalculated. But suppose that all
properties/attributes (e.g. CSS settings) that could possibly affect
the display are the same.

The other cases I mentioned above are a bit simpler in nature, since
they don't change the DOM itself. Still, I am more interested in the
answers to them. Ultimately, I wonder if anyone has practical
experience or done any testing along these lines.

Regards,
Csaba Gabor from Vienna

 

[Thomas 'PointedEars' Lahn]

Are the browsers generally efficient about checking when
domElem.att=newVal does not require any work, or (?) is this something
that it makes sense to do in my javascript via
if (domElem.att!=newVal) domElem.att=newVal

There can be no definitive answer to that question. First of all, you have
to define "the browsers". Of course another test for value generally
reduces efficiency in the worst case.

[...]
If I just consider this last case and suppose that I have a div whose
innerHTML is <font color=red>foo</font> and then update the innerHTML

Eeek. Learn about CSS.


PointedEars

 

[Csaba Gabor]

Another PointedEars INC post

There can be no definitive answer to that question.

Notice that word 'generally' in there? It's not just
lolligagging about, it's got a purpose. It might be
the case (though unlikely) that there is no definitive
answer, but that would still not make your statement
less wrong, since your assertion is that there can't
be a definitive answer as opposed to there not being
one. Not that you've supplied a shred of evidence to
back up your assertion.

First of all, you have to define "the browsers".

No, I do not - I left that up to whoever wanted to
respond. In the absence of any useful data on my part
any well considered response would have been
interesting. A well considered response would have
included citation of a reference, experimental data,
or at least reasoning. However, FF/IE/Opera info
would have been especially interesting.

Of course another test for value generally
reduces efficiency in the worst case.

Doh! And yet, even this trivial, can't-go-wrong
observation, has missed the point of the question.
Even if such a value test is completely pointless,
the time loss will be tiny in comparison to the
overhead of any repaint.

It's sort of like writing
for (var kjhgfdsa=7;--kjhgfdsa;
The space taken up in the code and the confusion
created is probably more significant than the time
hit incurred. One strives to put only relevant
lines into one's code so as to minimize the effort
needed to understand/maintain the code.

[...]
If I just consider this last case and suppose that I have a div whose
innerHTML is <font color=red>foo</font> and then update the innerHTML

Eeek. Learn about CSS.

Eeek. Learn to post.