dart聚合物数据绑定性能

Question

将数据绑定到表的性能有问题。我开始使用核心菜单和纸质项目。纸张项目应该在单击时显示一个漂亮的动画。它工作得很好，但如果我试图在选定的索引更改处理程序中绑定一些数据，动画帧速率会很糟糕。

我能做些什么来提高纸张项目的帧速率吗？

这里是一个例子（在一个表中结合250个细胞）。

clickcounter.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/core_elements/core_icons.html">
<link rel="import" href="packages/paper_elements/paper_item.html">
<polymer-element name="click-counter">
  <template>
    <style>
      core-menu {
        color: #01579b;
        margin: 10px 0 0 0;
      }
      core-menu > paper-item {
        transition: all 300ms ease-in-out;
      }
      core-menu > paper-item.core-selected {
        background: #e1f5fe;
      }
    </style>
    <div>
      <core-menu selected="{{selIndex}}">
            <paper-item icon="settings" label="Item 0">
              <a ></a>
            </paper-item>
             <paper-item icon="settings" label="Item 1">
              <a ></a>
            </paper-item>
        </core-menu>
    </div>
    <table>                                
        <thead>
        <tr>
            <th>C1</th>
            <th>C2</th>
            <th>C3</th>
            <th>C4</th>
            <th>C5</th>            
        </tr>
        </thead>
        <tbody>
        <tr template repeat="{{row in dataRows}}" >
            <td>{{row.s1}}</td>
            <td>{{row.s2)}}</td>
            <td>{{row.s3}}</td>
            <td>{{row.s4}}</td>
            <td>{{row.s5}}</td>
        </tr>
        </tbody>
    </table>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

单击计数器.dart

import 'package:polymer/polymer.dart';
/**
 * A Polymer click counter element.
 */
class TableItem {
  String s1;
  String s2;
  String s3;
  String s4;
  String s5;
  TableItem(this.s1, this.s2, this.s3, this.s4, this.s5);
}
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {

  @published var selIndex = 0;
  @observable List<TableItem> dataRows = [];
  ClickCounter.created() : super.created() {
    makeData(selIndex);
  }
  selIndexChanged(var oldVal, var newVal) {
    makeData(newVal);
  }
  void makeData(int newVal) {
    List newList = new List();
    for (int r = 0; r< 50; r++) {
      int i = newVal * r;
      String s = "${i}";
      newList.add(new TableItem("${i}-1", "${i}-2", "${i}-3", "${i}-4", "${i}-5"));
    }
    dataRows = toObservable(newList);
  }

}

Answer 1

根据Gunter的提示回答我的问题。

1重新绘制整个可观察列表

（如有问题所示）-绝对是最慢的

可观察列表中的2个重新排序项目

改进，但仍然无法接受。

@observable List dataRows = toObservable([]);
void makeData(int newVal) {
  List newList = new List();
  for (int r = 0; r< 250; r++) {
    int i = newVal * r;
    String s = "${i}";
    newList.add(new TableItem("${i}-1", "${i}-2", "${i}-3", "${i}-4", "${i}-5"));
  }
  dataRows.clear();
  dataRows.addAll(newList);
}

一次绑定的可观察列表中的3个重排序项目

更好，几乎可以接受

代码更改如上所述，具有一次性绑定：

<tr template repeat="{{row in dataRows}}" >
  <td>[[row.s1]]</td>
  <td>[[row.s2]]</td>
  <td>[[row.s3]]</td>
  <td>[[row.s4]]</td>
  <td>[[row.s5]]</td>
</tr>

4无列表重组，可观察元素

绝对是最快的，即使有1000行也能正常工作：）

    class TableItemObs extends Object with Observable  {
      @observable String s1;
      @observable String s2;
      @observable String s3;
      @observable String s4;
      @observable String s5;
      TableItemObs(this.s1, this.s2, this.s3, this.s4, this.s5);
    }
    selIndexChanged(var oldVal, var newVal) {
      changeData(newVal);
    }
    void changeData(int newVal) {     
      for (int r = 0; r< 250; r++) {
        int i = newVal * r;
        dataRows[r].s1 = "${i}-1";
        dataRows[r].s2 = "${i}-2";
        dataRows[r].s3 = "${i}-3";
        dataRows[r].s4 = "${i}-4";
        dataRows[r].s5 = "${i}-5";                    
      }
    }

保留

<td>{{row.s1}}</td>

更新：我测试了另一个选项：

3a在可观察列表中对项目进行一次绑定，使用批次

选项3的变体，但在清除列表后添加新项目时会批量添加。每个函数都会添加一部分项。

比选项3快，但仍低于选项4。

selIndexChanged(var oldVal, var newVal) {            
    new Future(() => makeData1(newVal))
      .then((_) => makeData2(newVal))
      .then((_) => makeData3(newVal))
      .then((_) => makeData4(newVal))
      .then((_) => makeData5(newVal));                  
  }