title: Polymer core and paper-elements performance with large lists
body: <p>I have fairly simple list of toggleable menu items, where only a single item can be open ("accordion" menu), built with Polymer core and paper elements.</p>
  
  <p>With a "large" list of items, 500 in my example, the performance even on high end android phones (oneplus one) is just awful, it takes several seconds for the "menu" to toggle. Even with desktop machines there's a noticeable delay when clicking an item.</p>
  
  <p>My example is available online at <a href="http://viljoviitanen.github.io/polymer-performance-problem/" rel="nofollow">http://viljoviitanen.github.io/polymer-performance-problem/</a> and the source code is at <a href="https://github.com/viljoviitanen/polymer-performance-problem" rel="nofollow">https://github.com/viljoviitanen/polymer-performance-problem</a> devel.html and page-results.html (index.html is the app "vulcanized" to a single file).</p>
  
  <p>Summarized, there's a custom element which has a repeating template like this:</p>
  
  <pre><code>     &lt;template id="results" repeat="{{r in r}}"&gt;
         &lt;core-item lines&gt;
          &lt;paper-item flex noink id="p{{r.id}}"&gt;&lt;a on-click="{{toggle}}" data-id="{{r.id}}"
          &gt;{{r.title}}&lt;/a&gt;&lt;/paper-item&gt;
         &lt;/core-item&gt;
         &lt;template if="{{r.active}}"&gt;
           &lt;paper-menu-button style="float: right;"&gt;
              &lt;paper-icon-button icon="more-vert" style="color: #aaa"&gt;&lt;/paper-icon-button&gt;
              &lt;paper-dropdown class="dropdown" halign="right"&gt;
                &lt;core-menu class="menu"&gt;
                    &lt;paper-item data-id="{{r.id}}" on-click="{{dosomething}}"&gt;Do something&lt;/paper-item&gt;
                    &lt;paper-item data-id="{{r.id}}" on-click="{{doother}}"&gt;Do other stuff&lt;/paper-item&gt;
                &lt;/core-menu&gt;
              &lt;/paper-dropdown&gt;
           &lt;/paper-menu-button&gt;
           &lt;core-item flex&gt;{{r.desc}}&lt;/core-item&gt;
           &lt;core-item style="clear: both;"&gt;
            &lt;img src="{{r.img}}"&gt;
           &lt;/core-item&gt;
         &lt;/template&gt;
       &lt;/template&gt;
  </code></pre>
  
  <p>The "toggle" function toggles "active" from the model for each array object in the model.</p>