Optimize loading of multiple (many) files with Processingjs

mbraendle

Optimize loading of multiple (many) files with Processingjs

in Processing with Other Languages • 4 months ago

While with Processing data files were packed into the .jar, and while in a Web application, only this single file had to be transmitted to the browser, in Processingjs the situation is different: The Web server has to deliver each of the data files individually to the browser. Depending on the type of application, this might result in several hundred individual queries the Web server has to deliver.

In fast networks and with only a few hops between client and server, this is not a problem, but might easily become one for slower networks.

Are there any ideas how to overcome such a situation? E.g. compressing the folder with the data files and do a JavaScript uncompress on the browser side, or similar?

Replies(2)

PhiLho

Re: Optimize loading of multiple (many) files with Processingjs

4 months ago

A trick generally used on the Web, when you have several icons (small images) is to use CSS sprites. Ie. group the images on the same big image. Then pick them up using CSS (for an HTML page) or get() or copy() (for PJS).
Bonus: if they have the same background (can be transparent for sprites), it improves the overall compression of the image.

mbraendle

Re: Optimize loading of multiple (many) files with Processingjs

4 months ago

Thank you. I know this trick from YUI library that I'm using often. However, for the given case, it is a batch of tiny SVG files, often only a few hundred bytes. One possibilty would be to pack them in master XML files using an XSLT transformation. Indeed doable for me, but which would add another layer of complexity for a project I have to hand over.

Top Reply