Problem loading image in HTML (Performance)

Navigation
4

While the script is downloaded and run, the entire parser process of the DOM is blocked, this prevents rendering of the rest of the page. And this applies to every script tag on the page.

OnewayIfoundto"work around" this problem was to put all JavaScripts in the footer of the site (at the end of the body) and no longer within the head tag as it was doing, that way they will be the last ones to be downloaded and will not block the loading of the page is an already well-known technique.

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

Question: Is there any way to render images in parallel (in relation to scripts) all together, without waiting for the load DOM.

    
asked by anonymous 08.06.2015 / 14:26

1 answer

2

Have you tried to asynchronously load the JS files? If not you can use a tool called LABjs. You only reference it in before you close the body and then load your scripts.

// Loads the 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 is not dependent 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 is still incompatible with some browsers.

    
08.06.2015 / 16:39
Graph possible paths python How to avoid duplication of content in a table without a primary key?