From 16692e341ea1ea747c015e99bac6b2fd09462d93 Mon Sep 17 00:00:00 2001
From: Shin <2082119+shinsenter@users.noreply.github.com>
Date: Mon, 5 Sep 2022 12:54:12 +0900
Subject: [PATCH] For v3.3.0 (#118)

---
 .build/.minify         |   2 +-
 README.md              |  44 +++++++-----
 demo/index.html        |  18 ++---
 dist/defer.min.js      |   4 +-
 dist/defer_plus.min.js |   4 +-
 dist/polyfill.min.js   |   2 +-
 docs/about.md          |  14 ++--
 docs/apis.md           |  30 +++++---
 docs/index.md          |  44 +++++++-----
 package-lock.json      |   4 +-
 package.json           |   4 +-
 src/defer.js           | 152 +++++++++++++++++++++--------------------
 src/docs.js            |  33 ++++++---
 13 files changed, 203 insertions(+), 152 deletions(-)

diff --git a/.build/.minify b/.build/.minify
index f0ffd00..77ebd9d 100644
--- a/.build/.minify
+++ b/.build/.minify
@@ -14,7 +14,7 @@
         "wrap_iife":    true
     },
     "annotations":      false,
-    "ie":               false,
+    "ie":               true,
     "keep_fargs":       false,
     "keep_fnames":      false,
     "module":           false,
diff --git a/README.md b/README.md
index 72b7cb6..c6a455b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Package @shinsenter/defer.js
 
