asynccss
v0.0.5
Published
Utility that compiles CommonJS (NodeJS) modules into a single JavaScript file suitable for the browser
Downloads
5
Readme
AsyncCSS
A function for asynchronous loading of non-critical CSS and deferring Web Fonts, which leverages localStorage for caching. When a new version of file supplied (app.css?v2) any old versions (app.css?xx) are being removed from localStorage automatically
This work heavily influenced by
- Breaking news at 1000ms, Patrick Hamann, The Guardian
- BBC News team optimization experiments
- Improving Smashing Magazine’s Performance: A Case Study
Licensed MIT
Install
With npm do:
npm install asynccss --saveWith bower do:
bower install asynccss --saveUsage
asyncCss( [ path, .. ], options? );
options:
{Boolean} [debug="false"] - is verbose mode? (tells what it does in the console log)
{String} [ns="css_cache_"] - namespace per asyncCss call. If you reuse asyncCss later in your JavaScript,
supply a different `ns`. That will prevent the garbage collector from cleaning up items cached in a previous call.
{Function} [done=function(){}] - callback functionExample
<head>
...
<script type="text/javascript">
(function(){
<?php include ".../asyncCss.min.js"; ?>
try {
asyncCss( [ "css/foo.css", "css/bar.css" ], { debug: true } );
} catch( e ) {
console.log( "asyncCss: exception " + e );
}
}());
</script>
<noscript>
<link href="css/foo.css" rel="stylesheet">
<link href="css/bar.css" rel="stylesheet">
</noscript>
...
</head>Run automated-tests
$grunt mocha_phantomjsChangelog
- 0.0.5 - Garbage collector now removes only old version of a provided css file.
- 0.0.4 - Automated tests supplied
- 0.0.3 - A separate cache namespace can be supplied now per asyncCss call
- 0.0.2 - Hotfix: missing early exit was causing async loading even after CSS is present in the cache
- 0.0.1 - First commit