I'm trying to recursively re-apply CSSStyleDeclaration objects to each node in my document's innerHTML. For example, if you call window.getComputedStyle(document.getElementsByTagName("a")[0]) on this page, there are about 650 different properties in the hash that gets returned. Let's say I had 1000 nodes in my document's innerHTML. As I loop through the innerHTML and apply the styles in each CSSStyleDeclaration hash, that is 650,000 calls to node.style.setProperty(key, value). However, by iterating through a loop, I'm doing each node one by one. Instead, it would be far more efficient to make 1000 calls to the DOM at once instead of doing this loop. Thing is, if this is possible in Chrome, I don't know how.
My suspicion is that Chrome has a GIL (for lack of a better word) on the entire DOM, but this may just be superstition. If not that, I'd assume the lock is on a node level. But again, total superstition. I'm operating in a factless environment on this one. If you have any pointers, I'd greatly appreciate it.
First of all, the DOM is specified as not being thread-safe, so there's very little chance that you'll be able to apply these properties concurrently. Besides, javascript is not parallel, so to perform these tasks in parallel, you'd have to use a WebWorker, which cannot access the DOM as it is, alas, not thread-safe.
Secondly, why don't you just create a stylesheet inside your document, and use insertRule to append a new, dynamically-created rule, and let the browser's rendering engine do the work for you?