Skip to content
A lightweight asynchronous CSS and script loader with dependency, responsive and timed loading, localStorage and async injected stylesheet/script capture.
Branch: master
Clone or download
Latest commit 66b820d Jun 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist desc Jun 13, 2019
json-schemas 1.0.0 Jun 4, 2019
src desc Jun 13, 2019
test test May 18, 2019
.npmignore 1.0.0 May 18, 2019
.travis.yml 1.0.0 May 18, 2019
Gruntfile.js 1.0.0 Jun 4, 2019
LICENSE 1.0.0 May 18, 2019
README.md desc Jun 13, 2019
async-css.ext.js 1.0.0 May 18, 2019
async-debug-console.png desc Jun 13, 2019
async.ext.js 1.0.0 May 18, 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 desc Jun 5, 2019
compression-index.js 1.0.0 May 18, 2019
package.json 1.0.0 Jun 4, 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 or scripts*/],	// string, object or an array of strings or objects
   {/*options*/},			// object
   [/*capture*/],			// string, object or an array of strings or objects 
   {/*capture options*/}		// object
).then(function() { /* ready */ });	

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.