Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Revise <script> elements to use defer loading #43

Open
delphidabbler opened this issue Oct 12, 2022 · 5 comments
Open

Revise <script> elements to use defer loading #43

delphidabbler opened this issue Oct 12, 2022 · 5 comments
Assignees
@delphidabbler
Labels
accepted enhancement New feature or request

Comments

@delphidabbler
Copy link
Member

Pull all <script> elements into document <head> and add defer attribute to them to improve script loading characteristics.
@delphidabbler delphidabbler self-assigned this Oct 12, 2022
@delphidabbler delphidabbler added enhancement New feature or request accepted labels Oct 12, 2022
@delphidabbler delphidabbler changed the title Revise <script> elements to user defer loading Revise <script> elements to use defer loading Oct 14, 2022
@delphidabbler
Copy link
Member Author

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?

@delphidabbler
Copy link
Member Author

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>

@delphidabbler
Copy link
Member Author

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.

This was referenced Oct 14, 2022
Open
Open
Open
@delphidabbler
Copy link
Member Author

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();

@delphidabbler
Copy link
Member Author

Useful web links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@delphidabbler delphidabbler

Labels
accepted enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@delphidabbler