Search code examples
javascriptperformancebrowserrequirejs

Preload script without execute

Problem

In order to improve the page performance I need to preload scripts that I will need to run on the bottom page.

I would like to take control of when the script is parsed, compiled and executed.

I must avoid the script tag, because it is blocker for common render engines (geeko, etc).

I can't load it using defer property, because I need to control when the script is executed. Also, async property is not a possibility.

sample: 

<html><head>
//preload scripts ie: a.js  without use the script
</head><body> ..... all my nice html here
//execute here a.js
</body></html>

This allows me to maximize the render performance of my page, because the browser will start to donwload the scripts content, and it will render the page at the same time in parallel. Finally, I can add the script tag, so the browser will parse, compile and execute the code.

The only way that I could do that is using a hidden image tag. (This is a simplified version of Stoyan)

i.e.

 <html><head>
 <img src="a.js" style=display:none;>
</head><body> ..... all my nice html here
 <script src="a.js">  
</body></html>

Question

I didn't find any problem using this technique, but does anyone know a better way to do this? Is there any meta prefetch?

Additional information

I'm using requirejs, so I'm trying to preload the modules code, without executing it, because this code depends of DOM elements.

Solution

  • You should have a look at the following links:

    http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/

    http://tomdale.net/2012/01/amd-is-not-the-answer/

    And at how ember.js is using a tool called minispade and preprocessing with ruby to make the process of loading, parsing and running javascript modules fast.