Watch Collection + NgFor Perf Testing
matsko@google.com
May 15th 2020
Watch
Collection
- Pipe used to bridge the gap for ngClass and ngStyle
- Shallow watches arrays and maps
- Returns a new collection if the ref or contents change
Watch
Collection + NgFor
- Maybe WatchCollection could be used on top of NgFor?
- NgFor does shallow-watching automatically
- Maybe opt-in?
Watch
Collection + NgFor
- Maybe WatchCollection could be used on top of NgFor?
- NgFor does shallow-watching automatically
- Maybe opt-in?
<!--
items is
collection-watched
-->
<div *ngFor="
let item of items">
<!--
now its shallow-watched
-->
<div *ngFor="let item of
items
| watchCollection">Perf Testing Required
- It's not clear whether or not NgFor + WatchCollection is good enough
- Benchmarking is required
How did we test out NgFor?
- Test when idle (no bindings are being updated)
- Test when references change (new arrays)
- Test mutations
Suite #1
- Clear that NgFor is doing a lot of extra work just sitting idle
- Not deep watching yields something of a 50x benefit
Suite #2
- Changing references is no different (because no deep watching occurs)
Suite #3
- Mutation changes are much faster without watchCollection (no diffing required)
- Watch collection is to the same speed as NgFor master
WatchCollection + NgFor Perf Testing
By Matias Niemelä
