CODEWITHSUNDEEP
javascriptdjangoformsgoogle-chromelag
greese
greese

Reputation: 21

Google Chrome Lags on Large Form Data Sumbissions

Summary:

I am attempting to pass base64 encoded image data via a form field input. My code works fine on all browsers I've tested it on, but there is severe amount of CPU lag, post submit, on Google Chrome - the length of which is proportional to the length of data submitted.

Details:

What I'm Doing: I have an SVG editor on my site in which users may create images to be saved to their profile. Once the user finishes their work, they click 'save' - which kicks off some javascript to convert the SVG into an encoded data string via canvas.toDataURL(), store it in a hidden input field, submit the form, and return the user to an overview of their designs.

What's the problem? The code, itself, seems to be functioning without an issue across both Firefox and Google Chrome. Firefox page loads take 1-2 seconds, regardless of the data_string size. However, on Google Chrome, the time it takes to load the 'overview' page is proportional to the size of the data string submitted in the hidden field.

For example, if I truncate the data string at various lengths, I receive different page load times:

Test Image 1:

Test Image 2:

My Question:

The delay is unacceptable (as most images will be at least 100k in size); does anyone know what's going on with Google Chrome?

I would like to reiterate that the server responds with the same speed, regardless of browser; it is definitely a client-side, browser specific issue with Google Chrome.

I would also appreciate alternative suggestions. I've spent some time attempting to fool the browser into thinking the data was a file upload (by changing the text input to a file input field and then manually trying to form the data and submit it via javascript, but I can't seem to get Django to recognize the falsified file (so it errors out, believing that no file was uploaded).

Upvotes: 1

Views: 2191

Answers (2)

Robin
Robin

Reputation: 864

I was also having the exact same problem, I was searching for a solution. In my case there was no such problem for the initial few runs of the page. Then it suddenly started to lag eating up a large amount of memory which in turn made my whole system running very slow. I tried in another PC like what expected there was no problem submitting the big sized svg data for the first few runs but later it is also showing the same lagging problem.

After reading your post i am planning to use jquery's ajax for posting the data . I hope this will solve the issue.

Upvotes: 0

greese
greese

Reputation: 21

Summary

Google Chrome seems to have a problem handling large amounts of data when said data is placed into an actual input field. I suspect it's an issue with Chrome attempting to clean up the memory used to display the data.

Details

I was able to achieve a workaround by doing away with the client-side form, entirely, and submitting the data via a javascript XMLHttpRequest (as I had touched on at the end of my question), then redirecting the user to the next page in the AJAX callback.

I could never get Django to recognize a manually formed FileField object (as multipart/form-data), but I was able to get it to accept a manually formed CharField string (which was my base64 encoded canvas data).

Because the data is never placed into an input field, Google Chrome responds without delay.

I hope that helps anyone who may run across a similar issue.

Upvotes: 1

Related Questions