Efficient way of processing large data with Javascript in the browser

Question

I use a third-party flash component (wrapped with Javascript) with my web application, from which I get comma-separated values and base64 data from it:

Get csv string as array function:

// Get the csv as array function
var buff = $wnd.MyFlashComp.getData();
var strBuff = buff.toString();
var arr = strBuff.split(',');

Get base64 data function:

// Get the data as base64 function
var buff64 = $wnd.MyFlashComp.getData64();

When I use buff64 and plug it in a HTML tag as base64 src data, the data is rendered properly in the browser, that is the page is still snappy. And I don't see any performance issue with the page.

However, the function that gets the csv as array is very slow, and makes the page hang if not lag. The data I'm getting from flash range from 500KB to 1MB in size (max).

Is there a way to improve performance of this code?

Answer 1

Assuming that the main issue is the split because you are splitting 1MB of data, and you are on an HTML5 compliant (or modern) browser because of the base64, why not try doing the split in a web worker.

---

Or if not on an HTML5 browser, do some manual async loop (a looping setTimeout with 1ms delay) and string manipulation. Do this by chopping off a comma-separated portion of the string for every iteration until none is left.

The setTimeout should aid you for a non-blocking operation, but I don't know how long it takes to chop off the entire 1MB this way. And this is not really "async". It just schedules the task per timeout so the operation won't block the UI. Additionally, per iteration, you could do a "progress report" for a progress bar but checking how much of the 1MB is remaining.