Ng class perf one map

[pkozlowski-opensource]

This commit represents rewrite of the NgClass directive to address
severe performance problem (excessive DOM mutation). The modified
algorithm removes all the known performance clifs and has number of
desirable properties:

• it is shorter and (arguably) easier to follow;
• drops usage of existing differs thus limiting dependencies on other
  part of the code without increasing size of the directive;
• doesn't degrade any other performance metrics.

algorithm notes

The NgClass directive uses the custom change detection algorithm for its inputs. The custom
algorithm is necessary since inputs are represented as complex object or arrays that need to be
deeply-compared.

This algorithm is perf-sensitive since NgClass is used very frequently and its poor performance
might negatively impact runtime performance of the entire change detection cycle. The design of
this algorithm is making sure that:

• there is no unnecessary DOM manipulation (CSS classes are added / removed from the DOM only when
  needed), even if references to bound objects change;
• there is no memory allocation if nothing changes (even relatively modest memory allocation
  during the change detection cycle can result in GC pauses for some of the CD cycles).

The algorithm works by iterating over the set of bound classes, staring with [class] binding and
then going over [ngClass] binding. For each CSS class name:

• check if it was seen before (this information is tracked in the state map) and if its value
  changed;
• mark it as "touched" - names that are not marked are not present in the latest set of binding
  and we can remove such class name from the internal data structures;

After iteration over all the CSS class names we've got data structure with all the information
necessary to synchronize changes to the DOM - it is enough to iterate over the state map, flush
changes to the DOM and reset internal data structures so those are ready for the next change
detection cycle.

[pkozlowski-opensource]

Putting is as "blocked" since there are 3 knows tests in G3 that are failing because of this PR. This is mostly due to the fact that those tests assert CSS class order: it is not guaranteed and changed in a subtle way.

Investigating to decide if I should mimic the previous order or update the existing tests.

[pkozlowski-opensource]

Note: this PR will require G3 changes before landing (there are 3 failing tests that need to be updated). Having said this, the NgClass implementation seems correct and is ready for review.

[AndrewKushnir]

@pkozlowski-opensource great work! 👍

The changes are looking good and easy to follow. Extra thanks for documenting the approach and the algorithm!

I've left a few minor comments, none of them are blockers :)

[AndrewKushnir]

Reviewed-for: size-tracking

[AndrewKushnir]

Looks great! 👍

[pkozlowski-opensource]

De-flaked TGP

[alxhub]

👏 this looks excellent.

The new algorithm is clear, easy to follow, and seems very efficient.

[pkozlowski-opensource]

Caretaker note: the internal failing tests are not related and predate this PR. Also, I've got a passing, de-flaked TGP.

[AndrewKushnir]

This PR was merged into the repository by commit 5f21c6d.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}