Is there a faster way to get width/height properties of many elements that are stored in memory and not in the DOM?
<p>I am looking for advice regarding the fastest way to get the height/width of multiple elements that are stored in memory and NOT in the dom itself.</p>

<p>First some background:</p>

<p>This app involves the horizontal scrolling of many elements in a column style layout, most of which contain images which may or may not be scaled.</p>

<p>While IE and Firefox handle this fine, Chrome does not.  In Chrome we get slowdown when we start reaching 200 or so scaled images.  From my research it is clear that this is down to the way in which chrome scales images.</p>

<p>Therefore, I took an infinite scrolling style approach.  An array of objects are created in memory with each object referencing some in memory html as well as various other properties like its left/top positions.</p>

<p>We monitor the viewport during scroll adding any newly visible elements as they appear and removing any hidden ones.  Leaving the browser to only ever have to deal with around 10-15 scaled images at any given time.</p>

<p>The result is perfect in all browsers.  However there is a slight complication.  We use media queries to determine the column width, therefore the dom elements themselves will resize depending on the viewport size.</p>

<p>When all the elements were in the dom retrieving their heights/widths to perform their position calculations was easy.  Now of course the elements are stored in an in memory array so in order to retrieve their heights/widths we need to temporarily put them back into the dom, retrieve the data, remove them again then perform the layout calculation to re-position the elements into their columns.</p>

<p>The way I have done this is as follows:</p>

<pre><code>reLayoutStream : function(){

            var self = this;
            var elLength =  self.cache.sections.length;
            var refHeight = self.cache.stream.offsetHeight;
            self.cache.streamoffset = (self.getfastLeftOffset(self.cache.stream) + self.scrollbarleft);

            if(elLength){

                var marginright = 15;
                var marginbottom = 5;
                var top = 0;
                var left = 0;
                var csstransform = self.getsupportedprop(['transform', 'MozTransform', 'WebkitTransform', 'msTransform', 'OTransform']);

                for (var i = 0, len = elLength; i &lt; len; i++) {

                 // THIS IS THE PART THAT CONCERNS ME
                    var tempnode = self.cache.sections[i].html.cloneNode(true);
                    tempnode.style.visibility = 'hidden';
                    self.cache.stream.appendChild(tempnode);
                    self.cache.sections[i].width = tempnode.offsetWidth;
                    self.cache.sections[i].height = tempnode.offsetHeight;
                    self.cache.stream.removeChild(tempnode);
                 //
                    var el = self.cache.sections[i].html;
                    var width = self.cache.sections[i].width;
                    var height = self.cache.sections[i].height;

                    if((top + height) &gt; refHeight){
                        top = 0;
                        left += (width + marginright);
                    }
                    self.cache.sections[i].visible = false;
                    self.cache.sections[i].offset = (left + self.cache.streamoffset);
                    self.cache.sections[i].left = left;
                    self.cache.sections[i].top = top;


                    if(csstransform){
                        el.style[csstransform] = 'translate3d(' + left + 'px, ' + top + 'px, 0)';
                    }
                    else {
                        el.style.top = top + 'px';
                        el.style.left = left +'px';
                    }

                    top += (height + marginbottom);

                    if(i == (elLength-1)){
                        left += width;
                    }
                }
                self.cache.stream.style.width = left + 'px';
                self.cache.scrollstart = 0;
                self.cache.scrollend = elLength;
                self.cache.stream.innerHTML = '';
                self.checkVis(true);
            }
        },
</code></pre>

<p>The above is my current complete re-layout function.  This is called in a throttled manner on resize once resizing stops so as to keep resizing the browser fast.</p>

<p>Within this function is the following section:</p>

<pre><code>    for (var i = 0, len = elLength; i &lt; len; i++) {
        var tempnode = self.cache.sections[i].html.cloneNode(true);
        tempnode.style.visibility = 'hidden';
        self.cache.stream.appendChild(tempnode);
        self.cache.sections[i].width = tempnode.offsetWidth;
        self.cache.sections[i].height = tempnode.offsetHeight;
        self.cache.stream.removeChild(tempnode);
   }
</code></pre>

<p>This is the part that concerns me.  I would like to know if there is any faster way of adding all these in memory elements to the dom, retrieving their height/width data, and then removing them. </p>

<p>I have thought about creating a temporary fragment, appending the elements to that then inserting the whole fragment into the dom in order to avoid appending multiple children to a in DOM node, however surely I would then be required to loop through the elements once again in order to retrieve their properties.  Would this be any faster?  Or is there any faster way?</p>

<p>Thanks in advance.</p>
