Javascript tile map -> bitmap or JSON

Question

I would like to know which idea is better in terms of performance.

The map is 5000x5000 tiles and I plan to expand it even more. It is split into 50x50 regions and camera doesn't move with player, the map just switches to next one when player reaches border of the screen.

I have few possible approaches to store and load a big map like this.

Case 1: I store every 50x50 region in a seperate JSON file, and just load them dynamically with XHR when player reaches border of the screen (native not jquery, since it is much faster)

Case 2: I store every 50x50 region in a seperate bitmap files, and then load that image dynamically using canvas and read it's pixels to generate map.

Case 3: I store images in bigger chunks (ex. 1000x1000) and preload them all at the beginning of game and also read pixel by pixel when needed.

Which case is possible/best? I need performance, it comes first before code readability etc. My main concerns are the memory leak of XHR, and also which is faster: XHR loading and parsing JSON or loading and reading image pixel by pixel.

Thank you!

Answer 1

A two-dimensional JSON array with integer values for all tiles would have quite a lot of overhead, but abusing an image to transfer binary information would also add some wrapping information you don't need.

To reduce the amount of data which needs to be sent over the network, you could use XHR, but return a single BLOB or arrayBuffer with the binary map data. This data could be compressed with an algorithm like DEFLATE (which is the same compression algorithm used by PNG) to reduce the size. Depending on how your maps are designed, another stock algorithm might have better results, or you could even try to create your own when you think you can create something more appropriate.