Defer loading JS #847
Defer loading JS #847
Conversation
|
Is your issue solved by #756? |
|
That would help with the symptoms, but doesn't resolve the underlying issue. Removing modernizr will make this issue less noticeable, but it will still exist on poor network connections and if child themes decide to include other large JavaScript resources through the Loading and executing JavaScript in the head, especially before CSS, is going to give users a worse experience generally. |
|
I'll mark as needing some replication. I know this is an issue already however it might help to test this locally, with a RTD instance, where we might be introducing JS that could be incompatible with this change. |
|
Yeah the only issue I can think of would be introducing other JS which depends on a script that has been deferred. It should also be deferred to ensure the correct loading order. Let me know if there is anything I can do to help. |
|
Unfortunately I don't think we can add The theme code can be deferredm but that bundles jQuery and we have had issues before when we moved jQuery out of the Instead I think we should match what Sphinx does; when custom JS is added, it supports setting attributes (like Together with #756, that could solve most of the scripts in head. If not, then we may need a "put theme code + jQuery in head or not" config switch. |
|
Yeah this was the issue I was talking about, if inline JavaScript depends on a library like jQuery then it can't be deferred like this. Given the discussions in #545, which seem to roughly be "putting the JS in the head will be slow but more stable", it would be good to allow finer control with a config switch. That was a user can sacrifice the ability to use jQuery inline to get good performance. |
|
The flicker issue seems mostly solved in my experiments in Firefox by just moving the CSS link tags above the JavaScript link tags. I filed PR #853 to address this. |
|
Replaced by #853 |
We use this theme as the base for our custom Sphinx theme in the Dask project. We've noticed some render flicker when we load the page and form looking at the profiler this seems to be due to JavaScript resources being fetched and executed before the style sheets.
This PR adds the defer attribute to the script resources which will fetch them asynchronously and execute them once the rest of the page has finished loading. Alternatively the script tags could be moved to below other DOM resources.