Problem loading image in HTML (Performance)

Question

While the entire DOM parser process is blocked, this prevents the rendering of the rest of the page. And this if applied to each page script tag.

A way that I found to "circumvent" this problem was to put all the Javascripts in the footer of the site ( at the end of the body ) and no longer inside the tag head as it had been doing, this way they will be the last to be downloaded and will not block the page loading is up to a well known technique.

However the problem is that even using this artifice I get the problem of rendering, see that in the image that the test file.bmp ( is an example saw, 11mb in the image is only to demonstrate the problem) this image only starts to be loaded after the DOM is loaded (vertical line), it is "waiting" for everything to be loaded for only then do the refresh(rendering).

Question: Is there any way to render images in parallel (relative to scripts) all together, without waiting THE GIFT to carry everything.

Answer 1

Have you tried to perform asynchronous loading of JS files? In case you cannot use a tool called Labjs. You only reference it in before the body closes and load your scripts in this way.

//Load scripts in parallel, but in the order that was passed

$LAB.script('script1.js').wait()
    .script('script2.js').wait()
    .script('script3.js');

//If any script has no dependency on the previous ones, you can load it in parallel separately.

$LAB.script('script4.js');

HTML5 supports the async attribute in the script tag, but I believe it still has incompatibility with some browsers.