$async - async loader

Style.Tools
Style.Tools Github
Search…
CSS optimization widget
Critical CSS Generator
Unused CSS Remover & Extractor
Duplicate CSS Remover
$async - async loader
$lazy - IntersectionObserver
$async - async loader
​$async is a lightweight and high performance async CSS and script loader.
A lightweight and high performance async CSS and script loader. It provides many state of the art innovations for the ultimate performance result.
Examples
1
$async([
2
   'sheet.css',
3
   'script.js'
4
]).then(function() { /* ready */ });
Copied!
$async can be controlled from a HTML attribute which enables strict security.
1
<!-- config via an HTML attribute -->
2
<script async src="js/async-iife.js" data-c='[
3
   [
4
      "css/sheet1.css",
5
      "js/script.js",
6
      {
7
         "href": "https://cdn.com/css/sheet2.css",
8
         "attributes": {
9
            "integrity": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC",
10
            "crossorigin": "anonymous"
11
         }
12
      },
13
      {
14
         "src": "https://cdn.com/js/script2.js",
15
         "attributes": {
16
            "integrity": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC",
17
            "crossorigin": "anonymous"
18
         },
19
         "load_timing": "domReady",
20
         "ref": "x"
21
      },
22
      {
23
         "src": "js/script3.js",
24
         "dependencies": "x"
25
      }
26
   ],
27
   {
28
      "render_timing": "requestAnimationFrame",
29
      "exec_timing": {
30
         "type": "requestIdleCallback",
31
         "timeout": 1000
32
      }
33
   }
34
]'></script>
Copied!
The config can be compressed to save size in the HTML (see compressor).
1
<script async src="js/async-iife.js" data-c='[["css/sheet1.css","js/script.js",{"4":"https://cdn.com/css/sheet2.css","14":{"integrity":"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC","crossorigin":"anonymous"}},{"5":"https://cdn.com/js/script2.js","14":{"integrity":"sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC","crossorigin":"anonymous"},"16":"x","48":54},{"5":"js/script3.js","15":"x"}],{"49":52,"60":{"2":53,"57":1000}}]'></script>
Copied!
$async is designed as the ultimate CSS and script loader for modern frontend optimization (FEO). It provides state of the art features, the absolute best performance and the tiniest HTML footprint. $async supports all browsers including IE9+.
100% JSON controlled.
Google Closure Compiler (GCC) with Advanced mode script compression (reliable and performant in all browsers).
Modular
$async is modular and easy to use: select only the features that are needed to achieve the tiniest script size.
simply stitch pre-optimized GCC modules together for a performant IIFE. You can wrap the modules in dist/ into an IIFE, e.g. !function(){/* stitched modules */}();. Follow the module order in package.json.
​Online IIFE generator (adds an extra GCC Advanced mode compression layer)
​Node.js/CLI IIFE generator (adds an extra GCC Advanced mode compression layer)
PHP IIFE generator (available on request: [email protected])
Chainable
1
$async
2
   .on('load',function(sheet, sheetEl){
3
      //  sheet.css or other-sheet.css loaded
4
   }) 
5
   .on('sheet-ref',function() { }) // sheet with ref-name loaded
6
   .on('sheet.css', function() {}); // sheet with href loaded
7
   .load({
8
      href: 'sheet.css', 
9
      ref: 'sheet-ref'
10
   })
11
   .then(function() { }) // sheet.css loaded
12
   .load('other-sheet.css');
Copied!
Security
$async supports a strict Content-Security-Policy (CSP) and SRI security by using a HTML attribute on the script element. The data-c attribute accepts JSON config.
1
<script async src="js/async.js" data-c='[
2
   [
3
      "css/sheet1.css",
4
      {
5
         "href": "https://cdn.com/css/sheet2.css",
6
         "attributes": {
7
            "integrity": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC",
8
            "crossorigin": "anonymous"
9
         }
10
      }
11
   ]
