Subscribe to RSS Feed

Script Execution Analysis in Firefox 4

by Honza

A lot is happening these days and I bet you already know about Firefox 4 + Firebug 1.7 releases. You might also seen some of the new features introduced in Firebug 1.7 and so, I won't repeat that.

I'd like to focus on changes related to page load process and script execution in Firefox 4. Apart from many performance improvements script execution changed to be more HTML5 compliant and Firebug is an excellent tool that can be used to analyze & understand what is going on under the hood.

Thanks to Henri Sivonen for his excellent post about Script Execution Changes in Firefox 4 that served as the main source of information for me!

The old Firefox behavior was to execute non-async, non-defer scripts in the order in which they were run.

This statement has three consequences and I am going to analyze them step by step with Firebug. I recommend to read some terminology before reading further.

Let's also define three basic functions used in the examples.

function addExternalScript(url)
{
    var script = document.createElement("script");
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

function addInlineScript(source)
{
    var script = document.createElement("script");
    script.innerHTML = source;
    document.getElementsByTagName("head")[0].appendChild(script);
}

  • addExternalScript This function creates a <script> element and appends it into the document. The element fetches the script source from an external URL.
  • addInlineScript This function creates a <script> element, inserts script source (i.e. inline) and appends it into the document.

All external scripts used in the examples do only one thing:

console.log(<here-is-name-of-the-script-file>);

So, we can see order of executed scripts in Firebug Console panel.

Example #1

Script-inserted inline scripts didn’t execute synchronously if there were external scripts being fetched

Let's see the first example to demonstrate this case.

<script type="text/javascript">
console.log("start");
addExternalScript("script1.js");
addInlineScript("console.log('inline script')");
console.log("end");
</script>

This example appends an external script and while it's loading, the page immediately appends another inline script.

Note that you can see complete source code of the page in the HAR log below. Just expand the first request and pick the Response tab.

The Net panel shows the same for both, Firefox 3.6 and Firefox 4.

The difference is visible in the Console panel.

Firefox 3.6   Firefox 4.0  

Firefox 4 properly executes the inline script synchronously. Firefox 3.6 does not.

Example #2

Script-inserted scripts could block the parser upon the next parser-inserted script.

<script type="text/javascript">
console.log("start");
addExternalScript("script1.js");
console.log("end");
</script>
<script type="text/javascript" src="script2.js"></script>

This example is dynamically appending an external script before the parser reaches an existing <script> element on the page.

Firefox 3.6

Let's analyze Firefox 3.6 first.

...and the Console panel:

Script1 started loading first and blocked execution of script2 (see order of logs in the Console). You can see that DOMContentLoad event (DOM Loaded) was fired after the script1 even if script2 has been already there (for 2 sec) at the moment.

Firefox 4

And now see how it works in Firefox 4.

...and the Console panel:

Script2 started loading first and executed immediately as soon as the load finished (script execution is not visible on the waterfall so far*, but it happened just before the blue line). Note that the Console shows the script2.js log first. Script1 doesn't block anything, not even DOMContentLoad event (blue line) and yes it's executed as soon as it's loaded - after script2.

*Will be in Firebug 1.8

Example #3

Script-inserted external non-async, non-defer scripts executed in the order they were inserted into the document.

As usual, let's see the page source code snippet.

<script type="text/javascript">
console.log("start");
addExternalScript("script1.js");
addExternalScript("script2.js");
addExternalScript("script3.js");
console.log("end");
</script>

The page is dynamically appending three <script> elements.

The Net panel shows the same for both Firefox 3.6 and Firefox 4.0

The difference is visible in the Console panel.

Firefox 3.6   Firefox 4.0  

Firefox 3.6: Scripts starts loading in the same order as they are appended into the page. So far so good. But they are also executed in the same order! In other words, script2 is executed after script1 and so uselessly waiting 1.5sec (while JS enging doing nothing). Similarly for script3. Check the console logs.

Firefox 4: Check the Console Logs now. The execution order depends on how quickly each script is fetched! This means, each scrip is executed just immediately it finishes loading.

Cuzilion

I recommend Steve's excellent site called Cuzilion 'cuz there are a zillion pages to check - for further experiments with execution order and page load analysis.

Rss Commenti

3 Comments

  1. [...] Software is hard | Script Execution Analysis in Firefox 4 [...]

    #1 AKSHAY JEALOUS » BEST GLOBAL ZONE

  2. [...] Firebug 1.7 has been released we also started 1.8 branch alpha channel. There are couple of significant changes that might be [...]

    #2 Getfirebug Blog » Blog Archive » Firebug 1.8a1

  3. [...] 詳細はSoftware is hard | Script Execution Analysis in Firefox 4に。#2 [...]

    #3 Firebugを使ったページロード解析(Net panelの読み方) | Web scratch

Sorry, the comment form is closed at this time.