2

There is an example of javascript blocking from Steve Souders from his Book 'High Performance Web Sites': http://stevesouders.com/hpws/js-blocking.php

Javascripts don't block Downloads anymore, but still do block rendering.

.. but there is a strange download activity:

There are 5 parallel downloads (max 6 are possible in Firefox 3 or IE 8 from the same server/host)

  • 4 Images (2 from host1, 2 from host2)
  • 1 Javascript in between

there is also a 5th image in the page, but the loading of this fifth image does not occure in parallel, but only after Javascript has finished loading.

so why does that Image not load in parallel with the other components? and the other 4 images do?

If you use the Net panel of Firebug you may see what I mean!

Betty St
  • 2,741
  • 21
  • 33

2 Answers2

1

Imagine a cursor moving through the HTML document from top to bottom. At each element the cursor is at, it resolves the element/image. When an image is encountered, an image load is started and the cursor moves on, the image doesn't need to be loaded for the renderer to continue.

Once the cursor hits a script tag it first loads that script and then executes it before proceeding to the next element. It basically holds that script tag to be high priority and will only proceed once the script is fully resolved; loading, evaluation and execution.

So any HTML (image or otherwise) that comes after the script tag is put on hold.

This is what is meant with JS Blocking and occurs when scripts are inserted using plain HTML.

This can be avoided by inserting scripts using JavaScript, because though you create HTML elements and append them to the DOM, it does not interrupt the HTML rendering cursor since thats another process entirely.

BGerrissen
  • 21,250
  • 3
  • 39
  • 40
  • ok, but the HTML after the script tag, in this example 2 images are already loaded but not rendered? and the other image is loaded in the end. so Javascript blocks the rendering and not the loading (sometimes)? – Betty St Jan 29 '11 at 20:25
  • Probably browser dependant, but you can assume any images after the script tag aren't downloaded untill the script has completed in most (older?) browsers. But yes, rendering is pauzed untill the script is loaded and done, at least that part is consistent. – BGerrissen Jan 29 '11 at 21:17
0

not an answer, just a screenshot to illustrate the question: why is the download of the last image only started after the javascript has stopped downloading?

screenshot of firebug

and here a possible answer: i put the html of the example on my server (all images and javascripts still on souders's server) and then looked at firebug: now i see the traditional blocking behavior:

enter image description here

loading the first javascript (util.js) blocks the loading of all the following images, loading the second javascript (the slow on) blocks the loading of all images after that.

maybe having the html and the scripts on the same server is some kind of special case that is treated differently by the browsers.

bjelli
  • 9,752
  • 4
  • 35
  • 50