4 ms·
You're right that using canvas/WebGL will be much faster. It seems the embeddable Google Maps JS library recently moved in this direction, though it appears the
by aschleck 4y ago
You're right that using canvas/WebGL will be much faster. It seems the embeddable Google Maps JS library recently moved in this direction, though it appears they kept the layers of stacked divs (almost certainly for backwards compatibility with existing users who have HTML layers that need to be kept in sync.)
But something fun to notice with Felt is that the rendering library (LeafletJS) is using transform3d to do 2d translations (instead of just using translate), so you may wonder "why?" At least in Chrome (and it seems in Safari) if you use transform3d the browser is more likely to keep the div in its own layer. This will reduce a lot of the paint/compositing time, and make the frame rate dramatically better. Of course in this case the micro-optimizations are irrelevant in comparison to Felt's JS performance problems (which on my machine appears to be due to projecting 2000 points from lat/lng space to pixel space every frame.) Choosing to project points every frame is super confusing because the whole point of the translate/transform3d optimization is to avoid having to recalculate pixel space during the latency-sensitive pan interaction. Odd.