search

PolymerElements / paper-dropdown-menu

A Material Design browser select element
https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu
61 stars 107 forks source link

Polymer 2.0.0-rc.3 paper-dropdown-menu-lite is extremely slow #236

Open tirithen opened 7 years ago

tirithen commented 7 years ago

Description

I'm making a dynamic UI with Polymer 2.0.0-rc.3 and various paper components and found out that this component is extremely slow. If a full a UI would have been implemented as this project aims for the load time would have been well over a minute. The HTTP requests are super fast, it's the rendering/CPU that seem to be the bottleneck.

The system I'm developing will create a UI from JSON structures fetched from an API end point so I can't know which fields would have to be there before hand. In the real system I initialize them in the JavaScript code like const menu = new MenuElement();. It works fast for basic componens but expecially for combined paper elements like these that uses paper-dropdown-menu-light, paper-listbox and paper-item render times becomes extreme.

I have created a small isolated example case and I'll attach some screenshots from Chromiums performance tab.

Screenshots:

It looks like lots of methods that runs way more times than should be needed. Is there a way of initializing the components in another way that reduces the amount of times that these methods are called.

I'm hoping to solve this somehow since the Polymer initiative is such an easy way to split an application into small maintainable parts.

Oh, and this is the CPU I'm running this on Intel(R) Core(TM) i5-4310U CPU @ 2.00GHz

Expected outcome

The page should load and render well within a second from a local machine.

Actual outcome

It takes ~ 9 seconds to render the page.

Live Demo

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <title>Menu test</title>
    <link rel="shortcut icon" type="image/png" href="/favicon.png">
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

    <link rel="import" href="/bower_components/polymer/polymer.html">
    <link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
    <link rel="import" href="/bower_components/paper-listbox/paper-listbox.html">
    <link rel="import" href="/bower_components/paper-item/paper-item.html">
  </head>
  <body>
    <dom-module id="menu-app">
      <template>
        <template is="dom-repeat" items="[[menus]]" as="menu" index-as="menuIndex">
          <paper-dropdown-menu-light label="Menu [[menuIndex]]">
            <paper-listbox class="dropdown-content">
              <template is="dom-repeat" items="[[menu.items]]" as="menuItem">
                <paper-item>[[menuItem]]</paper-item>
              </template>
            </paper-listbox>
          </paper-dropdown-menu-light>
        </template>
      </template>
      <script>
        /* global Polymer */

        class MenuApp extends Polymer.Element {
          static get is() {
            return 'menu-app';
          }

          static get properties() {
            return {
              count: {
                type: Number,
                observer: 'countChanged',
                value: 0
              }
            };
          }

          constructor() {
            super();
            this.menus = [];
          }

          countChanged() {
            this.menus.length = 0;
            for (let x = 0; x < this.count; x++) {
              const items = [];
              for (let y = 0; y < 5; y++) {
                items.push(`Item ${y}`);
              }
              this.menus.push({ items });
            }
          }
        }

        customElements.define(MenuApp.is, MenuApp);
      </script>
    </dom-module>

    <menu-app count="20"></menu-app>
  </body>
</html>

Steps to reproduce

  1. Save demo html to a file
  2. $ bower install polymer#2.0.0-rc.3 paper-dropdown-menu#2.0-preview paper-listbox#2.0-preview paper-item#2.0-preview
  3. Serve the files with a HTTP server

Browsers Affected