StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Apart from the <code>if (x = 0)</code> that should really be <code>if (i % 2 === 0)</code>, you really should improve performance here by using Array.join() method instead of concatenating strings. This will have a similar effect to a <a href="http://www.yoda.arachsys.com/csharp/stringbuilder.html" rel="nofollow noreferrer">StringBuilder</a> in C# or Java.</p> <p>For example:</p> <pre><code>function showTableData() { var tableArray; var theHTML = []; theHTML.push('<table id="mytable" cellspacing="0">', '<tr>', '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>', '<th scope="col" abbr="Dual 1.8">Msrp Price</th>', '<th scope="col" abbr="Dual 2">blahs Price</th>', '<th scope="col" abbr="Dual 2.5">Low Price</th>', '</tr>'); for (var i = 0; i < 7032; i++) { if (i % 2 == 0) { theHTML.push('<tr>', '<th scope="row" class="spec">', partNum[i], '</th>', '<td>', Msrp[i], '</td>', '<td>', blah[i], '</td>', '<td>', blahs[i], '</td>', '</tr>'); } else { theHTML.push('<tr>', '<th scope="row" class="specalt">', partNum[i], '</th>', '<td class="alt">', Msrp[i], '</td>', '<td class="alt">', blah[i], '</td>', '<td class="alt">', blahs[i], '</td>', '</tr>'); } } theHTML.push('</table>'); $('#example').append(theHTML.join('')); } </script> <div id="example"> </div> </code></pre> <p>The reason why appending string <code>'my' + ' appended' + ' string'</code> is slower than joining strings <code>['my', ' joined', ' string'].join('')</code> is because <a href="https://stackoverflow.com/questions/51185/are-javascript-strings-immutable-do-i-need-a-string-builder-in-js">JavaScript strings are immutable</a> so in the former example there is a third string created every time 2 strings are concatenated, which is a very expensive operation compared to adding new entries into an array. </p> <p>See also a <a href="http://www.codeproject.com/KB/scripting/stringbuilder.aspx" rel="nofollow noreferrer">Javascript StringBuilder project</a> built using the same priciples of Array.push() and Array.join().</p> <p>The performance improvement on this project for 10,000 concatenations in IE was down from over 1 minute to 0.23 seconds.</p> <p><strong>UPDATE:</strong> Additional calls to Array.join() added to replace string concatenation within the for-loop, this is to improve client rendering speeds further. + Added better link to StringBuilder.</p> <p><strong>FURTHER UPDATE:</strong> Added suggestions by Hemlock: </p> <ol> <li>Removed use of globally scoped variable by defining <code>var i = 0</code> in for-loop </li> <li>Pushed several strings at a time using multiple parameters of Array.push().</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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