Databases
StackOverflow2013
Postsdbo
POHow to handle large may html/js files?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to handle large may html/js files?
    text
    copied!<p>I am working on HTML/JS based reports that <em>should</em> consist of one file. The current report is therefore 500 kB but this works quite well. However when you want to see the source code in Chrome it may freeze. A new report I am working on contains even more data and is currently around 1.5 MB. It is more or less impossible to see the source code in Chrome and I am afraid that it could cause trouble on slow devices.</p> <p>Any advise? Best practices? I have googled and searched through Stackoverflow but I couldn't find anything about size limits or about html/js code layout suggestions for easier Browser digestion. (I know from other languages, C++ for instance, that there exists hints how to make large files better digestable for the compiler, resulting in much faster compilations.)</p> <p>Edit: The current report's code size is by 99% HTML. (Tables) The tables are afterwards beautified with <a href="http://datatables.net" rel="nofollow">Datatables</a>. Removing all JS code unfortunately makes no difference. By the way, I have experimented with removing whitespaces (1.5 MB -> 1.1 MB) and also loading data from array instead of storing them in hard-coded html <code>table</code>, <code>tr</code>, <code>td</code> elements (1.5 MB -> 1.6 MB) but performance characteristics did not change.</p> <p>It's static files and the problem also occurs locally.</p> <p>2nd edit: I converted now the rest of the hardcoded table content to JS arrays and removed white-spaces, reducing size further. Now the file is at 900 kB and loads significantly better, the freezes are now for only about 3-5 seconds.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload