Ryan said:
Sorry, that's crap - the slowness was from using concatenation with innerHTML.
The following version runs in a few milliseconds:
[...]
So I take it you would lean toward a simple loop to reset all the style
properties to empty rather than cloning nodes and then replacing with clones?
Setting them to empty will accomplish the desired result as there are no inline
styles but possibly some applied from a stylesheet, which should not be removed.
Any other styles present would have been added by a script, and that's what
needs to go away. As a related question, when clearing a style property, would
you set it to the empty string or to null? I'm not too familiar with the inner
workings of JavaScript in general or the JS CSS model specifically, so I'm not
sure what semantics might be going on here.
Without knowing what you are doing, I can't advise one way or the other.
Here's some pros & cons, add weight and consider as appropriate:
*Cloning*
Pro
- you only need one clone per set of identical elements. When it's
time to replace a particular instance, clone the clone and replace.
Maybe copy a few properties across before replacement.
- it's very simple and widely supported.
Con
- if you have lots of clones sitting around for no good reason, it's
wasteful of resources.
*Looping*
Pro
- if restricted to just a few properties, then it's simple and quick.
- minimal memory used for storing values if above approach used.
Con
- getting/setting up to 180 properties when maybe only a few need to
be replaced is wasteful
- there are likely many inconsistencies between platforms for
getting/setting values and resolution of how styles are set - CSS
rule, inline style, element attributes, inheritance... ughhh. Note
my post on getting properties and camelCase versus hyphenated
property names (IE vs Mozilla).
- this would get very complex because of the issues noted above -
Mozilla has 3 background color attributes.
- Storing all the values for many elements may consume more resources
that the cloning alternative. This is doubly wasteful if most of
the properties are never used.
So over all, cloning seems to come out on top. Keep a clone of each
element type and use it as a template to make replacements.