From 607c9676f52a3554747c51c8b9c243315ddbc99d Mon Sep 17 00:00:00 2001
From: Andrew-Chen-Wang <acwangpython@gmail.com>
Date: Wed, 4 Nov 2020 11:54:21 -0500
Subject: [PATCH 1/2] Use defer for script tags (Fix #2922) * This way, scripts
 from external URLs are loaded asynchronously. By putting it at the top of the
 file, the browser parses it first, downloads it while continuing to parse the
 HTML, and then executes on parsing finish * Additionally, developers will not
 need to use $(window).ready() or the like in their files anymore. * Added
 inline_javascript tag in case anyone wants to use the bottom of the HTML page
 to execute some Javascript. Using defer here has no effect as inline scripts
 defer by default

Signed-off-by: Andrew-Chen-Wang <acwangpython@gmail.com>
---
 .../templates/account/email.html              |  2 +-
 .../templates/base.html                       | 51 ++++++++++---------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html
index 78d997365..8b4669bb6 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html
@@ -59,7 +59,7 @@
 {% endblock %}
 
 
-{% block javascript %}
+{% block inline_javascript %}
 {{ block.super }}
 <script type="text/javascript">
 (function() {
diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
index 99fe27ab0..127068878 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html
@@ -31,6 +31,30 @@
     {% endraw %}{% endif %}{% raw %}
     {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
     {% endblock %}
+    <!-- Le javascript
+    ================================================== -->
+    {# Placed at the top of the document so pages load faster with defer #}
+    {% block javascript %}
+      {% endraw %}{% if cookiecutter.custom_bootstrap_compilation == "y" and cookiecutter.js_task_runner == "Gulp" %}{% raw %}
+      <!-- Vendor dependencies bundled as one file-->
+      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress js %}{% endraw %}{% endif %}{% raw %}
+      <script defer src="{% static 'js/vendors.js' %}"></script>
+      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
+      {% endraw %}{% else %}{% raw %}
+      <!-- Bootstrap JS and its dependencies-->
+      <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+      <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+      <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+      <!-- Your stuff: Third-party javascript libraries go here -->
+      {% endraw %}{% endif %}{% raw %}
+
+      <!-- place project specific Javascript in this file -->
+      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress js %}{% endraw %}{% endif %}{% raw %}
+      <script defer src="{% static 'js/project.js' %}"></script>
+      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
+
+    {% endblock javascript %}
 
   </head>
 
@@ -92,30 +116,9 @@
 
     {% block modal %}{% endblock modal %}
 
-    <!-- Le javascript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    {% block javascript %}
-      {% endraw %}{% if cookiecutter.custom_bootstrap_compilation == "y" and cookiecutter.js_task_runner == "Gulp" %}{% raw %}
-      <!-- Vendor dependencies bundled as one file-->
-      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress js %}{% endraw %}{% endif %}{% raw %}
-      <script src="{% static 'js/vendors.js' %}"></script>
-      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
-      {% endraw %}{% else %}{% raw %}
-      <!-- Bootstrap JS and its dependencies-->
-      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-
-      <!-- Your stuff: Third-party javascript libraries go here -->
-      {% endraw %}{% endif %}{% raw %}
-
-      <!-- place project specific Javascript in this file -->
-      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress js %}{% endraw %}{% endif %}{% raw %}
-      <script src="{% static 'js/project.js' %}"></script>
-      {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
-
-    {% endblock javascript %}
+    {% block inline_javascript %}
+    {# Script tags with only code, no src (defer by default) #}
+    {% endblock inline_javascript %}
   </body>
 </html>
  {% endraw %}

From 1fa5d798134fcb6a230f0a2cb8bb8f4e6517925b Mon Sep 17 00:00:00 2001
From: Andrew Chen Wang <60190294+Andrew-Chen-Wang@users.noreply.github.com>
Date: Sat, 14 Nov 2020 10:27:14 -0500
Subject: [PATCH 2/2] Add "defer" for inline Javascript

* Also utilize ECMAScript 6, 2015 syntax
---
 .../templates/account/email.html                       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html
index 8b4669bb6..2b7e12789 100644
--- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html
+++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/account/email.html
@@ -62,17 +62,17 @@
 {% block inline_javascript %}
 {{ block.super }}
 <script type="text/javascript">
-(function() {
-  var message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
-  var actions = document.getElementsByName('action_remove');
+window.addEventListener('DOMContentLoaded',function() {
+  const message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
+  const actions = document.getElementsByName('action_remove');
   if (actions.length) {
     actions[0].addEventListener("click", function(e) {
-      if (! confirm(message)) {
+      if (!confirm(message)) {
         e.preventDefault();
       }
     });
   }
-})();
+});
 
 $('.form-group').removeClass('row');
 </script>