Skip to content
A lightweight asynchronous CSS and script loader with dependency, responsive and timed loading, localStorage and async injected stylesheet/script capture.
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 37f6fc6 Jul 30, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 1.0.6 Jul 30, 2019
json-schemas 1.0.1 Jun 30, 2019
src 1.0.6 Jul 30, 2019
test 1.0.4 Jul 14, 2019
.npmignore 1.0.0 May 18, 2019
.travis.yml 1.0.2 Jul 7, 2019
Gruntfile.js 1.0.4 Jul 14, 2019
LICENSE 1.0.0 May 18, 2019
README.md 1.0.2 Jul 7, 2019
async-debug-console.png desc Jun 13, 2019
async.ext.js 1.0.5 Jul 17, 2019
browserstack.json 1.0.0 Jun 4, 2019
browserstack.png 1.0.0 May 18, 2019
closure-compiler-modules.js 1.0.0 May 18, 2019
composer.json 1.0.5 Jul 17, 2019
compression-index.js 1.0.4 Jul 14, 2019
package.json 1.0.6 Jul 30, 2019

README.md

Build Status Version npm version Latest Stable Version

Async CSS and Script Loader

A lightweight asynchronous CSS and Javascript loader.

$async(
   [/*stylesheets*/],	// string, object or an array of strings or objects
   {/*options*/},			// object
   [/*capture*/],			// string, object or an array of strings or objects 
   {/*capture options*/}		// object

   /* 5 to 8th = javascript loader, same config as CSS loader */
   [],{},[],{}
).then(function() { /* ready */ });	

$async.js([],{},[],{}) // direct access to javascript loader

Documentation is available on docs.style.tools/async.

Features

  1. Dependency, responsive and timed download and/or render/exec.
  2. in-view (element in view) based loading.
  3. requestAnimationFrame and requestIdleCallback (smooth rendering/exec based on CPU)
  4. Chainable and events.
  5. localStorage or Cache API based loading (much faster, see css-art.com)
  6. Async injected stylesheet and script capture via MutationObserver or DOM insert method rewriting.
  7. Fallback via try {} catch and <noscript rel="css">.
  8. Google Closure Compiler with Advanced Optimizations based script compression (IIFE).
  9. HTML data-attribute data-c based JSON config to enable Content-Security-Policy (CSP) with page-based config.
  10. Performance API timings for debugging and optimization.

Install via npm

npm install @style.tools/async --save

Install via PHP Composer

composer require styletools/async

The script is optimized to achieve the minimum size possible for above the fold optimization.

Show script sizes of async loader modules
async-core.js Size: 2.04 kb (2089 bytes) Gzip: 0.99 kb (1012 bytes).
event-emitter.js Size: 0.47 kb (482 bytes) Gzip: 0.24 kb (245 bytes).
debug.js Size: 0.13 kb (130 bytes) Gzip: 0.13 kb (135 bytes).
css-loader.js Size: 1.07 kb (1094 bytes) Gzip: 0.63 kb (646 bytes).
js-loader.js Size: 1.83 kb (1876 bytes) Gzip: 1.01 kb (1032 bytes).
inline-js.js Size: 0.38 kb (390 bytes) Gzip: 0.27 kb (278 bytes).
rebase.js Size: 0.12 kb (124 bytes) Gzip: 0.12 kb (124 bytes).
regex.js Size: 0.14 kb (142 bytes) Gzip: 0.14 kb (144 bytes).
vendor.js Size: 0.18 kb (187 bytes) Gzip: 0.17 kb (169 bytes).
api.js Size: 0.25 kb (256 bytes) Gzip: 0.18 kb (187 bytes).
dependency.js Size: 0.71 kb (727 bytes) Gzip: 0.41 kb (418 bytes).
timing.js Size: 0.71 kb (726 bytes) Gzip: 0.41 kb (415 bytes).
inview.js Size: 0.92 kb (944 bytes) Gzip: 0.55 kb (566 bytes).
responsive.js Size: 0.26 kb (267 bytes) Gzip: 0.20 kb (201 bytes).
cache.js Size: 1.35 kb (1381 bytes) Gzip: 0.76 kb (776 bytes).
cache-css.js Size: 0.32 kb (325 bytes) Gzip: 0.24 kb (242 bytes).
cache-js.js Size: 0.05 kb (55 bytes) Gzip: 0.07 kb (71 bytes).
localstorage.js Size: 0.43 kb (438 bytes) Gzip: 0.28 kb (284 bytes).
cache-api.js Size: 0.62 kb (632 bytes) Gzip: 0.34 kb (353 bytes).
xhr.js Size: 0.83 kb (849 bytes) Gzip: 0.49 kb (503 bytes).
cache-update.js Size: 0.15 kb (152 bytes) Gzip: 0.13 kb (134 bytes).
capture.js Size: 1.23 kb (1259 bytes) Gzip: 0.71 kb (723 bytes).
capture-observer.js Size: 0.26 kb (263 bytes) Gzip: 0.20 kb (208 bytes).
capture-insert.js Size: 0.34 kb (348 bytes) Gzip: 0.22 kb (224 bytes).
capture-css.js Size: 0.14 kb (141 bytes) Gzip: 0.13 kb (131 bytes).
capture-js.js Size: 0.07 kb (69 bytes) Gzip: 0.08 kb (87 bytes).
attr-config.js Size: 0.29 kb (293 bytes) Gzip: 0.22 kb (229 bytes).

Demo

See $async in action on https://style.tools (browser console).

$async demo

You can’t perform that action at this time.