Databases
StackOverflow2013
Postsdbo
POFirefox: first DOM action after appending big tree awfully slow
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFirefox: first DOM action after appending big tree awfully slow
    primarykey
    data
    text
    <p>I have the following JS pseudo code:</p> <pre><code>var tree = $('&lt;div id="root"&gt;&lt;/div&gt;'); tree = build_big_tree(); // appends ~250 rows / 3000 DOM elements incl. 1 &lt;audio&gt; per row $('body').append(tree); some_DOM_call(); </code></pre> <p>The code runs fine across browsers, but on firefox (13, on Ubuntu), <code>some_DOM_call()</code> is incredibly slow (about 10s for 250 rows, when the whole JS runs in under 1s). I found this using <code>console.timeStamp()</code> in the code until I found the culprit.</p> <p>The 10s are roughly proportional to the number of rows. Actual page is at <a href="http://wikiotics.org/fr/FSI-French-basic-course-revised-volume-01-unit-01-lesson-01?view=edit" rel="nofollow">http://wikiotics.org/fr/FSI-French-basic-course-revised-volume-01-unit-01-lesson-01?view=edit</a></p> <p>Besides the time it takes, the most annoying part is that the whole browser becomes unusable for those 10s, even other tabs.</p> <p>some_DOM_call() is originally jQuery code, but I narrowed it down to <code>elem.offsetWidth</code> (in jQuery cssHooks() for the curious). When I commented out some_DOM_call(), the following DOM access caused the 10s delay (<code>body.appendChild(OBJECT)</code>). So it doesn't seem to matter what I do, as long as it's a DOM related action, it will take the hit.</p> <p>Firebug doesn't show me what's going on during those 10s, so I can only guess it's related to rendering the tree I inserted in the page. But I might be wrong.</p> <p>How can I figure out what is actually going on, so I can improve things?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USLaurent S
    1. USLaurent S
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COWhat happens when you remove the <audio> tag from each row?
      singulars
      1. POFirefox: first DOM action after appending big tree awfully slow
      1. USGraham
    2. COgood point. With no audio (or just 1), it loads in less than 3s, and no freezing.
      singulars
      1. POFirefox: first DOM action after appending big tree awfully slow
      1. USLaurent S
    3. COSo <audio> would be the culprit? I must mention that it is set to not preload audio?
      singulars
      1. POFirefox: first DOM action after appending big tree awfully slow
      1. USLaurent S
 

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