使用 Dart 中的聚合物数据绑定将大量元素插入 DOM 会导致延迟

Question

老实说，我只是在等君特回答我的问题(笑)^_^

无论如何，我正在编写一个项目，该项目从一个非常庞大的项目列表 (1500+) 开始。其中一些用于 DropDowns 中的选择蒙版，其中大约 800 个显示在网格中。

我尽我所能使一切保持快速和流畅，但加载网站大约需要 20-30 秒，这有点太长了。

为了解决这个问题，我想使用 <core-list>，它允许我在每个 DropDown 中只渲染大约 8 个项目，而不是全部。这会将为 DropDowns 呈现的项目数量从 700 减少到 32。但是，我必须在 DropDowns 中使用一些 observables，因为有一个 bug 访问那些我不能使用 <core-list>。

我的 HTML 下拉菜单代码：

<div relative flex>
  <paper-input-decorator label="Committee" on-click="{{openDropdown}}" dropdown="{{committeeDropdownId}}">
    <input is="core-input" value="{{committee}}">
  </paper-input-decorator>
  <paper-shadow absolute z="2" class="dropdown" hidden?="{{!openedState[committeeDropdownId] || committees.length < 2}}" style="width: 100%">
    <div id="{{committeeDropdownId}}" style="width: 100%">
      <template repeat="{{item in committees}}">
        <paper-item 
              hidden?="{{!activeCommittees[item['v']] || !containsText(item['k'], committee)}}" 
              on-click="{{onItemSelected}}" 
              value="{{item['v']}}">{{item['k']}}</paper-item>
      </template>
    </div>
  </paper-shadow>
</div>

如您所见，我必须访问模板内的 containsText(..) 和 activeCommittees，这将是我必须用于 <core-list> 的模板。考虑到这一点，我将 containsText(..) 添加到我将用于 <core-list> 的项目 class，并为 committee 和 activeCommittees 添加了可观察的吸气剂。因为这些 getter 必须访问 'original' 变量，所以我将这些变量声明为静态的，几乎所有东西都变脏了、丑陋了，并且不再真正起作用了。

第一个问题： 所以我的问题的第一部分是，我可以在没有 <core-list> 的情况下调整创建 DropDown 的性能吗？

但还有更多。有一个包含大约 800 个 20x20 像素单元格的网格。构建它也需要一段时间。

网格 HTML 代码如下所示：

<div vertical layout>
  <template repeat="{{row in rows}}">
    <div row horizontal layout>
      <template repeat="{{col in row.items}}">
        <template if="{{!col.dummy}}" bind="{{col.delegate as item}}">
          <core-tooltip disabled?="{{!activeMEPs[item['v']]}}">
            <div mep="{{item['v']}}" class="grid-item item" 
                 low?="{{mepFactors[item['v']][0] <= 0.1}}" 
                 style="opacity: {{mepFactors[item['v']][0]}}; background: {{color(item['v'], activeMEPs[item['v']])}};">
            </div>

            <div tip>
              <!-- Name in Tooltip -->
              <h4 style="margin: 0em 0 0.1em;">{{Database[item['v']]['k']}}</h4>
            </div>
          </core-tooltip>
        </template>

        <template if="{{col.dummy}}">
          <div class="grid-item dummy"></div>
        </template>
      </template>
    </div>
  </template>
</div>

这看起来可能比实际情况更复杂，但我创建了 N 行和 M 列，并用空的虚拟容器填充剩余的列。

第二个问题：我的问题的第二部分来了，如何提高创建网格的性能？

一切都与性能有关，对吧？感谢阅读我写的最长的 post！

Answer 1

core-list 提高性能的作用是只呈现给 DOM 用户可见的内容。当前视图之外的所有内容仅在滚动到视图中时才会呈现。这通常不是琐碎的工作。

由于过渡到 Polymer 0.8，目前 core-/paper-elements 的开发似乎有点陈旧。当0.8处于可以移植更高级元素的状态时，需要重做大量工作时，我在0.5版本的元素上投入太多精力是没有意义的。

你可以尝试 bwu_datagrid 而不是核心列表，它也有很多这样的优化。 BWU Datagrid 也不使用 Polymer 数据绑定，这被认为不是在页面上显示数据的最快方式。 BWU Datagrid 也有一些问题。例如，它在 Chrome 以外的其他浏览器上效果不佳，因为我也不想在 0.8 准备好之前投入太多精力。

如果您不打算在接下来的几周内发布您的应用程序，则暂停发布此类性能优化可能是有意义的，直到您免费获得它们，但它可能需要几个月的时间才能可用。

使用 Dart 中的聚合物数据绑定将大量元素插入 DOM 会导致延迟

Insert large amounts of Elements to DOM with Polymer Data-Binding in Dart causes lags

html

performance

dom

dart