search

ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
682 stars 230 forks source link

Performance when first loading many features. #482

Closed lol2x closed 2 years ago

lol2x commented 2 years ago

I've already read all issues about performance problems with many features but I feel like there is something missing. The performance problem is there only on the first load of the geoJSON to the VlSourceVector, then after ~10-20 seconds everything works smooth (zooming, rotating, moving). I've tried to test the loading with Chrome built-in performance tab and it shows Chrome performance analysis that the function which takes 18 seconds is difference() used here: https://github.com/ghettovoice/vuelayers/blob/e965804abf01959a235320251038f900b12bc13c/src/mixins/vector-source.js#L646 But i can't understand what this function is trying to compare and delete on the first (initial load of the features). Not sure if it is a bug or correct behaviour.

ghettovoice commented 2 years ago

Hello @lol2x , interesting result... difference is used to find features that is in the OpenLayers Vector source but not in the new features prop value. However on the first load the source is empty, difference shouldn't take so much time. I need to review this place... Thanks for investigation!

lol2x commented 2 years ago

Hi @ghettovoice, I've taken the code from the branch you created and the results are great! now whole task (for the same dataset) takes less then 4 seconds (previously almost 23 seconds) New chrome performance screenshot: Chrome performance after changes

out of curiosity: do you think that it will be possible to delegate whole task of reading features to webworker? Will be great to load them without blocking the main thread.

ghettovoice commented 2 years ago

do you think that it will be possible to delegate whole task of reading features to webworker? Will be great to load them without blocking the main thread.

Hard to say for me... As I know they allow passing as message only simple data. So I see only the opportunity to move to the worker only a part of resolving list of add/remove features, but the actual add/remove still need to be done in the main thread. I doubt that it's worth it. Maybe I wrong, because I don't much experienced with webworkers and especially in Vue env.