Lodash deep cloning marker's modal object freezes my page for 2.5 seconds on Chrome

[pvm1987]

On a heavy page with many angular's watchers I add just a single marker with ui-gmap-marker directive. After debugging I found the following row is the place where my page freezes for about 2.5 seconds on Chrome and 0.6 seconds on Firefox:

function MarkerChildModel(scope, model1, keys, gMap, defaults, doClick, gManager, doDrawSelf, trackModel, needRedraw) {
...
this.clonedModel = _.clone(this.model, true); // deep clone
...
}

If I remove the last boolean param (non deep cloning) my page is rendered without freezing. Can you explain me why we need deep copy here? In my case everything works as expected if I change it to:

function MarkerChildModel(scope, model1, keys, gMap, defaults, doClick, gManager, doDrawSelf, trackModel, needRedraw) {
...
this.clonedModel = _.clone(this.model); // non-deep clone
...
}

Is there something it could be broken according this change which improves the rendering page time?

[nmccready]

Yeah I actually ran into this in ui-leaflet. Anyway removing it will make it necessary to add many trips (boolean trip, ie modifiedInDirective is true abort watch processing) to avoid watches being a recursive nightmare. So if you feel comfortable looking into that; thats what needs to be done.

[jdalton]

Do you all have an example data object I can benchmark.
It would help me improve the performance of _.cloneDeep.

[nmccready]

@pvm1987 you have @jdalton 's ear who is the maintainer of lodash. I would follow up especially since he is offering help.

[jdalton]

@nmccready If you have a ui-leaflet object example that would rock too.

[nmccready]

Well it's different in ui-leaflet as lodash is not used. But in version 1.0.0 the clone / copy exists.

https://github.com/angular-ui/ui-leaflet/blob/v1.0.0/src/directives/markers.js#L87

Where in latest code the clone is removed, but anoying angular traps must be added to not kill yourself. This is my number one dislike about watches in angular https://github.com/angular-ui/ui-leaflet/blob/master/src/directives/markers.js#L93.

Trap impl . Again this is code that could be in shared with angular google maps.. But then all I'll here is complaints for another shared lib.

[nmccready]

ui-leaflet issue origination angular-ui/ui-leaflet#197

[nmccready]

@jdalton if you want to play with mucking with the angular-google-maps code with and without clone the main example can easily churn out as many points as you want.

Clear the map via the clear button and then use this part of the interface form the demo @

here Which can be run locally by grunt example .

[nmccready]

#1714 resolved this. Confirmed 3.X lodash cloning was a problem with cloning a scope object. This issue is actually kinda expected as scope objects can be recursive. (just try JSON.stringify). 4.x was many times faster.