platypus.js

Experimental JavaScript loader that loads both CSS and JavaScript from one file resulting in only one request.

The idea is that you hide JavaScript code inside a CSS file. This means that the browser only has to load one file (the CSS) and platypus.js then extracts the JavaScript from the CSS file.

Check out the platypus.js repository to see the code and read instructions on how to use it.

Details

More details can be found in the GitHub repository here and in this blog post.

Demos / proof of concept

I have created several proof of concepts that prove that it is indeed possible to do so. The general idea is to hide JavaScript code inside a CSS file, and extract it after the browser downloads the CSS file. This results in only one request instead of two.

Note that this proof of concepts are just that, so if you wish to see the actual code that is platypus.js go to the GitHub repo and get it from there. This experiments helped me validate the idea and lead to the current code.

You can see the demos in the experiments folder or you can view them live bellow:

• demo #1 - original concept, loads CSS with AJAX and reads JS from a CSS comment
• demo #2 - to avoid FOUC, I put the JS code inside a content property in CSS, load the CSS normally and finally read the JS from there
• demo #3 - same as #2 but the JS is base64 encoded to avoid issues with quotes
• demo #4 - same as #3 but with whole jQuery
• demo #5 - same as #4 but can load JS code from multiple CSS files
• demo #5.1 - same as #5 but has more HTML, CSS & JS (it's a bootstrap theme demo page)

Browser support

Tested against all the experiments:

works

• Chrome 26.0.1386.0 dev (OS X) & Version 24.0.1312.52 m (Windows 7)
• Safari 6.0.2 (OS X & Windows 7)
• Firefox 18.0.1 (OS X & Windows 7) doesn't work on example 2, but it doesn't matter
• Internet Explorer 9 (Windows 7)
• Opera 12.12 (OS X & Windows 7)
• Dolphin on Android 4.0.3
• Chrome on Android 4.0.3
• stock browser on Android 4.0.3
• Mobile Safari 6 (iOS 6.0.1 iPad 4)
• Chrome on iOS 6.0.1 (iPad 4)

doesn't work

• Internet Explorer 9 in IE8 compatibility mode (Windows 7)
• Internet Explorer 8 and bellow