HTML

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:

<!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>

<!DOCTYPE html>

<html>

<head>

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>

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 add calling the add method with the argument “start”.
The second line contains ~30mb spaces
The third line again contains code calling the add method with the argument “end”.

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');"
}

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)

Hackserei

It's about software

Widgets

Search

Strange behavior of Firefox when it comes to range requests of JavaScript files

1. The HTML/Javascript file

2. Generating large js files

3. Bring it together