-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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.
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
Move javascript back to head #545
Conversation
sphinx_rtd_theme/layout.html
Outdated
{% endif %} | ||
<script src="{{ pathto('_static/js/modernizr.min.js', 1) }}"></script> | ||
<script type="text/javascript"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This can probably stay in the footer?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
According to Paul Irish, in the footer is the way to go for performance, unless you target IE6-8 with the html5shiv: Modernizr/Modernizr#878 (comment)
The current Modernizr in the theme does include the shiv, so moving it out of head might break IE6-8. Possible change would be to put the shiv in head and the rest of Modernizr at the end of the file. This relates to #525.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This comment was directed towards the script below the modernizr link
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whoops. Yes, that should be at the bottom. It is the code that starts the theme JS logic and should be run when the page (or at least the toctree) is complete.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Putting JS in the footer is definitely better for performance in general but anything required for rendering should be in the header.
Not that we necessarily have to follow their lead, but Alabaster and the Spinx Basic theme (which Alabaster extends) both put JS in the head.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I do think that attempting to have consistency across themes isn't a bad thing though.
sphinx_rtd_theme/layout.html
Outdated
SOURCELINK_SUFFIX: '{{ sourcelink_suffix }}' | ||
}; | ||
</script> | ||
{%- for scriptfile in script_files %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add a comment saying not to use this? Use app.add_javascript
instead.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
script_files
is modified by search.html and the readthedocs-sphinx-ext, not sure what will happen if the theme removes this block.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The extension will have to be updated. Currently css_files
is deprecated in sphinx-doc/sphinx@83d3fd2 and I asked about script_files
in sphinx-doc/sphinx#4439
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe @ericholscher is planning to remove many of the script_files
from readthedocs-sphinx-ext
. However, who knows if others are using it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we need to support people using them, since a lot of people use them. If we get to a point where Sphinx doesn't pass them anymore, then we can stop supporting them.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There seems to be some confusing here. Note that this WILL be removed by sphinx 2.0.0 so we should add a comment in the html for people reading through the code so they know what the better option is.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
doesn't add_javascript
just add it to script_files
internally? So the public API is different, but for our theme it's the same API?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking at the builder yes, I am still a little unsure of what direction sphinx will really go with this, so I'll ask. Since this does not affect this PR we can come back to this later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See this thread for why this is deprecated. So basically it can only be used for reading, not writing to unless through the sphinx app API. So we can keep script_files
and css_files but we should add a comment and include release notes that
extra_css_files` is deprecated so that we can avoid this type of user action. Again, we should include this in a separate commit/PR.
Thread https://groups.google.com/forum/#!topic/sphinx-dev/bvnF6Grw224
Poke. I say we forget about comments and just look at this from a functionality perspective. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good to me. I'd want to test it a little bit on various RTD builds to make sure it doesn't blow things up, but otherwise I'm +1 on the change.
sphinx_rtd_theme/layout.html
Outdated
{# CSS #} | ||
|
||
{# OPENSEARCH #} | ||
{# Javascript -- Keepin in head #} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can remove the second half of this comment. Feels silly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM assuming no breakages or slowdowns are experienced when testing with some larger projects on RTD.
Just throwing this out there, but how do you feel about making it a theme option to put the JS in the head? It is not needed, unless you're calling jQuery from inside rst like in #328. Putting JS in the head is risky for performance if large js libraries are included.
it should not change that much, we compress the js and we don't have that much js. I expect to only see a couple ms difference. |
@ericholscher any word yet on performance differences? |
I'm not worried about performance, really. More about JS code people have written that depends on the current loading order, as well as the RTD specific code that we insert working with this loading order. I'll try and take a peek this week, but my week is pretty hectic. |
Any word on how this works on RTD? |
I added some more info on why this would be useful here: readthedocs/readthedocs.org#4367 (comment) |
I tried to rebase this locally but it's not obvious how to fix the conflicts without knowing the codebase. If @Blendify doesn't do it, I will use the old tip of the branch to see if it fixes readthedocs/readthedocs.org#4367, at least for me. |
It was moved away from <head> to the bottom of the page in readthedocs#78. This is a compressed version of readthedocs#545 by @Blendify, which fixes readthedocs#328.
I've also tried to rebase this, but it was indeed too hard for me, so I created a new PR moving those lines around: #696. |
I rebased the patch so it should work fine. If you encounter problems let me know. |
Wrong button oops... |
@ericholscher, @davidfischer, @jessetan, @agjohnson can you take a review of this? It seems many people need this so would be nice to put in the next release. |
I think it makes sense (especially since we're seeing users impacted by this issue). I'll let @davidfischer or @agjohnson chime in with any other considerations, but I'm 👍 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had a few bits of feedback but this is close.
sphinx_rtd_theme/layout.html
Outdated
{%- if not READTHEDOCS %} | ||
<script type="text/javascript" src="{{ pathto('_static/js/theme.js', 1) }}"></script> | ||
{%- endif %} | ||
<script src="{{ pathto('_static/js/modernizr.min.js', 1) }}"></script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You definitely want modernizr before loading 3rd party scripts ({%- for scriptfile in script_files %}
) so that people can use modernizr features in their scripts.
sphinx_rtd_theme/layout.html
Outdated
{% endif %} | ||
|
||
{% endif %} | ||
{# RTD hosts this file, so just load on non RTD builds #} | ||
{%- if not READTHEDOCS %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This if block should be removed. We are always including the theme.js
now. See 41d251a#diff-1336f80431f476a232e3c48abb277c51.
Just noticed this but shouldn't we inject the javascript after css? |
It don't think it matters. |
https://stackoverflow.com/questions/9271276/is-the-recommendation-to-include-css-before-javascript-invalid
Says it does not matter except for mobile where the difference is very
small and speculative parsing will probably come to mobile at some point
anyway.
…On Mon, Nov 5, 2018 at 6:04 PM David Fischer ***@***.***> wrote:
Just noticed this but shouldn't we inject the javascript after css?
It don't think it matters.
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
<#545 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AOeua-6pCfDIgpfUrRVFZQkbsqdPFEAcks5usMPkgaJpZM4RfgiR>
.
--
Aaron Carlisle
Project administrator for the Blender 3D Documentation Project
Email: carlisle.b3d@gmail.com
Website: https://blendify.github.io
|
title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}" | ||
href="{{ pathto('_static/opensearch.xml', 1) }}"/> | ||
{%- endif %} | ||
{%- endif %} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nitpick: the {# CSS #}
comment can be readded here
sphinx_rtd_theme/layout.html
Outdated
<link rel="search" type="application/opensearchdescription+xml" | ||
title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}" | ||
href="{{ pathto('_static/opensearch.xml', 1) }}"/> | ||
{# Javascript #} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nitpick: Use {# JAVASCRIPT #}
or {# SCRIPTS #}
in all uppercase for consistency with other section comments
Thanks for spending some more time on this @Blendify. |
🎉 thanks! |
Fixes #328