-🥇 A JavaScript library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
+🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
 
 [![NPM](https://img.shields.io/npm/l/@shinsenter/defer.js)](https://code.shin.company/defer.js/blob/master/LICENSE)
 [![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@shinsenter/defer.js)](https://snyk.io/advisor/npm-package/@shinsenter/defer.js)
@@ -16,7 +16,7 @@
 [![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js)
 
 - **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js)
-- **Version**: 3.2.0
+- **Version**: 3.3.0
 - **Author**: Mai Nhut Tan <shin@shin.company>
 - **Copyright**: 2022 AppSeeds <https://code.shin.company/>
 - **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)
@@ -28,7 +28,7 @@
 
 ## Introduction
 
-Big CSS files, slow javascript (third-party add-ons, etc.),
+Big CSS files, slow JavaScript (third-party add-ons, etc.),
 or media resources (photos, videos, iframes) on your website may cause
 [Web Vitals](https://web.dev/vitals/) issues in real scenarios.
 
@@ -80,7 +80,7 @@ Just put a `<script>` tag pointing to the library URL just below the opening `<h
   <title>My Awesome Page</title>
 
   <!-- Put defer.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -96,7 +96,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin
   <title>My Awesome Page</title>
 
   <!-- Copy the script from the below URL -->
-  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer.min.js -->
+  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js -->
   <script>/* then replace this comment block with the content of defer.min.js */</script>
 
   <!-- ... -->
@@ -114,7 +114,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`.
   <title>My Awesome Page</title>
 
   <!-- Put defer_plus.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer_plus.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer_plus.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -132,7 +132,7 @@ right after the `defer.min.js` script tag as the following example:
 
 <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
 <!-- Please put IntersectionObserver polyfill right after defer.js script tag -->
-<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/polyfill.min.js"><\/script>');</script>
+<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/polyfill.min.js"><\/script>');</script>
 ```
 
 *HINT*: Modern browsers support `IntersectionObserver` feature,
@@ -274,11 +274,14 @@ You can fully defer any script tag by setting its `type` attribute to `deferjs`.
 This trick also works perfectly with `<script>` tags with an `src` attribute.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: Lazy loading behavior changed since v3.0
+**Note**: (1) To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.  
+**Note**: (2) Lazy loading behavior changed since v3.0
 when you set `Defer.lazy=true` or `waitForInteraction=true`.
 A `<script>` tags with `type="deferjs"` will not execute
 unless the user starts interacting with your page.  
-**Note**: [Preload hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
+**Note**: (3) [Resource hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
 as it is recommended to prevent issues called "[Taming the Waterfall](https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/#quirksitamingthewaterfall)".
 This feature is discussed at [#112](https://code.shin.company/defer.js/issues/112).  
 **Since**: 2.0  
@@ -295,7 +298,7 @@ Using magic `type="deferjs"` attribute:
 Before:
 ```html
 <script type="text/javascript">
-  // your javascript is here
+  // your JavaScript is here
   console.log('This script is a normal script tag.');
 </script>
 ```
@@ -303,7 +306,7 @@ Before:
 After:
 ```html
 <script type="deferjs">
-  // your javascript will still be here,
+  // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
   console.log('This script is lazy loaded with type="deferjs" attribute.');
 </script>
@@ -311,11 +314,16 @@ After:
 **Example**  
 Using your value for the type attribute, such as `type="my-magic"`:
 
-If you hate using the `type="deferjs"` attribute, you can even choose yours.
+If you hate using the `type="deferjs"` attribute,
+you can even choose yours by using the `Defer.all()` function.
+
+Notice: To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.
 
 ```html
 <script type="my-magic">
-  // your javascript will still be here,
+  // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
   console.log(
     'This script is lazy loaded with type="my-magic" attribute ' +
@@ -339,6 +347,10 @@ The `waitForInteraction` argument (the fifth argument) is set to `true`,
 the library will defer the load of the tippy.js library until the user starts
 interacting, when the user moves his/her mouse on the button, a tooltip will show.
 
+Notice: To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.
+
 
 ```html
 <button id="tooltip-button">My button</button>
@@ -753,14 +765,14 @@ No tag will be animated unless the user scrolls to its position.
 
 ### Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction]) ⇒ <code>void</code>
 We use `Defer.js()` to defer a load of 3rd-party
-javascript libraries, widgets, add-ons, etc. without blocking the page rendering.
+JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: Because the download of a file using `Defer.js()` function is asynchronous,
+**Note**: (1) Because the download of a file using `Defer.js()` function is asynchronous,
 to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
 it is highly recommended that the `onload` callback function be used
 to make sure that the library you needed is completely defined.  
-**Note**: Lazy loading behavior changed since v3.0
+**Note**: (2) Lazy loading behavior changed since v3.0
 when you set `Defer.lazy=true` or `waitForInteraction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
diff --git a/demo/index.html b/demo/index.html
index 06ca215..4986c7e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -24,7 +24,7 @@
     <main>
         <header>
             <h1><code>@shinsenter/defer.js</code></h1>
-            <p>🥇 A JavaScript library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.</p>
+            <p>🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.</p>
             <div class="demo-addthis addthis_inline_share_toolbox"></div>
         </header>
 
@@ -42,18 +42,18 @@ <h3>Quick installation:</h3>
                 <div class="helper">
                     Just put a <code>&lt;script&gt;</code> tag pointing to
                     <a target="_blank" title="defer.min.js"
-                        href="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer.min.js">the library URL</a>
+                        href="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js">the library URL</a>
                     just below the opening <code>&lt;head&gt;</code> tag of your page.
                     Because <code>defer.min.js</code> is optimized to a very tiny file size,
                     you can even inline entire the library to save one HTTP request.
                 </div>
                 <div class="demo">
 <!-- Copy the script from the below URL -->
-<!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer.min.js -->
+<!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js -->
 <script>/* then replace this comment block with the content of defer.min.js here */</script>
 
 <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
-<script>'IntersectionObserver'in window||document.write('<script defer src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/polyfill.min.js"><\/script>');</script>
+<script>'IntersectionObserver'in window||document.write('<script defer src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/polyfill.min.js"><\/script>');</script>
                 </div>
             </div>
         </section>
@@ -82,13 +82,13 @@ <h3>Using magic <mark><code>type="deferjs"</code></mark> attribute:</h3>
                     will not execute unless the user starts interacting with your page.
                     <br>
                     <strong>Note: </strong>
-                    <a href="" target="_blank">Preload hints</a> feature was added since v3.2
+                    <a href="" target="_blank">Resource hints</a> feature was added since v3.2
                     as it is recommended to prevent issues called <a href="https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/#quirksitamingthewaterfall" target="_blank">Taming the Waterfall</a>.
                     This feature is discussed at <a href="https://code.shin.company/defer.js/issues/112" target="_blank">#112</a>.
                 </div>
                 <div class="demo">
 <script type="deferjs">
-    // your javascript will still be here,
+    // your JavaScript will still be here,
     // but it will not run unless the user starts interacting with your page.
     console.log('This script is lazy loaded with type="deferjs" attribute.');
 </script>
@@ -110,13 +110,13 @@ <h3>Using your value for the type attribute, such as <mark><code>type="my-magic"
                     will not execute unless the user starts interacting with your page.
                     <br>
                     <strong>Note: </strong>
-                    <a href="" target="_blank">Preload hints</a> feature was added since v3.2
+                    <a href="" target="_blank">Resource hints</a> feature was added since v3.2
                     as it is recommended to prevent issues called <a href="https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/#quirksitamingthewaterfall" target="_blank">Taming the Waterfall</a>.
                     This feature is discussed at <a href="https://code.shin.company/defer.js/issues/112" target="_blank">#112</a>.
                 </div>
                 <div class="demo">
 <script type="my-magic">
-    // your javascript will still be here,
+    // your JavaScript will still be here,
     // but it will not run unless the user starts interacting with your page.
     console.log(
         'This script is lazy loaded with type="my-magic" attribute ' +
@@ -642,7 +642,7 @@ <h3>Lazy load animate.css library:</h3>
             <h2><code>Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction])</code></h2>
 
             <div class="helper">
-                We use <code>Defer.js</code> to defer a load of 3rd-party javascript libraries, add-ons etc. without blocking the page rendering.
+                We use <code>Defer.js</code> to defer a load of 3rd-party JavaScript libraries, add-ons etc. without blocking the page rendering.
                 <br>
                 <strong>Note 1: </strong>
                 Because the download of a file using <code>Defer.js</code> function is asynchronous,
diff --git a/dist/defer.min.js b/dist/defer.min.js
index a166db6..d6cfce2 100644
--- a/dist/defer.min.js
+++ b/dist/defer.min.js
@@ -1,2 +1,2 @@
-/*!@shinsenter/defer.js@3.2.0*/
-!(function(n){var t,u="Defer",i=n.document,o=n.setTimeout,s=n.IntersectionObserver,c=/p/.test(i.readyState),r=[],a=[],f=r.slice,l="load",e="pageshow",d="on"+e in n?e:l,m=["mousemove","keydown","touchstart","wheel"],h="crossorigin",p="integrity",v="forEach",y="getAttribute",g="setAttribute",b="shift",E="link",w="script";function x(e,n,t){c?o(e,n):(void 0===t&&x.lazy||t?a:r).push(e,n)}function A(e){i.head.appendChild(e)}function I(e,n){f.call(e.attributes)[v](n)}function N(e,n,t,o){return o=(n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function j(e,n,t){(n=e.src)&&((t=N(E)).rel="preload",t.as=w,t.href=n,(n=e[y](h))&&t[g](h,n),(n=e[y](p))&&t[g](p,n),A(t))}function k(e,n){e.parentNode.replaceChild(n,e)}function C(e,n){return f.call((n||i).querySelectorAll(e))}function L(t,e){C("source,img",t)[v](L),I(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[g](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),l in t&&t[l]()}function S(e,n,t){x(function(o){(o=C(e||"[type=deferjs]"))[v](j),(function e(n,t){(n=o[b]())&&(t=N(n.nodeName),I(n,function(e){"type"!=e.name&&t[g](e.name,e.value)}),t.text=n.text,t.src&&!t[y]("async")?(t.onload=t.onerror=e,k(n,t)):(k(n,t),e()))})()},n,t)}function q(e){n.addEventListener(e,t)}function z(e){n.removeEventListener(e,t)}x.all=S,x.dom=function(e,n,i,c,r){x(function(t){function o(e){c&&!1===c(e)||L(e,i)}t=!!s&&new s(function(e){e[v](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},r),C(e||"[data-src]")[v](function(e){e[u]!=x&&(e[u]=x,t?t.observe(e):o(e))})},n,!1)},x.css=function(n,t,e,o,i){x(function(e){(e=N(E,t,o)).rel="stylesheet",e.href=n,A(e)},e,i)},x.js=function(n,t,e,o,i){x(function(e){(e=N(w,t,o)).src=n,A(e)},e,i)},x.reveal=L,n[u]=x,t=function(e,n){for(n=d==e.type?(z(d),S(),c=x,m[v](q),r):(m[v](z),a);n[0];)o(n[b](),n[b]())},c||q(d)})(this);
\ No newline at end of file
+/*!@shinsenter/defer.js@3.3.0*/
+!(function(n){var t,u="Defer",i=n.document||n,o=n.setTimeout,s=n.IntersectionObserver,c=/p/.test(i.readyState),r=[],a=[],f=r.slice,l="load",e="pageshow",d=["mousemove","keydown","touchstart","wheel"],m="on"+e in n?e:l,h="crossorigin",p="integrity",v="forEach",y="getAttribute",g="setAttribute",b="shift",E="link",w="script";function x(e){n.addEventListener(e,t)}function A(e){n.removeEventListener(e,t)}function I(e,n,t){c?o(e,n):(void 0===t&&I.lazy||t?a:r).push(e,n)}function N(e){i.head.appendChild(e)}function j(e,n){f.call(e.attributes)[v](n)}function k(e,n,t,o){return o=(n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function C(e,n,t){(n=e.src)&&((t=k(E)).rel="preload",t.as=w,t.href=n,(n=e[y](h))&&t[g](h,n),(n=e[y](p))&&t[g](p,n),N(t))}function L(e,n){e.parentNode.replaceChild(n,e)}function S(e,n){return f.call((n||i).querySelectorAll(e))}function q(t,e){S("source,img",t)[v](q),j(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[g](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),l in t&&t[l]()}function z(e,n,t){I(function(t){(t=S(e||"[type=deferjs]"))[v](C),(function o(e,n){(e=t[b]())&&((n=k(e.nodeName)).text=e.text,j(e,function(e){"type"!=e.name&&n[g](e.name,e.value)}),n.src&&!n[y]("async")?(n.onload=n.onerror=o,L(e,n)):(L(e,n),o()))})()},n,t)}t=function(e,n){for(n=m==e.type?(A(m),c=I,d[v](x),r):(d[v](A),a);n[0];)o(n[b](),n[b]())},c||x(m),z(),I.all=z,I.dom=function(e,n,i,c,r){I(function(t){function o(e){c&&!1===c(e)||q(e,i)}t=!!s&&new s(function(e){e[v](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},r),S(e||"[data-src]")[v](function(e){e[u]!=I&&(e[u]=I,t?t.observe(e):o(e))})},n,!1)},I.css=function(n,t,e,o,i){I(function(e){(e=k(E,t,o)).rel="stylesheet",e.href=n,N(e)},e,i)},I.js=function(n,t,e,o,i){I(function(e){(e=k(w,t,o)).src=n,N(e)},e,i)},I.reveal=q,n[u]=I})(this);
\ No newline at end of file
diff --git a/dist/defer_plus.min.js b/dist/defer_plus.min.js
index c5b38b1..c57918f 100644
--- a/dist/defer_plus.min.js
+++ b/dist/defer_plus.min.js
@@ -1,2 +1,2 @@
-/*!@shinsenter/defer.js@3.2.0*/
-!(function(n){var t,s="Defer",i=n.document,o=n.setTimeout,f=n.IntersectionObserver,r=/p/.test(i.readyState),c=[],u=[],a=c.slice,l="load",e="pageshow",d="on"+e in n?e:l,m=["mousemove","keydown","touchstart","wheel"],h="crossorigin",p="integrity",y="forEach",v="getAttribute",g="setAttribute",b="shift",E="link",w="script";function j(e,n,t){r?o(e,n):(void 0===t&&j.lazy||t?u:c).push(e,n)}function x(e){i.head.appendChild(e)}function A(e,n){a.call(e.attributes)[y](n)}function I(e,n,t,o){return o=(n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function N(e,n,t){(n=e.src)&&((t=I(E)).rel="preload",t.as=w,t.href=n,(n=e[v](h))&&t[g](h,n),(n=e[v](p))&&t[g](p,n),x(t))}function k(e,n){e.parentNode.replaceChild(n,e)}function C(e,n){return a.call((n||i).querySelectorAll(e))}function D(t,e){C("source,img",t)[y](D),A(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[g](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),l in t&&t[l]()}function L(e,n,t){j(function(o){(o=C(e||"[type=deferjs]"))[y](N),(function e(n,t){(n=o[b]())&&(t=I(n.nodeName),A(n,function(e){"type"!=e.name&&t[g](e.name,e.value)}),t.text=n.text,t.src&&!t[v]("async")?(t.onload=t.onerror=e,k(n,t)):(k(n,t),e()))})()},n,t)}function S(e){n.addEventListener(e,t)}function q(e){n.removeEventListener(e,t)}j.all=L,j.dom=function(e,n,i,r,c){j(function(t){function o(e){r&&!1===r(e)||D(e,i)}t=!!f&&new f(function(e){e[y](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},c),C(e||"[data-src]")[y](function(e){e[s]!=j&&(e[s]=j,t?t.observe(e):o(e))})},n,!1)},j.css=function(n,t,e,o,i){j(function(e){(e=I(E,t,o)).rel="stylesheet",e.href=n,x(e)},e,i)},j.js=function(n,t,e,o,i){j(function(e){(e=I(w,t,o)).src=n,x(e)},e,i)},j.reveal=D,n[s]=j,t=function(e,n){for(n=d==e.type?(q(d),L(),r=j,m[y](S),c):(m[y](q),u);n[0];)o(n[b](),n[b]())},r||S(d)})(this),(function(e,n){n=e.defer=e.Defer,e.deferimg=e.deferiframe=n.dom,e.deferstyle=n.css,e.deferscript=n.js})(this);
\ No newline at end of file
+/*!@shinsenter/defer.js@3.3.0*/
+!(function(n){var t,s="Defer",i=n.document||n,o=n.setTimeout,f=n.IntersectionObserver,r=/p/.test(i.readyState),c=[],u=[],a=c.slice,l="load",e="pageshow",d=["mousemove","keydown","touchstart","wheel"],m="on"+e in n?e:l,h="crossorigin",p="integrity",y="forEach",v="getAttribute",g="setAttribute",b="shift",E="link",w="script";function j(e){n.addEventListener(e,t)}function x(e){n.removeEventListener(e,t)}function A(e,n,t){r?o(e,n):(void 0===t&&A.lazy||t?u:c).push(e,n)}function I(e){i.head.appendChild(e)}function N(e,n){a.call(e.attributes)[y](n)}function k(e,n,t,o){return o=(n?i.getElementById(n):o)||i.createElement(e),n&&(o.id=n),t&&(o.onload=t),o}function C(e,n,t){(n=e.src)&&((t=k(E)).rel="preload",t.as=w,t.href=n,(n=e[v](h))&&t[g](h,n),(n=e[v](p))&&t[g](p,n),I(t))}function D(e,n){e.parentNode.replaceChild(n,e)}function L(e,n){return a.call((n||i).querySelectorAll(e))}function S(t,e){L("source,img",t)[y](S),N(t,function(e,n){(n=/^data-(.+)/.exec(e.name))&&t[g](n[1],e.value)}),"string"==typeof e&&e&&(t.className+=" "+e),l in t&&t[l]()}function q(e,n,t){A(function(t){(t=L(e||"[type=deferjs]"))[y](C),(function o(e,n){(e=t[b]())&&((n=k(e.nodeName)).text=e.text,N(e,function(e){"type"!=e.name&&n[g](e.name,e.value)}),n.src&&!n[v]("async")?(n.onload=n.onerror=o,D(e,n)):(D(e,n),o()))})()},n,t)}t=function(e,n){for(n=m==e.type?(x(m),r=A,d[y](j),c):(d[y](x),u);n[0];)o(n[b](),n[b]())},r||j(m),q(),A.all=q,A.dom=function(e,n,i,r,c){A(function(t){function o(e){r&&!1===r(e)||S(e,i)}t=!!f&&new f(function(e){e[y](function(e,n){e.isIntersecting&&(t.unobserve(n=e.target),o(n))})},c),L(e||"[data-src]")[y](function(e){e[s]!=A&&(e[s]=A,t?t.observe(e):o(e))})},n,!1)},A.css=function(n,t,e,o,i){A(function(e){(e=k(E,t,o)).rel="stylesheet",e.href=n,I(e)},e,i)},A.js=function(n,t,e,o,i){A(function(e){(e=k(w,t,o)).src=n,I(e)},e,i)},A.reveal=S,n[s]=A})(this),(function(e,n){n=e.defer=e.Defer,e.deferimg=e.deferiframe=n.dom,e.deferstyle=n.css,e.deferscript=n.js})(this);
\ No newline at end of file
diff --git a/dist/polyfill.min.js b/dist/polyfill.min.js
index 9f52aa0..a946831 100644
--- a/dist/polyfill.min.js
+++ b/dist/polyfill.min.js
@@ -1 +1 @@
-!(function(){"use strict";var g,n,m,_;function r(t){try{return t.defaultView&&t.defaultView.frameElement||null}catch(t){return null}}function u(t){this.time=t.time,this.target=t.target,this.rootBounds=o(t.rootBounds),this.boundingClientRect=o(t.boundingClientRect),this.intersectionRect=o(t.intersectionRect||a()),this.isIntersecting=!!t.intersectionRect;var t=this.boundingClientRect,t=t.width*t.height,e=this.intersectionRect;this.intersectionRatio=t?Number((e.width*e.height/t).toFixed(4)):this.isIntersecting?1:0}function t(t,e){var n,o,i,e=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(e.root&&1!=e.root.nodeType&&9!=e.root.nodeType)throw new Error("root must be a Document or Element");this._checkForIntersections=(n=this._checkForIntersections.bind(this),o=this.THROTTLE_TIMEOUT,i=null,function(){i=i||setTimeout(function(){n(),i=null},o)}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(e.rootMargin),this.thresholds=this._initThresholds(e.threshold),this.root=e.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}function s(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detachEvent&&t.detachEvent("on"+e,n)}function b(t){var e;try{e=t.getBoundingClientRect()}catch(t){}return e?e.width&&e.height?e:{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}:a()}function a(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function o(t){return!t||"x"in t?t:{top:t.top,y:t.top,bottom:t.bottom,left:t.left,x:t.left,right:t.right,width:t.width,height:t.height}}function w(t,e){var n=e.top-t.top,t=e.left-t.left;return{top:n,left:t,height:e.height,width:e.width,bottom:n+e.height,right:t+e.width}}function i(t,e){for(var n=e;n;){if(n==t)return!0;n=v(n)}return!1}function v(t){var e=t.parentNode;return 9==t.nodeType&&t!=g?r(t):(e=e&&e.assignedSlot?e.assignedSlot.parentNode:e)&&11==e.nodeType&&e.host?e.host:e}function c(t){return t&&9===t.nodeType}"object"==typeof window&&("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype?"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return 0<this.intersectionRatio}}):(g=(function(){for(var t=window.document,e=r(t);e;)e=r(t=e.ownerDocument);return t})(),n=[],_=m=null,t.prototype.THROTTLE_TIMEOUT=100,t.prototype.POLL_INTERVAL=null,t.prototype.USE_MUTATION_OBSERVER=!0,t._setupCrossOriginUpdater=function(){return m=m||function(t,e){_=t&&e?w(t,e):a(),n.forEach(function(t){t._checkForIntersections()})}},t._resetCrossOriginUpdater=function(){_=m=null},t.prototype.observe=function(e){if(!this._observationTargets.some(function(t){return t.element==e})){if(!e||1!=e.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:e,entry:null}),this._monitorIntersections(e.ownerDocument),this._checkForIntersections()}},t.prototype.unobserve=function(e){this._observationTargets=this._observationTargets.filter(function(t){return t.element!=e}),this._unmonitorIntersections(e.ownerDocument),0==this._observationTargets.length&&this._unregisterInstance()},t.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},t.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},t.prototype._initThresholds=function(t){t=t||[0];return(t=Array.isArray(t)?t:[t]).sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||1<t)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},t.prototype._parseRootMargin=function(t){t=(t||"0px").split(/\s+/).map(function(t){t=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(t)return{value:parseFloat(t[1]),unit:t[2]};throw new Error("rootMargin must be specified in pixels or percent")});return t[1]=t[1]||t[0],t[2]=t[2]||t[0],t[3]=t[3]||t[1],t},t.prototype._monitorIntersections=function(e){var n,o,i,t=e.defaultView;t&&-1==this._monitoringDocuments.indexOf(e)&&(n=this._checkForIntersections,i=o=null,this.POLL_INTERVAL?o=t.setInterval(n,this.POLL_INTERVAL):(s(t,"resize",n,!0),s(e,"scroll",n,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in t&&(i=new t.MutationObserver(n)).observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._monitoringDocuments.push(e),this._monitoringUnsubscribes.push(function(){var t=e.defaultView;t&&(o&&t.clearInterval(o),h(t,"resize",n,!0)),h(e,"scroll",n,!0),i&&i.disconnect()}),e!=(this.root&&(this.root.ownerDocument||this.root)||g)&&(t=r(e))&&this._monitorIntersections(t.ownerDocument))},t.prototype._unmonitorIntersections=function(o){var i,t,e=this._monitoringDocuments.indexOf(o);-1!=e&&(i=this.root&&(this.root.ownerDocument||this.root)||g,this._observationTargets.some(function(t){if((e=t.element.ownerDocument)==o)return!0;for(;e&&e!=i;){var e,n=r(e);if((e=n&&n.ownerDocument)==o)return!0}return!1})||(t=this._monitoringUnsubscribes[e],this._monitoringDocuments.splice(e,1),this._monitoringUnsubscribes.splice(e,1),t(),o!=i&&(e=r(o))&&this._unmonitorIntersections(e.ownerDocument)))},t.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0;for(var e=this._monitoringUnsubscribes.length=0;e<t.length;e++)t[e]()},t.prototype._checkForIntersections=function(){var h,c;!this.root&&m&&!_||(h=this._rootIsInDom(),c=h?this._getRootRect():a(),this._observationTargets.forEach(function(t){var e=t.element,n=b(e),o=this._rootContainsTarget(e),i=t.entry,r=h&&o&&this._computeTargetAndRootIntersection(e,n,c),s=null,t=(this._rootContainsTarget(e)?m&&!this.root||(s=c):s=a(),t.entry=new u({time:window.performance&&performance.now&&performance.now(),target:e,boundingClientRect:n,rootBounds:s,intersectionRect:r}));i?h&&o?this._hasCrossedThreshold(i,t)&&this._queuedEntries.push(t):i&&i.isIntersecting&&this._queuedEntries.push(t):this._queuedEntries.push(t)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this))},t.prototype._computeTargetAndRootIntersection=function(t,e,n){if("none"!=window.getComputedStyle(t).display){for(var o,i,r,s,h=e,c=v(t),u=!1;!u&&c;){var a,l,p,f=null,d=1==c.nodeType?window.getComputedStyle(c):{};if("none"==d.display)return null;if(c==this.root||9==c.nodeType?(u=!0,c==this.root||c==g?m&&!this.root?!_||0==_.width&&0==_.height?h=f=c=null:f=_:f=n:(a=(p=v(c))&&b(p),l=p&&this._computeTargetAndRootIntersection(p,a,n),a&&l?(c=p,f=w(a,l)):h=c=null)):c!=(p=c.ownerDocument).body&&c!=p.documentElement&&"visible"!=d.overflow&&(f=b(c)),f&&(a=f,l=h,d=Math.max(a.top,l.top),f=Math.min(a.bottom,l.bottom),o=Math.max(a.left,l.left),s=f-d,h=0<=(r=(i=Math.min(a.right,l.right))-o)&&0<=s?{top:d,bottom:f,left:o,right:i,width:r,height:s}:null),!h)break;c=c&&v(c)}return h}},t.prototype._getRootRect=function(){var t,e=this.root&&!c(this.root)?b(this.root):(t=(e=c(this.root)?this.root:g).body,{top:0,left:0,right:(e=e.documentElement).clientWidth||t.clientWidth,width:e.clientWidth||t.clientWidth,bottom:e.clientHeight||t.clientHeight,height:e.clientHeight||t.clientHeight});return this._expandRectByRootMargin(e)},t.prototype._expandRectByRootMargin=function(n){var t=this._rootMarginValues.map(function(t,e){return"px"==t.unit?t.value:t.value*(e%2?n.width:n.height)/100}),t={top:n.top-t[0],right:n.right+t[1],bottom:n.bottom+t[2],left:n.left-t[3]};return t.width=t.right-t.left,t.height=t.bottom-t.top,t},t.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var i=0;i<this.thresholds.length;i++){var r=this.thresholds[i];if(r==n||r==o||r<n!=r<o)return!0}},t.prototype._rootIsInDom=function(){return!this.root||i(g,this.root)},t.prototype._rootContainsTarget=function(t){var e=this.root&&(this.root.ownerDocument||this.root)||g;return i(e,t)&&(!this.root||e==t.ownerDocument)},t.prototype._registerInstance=function(){n.indexOf(this)<0&&n.push(this)},t.prototype._unregisterInstance=function(){var t=n.indexOf(this);-1!=t&&n.splice(t,1)},window.IntersectionObserver=t,window.IntersectionObserverEntry=u))})();
\ No newline at end of file
+!(function(){"use strict";var g,n,m,_;function r(t){try{return t.defaultView&&t.defaultView.frameElement||null}catch(e){return null}}function u(t){this.time=t.time,this.target=t.target,this.rootBounds=o(t.rootBounds),this.boundingClientRect=o(t.boundingClientRect),this.intersectionRect=o(t.intersectionRect||a()),this.isIntersecting=!!t.intersectionRect;var t=this.boundingClientRect,t=t.width*t.height,e=this.intersectionRect;this.intersectionRatio=t?Number((e.width*e.height/t).toFixed(4)):this.isIntersecting?1:0}function t(t,e){var n,o,i,e=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(e.root&&1!=e.root.nodeType&&9!=e.root.nodeType)throw new Error("root must be a Document or Element");this._checkForIntersections=(n=this._checkForIntersections.bind(this),o=this.THROTTLE_TIMEOUT,i=null,function(){i=i||setTimeout(function(){n(),i=null},o)}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(e.rootMargin),this.thresholds=this._initThresholds(e.threshold),this.root=e.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}function s(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detachEvent&&t.detachEvent("on"+e,n)}function b(t){var e;try{e=t.getBoundingClientRect()}catch(n){}return e?e.width&&e.height?e:{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}:a()}function a(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function o(t){return!t||"x"in t?t:{top:t.top,y:t.top,bottom:t.bottom,left:t.left,x:t.left,right:t.right,width:t.width,height:t.height}}function w(t,e){var n=e.top-t.top,t=e.left-t.left;return{top:n,left:t,height:e.height,width:e.width,bottom:n+e.height,right:t+e.width}}function i(t,e){for(var n=e;n;){if(n==t)return!0;n=v(n)}return!1}function v(t){var e=t.parentNode;return 9==t.nodeType&&t!=g?r(t):(e=e&&e.assignedSlot?e.assignedSlot.parentNode:e)&&11==e.nodeType&&e.host?e.host:e}function c(t){return t&&9===t.nodeType}"object"==typeof window&&("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype?"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return 0<this.intersectionRatio}}):(g=(function(){for(var t=window.document,e=r(t);e;)e=r(t=e.ownerDocument);return t})(),n=[],_=m=null,t.prototype.THROTTLE_TIMEOUT=100,t.prototype.POLL_INTERVAL=null,t.prototype.USE_MUTATION_OBSERVER=!0,t._setupCrossOriginUpdater=function(){return m=m||function(t,e){_=t&&e?w(t,e):a(),n.forEach(function(t){t._checkForIntersections()})}},t._resetCrossOriginUpdater=function(){_=m=null},t.prototype.observe=function(e){if(!this._observationTargets.some(function(t){return t.element==e})){if(!e||1!=e.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:e,entry:null}),this._monitorIntersections(e.ownerDocument),this._checkForIntersections()}},t.prototype.unobserve=function(e){this._observationTargets=this._observationTargets.filter(function(t){return t.element!=e}),this._unmonitorIntersections(e.ownerDocument),0==this._observationTargets.length&&this._unregisterInstance()},t.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},t.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},t.prototype._initThresholds=function(t){t=t||[0];return(t=Array.isArray(t)?t:[t]).sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||1<t)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},t.prototype._parseRootMargin=function(t){t=(t||"0px").split(/\s+/).map(function(t){t=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(t)return{value:parseFloat(t[1]),unit:t[2]};throw new Error("rootMargin must be specified in pixels or percent")});return t[1]=t[1]||t[0],t[2]=t[2]||t[0],t[3]=t[3]||t[1],t},t.prototype._monitorIntersections=function(e){var n,o,i,t=e.defaultView;t&&-1==this._monitoringDocuments.indexOf(e)&&(n=this._checkForIntersections,i=o=null,this.POLL_INTERVAL?o=t.setInterval(n,this.POLL_INTERVAL):(s(t,"resize",n,!0),s(e,"scroll",n,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in t&&(i=new t.MutationObserver(n)).observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._monitoringDocuments.push(e),this._monitoringUnsubscribes.push(function(){var t=e.defaultView;t&&(o&&t.clearInterval(o),h(t,"resize",n,!0)),h(e,"scroll",n,!0),i&&i.disconnect()}),e!=(this.root&&(this.root.ownerDocument||this.root)||g)&&(t=r(e))&&this._monitorIntersections(t.ownerDocument))},t.prototype._unmonitorIntersections=function(o){var i,t,e=this._monitoringDocuments.indexOf(o);-1!=e&&(i=this.root&&(this.root.ownerDocument||this.root)||g,this._observationTargets.some(function(t){if((e=t.element.ownerDocument)==o)return!0;for(;e&&e!=i;){var e,n=r(e);if((e=n&&n.ownerDocument)==o)return!0}return!1})||(t=this._monitoringUnsubscribes[e],this._monitoringDocuments.splice(e,1),this._monitoringUnsubscribes.splice(e,1),t(),o!=i&&(e=r(o))&&this._unmonitorIntersections(e.ownerDocument)))},t.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0;for(var e=this._monitoringUnsubscribes.length=0;e<t.length;e++)t[e]()},t.prototype._checkForIntersections=function(){var h,c;!this.root&&m&&!_||(h=this._rootIsInDom(),c=h?this._getRootRect():a(),this._observationTargets.forEach(function(t){var e=t.element,n=b(e),o=this._rootContainsTarget(e),i=t.entry,r=h&&o&&this._computeTargetAndRootIntersection(e,n,c),s=null,t=(this._rootContainsTarget(e)?m&&!this.root||(s=c):s=a(),t.entry=new u({time:window.performance&&performance.now&&performance.now(),target:e,boundingClientRect:n,rootBounds:s,intersectionRect:r}));i?h&&o?this._hasCrossedThreshold(i,t)&&this._queuedEntries.push(t):i&&i.isIntersecting&&this._queuedEntries.push(t):this._queuedEntries.push(t)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this))},t.prototype._computeTargetAndRootIntersection=function(t,e,n){if("none"!=window.getComputedStyle(t).display){for(var o,i,r,s,h=e,c=v(t),u=!1;!u&&c;){var a,l,p,f=null,d=1==c.nodeType?window.getComputedStyle(c):{};if("none"==d.display)return null;if(c==this.root||9==c.nodeType?(u=!0,c==this.root||c==g?m&&!this.root?!_||0==_.width&&0==_.height?h=f=c=null:f=_:f=n:(a=(p=v(c))&&b(p),l=p&&this._computeTargetAndRootIntersection(p,a,n),a&&l?(c=p,f=w(a,l)):h=c=null)):c!=(p=c.ownerDocument).body&&c!=p.documentElement&&"visible"!=d.overflow&&(f=b(c)),f&&(a=f,l=h,d=Math.max(a.top,l.top),f=Math.min(a.bottom,l.bottom),o=Math.max(a.left,l.left),s=f-d,h=0<=(r=(i=Math.min(a.right,l.right))-o)&&0<=s?{top:d,bottom:f,left:o,right:i,width:r,height:s}:null),!h)break;c=c&&v(c)}return h}},t.prototype._getRootRect=function(){var t,e=this.root&&!c(this.root)?b(this.root):(t=(e=c(this.root)?this.root:g).body,{top:0,left:0,right:(e=e.documentElement).clientWidth||t.clientWidth,width:e.clientWidth||t.clientWidth,bottom:e.clientHeight||t.clientHeight,height:e.clientHeight||t.clientHeight});return this._expandRectByRootMargin(e)},t.prototype._expandRectByRootMargin=function(n){var t=this._rootMarginValues.map(function(t,e){return"px"==t.unit?t.value:t.value*(e%2?n.width:n.height)/100}),t={top:n.top-t[0],right:n.right+t[1],bottom:n.bottom+t[2],left:n.left-t[3]};return t.width=t.right-t.left,t.height=t.bottom-t.top,t},t.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var i=0;i<this.thresholds.length;i++){var r=this.thresholds[i];if(r==n||r==o||r<n!=r<o)return!0}},t.prototype._rootIsInDom=function(){return!this.root||i(g,this.root)},t.prototype._rootContainsTarget=function(t){var e=this.root&&(this.root.ownerDocument||this.root)||g;return i(e,t)&&(!this.root||e==t.ownerDocument)},t.prototype._registerInstance=function(){n.indexOf(this)<0&&n.push(this)},t.prototype._unregisterInstance=function(){var t=n.indexOf(this);-1!=t&&n.splice(t,1)},window.IntersectionObserver=t,window.IntersectionObserverEntry=u))})();
\ No newline at end of file
diff --git a/docs/about.md b/docs/about.md
index 9964d1b..77437da 100644
--- a/docs/about.md
+++ b/docs/about.md
@@ -1,6 +1,6 @@
 # Package @shinsenter/defer.js
 
-🥇 A JavaScript library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
+🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
 
 [![NPM](https://img.shields.io/npm/l/@shinsenter/defer.js)](https://code.shin.company/defer.js/blob/master/LICENSE)
 [![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@shinsenter/defer.js)](https://snyk.io/advisor/npm-package/@shinsenter/defer.js)
@@ -16,7 +16,7 @@
 [![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js)
 
 - **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js)
-- **Version**: 3.2.0
+- **Version**: 3.3.0
 - **Author**: Mai Nhut Tan <shin@shin.company>
 - **Copyright**: 2022 AppSeeds <https://code.shin.company/>
 - **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)
@@ -28,7 +28,7 @@
 
 ## Introduction
 
-Big CSS files, slow javascript (third-party add-ons, etc.),
+Big CSS files, slow JavaScript (third-party add-ons, etc.),
 or media resources (photos, videos, iframes) on your website may cause
 [Web Vitals](https://web.dev/vitals/) issues in real scenarios.
 
@@ -80,7 +80,7 @@ Just put a `<script>` tag pointing to the library URL just below the opening `<h
   <title>My Awesome Page</title>
 
   <!-- Put defer.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -96,7 +96,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin
   <title>My Awesome Page</title>
 
   <!-- Copy the script from the below URL -->
-  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer.min.js -->
+  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js -->
   <script>/* then replace this comment block with the content of defer.min.js */</script>
 
   <!-- ... -->
@@ -114,7 +114,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`.
   <title>My Awesome Page</title>
 
   <!-- Put defer_plus.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer_plus.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer_plus.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -132,7 +132,7 @@ right after the `defer.min.js` script tag as the following example:
 
 <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
 <!-- Please put IntersectionObserver polyfill right after defer.js script tag -->
-<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/polyfill.min.js"><\/script>');</script>
+<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/polyfill.min.js"><\/script>');</script>
 ```
 
 *HINT*: Modern browsers support `IntersectionObserver` feature,
diff --git a/docs/apis.md b/docs/apis.md
index e24a6dd..576bd39 100644
--- a/docs/apis.md
+++ b/docs/apis.md
@@ -135,11 +135,14 @@ You can fully defer any script tag by setting its `type` attribute to `deferjs`.
 This trick also works perfectly with `<script>` tags with an `src` attribute.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: Lazy loading behavior changed since v3.0
+**Note**: (1) To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.  
+**Note**: (2) Lazy loading behavior changed since v3.0
 when you set `Defer.lazy=true` or `waitForInteraction=true`.
 A `<script>` tags with `type="deferjs"` will not execute
 unless the user starts interacting with your page.  
-**Note**: [Preload hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
+**Note**: (3) [Resource hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
 as it is recommended to prevent issues called "[Taming the Waterfall](https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/#quirksitamingthewaterfall)".
 This feature is discussed at [#112](https://code.shin.company/defer.js/issues/112).  
 **Since**: 2.0  
@@ -156,7 +159,7 @@ Using magic `type="deferjs"` attribute:
 Before:
 ```html
 <script type="text/javascript">
-  // your javascript is here
+  // your JavaScript is here
   console.log('This script is a normal script tag.');
 </script>
 ```
@@ -164,7 +167,7 @@ Before:
 After:
 ```html
 <script type="deferjs">
-  // your javascript will still be here,
+  // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
   console.log('This script is lazy loaded with type="deferjs" attribute.');
 </script>
@@ -172,11 +175,16 @@ After:
 **Example**  
 Using your value for the type attribute, such as `type="my-magic"`:
 
-If you hate using the `type="deferjs"` attribute, you can even choose yours.
+If you hate using the `type="deferjs"` attribute,
+you can even choose yours by using the `Defer.all()` function.
+
+Notice: To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.
 
 ```html
 <script type="my-magic">
-  // your javascript will still be here,
+  // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
   console.log(
     'This script is lazy loaded with type="my-magic" attribute ' +
@@ -200,6 +208,10 @@ The `waitForInteraction` argument (the fifth argument) is set to `true`,
 the library will defer the load of the tippy.js library until the user starts
 interacting, when the user moves his/her mouse on the button, a tooltip will show.
 
+Notice: To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.
+
 
 ```html
 <button id="tooltip-button">My button</button>
@@ -614,14 +626,14 @@ No tag will be animated unless the user scrolls to its position.
 
 ### Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction]) ⇒ <code>void</code>
 We use `Defer.js()` to defer a load of 3rd-party
-javascript libraries, widgets, add-ons, etc. without blocking the page rendering.
+JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: Because the download of a file using `Defer.js()` function is asynchronous,
+**Note**: (1) Because the download of a file using `Defer.js()` function is asynchronous,
 to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
 it is highly recommended that the `onload` callback function be used
 to make sure that the library you needed is completely defined.  
-**Note**: Lazy loading behavior changed since v3.0
+**Note**: (2) Lazy loading behavior changed since v3.0
 when you set `Defer.lazy=true` or `waitForInteraction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
diff --git a/docs/index.md b/docs/index.md
index 72b7cb6..c6a455b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,6 @@
 # Package @shinsenter/defer.js
 
-🥇 A JavaScript library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
+🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.
 
 [![NPM](https://img.shields.io/npm/l/@shinsenter/defer.js)](https://code.shin.company/defer.js/blob/master/LICENSE)
 [![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@shinsenter/defer.js)](https://snyk.io/advisor/npm-package/@shinsenter/defer.js)
@@ -16,7 +16,7 @@
 [![NPM](https://nodei.co/npm/@shinsenter/defer.js.png?downloads=true)](https://www.npmjs.com/package/@shinsenter/defer.js)
 
 - **Package**: [@shinsenter/defer.js](https://www.npmjs.com/package/@shinsenter/defer.js)
-- **Version**: 3.2.0
+- **Version**: 3.3.0
 - **Author**: Mai Nhut Tan <shin@shin.company>
 - **Copyright**: 2022 AppSeeds <https://code.shin.company/>
 - **License**: [MIT](https://code.shin.company/defer.js/blob/master/LICENSE)
@@ -28,7 +28,7 @@
 
 ## Introduction
 
-Big CSS files, slow javascript (third-party add-ons, etc.),
+Big CSS files, slow JavaScript (third-party add-ons, etc.),
 or media resources (photos, videos, iframes) on your website may cause
 [Web Vitals](https://web.dev/vitals/) issues in real scenarios.
 
@@ -80,7 +80,7 @@ Just put a `<script>` tag pointing to the library URL just below the opening `<h
   <title>My Awesome Page</title>
 
   <!-- Put defer.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -96,7 +96,7 @@ Because `defer.min.js` is optimized to a very tiny file size, you can even inlin
   <title>My Awesome Page</title>
 
   <!-- Copy the script from the below URL -->
-  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer.min.js -->
+  <!-- https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer.min.js -->
   <script>/* then replace this comment block with the content of defer.min.js */</script>
 
   <!-- ... -->
@@ -114,7 +114,7 @@ just use `defer_plus.min.js` instead of `defer.min.js`.
   <title>My Awesome Page</title>
 
   <!-- Put defer_plus.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/defer_plus.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/defer_plus.min.js"></script>
 
   <!-- ... -->
 </head>
@@ -132,7 +132,7 @@ right after the `defer.min.js` script tag as the following example:
 
 <!-- If legacy browsers like Internet Explorer 9 still need to be supported -->
 <!-- Please put IntersectionObserver polyfill right after defer.js script tag -->
-<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.2.0/dist/polyfill.min.js"><\/script>');</script>
+<script>'IntersectionObserver'in window||document.write('<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@3.3.0/dist/polyfill.min.js"><\/script>');</script>
 ```
 
 *HINT*: Modern browsers support `IntersectionObserver` feature,
@@ -274,11 +274,14 @@ You can fully defer any script tag by setting its `type` attribute to `deferjs`.
 This trick also works perfectly with `<script>` tags with an `src` attribute.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: Lazy loading behavior changed since v3.0
+**Note**: (1) To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.  
+**Note**: (2) Lazy loading behavior changed since v3.0
 when you set `Defer.lazy=true` or `waitForInteraction=true`.
 A `<script>` tags with `type="deferjs"` will not execute
 unless the user starts interacting with your page.  
-**Note**: [Preload hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
+**Note**: (3) [Resource hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
 as it is recommended to prevent issues called "[Taming the Waterfall](https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/#quirksitamingthewaterfall)".
 This feature is discussed at [#112](https://code.shin.company/defer.js/issues/112).  
 **Since**: 2.0  
@@ -295,7 +298,7 @@ Using magic `type="deferjs"` attribute:
 Before:
 ```html
 <script type="text/javascript">
-  // your javascript is here
+  // your JavaScript is here
   console.log('This script is a normal script tag.');
 </script>
 ```
@@ -303,7 +306,7 @@ Before:
 After:
 ```html
 <script type="deferjs">
-  // your javascript will still be here,
+  // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
   console.log('This script is lazy loaded with type="deferjs" attribute.');
 </script>
@@ -311,11 +314,16 @@ After:
 **Example**  
 Using your value for the type attribute, such as `type="my-magic"`:
 
-If you hate using the `type="deferjs"` attribute, you can even choose yours.
+If you hate using the `type="deferjs"` attribute,
+you can even choose yours by using the `Defer.all()` function.
+
+Notice: To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.
 
 ```html
 <script type="my-magic">
-  // your javascript will still be here,
+  // your JavaScript will still be here,
   // but it will not run unless the user starts interacting with your page.
   console.log(
     'This script is lazy loaded with type="my-magic" attribute ' +
@@ -339,6 +347,10 @@ The `waitForInteraction` argument (the fifth argument) is set to `true`,
 the library will defer the load of the tippy.js library until the user starts
 interacting, when the user moves his/her mouse on the button, a tooltip will show.
 
+Notice: To avoid unexpected behavior when using
+the `Defer.all()` function to delay the execution of script tags,
+you should call run `Defer.all()` with a regular script tag.
+
 
 ```html
 <button id="tooltip-button">My button</button>
@@ -753,14 +765,14 @@ No tag will be animated unless the user scrolls to its position.
 
 ### Defer.js(fileUrl, [id], [delay], [onload], [waitForInteraction]) ⇒ <code>void</code>
 We use `Defer.js()` to defer a load of 3rd-party
-javascript libraries, widgets, add-ons, etc. without blocking the page rendering.
+JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.
 
 **Kind**: static method of [<code>Defer</code>](#Defer)  
-**Note**: Because the download of a file using `Defer.js()` function is asynchronous,
+**Note**: (1) Because the download of a file using `Defer.js()` function is asynchronous,
 to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
 it is highly recommended that the `onload` callback function be used
 to make sure that the library you needed is completely defined.  
-**Note**: Lazy loading behavior changed since v3.0
+**Note**: (2) Lazy loading behavior changed since v3.0
 when you set `Defer.lazy=true` or `waitForInteraction=true`.
 The `fileUrl` will not be fetched unless the user starts interacting with your page.  
 **Since**: 2.0  
diff --git a/package-lock.json b/package-lock.json
index 4812ac3..13af5cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@shinsenter/defer.js",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@shinsenter/defer.js",
-      "version": "3.2.0",
+      "version": "3.3.0",
       "funding": [
         {
           "type": "github",
diff --git a/package.json b/package.json
index af0abe2..d87820a 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@shinsenter/defer.js",
   "title": "defer.js",
-  "version": "3.2.0",
-  "description": "🥇 A JavaScript library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.",
+  "version": "3.3.0",
+  "description": "🥇 A JavaScript micro-library that helps you lazy load (almost) anything. It's zero-dependency, super-efficient, and Web Vitals friendly.",
   "homepage": "https://shinsenter.github.io/defer.js/",
   "license": "MIT",
   "author": {
diff --git a/src/defer.js b/src/defer.js
index c9342ca..c3580a9 100644
--- a/src/defer.js
+++ b/src/defer.js
@@ -36,15 +36,15 @@
  *
  * @author    Mai Nhut Tan <shin@shin.company>
  * @copyright 2022 AppSeeds <https://code.shin.company/>
- * @version   3.2.0
+ * @version   3.3.0
  * @license   {@link https://code.shin.company/defer.js/blob/master/LICENSE|MIT}
  */
 
-/*!@shinsenter/defer.js@3.2.0*/
+/*!@shinsenter/defer.js@3.3.0*/
 (function (window) {
 
   var namespace  = 'Defer';
-  var version    = '3.2.0';
+  var version    = '3.3.0';
   var _debugName = namespace + ' v' + version;
 
   /*
@@ -53,8 +53,11 @@
   |--------------------------------------------------------------------------
   */
 
+  // window event handler
+  var _eventHandler;
+
   // browser features
-  var document = window.document;
+  var document = window.document || window;
   var engine   = window.setTimeout;
 
   // the IntersectionObserver feature
@@ -69,15 +72,14 @@
   // page events
   var _load         = 'load';
   var _pageshow     = 'pageshow';
-  var _browserEvent = 'on' + _pageshow in window ? _pageshow : _load;
   var _userEvents   = ['mousemove', 'keydown', 'touchstart', 'wheel'];
+  var _windowEvent  = 'on' + _pageshow in window ? _pageshow : _load;
 
   // aliases for object attributes
   var _attrCrossorigin = 'crossorigin';
   var _attrIntegrity   = 'integrity';
 
   // aliases for object methods
-  var _fnBootDefer;
   var _fnForEach    = 'forEach';
   var _fnGetAttr    = 'getAttribute';
   var _fnSetAttr    = 'setAttribute';
@@ -87,10 +89,10 @@
   var _selectorDOM  = '[data-src]';
   var _selectorJS   = '[type=deferjs]';
 
-  // other constants
-  var FALSE  = false;
-  var LINK   = 'link';
-  var SCRIPT = 'script';
+  // other reusable variables
+  var _boolFalse    = false;
+  var _txtLink      = 'link';
+  var _txtScript    = 'script';
 
   /*
   |--------------------------------------------------------------------------
@@ -106,6 +108,22 @@
     console.log('%c ' + text, 'color:' + color);
   }
 
+  /*
+  |--------------------------------------------------------------------------
+  | Window event handlers
+  |--------------------------------------------------------------------------
+  */
+
+  // shorthand for window.addEventListener
+  function fnAttachWindowEvent(event) {
+    window.addEventListener(event, _eventHandler);
+  }
+
+  // shorthand for window.removeEventListener
+  function fnDetachWindowEvent(event) {
+    window.removeEventListener(event, _eventHandler);
+  }
+
   /*
   |--------------------------------------------------------------------------
   | Defines the defer function
@@ -169,11 +187,11 @@
 
     if (_temp) {
       // creates a fresh node
-      _node = fnCreateNode(LINK);
+      _node = fnCreateNode(_txtLink);
 
       // sets attributes
       _node.rel  = 'preload';
-      _node.as   = SCRIPT;
+      _node.as   = _txtScript;
       _node.href = _temp;
 
       // copies crossorigin from the original node if exists
@@ -220,11 +238,11 @@
     fnSelect('source,img', node)[_fnForEach](fnDeferReveal);
 
     // transforms data-xxx attributes to normal attributes
-    fnAttrIterator(node, function (_attr, _matches) {
-      _matches = (/^data-(.+)/).exec(_attr.name);
+    fnAttrIterator(node, function (attribute, _matches) {
+      _matches = (/^data-(.+)/).exec(attribute.name);
 
       if (_matches) {
-        node[_fnSetAttr](_matches[1], _attr.value);
+        node[_fnSetAttr](_matches[1], attribute.value);
       }
     });
 
@@ -253,7 +271,7 @@
     function _init(_observer) {
       // unveils an observed node
       function _unveil(node) {
-        if (!resolver || resolver(node) !== FALSE) {
+        if (!resolver || resolver(node) !== _boolFalse) {
           fnDeferReveal(node, unveiledClass);
         }
       }
@@ -281,7 +299,7 @@
           });
         }, observeOptions);
       } else {
-        _observer = FALSE;
+        _observer = _boolFalse;
       }
 
       // collects target nodes and registers them to the observer
@@ -289,38 +307,38 @@
     }
 
     // defers the init function without the lazy mode
-    self(_init, delay, FALSE);
+    self(_init, delay, _boolFalse);
   }
 
   // the core of the Defer.all
   function fnDeferScripts(selector, delay, lazy) {
     function _init(_queueDefer) {
-      function _nextTag(_node, _freshNode) {
+      function _nextTag(_node, _clone) {
         // pops the next script tag in front of the queue
         _node = _queueDefer[_fnShift]();
 
         if (_node) {
           // clones the node
-          _freshNode = fnCreateNode(_node.nodeName);
+          _clone = fnCreateNode(_node.nodeName);
+
+          // copies the text content
+          _clone.text = _node.text;
 
           // copies all attributes from the node
-          fnAttrIterator(_node, function (_attr) {
-            if (_attr.name != 'type') {
-              _freshNode[_fnSetAttr](_attr.name, _attr.value);
+          fnAttrIterator(_node, function (attribute) {
+            if (attribute.name != 'type') {
+              _clone[_fnSetAttr](attribute.name, attribute.value);
             }
           });
 
-          // copies the text content
-          _freshNode.text = _node.text;
-
           // attaches clone node to the document
           // NOTE: script tag with src and non-async will wait for its execution
           // NOTE: async attribute MUST be checked via getAttribute()
-          if (_freshNode.src && !_freshNode[_fnGetAttr]('async')) {
-            _freshNode.onload = _freshNode.onerror = _nextTag;
-            fnReplaceNode(_node, _freshNode);
+          if (_clone.src && !_clone[_fnGetAttr]('async')) {
+            _clone.onload = _clone.onerror = _nextTag;
+            fnReplaceNode(_node, _clone);
           } else {
-            fnReplaceNode(_node, _freshNode);
+            fnReplaceNode(_node, _clone);
             _nextTag();
           }
         }
@@ -342,7 +360,7 @@
   // the core of the Defer.css
   function fnDeferCss(fileUrl, id, delay, onload, lazy) {
     function _init(_node) {
-      _node      = fnCreateNode(LINK, id, onload);
+      _node      = fnCreateNode(_txtLink, id, onload);
       _node.rel  = 'stylesheet';
       _node.href = fileUrl;
       fnAttach(_node);
@@ -354,7 +372,7 @@
   // the core of the Defer.js
   function fnDeferJs(fileUrl, id, delay, onload, lazy) {
     function _init(_node) {
-      _node     = fnCreateNode(SCRIPT, id, onload);
+      _node     = fnCreateNode(_txtScript, id, onload);
       _node.src = fileUrl;
       fnAttach(_node);
     }
@@ -364,56 +382,18 @@
 
   /*
   |--------------------------------------------------------------------------
-  | Window event handlers
-  |--------------------------------------------------------------------------
-  */
-
-  // shorthand for window.addEventListener
-  function fnAttachWindowEvent(event) {
-    window.addEventListener(event, _fnBootDefer);
-  }
-
-  // shorthand for window.removeEventListener
-  function fnDetachWindowEvent(event) {
-    window.removeEventListener(event, _fnBootDefer);
-  }
-
-  /*
-  |--------------------------------------------------------------------------
-  | Defines defer utility functions will be publicly exposed
-  |--------------------------------------------------------------------------
-  */
-
-  // exposes public methods
-  self.all    = fnDeferScripts;
-  self.dom    = fnDeferDom;
-  self.css    = fnDeferCss;
-  self.js     = fnDeferJs;
-  self.reveal = fnDeferReveal;
-
-  // exposes the Defer instance
-  window[namespace] = self;
-
-  /*
-  |--------------------------------------------------------------------------
-  | Boot
+  | Boot function (on page load / user interactions)
   |--------------------------------------------------------------------------
   */
 
   // handles window events
-  _fnBootDefer = function (event, _queue) {
+  _eventHandler = function (event, _queue) {
     // debug
     log(_debugName + ': "' + event.type + '" event was triggered.', '#90f');
 
-    if (_browserEvent == event.type) {
+    if (_windowEvent == event.type) {
       // removes browser event listening
-      fnDetachWindowEvent(_browserEvent);
-
-      // also unveils the lazy script tags
-      fnDeferScripts();
-
-      // debug
-      log(_debugName + ' is now ready!', '#9a3');
+      fnDetachWindowEvent(_windowEvent);
 
       // tells the core that the page has fully loaded
       _booted = self;
@@ -423,6 +403,9 @@
       log(_debugName + ': ' + _queueDefer.length / 2 + ' queued task(s) will execute from now!', '#f09');
       log(_debugName + ': ' + _queueDelay.length / 2 + ' other task(s) will be delayed until there is user interaction.', '#f90');
 
+      // debug
+      log(_debugName + ' is now ready!', '#9a3');
+
       // adds user events for delayed tasks
       _userEvents[_fnForEach](fnAttachWindowEvent);
 
@@ -447,9 +430,28 @@
 
   if (!_booted) {
     // adds an event listener for the page load event
-    fnAttachWindowEvent(_browserEvent);
+    fnAttachWindowEvent(_windowEvent);
   }
 
+  /*
+  |--------------------------------------------------------------------------
+  | Defines defer utility functions will be publicly exposed
+  |--------------------------------------------------------------------------
+  */
+
+  // unveils the script tags with type="deferjs"
+  fnDeferScripts();
+
+  // exposes public methods
+  self.all    = fnDeferScripts;
+  self.dom    = fnDeferDom;
+  self.css    = fnDeferCss;
+  self.js     = fnDeferJs;
+  self.reveal = fnDeferReveal;
+
+  // exposes the Defer instance
+  window[namespace] = self;
+
   // debug
   log(_debugName + ' was injected!', '#888');
 
diff --git a/src/docs.js b/src/docs.js
index da41cae..48b6644 100644
--- a/src/docs.js
+++ b/src/docs.js
@@ -37,7 +37,7 @@
  *
  * @author    Mai Nhut Tan <shin@shin.company>
  * @copyright 2022 AppSeeds <https://code.shin.company/>
- * @version   3.2.0
+ * @version   3.3.0
  * @license   {@link https://code.shin.company/defer.js/blob/master/LICENSE|MIT}
  */
 
@@ -179,12 +179,16 @@
  * You can fully defer any script tag by setting its `type` attribute to `deferjs`.
  * This trick also works perfectly with `<script>` tags with an `src` attribute.
  *
- * @note Lazy loading behavior changed since v3.0
+ * @note (1) To avoid unexpected behavior when using
+ * the `Defer.all()` function to delay the execution of script tags,
+ * you should call run `Defer.all()` with a regular script tag.
+ *
+ * @note (2) Lazy loading behavior changed since v3.0
  * when you set `Defer.lazy=true` or `waitForInteraction=true`.
  * A `<script>` tags with `type="deferjs"` will not execute
  * unless the user starts interacting with your page.
  *
- * @note [Preload hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
+ * @note (3) [Resource hints](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) feature was added since v3.2
  * as it is recommended to prevent issues called "[Taming the Waterfall](https://blog.cloudflare.com/too-old-to-rocket-load-too-young-to-die/#quirksitamingthewaterfall)".
  * This feature is discussed at [#112](https://code.shin.company/defer.js/issues/112).
  *
@@ -201,7 +205,7 @@
  * Before:
  * ```html
  * <script type="text/javascript">
- *   // your javascript is here
+ *   // your JavaScript is here
  *   console.log('This script is a normal script tag.');
  * </script>
  * ```
@@ -209,7 +213,7 @@
  * After:
  * ```html
  * <script type="deferjs">
- *   // your javascript will still be here,
+ *   // your JavaScript will still be here,
  *   // but it will not run unless the user starts interacting with your page.
  *   console.log('This script is lazy loaded with type="deferjs" attribute.');
  * </script>
@@ -218,11 +222,16 @@
  * @example
  * Using your value for the type attribute, such as `type="my-magic"`:
  *
- * If you hate using the `type="deferjs"` attribute, you can even choose yours.
+ * If you hate using the `type="deferjs"` attribute,
+ * you can even choose yours by using the `Defer.all()` function.
+ *
+ * Notice: To avoid unexpected behavior when using
+ * the `Defer.all()` function to delay the execution of script tags,
+ * you should call run `Defer.all()` with a regular script tag.
  *
  * ```html
  * <script type="my-magic">
- *   // your javascript will still be here,
+ *   // your JavaScript will still be here,
  *   // but it will not run unless the user starts interacting with your page.
  *   console.log(
  *     'This script is lazy loaded with type="my-magic" attribute ' +
@@ -247,6 +256,10 @@
  * the library will defer the load of the tippy.js library until the user starts
  * interacting, when the user moves his/her mouse on the button, a tooltip will show.
  *
+ * Notice: To avoid unexpected behavior when using
+ * the `Defer.all()` function to delay the execution of script tags,
+ * you should call run `Defer.all()` with a regular script tag.
+ *
  *
  * ```html
  * <button id="tooltip-button">My button</button>
@@ -665,14 +678,14 @@
 
 /**
  * We use `Defer.js()` to defer a load of 3rd-party
- * javascript libraries, widgets, add-ons, etc. without blocking the page rendering.
+ * JavaScript libraries, widgets, add-ons, etc. without blocking the page rendering.
  *
- * @note Because the download of a file using `Defer.js()` function is asynchronous,
+ * @note (1) Because the download of a file using `Defer.js()` function is asynchronous,
  * to avoid dependency error when lazy loading a third-party library using `Defer.js()`,
  * it is highly recommended that the `onload` callback function be used
  * to make sure that the library you needed is completely defined.
  *
- * @note Lazy loading behavior changed since v3.0
+ * @note (2) Lazy loading behavior changed since v3.0
  * when you set `Defer.lazy=true` or `waitForInteraction=true`.
  * The `fileUrl` will not be fetched unless the user starts interacting with your page.
  *