JayWebz
commented
3 years ago The v2 map is definitely the culprit of the excessive DOM size. It is coming from rendering all of the GeoJSON entities each as a DOM element. React-leaflet map has a way to defer to canvas for things like markers as seen here - https://stackoverflow.com/questions/52620309/constructing-a-lot-of-markers-on-react-leaflet-map-is-too-slow, but the creation of many elements is coming from the GeoJSON component inside of the map component.
Leaflet does have an npm package that looks promising for rendering geoJSON on canvas instead of SVG, which should save on all the elements populating as svg paths - https://www.npmjs.com/package/leaflet-canvas-geojson, however it is not directly compatible with the react-leaflet package that renders the map and displays an outdated way to implement; hasn't been updated in 5 years.
Problem initially came out of #305. One factor that is impacting performance is excessive DOM size.
Background On IODA v1, lighthouse performance check shows a DOM size of 1,126 elements compared to 6,776 using the time range in v2. Details from the report show that the issue comes from the map component used, which uses too many nested html elements to populate the svg shapes on the map (each entity). When the map doesn't load in v2, that number is ~1,400 dom nodes.