At work we have a GWT application which contains a large ( > 10mb) javascript file. In some cases that file is not executed by the browser. It seems like the application is frozen. A colleague and I observed that pretty strange behavior while using Firefox (didn’t recognize this in IE, Crome, Safari,…):
The js file is cached by the browser usually. In some cases the file is not cached completely. The strange thing happens when we want to reload the application. Due to the incomplete caching of that file, Firefox requests the missing part of the file (range request). But that ends up with the frozen-like behavior.
So we tried to isolate the problem especially without using GWT. In the end we found a way to reproduce the problem:
1. The HTML/Javascript file
We created a HTML file that loads large js-Files and reports their state of execution. The javascript method add will be called by the large js-Files (see later on).
ct.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <script type="text/javascript"> var count = 11; function initTable() { var p = document.getElementById('table'); var t = document.createElement('table'); t.setAttribute('border','1'); for (i = 0; i <= count; i++) { var tr = document.createElement('tr'); tr.setAttribute('id', 'tr-' + i); var td = document.createElement('td'); td.appendChild(document.createTextNode(i)); tr.appendChild(td); t.appendChild(tr); } p.appendChild(t); } function add (idx, text) { var td = document.createElement("td"); td.appendChild(document.createTextNode(text)); document.getElementById('tr-' + idx).appendChild(td); } function log (text) { var e = document.createElement("div"); e.innerHTML = text; document.getElementById('log').appendChild(e); } </script> </head> <body> <div id="table"></div> <div id="log"></div> <script type="text/javascript"> initTable(); log(new Date()); for (i = 0; i <= count; i++) { add(i, 'add script'); var s = document.createElement('script'); s.setAttribute('src', 'big' + i + '.cache.js'); s.setAttribute('type', 'text/javascript'); document.getElementsByTagName('head')[0].appendChild(s); } </script> </body> </html> |
2. Generating large js files
We wrote a Groovy script that generates files with three lines (named big${i}.cache.js)
- The first line contains
addcalling the add method with the argument “start”. - The second line contains ~30mb spaces
- The third line again contains code calling the
addmethod with the argument “end”.
|
1 2 3 4 5 6 |
def size = 31450000 for (i in 0..12) { def f = new File("/Users/user/apache/htdocs/big${i}.cache.js") f.delete() f << "add($i, 'start');\n" << " ".multiply(size) << "\nadd($i, 'end');" } |
3. Bring it together
Copy ct.html and the big.cache.js files into your webservers htdocs.
Clear your browser cache
Navigate to ct.html and wait till the table looks like this (all files are loaded and executed):
| 0 | add script | start | end |
| 1 | add script | start | end |
| 2 | add script | start | end |
| 3 | add script | start | end |
| 4 | add script | start | end |
| 5 | add script | start | end |
| 6 | add script | start | end |
| 7 | add script | start | end |
| 8 | add script | start | end |
| 9 | add script | start | end |
| 10 | add script | start | end |
| 11 | add script | start | end |
Then reload the page.
What you should see is that some scripts are executed (you see start/end columns) and some are not. You can see the not executed ones in Firebugs network sheet. Those are the ones with status “206 Partial Content”:
We reported that problem to Mozilla but got no response yet ( https://bugzilla.mozilla.org/show_bug.cgi?id=1117763 ).
But if you got the solution already, feel free to post it in the comment section 😎
My environment:
Firefox 34.0.5 on a Mac running OsX 10.10.1 (Yosemite)