12
]'></script>
Copied!
Advanced download and exec/render timing
$async provides advanced loading and timing techniques.
control the insert target.
time the download and/or exec/render using methods such as requestAnimationFrame, requestIdleCallback and $lazy (Intersection Observer).
dependency based loading.
responsive Media Query based loading with cross-browser support for viewport changes.
just-in-time loading using a custom javascript method.
1
$async(
2
 [
3
    "sheet.css",
4
    {
5
       href:"other-sheet.css",
6
       dependencies: ["sheet.css"], // wait for sheet.css via dependencies
7
       load_timing: {
8
          type: "lazy", // use $lazy for timing (Intersection Observer)
9
          config: [".selector-in-view", 0, "200px"], // visible within 200 pixels
10
       },
11
       ref: "other"
12
    }, 
13
    {
14
       href:"mobile-sheet.css",
15
       dependencies: "other", // dependency by ref
16
       target: {
17
          after: "meta[charset]" // control insert target
18
       },
19
       load_timing: {
20
          type: "media", // download stylesheet based on a media query (works with viewport changes, e.g. viewport rotate)
21
          media: "screen and (max-width: 600px)"
22
       }
23
    }
24
 ],
25
 /* global options: applied to all stylesheets */
26
 {
27
    // base directory for relative sheet URLs
28
    base: "/long/path/to/css/",
29
​
30
    // render timing: paint sheet with requestAnimationFrame
31
    render_timing: "requestAnimationFrame"
32
 } 
33
)
34
.then(function() { /* ready */ });
Copied!
just-in-time loading
1
$async([{
2
   href:"popup-css.css",
3
   load_timing: {
4
      type: "method", // trigger download using custom javascript method
5
      method: "load_popup_css"
6
   }
7
},{
8
   src:"popup-script.js",
9
   load_timing: {
10
      type: "method",
11
      method: "load_popup_js"
12
   }
13
}]);
14
​
15
// just-in-time loading
16
jQuery('button.popup').on('click', function() {
17
​
18
   // user clicks a button
19
   // load popup script/css just-in-time
20
​
21
    load_popup_css().then(function() {
22
      alert('popup CSS loaded');
23
    });
24
​
25
    load_popup_js().then(function() {
26
      alert('popup script loaded');
27
    });
28
});
Copied!
API's
$async provides API's for access to the dependency resolver and timing methods.
1
// dependency resolver
2
$async.dependencies(['name'], function() { /* dependency loaded */ });
3
​
4
// timing method
5
$async.time("requestAnimationFrame", function() { /* callback */ });
6
$async.time(48, function() {}); // the same using JSON compression
Copied!
localStorage cache
$async enables to load stylesheets and script from localStorage or Cache API cache which is much faster than browser cache.
For a demo, see css-art.com.
1
$async({
2
   href: "sheet.css",
3
   cache: {
4
      type: "localstorage",
5
      max_size: 10000, // cache only <10kb
6
      fallback: "cache-api", // fallback to Cache-API for bigger sheets
7
      update: {
8
         head: true, // use HTTP HEAD request to check for 304 - Not Modified
9
         interval: 86400 // update once per day
10
      },
11
​
12
      // control the source methods
13
      source: ["cssText","xhr","cors"], // default
14
​
15
      // optional: CORS proxy for retrieving the source code from external stylesheet URLs
16
      cors: {
17
         proxy: "https://cors-anywhere.herokuapp.com/", // more proxies on https://gist.github.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347
18
      },
19
​
20
      // custom XHR config
21
      xhr: {
22
         headers: {
23
            "x-special-header": "secret-key" // request header to include in XHR requests
24
         }
25
      }
26
   }
27
});
Copied!
JSON compression
$async provides a JSON compression technique to minimize the size of configuration.
​Online compressor | Node.js/CLI​
1
/* original config: 
2
{
3
   "href":"other-sheet.css",
4
   "dependencies": ["sheet.css"],
5
   "load_timing":{
6
      "type":"lazy",
7
      "config": [".selector-in-view",0,"200px"]
8
   },
9
   "ref":"other"
10
} */
11
​
12
// compressed
13
$async({"4":"other-sheet.css","15":["sheet.css"],"16":"other","48":{"2":62,"89":[".selector-in-view",0,"200px"]}});
Copied!
Async script-injected stylesheet/script capture
$async provides an innovation to capture and rewrite, remove or modify/optimize script-injected stylesheets and scripts.
rewrite
remove
modify
optimize (code optimization, apply timing, responsive loading, dependencies etc.)
1
// capture and remove async script-injected sheet
2
$async.capture(
3
 [
4
    {
5
       match: "bloated-sheet.css",
6
       action: {
7
          "type": "remove"
8
       }
9
    },
10
    {
11
       match: "/<script[^>]+bloated-script-id[^>]+>/",
12
       regex: true,
13
       match_type: "node",
14
       action: {
15
          "type": "remove"
16
       }
17
    },
18
    {
19
       match: "external-widget.com",
20
       action: {
21
          type: "rewrite",
22
          search: '/^.*cdn\.external-widget\.com/(.*).css#x27;,
23
          regex: true,
24
          replace: "/local-nginx-proxy/$1.css",
25
          async: {
26
             "load_timing": "requestIdleCallback",
27
             "target": {
28
                "after": "media[charset]"
29
             },
30
             "attributes": {
31
                "data-cdn": "external-widget.com"
32
             }
33
          }
34
       }
35
    },
36
    {
37
       match: "customer-review.js",
38
       action: {
39
          async: { 
40
             "load_timing": {
41
                type: 'lazy',
42
                config: '#customer-review' // load script when customer review widget enters viewport
43
             }
44
          }
45
       }
46
    }
47
 ],
48
 {
49
    insert: true // use DOM insert method rewriting
50
    // observer: true // alternative: use MutationObserver
51
 }
52
);
Copied!
Performance API timings for loading performance optimization
$async provides a debug mode with advanced Performance API timings that enables to analyse and optimize the CSS and script loading performance.
Could not load image
$async demo
Demo
$async is in use on www.e-scooter.co (demo website) and css-art.com (test environment).