<?xml version="1.0" encoding="UTF-8"?>
<rss version='2.0' xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Alexander Kazantsev</title>
    <description>Full Stack Engineer. I use magic to make IT things work.</description>
    <link>https://thor5.silvrback.com/feed</link>
    <atom:link href="https://thor5.silvrback.com/feed" rel="self" type="application/rss+xml"/>
    <category domain="thor5.silvrback.com">Content Management/Blog</category>
    <language>en-us</language>
      <pubDate>Sun, 19 Oct 2014 02:49:45 -1100</pubDate>
    <managingEditor>thor5@mail.ru (Alexander Kazantsev)</managingEditor>
      <item>
        <guid>http://akazantsev.net/javascript-performance-optimization#8993</guid>
          <pubDate>Sun, 19 Oct 2014 02:49:45 -1100</pubDate>
        <link>http://akazantsev.net/javascript-performance-optimization</link>
        <title>Javascript Performance Optimization</title>
        <description>Measure &amp; Tweak</description>
        <content:encoded><![CDATA[<h1 id="short-story">Short Story</h1>

<p>Have you ever faced the need to tune the performance of you javascript?</p>

<p>Once upon a time I had an <em>Epic Battle against Javascript Lags</em> in a dashboard app. The app contained a dynamic page with a horrible number of tags <em>(~150k lines of HTML in a generated page).</em></p>

<p>It was a &quot;bulk CRUD form&quot; page. Actually, a Single Page App (SPA) looking like a monstrous spreadsheet. On initial render it had 10 rows containing <strong>72 html input elements each</strong>!</p>

<p>I&#39;ve tweaked the performance of the javascript code and achieved The Best Code Performance Gain in my career so far :)</p>

<p>IE6 rendering speed was lowered from 60+ seconds to 8 seconds. Some functions were modified to run 400% faster (basically it was achieved by tweaking string concatenation using [].join). A couple of bottlenecks was optimized to run 25 times faster (jQuery references caching).<br>
A Silver Bullet</p>

<h1 id="the-common-approach-here-is">The common approach here is:</h1>

<p>Measure. The golden rule of any optimization. Find the bottleneck first, then optimize. In clientside javascript, though, the most probable sources of lags are DOM-tree manipulations and relayout.<br>
    Tweak string concatenation in vanilla javascript in older browsers (IE6, IE7. I feel your pain, bro, if you have to maintain this shit). Use [].push and [].join.<br>
    Use jQuery wisely and cache the $ references. (Tons of articles available on basic jQuery pitfalls - read em).<br>
    Insert the HTML dynamically using documentFragment. Some older browsers (Chrome and IE6,7) may actually work faster with innerHTML batch assignments. Measure it.<br>
    If you need to prevent nasty IE6-IE7 alert (&quot;The page seems to run slowly... bla bla bla... should I kill the page?&quot;), you may use setTimeout function to delegate the rendering for the next event-loop cycle. It will free some ticks for other operations and will mimic &quot;asynchronous&quot; execution. This is sufficient to shut IE6 up.<br>
    Read about reflows and repaints. Lower the number of those nasty events as much as possible.</p>

<h1 id="resources">Resources</h1>

<p>To get some basic knowledge on JS performance optimization read this series of articles.<br>
And here is some v8 specific performance tricks.</p>

<p>Have fun with your JS!</p>
]]></content:encoded>
      </item>
  </channel>
</rss>