Where does the performance boost come from?

[kermit-the-frog]

Hi,

I hope you can help me.

I try to figure out why the perfomance of http://www.somebits.com/rivers/rivers-d3leaflet.html is so much than the performance of http://www.somebits.com/rivers/rivers-leaflet.html (at least in Firefox 26). I'm talking about the performance while moving the map with the mouse not while loading the tiles.

Background: I'm working on an leaflet based app, where I need to draw many polylines. But I can use a GeoJSON-Layer for it, since the information for the polylines comes from a javascript object of another module of the app. So I need to draw my polylines manually. I use L.polyline(latlngs, {...}).addTo(map); But when I move the map with the polylines attached to it, the performance is very bad.

So what's the difference with having d3 draw the polylines?

Regards,
kermit-the-frog

[NelsonMinar]

The first thing you should try in your app is using the latest version
v0.8-dev version of Leaflet from GitHub. There's significant improvements
in line rendering speed, for details see
https://groups.google.com/forum/#!msg/leaflet-js/_WJquNpdmH0/qQsasZpCTPUJ

The rivers-d3leaflet rendering of the river lines is entirely different
from rivers-leaflet. The D3 version uses D3 to create the SVG layer,
whereas the slower Leaflet version uses Leaflet's own drawing. I haven't
looked at the code for what happens when panning but ideally a pan would
not require any redrawing or anything, just a transform that results in
hardware accelerated graphics. Maybe something about the Leaflet SVG
structure doesn't do that? You may also want to double check in Chrome;
last I looked Firefox's SVG performance was not very good.