Polymer core and paper-elements performance with large lists

Question

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.

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.

My example is available online at http://viljoviitanen.github.io/polymer-performance-problem/ and the source code is at https://github.com/viljoviitanen/polymer-performance-problem devel.html and page-results.html (index.html is the app "vulcanized" to a single file).

Summarized, there's a custom element which has a repeating template like this:

     <template id="results" repeat="{{r in r}}">
       <core-item lines>
        <paper-item flex noink id="p{{r.id}}"><a on-click="{{toggle}}" data-id="{{r.id}}"
        >{{r.title}}</a></paper-item>
       </core-item>
       <template if="{{r.active}}">
         <paper-menu-button style="float: right;">
            <paper-icon-button icon="more-vert" style="color: #aaa"></paper-icon-button>
            <paper-dropdown class="dropdown" halign="right">
              <core-menu class="menu">
                  <paper-item data-id="{{r.id}}" on-click="{{dosomething}}">Do something</paper-item>
                  <paper-item data-id="{{r.id}}" on-click="{{doother}}">Do other stuff</paper-item>
              </core-menu>
            </paper-dropdown>
         </paper-menu-button>
         <core-item flex>{{r.desc}}</core-item>
         <core-item style="clear: both;">
          <img src="{{r.img}}">
         </core-item>
       </template>
     </template>

The "toggle" function toggles "active" from the model for each array object in the model.

At the moment using a template repeat in this fashion is going to be prohibitively slow. If it's possible for you to use core-list instead, that's the recommended approach (polymer-project.org/docs/elements/core-elements.html#core-list). However, you mentioned your list opens and closes, does it push the other list items down? If so, core-list may not work for you. — robdodson
Thanks for the comment! I can try to figure out other kind of solutions, the main thing is that I have (potentially) a huge number of items I need to show, and clicking on each item needs to open a menu of some sort (details of the item), and it should be quick to return from viewing one item to continue browsing and select another item to view. — Viljo Viitanen
core-list will let you easily view hundreds of items, it's designed for that specific purpose, so if you can design your menu so it works within the constraints of core-list, you'd be all set. — robdodson
I managed to do it with core-list and core-overlay, I'll post an answer. A big hurdle was to understand what the hell to do with the "core-list must either be sized or be inside an overflow:auto div that is sized" error. The document at polymer-project.org/docs/elements/core-elements.html#core-list really could give some hints on that. Hint hint @robdodson :) — Viljo Viitanen

Viljo Viitanen Viljo Viitanen · Accepted Answer · 2015-01-08T21:46:16

I managed to solve the performance problem with core-list and core-overlay, clicking a core-list item opens an overlay, which can be dismissed by clicking somewhere else. This is actually a pretty nice UI, a bit different but certainly as good as my original idea of an "accordion" menu (or even better!).

The solution is at the same github repo (https://github.com/viljoviitanen/polymer-performance-problem corelist.html and page-list.html) and the solution is online at http://viljoviitanen.github.io/polymer-performance-problem/index2.html .

The relevant code is:

 <core-overlay id="overlay" layered backdrop>
    <div style="background:white; width:100vw" core-overlay-toggle>
     <paper-menu-button style="float: right;">
    <paper-icon-button icon="more-vert" style="color: #aaa"></paper-icon-button>
    <paper-dropdown class="dropdown" halign="right">
      <core-menu class="menu">
          <paper-item data-id="{{oid}}" on-click="{{dosomething}}">Do something</paper-item>
          <paper-item data-id="{{oid}}" on-click="{{doother}}">Do other stuff</paper-item>
      </core-menu>
    </paper-dropdown>
     </paper-menu-button>
     <core-item flex core-overlay-toggle>{{odesc}}</core-item>
     <img src="{{oimg}}" style="clear: both;">
    </div>
 </core-overlay>

 <core-list id="list" data="{{r}}" flex height=48 on-core-activate="{{toggle}}" >
  <template>
   <core-item lines>{{model.title}}</core-item>
  </template>
 </core-list>

{{toggle}} function sets the variables in the overlay from the model data and toggles it visible.

Polymer core and paper-elements performance with large lists

1 Answers