Why is my Color Chooser's frame rate with Vue so much higher than with CanJS?

CanJS
1

If you compare frame rates of the following pages, you will understand my question:

CanJS Color Chooser

Vue Color Chooser

Details:
If you click either of the links above, a Color Chooser page should run in Demo Mode, choosing random base colors which cause their final color grids to update as quickly as possible. An Average frames/sec indicator shows frame rate.

In the case of CanJS, the reported rate is several times lower than for Vue. The disparity is more evident the larger the final color grid; stretch your browser window or zoom out to enlarge it.

Source code for CanJS Color Chooser is at https://github.com/CODE-REaD/CanColorChooser1 ; source code for Vue Color Chooser is at https://github.com/CODE-REaD/VueColorObjectChooser.

Related topic: Color Chooser Illustrates ViewModel Hierarchy Questions

2

This app is ideally suited for a vdom/diff approach as lots of “inner” values are changing (colors), but the “boxes” are being left in place.

To make canjs use it’s diff, you will have to add identity keys around here: https://github.com/CODE-REaD/CanColorChooser1/blob/master/chooser3.js#L289

3

Do you have this in a codepen? I can show how to make this change in a codepen.

4

Here it is in a CodePen:

Following your suggestion, I have tried adding an id= attribute to each final color grid element, but that doesn’t seem to improve performance.

5

This codepen doesn’t re-create the a colors list every time and instead mutates the values within it: https://codepen.io/justinbmeyer/pen/yEGGoK?editors=1010