Skip to content

Move main and extra scripts to top of page and use defer #90719

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
Closed
jsha opened this issue Nov 9, 2021 · 1 comment · Fixed by #90872
Closed

Move main and extra scripts to top of page and use defer #90719

jsha opened this issue Nov 9, 2021 · 1 comment · Fixed by #90872
Assignees
@ken-matsui
Labels
A-rustdoc-js Area: Rustdoc's JS front-end T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue.

Comments

@jsha
Copy link
Contributor

jsha commented Nov 9, 2021 •
edited by rustbot
Loading

In rustdoc, we currently have a few, small scripts in the <head> element, which we allow to be render-blocking because they affect styling:

    <script id="default-settings" {# -#}
      {% for k, v in layout.default_settings %}
        data-{{k}}="{{v}}"
      {%- endfor -%}
    ></script> {#- -#}
    <script src="{{static_root_path | safe}}storage{{page.resource_suffix}}.js"></script> {#- -#}
    <script src="{{page.root_path | safe}}crates{{page.resource_suffix}}.js"></script> {#- -#}

We also have some scripts that show up at the bottom of the page, including in particular the main JS:

    <script src="{{static_root_path | safe}}main{{page.resource_suffix}}.js"></script> {#- -#}
    {%- if layout.scrape_examples_extension -%}
    <script src="{{static_root_path | safe}}scrape-examples{{page.resource_suffix}}.js"></script> {#- -#}
    {%- endif -%}
    {%- for script in page.static_extra_scripts -%}
    <script src="{{static_root_path | safe}}{{script}}.js"></script> {#- -#}
    {% endfor %}
    {%- for script in page.extra_scripts -%}
    <script src="{{page.root_path | safe}}{{script}}.js"></script> {#- -#}
    {% endfor %}

Per this Stack Overflow answer, putting scripts at the bottom of the page was a common technique to prevent large scripts from blocking the page render while they download. Now, we can achieve the same result using the async or defer attributes on the script tag. That has the advantage that it allows the browser to start downloading the JS while it's still downloading and parsing the HTML.

defer is more straightforward because it preserves script ordering and only runs the script once the DOM is ready. async sometimes requires a little more finagling so the script can handle being run before the DOM is ready (usually you put the DOM-touching parts of the script in an event listener for DOMContentLoaded.
@jsha jsha added T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. A-rustdoc-js Area: Rustdoc's JS front-end labels Nov 9, 2021
@ken-matsui
Copy link
Contributor

@rustbot claim

@ken-matsui ken-matsui mentioned this issue Nov 13, 2021
Merged
matthiaskrgr added a commit to matthiaskrgr/rust that referenced this issue Nov 21, 2021
@matthiaskrgr
Rollup merge of rust-lang#90872 - ken-matsui:add-defer-to-rustdoc-tem…
fcbc250 
…plate, r=jsha

Move `scripts` on the rustdoc template into `head` and apply the `defer` attribute

Closes rust-lang#90719
matthiaskrgr added a commit to matthiaskrgr/rust that referenced this issue Nov 21, 2021
@matthiaskrgr
Rollup merge of rust-lang#90872 - ken-matsui:add-defer-to-rustdoc-tem…
1683609 
…plate, r=jsha

Move `scripts` on the rustdoc template into `head` and apply the `defer` attribute

Closes rust-lang#90719
@bors bors closed this as completed in 80f5f60 Nov 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ken-matsui ken-matsui

Labels
A-rustdoc-js Area: Rustdoc's JS front-end T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Move scripts on the rustdoc template into head and apply the defer attribute
2 participants
@jsha @ken-matsui