Revise <script> elements to use defer loading #43

Activity

1. delphidabbler

   self-assigned this

   on Oct 12, 2022
2. delphidabbler

   added

   enhancementNew feature or requestNew feature or request

   accepted

   on Oct 12, 2022
3. delphidabbler

   changed the title [-]Revise `<script>` elements to user `defer` loading[/-] [+]Revise `<script>` elements to use `defer` loading[/+] on Oct 14, 2022
4. delphidabbler commented on Oct 14, 2022

   

   delphidabbler

   on Oct 14, 2022

   MemberAuthor

   More actions

   Need to check how the use of defer loading affects code that calls into deferred scripts.

   For e.g., the following code is included towards the end of the body of default.html:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
   <script>anchors.add();</script>

   If

   <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>

   is moved to the head section and set to defer loading, will the

   <script>anchors.add();</script>

   line still work if left at the bottom of the body, or will it need moving into a script that triggers when the document has loaded?
5. delphidabbler commented on Oct 14, 2022

   

   delphidabbler

   on Oct 14, 2022

   MemberAuthor

   More actions

   Another question is whether defer can be used for in place scripts like the following:

   <script>anchors.add();</script>

   I.e. is the following valid?:

   <script defer>anchors.add();</script>
6. delphidabbler commented on Oct 14, 2022

   

   delphidabbler

   on Oct 14, 2022

   MemberAuthor

   More actions

   Another question is whether defer can be used for in place scripts like the following:

   <script>anchors.add();</script>
   

   I.e. is the following valid?:

   <script defer>anchors.add();</script>
   

   The answer is no, defer can't be use on such inline scripts. The following quotation is taken from the MDN web docs page for the <script> element when the defer attribute is described:

   ⚠️ Warning: This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.

   The defer attribute has no effect on module scripts — they defer by default.
7. delphidabbler commented on Nov 15, 2022

   

   delphidabbler

   on Nov 15, 2022

   MemberAuthor

   More actions

   Need to check how the use of defer loading affects code that calls into deferred scripts.

   To get round this possible problem is to create a JavaScript file that loads last that calls code like

   anchors.add();
8. delphidabbler commented on Nov 15, 2022

   

   delphidabbler

   on Nov 15, 2022

   MemberAuthor

   More actions

   Useful web links:

   • WebDevSimplified blog post about async, defer etc
   • MDN web docs page about DOMContentLoaded event