Load JavaScript resources asynchronously

jdufresne · jdufresne · commit c7382a98680c · 2020-05-18T07:54:01.000-07:00
Use the async attribute of the `<script>` element to load the scripts asynchronously. From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async > ..., if the async attribute is present, then the classic script will > be fetched in parallel to parsing and evaluated as soon as it is > available. > > ... > > This attribute allows the elimination of parser-blocking JavaScript > where the browser would have to load and evaluate scripts before > continuing to parse. IMO, async is preferable to defer for two reasons, 1. Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating. The django-debug-toolbar scripts should not block this event. This is now avoided by checking the document state before calling djdt.init(). 2. The defer attribute has no effect on module scripts. Now that JavaScript modules are in the ES6 spec and available in modern supported browsers, django-debug-toolbar can begin moving towards use them which offer many advantages over the classical `<script>` element. Upon moving to modules, the scripts should continue to load asynchronously.
diff --git a/debug_toolbar/static/debug_toolbar/js/toolbar.js b/debug_toolbar/static/debug_toolbar/js/toolbar.js
@@ -29,6 +29,7 @@
             root.querySelectorAll('script').forEach(function(e) {
                 var clone = document.createElement('script');
                 clone.src = e.src;
+                clone.async = true;
                 root.appendChild(clone);
             });
         },
@@ -306,5 +307,10 @@
         close: djdt.hide_one_level,
         cookie: djdt.cookie,
     };
-    document.addEventListener('DOMContentLoaded', djdt.init);
+
+    if (document.readyState !== 'loading') {
+        djdt.init();
+    } else {
+        document.addEventListener('DOMContentLoaded', djdt.init);
+    }
 })();
diff --git a/debug_toolbar/templates/debug_toolbar/base.html b/debug_toolbar/templates/debug_toolbar/base.html
@@ -1,7 +1,7 @@
 {% load i18n %}{% load static %}
 <link rel="stylesheet" href="{% static 'debug_toolbar/css/print.css' %}" media="print">
 <link rel="stylesheet" href="{% static 'debug_toolbar/css/toolbar.css' %}">
-<script src="{% static 'debug_toolbar/js/toolbar.js' %}" defer></script>
+<script src="{% static 'debug_toolbar/js/toolbar.js' %}" async></script>
 <div id="djDebug" class="djdt-hidden" dir="ltr"
      {% if toolbar.store_id %}data-store-id="{{ toolbar.store_id }}" data-render-panel-url="{% url 'djdt:render_panel' %}"{% endif %}
      {{ toolbar.config.ROOT_TAG_EXTRA_ATTRS|safe }}>
diff --git a/debug_toolbar/templates/debug_toolbar/panels/timer.html b/debug_toolbar/templates/debug_toolbar/panels/timer.html
@@ -41,4 +41,4 @@ <h4>{% trans "Browser timing" %}</h4>
     </tbody>
   </table>
 </div>
-<script src="{% static 'debug_toolbar/js/toolbar.timer.js' %}" defer></script>
+<script src="{% static 'debug_toolbar/js/toolbar.timer.js' %}" aysnc></script>
diff --git a/debug_toolbar/templates/debug_toolbar/redirect.html b/debug_toolbar/templates/debug_toolbar/redirect.html
@@ -2,13 +2,13 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <script src="{% static 'debug_toolbar/js/redirect.js' %}" async></script>
   </head>
   <body>
     <h1>{{ status_line }}</h1>
     <h2>{% trans "Location:" %} <a id="redirect_to" href="{{ redirect_to }}">{{ redirect_to }}</a></h2>
     <p class="notice">
       {% trans "The Django Debug Toolbar has intercepted a redirect to the above URL for debug viewing purposes. You can click the above link to continue with the redirect as normal." %}
     </p>
-    <script src="{% static 'debug_toolbar/js/redirect.js' %}" defer></script>
   </body>
 </html>
