Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Let's test!</p> <p>I added the following code to a copy of StackOverflow's Questions page (removing existing scripts first, and running from scratch with one of the timeit()s uncommented each time around, three runs of 100 ops:</p> <pre><code>function timeit(f) { var start= new Date(); for (var i=100; i--&gt;0;) { f(); } return new Date()-start; } var c= document.getElementById('content'); var clones= []; //alert('cloneNode: '+timeit(function() { // clones.push(c.cloneNode(true)); //})) //alert('innerHTML: '+timeit(function() { // var d= document.createElement('div'); // d.innerHTML= c.innerHTML; // clones.push(d); //})) </code></pre> <p>Here are the results running on a VirtualBox on a Core 2 Q9300:</p> <pre><code>IE7 cloneNode: 3238, 3235, 3187 innerHTML: 8442, 8468, 8552 Firefox3 cloneNode: 1294, 1315, 1289 innerHTML: 3593, 3636, 3580 Safari3 cloneNode: 207, 273, 237 innerHTML: 805, 818, 786 Chrome1 cloneNode: 329, 377, 426 innerHTML: 2327, 2536, 2865 Opera10 cloneNode: 801, 791, 771 innerHTML: 1852, 1732, 1672 </code></pre> <p>So cloneNode(true) is much faster than copying innerHTML. Of course it was always going to be; serialising a DOM to text and then re-parsing it from HTML is hard work. The reason DOM child operations are usually slow is that you're inserting/moving them one-by-one; all-at-once DOM operations like cloneNode don't have to do that.</p> <p>Safari manages to do the innerHTML op amazingly quickly, but still not nearly as quickly as it does cloneNode. IE is, as expected, a dog.</p> <p>So, auto -1s all round to everyone who said innerHTML would Obviously Be Faster without considering what the question was actually doing.</p> <p>And yes, jQuery uses innerHTML to clone. Not because it's faster though — read the source:</p> <pre><code>// IE copies events bound via attachEvent when // using cloneNode. Calling detachEvent on the // clone will also remove the events from the orignal // In order to get around this, we use innerHTML. </code></pre> <p>jQuery uses Element.attachEvent() to implement its own event system, so naturally it needs to avoid that bug. If you don't need to, you can avoid the overhead.</p> <p>[Off-topic aside: Then again, I think holding jQuery up as the pinnacle of Best Practice may be a bit mistaken, especially given the next line:</p> <pre><code>html.replace(/ jQuery\d+="(?:\d+|null)"/g, "") </code></pre> <p>That's right — jQuery adds its own arbitrary attributes to HTML elements, and then needs to get rid of them when it clones them (or otherwise gives access to their markup, such as through the $().html() method). This is ugly enough, but then it thinks the best way to do that is processing HTML using regular expression, which is the kind of basic mistake you'd expect more from naïve 1-reputation SO questioners than the author of the Second Coming Best JS Framework Evar.</p> <p>Hope you didn't have the string “jQuery1="2"” anywhere in your text content, 'cos if so you just mysteriously lost it. Thanks jQuery! Thus ends the off-topic aside.]</p>
    singulars
    1. This table or related slice is empty.
    1. PODeep cloning vs setting of innerHTML: what's faster?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USbobince
    1. USbobince
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODeep cloning vs setting of innerHTML: what's faster?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COExcellent analisys. The only small nit is that I was looking to pre-serialize the source innerHTML once, not every time in the loop. But it still turns out slower. Thanks.
      singulars
      1. PO
      1. USlevik
    2. COGreat answer Bobince. Just wondering, what *would* be the best way to drop off these extra attributes? Searching only within angle brackets from a whitelist of HTML elements, or making a DOM element and then using jQuery's `removeAttr()` on it? Perhaps it's a trade-off, it might be much faster at the expense of mangling anyone that uses that string. Although it is rare, there should be some sort of warning in the jQuery docs (I haven't found it if there is)
      singulars
      1. PO
      1. USalex
    3. COWhat I'd do would be to set a JS property for the ID instead of an HTML attribute. IE has a bug where properties are serialised as if they were attributes, but it only kicks in where the property value is a primitive datatype. Object-type properties aren't included in the `innerHTML`. So setting `elementnode.jQueryId45438= [1]` (an Array object) would allow jQuery to put its unique ID on the element without messing up the serialisation and requiring any post-`innerHTML` fixups.
      singulars
      1. PO
      1. USbobince
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload