Lit-html: repeat() slows down adding rows extrimely

[Lodin]

I have created lit-html version for the js-framework-benchmark (you can find it here).

There is a code I wrote:

render(html`${this.store.data.map(i => html`
  <tr class="${i.id === this.store.selected ? 'danger' : ''}">
    <td class="col-md-1">${i.id}</td>
    <td class="col-md-4">
      <a on-click="${() => this.select(i.id)}">${i.label}</a>
    </td>
    <td class="col-md-1">
      <a on-click="${() => this.delete(i.id)}">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      </a>
    </td>
    <td class="col-md-6"></td>
  </tr>`
)}`, this.tbody);

It appends a single row to the table. Then, there is results of benchmarking:

• Creating 10,000 rows took 2485.26
• Adding 1,000 rows to existing table took 604.47

But if I replace this.store.data.map with repeat:

render(html`${repeat(this.store.data, i => i.id, i => html`
  ... same code
)}`, this.tbody);

The benchmark results become following:

• Creating 10,000 rows took 2448.795
• Adding 1,000 rows to existing table took 7411.785

These results keeps repeating in the same numbers (adding 1,000 rows time can vary from 5000 to 15000), so I assume they are true. You can also clone my repo and check the results.

[justinfagnani]

Thanks for the repro, I'd had a report of this slow down. Repeat is the most untested parts of the repo. I'll check it out soon.

[43081j]

I ran into this too, it seemed to be to do with ranges. Maybe setStartBefore is just slow? thousands of items especially.