Improve Angular digest performance by watching dtOptions more shallowly

[Robinson7D]

$watch with third argument set to true causes a deep search for changes on every $digest cycle. Meaning every time any Angular event happens (ng-clicks, etc.), the entire array, each of it's children, it's children's children, and so forth gets compared to a cached copy.

This seems unnecessary for dtOptions, and can cause some slowdown when dealing with very large datasets (or otherwise just if the dataset has a lot of deeply nested fields to traverse).

I left columns and columnDefs in full watch because they're typically much smaller, didn't seem as immediately important.

This change allowed several pages on a current project of mine to move from ~750ms to ~20ms digest cycles.

---

Flame charts from Chrome profiling to show the difference attached below:

Before:

After:

[Robinson7D]

(Note that users can still manually trigger a reloadData if need to update deeply nested options, but that should almost never be necessary)

[l-lin]

Your contribution does not work for reloading data, changing the data or changing the options/columns 😢

[Robinson7D]

Works for every table in my project, though when I change dtOptionsI already call .reloadData(). Columns and columnDefs are both entirely unchanged by this (both still use same old way).

[Robinson7D]

Do you think it might be beneficial to have a boolean option for the directive that can enable/disable deep watching? Default it to true, but allow it to be toggled? I could add that, and I believe it would alleviate your worries and provide old behaviour by default while allowing watcher reduction :)

[Robinson7D]

@l-lin Your concerns make sense to me, so I built the solution a little differently. The new code (if you look at the changes) is that by default everything works like it used to. All configuration options are watched deeply (with $watch(..., true)).

But I included an attribute so that if the directive has a truthy value for disable-deep-watchers at compile time then it will use $watchCollection(...) instead. This would allow users to prevent big datasets from thrashing Angular's $digest cycle at their own discretion (so, for example, if the user of this library does decide to disable-deep-watchers and wants to change a column's width, they either replace the columnDef object for the particular column, which would trigger $watchCollection, or they manually call reload after the changes).

But with these changes nothing changes unless the disable-deep-watchers attribute is set true, so nobody's old and existing code is affected. :)

[l-lin]

Awesome 👍
I change the attribute to have a dt- prefix. So the attribute will be dt-disable-deep-watchers.