Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here's a version of your code that combines the following performance enhancements:</p> <ol> <li>Only add to innerHTML once at the end of the loop. You want to avoid doing that as often as you can because it causes an entire reparse of all the HTML in that item every time you add onto it. This minimizes the number of transactions with the DOM which can be the slowest part of the whole routine. This improved version cuts the number of DOM transactions a lot. If <code>jItems.length</code> was <code>20</code> and the average number of videos was 5, this would cut the number of DOM transactions to 1/50th the number of DOM transactions.</li> <li>Accumulate string data into an array with <code>.push()</code> and do a <code>.join()</code> at the very end rather than adding onto the end of the string every time. The JS engine can often join lots of strings at once much more efficiently than joining each segment piecemeal.</li> <li>When accumulating string data into arrays, there is no longer a need to initialize the temporaries on each loop or sub-loop.</li> <li>Rather than get <code>pList</code> and then have four references to <code>pList.name</code>, just get the name value once and use it directly.</li> <li>Cache <code>jItems[i]</code> in the loop because it's referenced several places rather than recalculating it every time.</li> <li>Calculate the len variable for each <code>for</code> loop just once and compare to that rather than recalculating it on every iteration.</li> <li>Cache <code>jItems[i]["videos"]</code> once in the outer loop rather than redoing it every time in the inner loop.</li> <li>If there are a large number of items in <code>jsonData.items</code>, then the sort algorithm isn't very efficient since it has to recalculate a lowercase version of each name for every comparison. You could prebuild all the lowercase versions in one pass (once per item) and then just use them in the sort algorithm rather than have to redo them every time two items are compared.</li> </ol> <p>These changes result in this code:</p> <pre><code>function list_response(jsonData) { "use strict"; var lists = document.getElementById("lists"), anchors = document.getElementById("anchors"), jItems = jsonData.items; var results = [], anks = [], vList, pListName, item, videoItem; // precache all lower case versions to make sorting faster var i, iLen = jItems.length, j, jLen; for (var i = 0; i &lt; iLen; i++) { jItems[i].nameLower = jItems[i].name.toLowerCase(); } jItems.sort(function (a, b) { return a.nameLower.localeCompare(b.nameLower); }); for (i = 0; i &lt; iLen; i++) { item = jItems[i]; // cache for use in loops videoItem = item["videos"]; // cache for use in loops pListName = item.name; // cache for use in multiple places results.push('&lt;span class="backtotop"&gt;[ &lt;a href="#"&gt;Back to top&lt;/a&gt; ]&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;li class="title nodot"&gt;&lt;a class="pHeader" name="' + pListName + '"&gt;&lt;h2&gt;' + pListName + '&lt;/h2&gt;&lt;/a&gt;&lt;/li&gt;'); anks.push('&lt;a class="pHeader" href="#' + pListName + '"&gt;' + pListName + '&lt;/a&gt;&amp;nbsp; '); for (j = 0, jLen = videoItem.length; j &lt; jLen; j++) { vList = videoItem[j]; results.push('&lt;li class="nodot"&gt;&lt;a href="https://www.site.org/videos/Video_Player.page?bctid=' + vList.id + '"&gt;' + vList.name + '&lt;/a&gt;&lt;/li&gt;'); } } lists.innerHTML += results.join(""); anchors.innerHTML += anks.join(""); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POSlow executing js in IE and FF
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USjfriend00
    1. USjfriend00
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POSlow executing js in IE and FF
      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. VTAcceptedByOriginator
    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. COThank you for the detailed answer. It was very helpful to complete my understanding.
      singulars
      1. PO
      1. USMr Brimm
    2. COI an getting commas after each item. Is this from the push or join? How do I remove those?
      singulars
      1. PO
      1. USMr Brimm
    3. CO@MrBrimm - It's from the `.join()`. Change them both to `.join("")`. I didn't realize join defaults to a comma if you don't specifically set it to an empty string.
      singulars
      1. PO
      1. USjfriend00
 

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