具有大列表的聚合物芯和纸元件性能

Question

我有一个相当简单的可切换菜单项列表，其中只能打开一个项目（"accordion" 菜单），使用聚合物核心和纸元素构建。

使用 "large" 项列表，在我的示例中为 500，即使在高端 android 手机（oneplus one）上的性能也很糟糕，[=14 需要几秒钟=] 切换。即使是台式机，在单击某个项目时也会出现明显的延迟。

我的示例可在 http://viljoviitanen.github.io/polymer-performance-problem/ and the source code is at https://github.com/viljoviitanen/polymer-performance-problem devel.html 和页面-results.html 在线获取（index.html 是单个文件的应用 "vulcanized"）。

总而言之，有一个自定义元素具有这样的重复模板：

     <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>

"toggle" 函数为模型中的每个数组对象从模型切换 "active"。

Answer 1

我设法解决了 core-list 和 core-overlay 的性能问题，单击一个 core-list 项目会打开一个叠加层，可以通过单击其他地方将其关闭。这实际上是一个相当不错的 UI，有点不同，但肯定和我最初的 "accordion" 菜单想法一样好（甚至更好！）。

解决方案同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 .

相关代码为：

 <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}} 函数根据模型数据设置叠加层中的变量并将其切换为可见。

具有大列表的聚合物芯和纸元件性能

Polymer core and paper-elements performance with large lists

javascript

performance

web-component

polymer