Changing <template> to render function to improve performance?

[adolkin]

Currently, I've encountered an issue while rendering a map with 10,000 <CustomMarker> components within a <MarkerCluster>, causing the app to crash. To address this, I've made a modification by replacing the <template> in <CustomMarker> with the render function approach, as explained in the Vue.js render function documentation. This modification has resulted in a significant improvement, allowing the rendering of up to 200,000 <CustomMarker> components.

I'd like to seek your opinion on whether changing from <template> to the render function is a viable solution to this issue. If you believe it is a good option, I am willing to create a pull request to implement this change.

[HusamElbashir]

Hey @adolkin

I'd like to see some examples/benchmarks since this goes against the common wisdom. The template compiler should perform static analysis and create a more optimized render function in most cases than one written by hand. See here: https://github.com/vuejs/v2.vuejs.org/issues/1936#issuecomment-456458413

[dodoburner]

I'm having a similar same issue. I have 10 000+ markers and on initial render it is fast but when I click on a marker and try to change the markers icon the app crashes. Removing the marker cluster and just having the markers works really fast though.

[nolimitdev]

Hey @adolkin

I'd like to see some examples/benchmarks since this goes against the common wisdom. The template compiler should perform static analysis and create a more optimized render function in most cases than one written by hand. See here: vuejs/v2.vuejs.org#1936 (comment)

We do not need to write render function manually (I hope nobody do it). We can use var renderFn = Vue.compile(templateString) which returns [Function: compileToFunction] which can be used in component... new Vue.createApp({ render: renderFn , ... }). So we have static analysis benefit and optimized render function out of the box.

We use precompiled render function caching in SSR to avoid compiling template withing each HTTP request (when component have dynamic data depending on request).

[adolkin]

Hey everyone, thanks for your responses! Lately, my project hasn't been as busy, so I've had some time to revisit this issue. I believe the problem isn't with the Vue 3 Google Map library (which is really well done, by the way), but more with how Vue 3 and other frontend frameworks like Angular or React handle components.

For example, when we render 10,000 markers using the Maps JavaScript API, it creates 10,000 marker objects. But when using components <CustomMarker> or <Marker>, it may end up creating 10,000 marker objects plus 10,000 component objects, or even more. The more objects are created, the more resources the browser will need. At some point, the browser may crash

I've temporarily switched to using the Maps JavaScript API directly instead of Vue 3 Google Map, just to see how it performs. I'll update some code over the weekend and share it if anyone else is running into this same issue.

Updated: google-map.zip