CODEWITHSUNDEEP
javascriptperformancepolymerweb-component
Viljo Viitanen
Viljo Viitanen

Reputation: 181

Polymer core and paper-elements performance with large lists

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.

Upvotes: 0

Views: 969

Answers (1)

Viljo Viitanen
Viljo Viitanen

Reputation: 181

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.

Upvotes: 0

Related Questions