使用 PageSpeed 消除 jQuery 的渲染阻塞 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36831073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using PageSpeed to eliminate render-blocking JavaScript for jQuery
提问by Yahya Uddin
I have jQuery added at the bottom of the page. However, when I run my site on pagespeed insights (Mobile), I get the error:
我在页面底部添加了 jQuery。但是，当我在 pagespeed 见解（移动）上运行我的网站时，出现错误：
Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 2 blocking script resources and 1 blocking CSS resources.
This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load.
Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
在首屏内容中消除阻塞渲染的 JavaScript 和 CSS 您的页面有 2 个阻塞脚本资源和 1 个阻塞 CSS 资源。
这会导致呈现页面的延迟。如果不等待以下资源加载，则页面上的所有首屏内容都无法呈现。
尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。
See: http://learnyourbubble.comand https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flearnyourbubble.com&tab=mobile
请参阅：http: //learnyourbubble.com和https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flearnyourbubble.com&tab=mobile
However, the jQuery is added at the bottom of the page. So it should be below the fold.
但是，在页面底部添加了 jQuery。所以它应该低于折叠。
How can I remove this error?
我怎样才能消除这个错误？
回答by Misunderstood
It has to do with your font files.
它与您的字体文件有关。
Look at request 19 and 20 in the waterfall. These font files are considered CSS.
查看瀑布中的请求 19 和 20。这些字体文件被认为是 CSS。
Notice how first paint (green vertical line) does not happen until after the font files are loaded?
请注意如何在加载字体文件之后才进行首次绘制（绿色垂直线）？
Then notice the 15 JS files were loaded prrior to the font (CSS) files.
然后注意 15 个 JS 文件是在字体 (CSS) 文件之前加载的。
That is what Google is taking about.
这就是谷歌正在采取的措施。
Having 16 JS files is beyond excessive.
拥有 16 个 JS 文件是多余的。
Try this: Disable JavaScript in your Browser. Notice the only change is in the menu header. Is 16 JS files worth that? I think not.
试试这个：在浏览器中禁用 JavaScript。请注意，唯一的变化是在菜单标题中。16 个 JS 文件值得吗？我想不是。
回答by jpopesculian
This article should explain a lot of what's happening: https://varvy.com/pagespeed/critical-render-path.html
这篇文章应该解释了很多正在发生的事情：https: //varvy.com/pagespeed/critical-render-path.html
In short though the problem is that chrome will need to load your jquery and your foundation javascript to give the initial render of the page. This is why its blocking. Just because the javascript comes after the html, does not mean that the html can be displayed yet. The rendering of the DOM is still going to block while the jquery/foundation is being loaded because chrome thinks they're vital to the page being displayed correctly. Pagespeed complains on these particularly because they're large. To alleviate this problem, there are a few things you can do, some of them detailed in the article above, some of them in here https://developers.google.com/speed/docs/insights/BlockingJS. The easiest way to tell chrome that these scripts are not vital and can be loaded "below the fold" is to add a deferor asynctag to them.
简而言之，问题是 chrome 需要加载您的 jquery 和基础 javascript 以提供页面的初始渲染。这就是它阻塞的原因。仅仅因为 javascript 出现在 html 之后，并不意味着 html 还可以显示。在加载 jquery/foundation 时，DOM 的渲染仍然会阻塞，因为 chrome 认为它们对正确显示页面至关重要。Pagespeed 抱怨这些，特别是因为它们很大。为了缓解这个问题，你可以做一些事情，其中一些在上面的文章中有详细说明，其中一些在这里https://developers.google.com/speed/docs/insights/BlockingJS。告诉 chrome 这些脚本并不重要并且可以“在首屏下”加载的最简单方法deferasync标记给他们。
回答by NooBskie
Have you tried loading async
你有没有试过加载异步
Make JavaScript Asynchronous By default JavaScript blocks DOM construction and thus delays the time to first render. To prevent JavaScript from blocking the parser we recommend using the HTML async attribute on external scripts. For example:
<script async src="my.js">See Parser Blocking vs. Asynchronous JavaScriptto learn more about asynchronous scripts. Note that asynchronous scripts are not guaranteed to execute in specified order and should not use
document.write. Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.
使 JavaScript 异步 默认情况下，JavaScript 会阻止 DOM 构建，从而延迟首次渲染的时间。为了防止 JavaScript 阻塞解析器，我们建议在外部脚本上使用 HTML 异步属性。例如：
<script async src="my.js">请参阅解析器阻塞与异步 JavaScript以了解有关异步脚本的更多信息。请注意，异步脚本不能保证按指定顺序执行，不应使用
document.write. 依赖于执行顺序或需要访问或修改页面的 DOM 或 CSSOM 的脚本可能需要重写以解决这些约束。
回答by Dylan
I see an error calling foundation() but I will assume that you have removed it to rule it out, but it could be that this same call happens prior to load. Try to always enclose your code like:
我看到调用foundation() 时出错，但我假设您已将其删除以排除它，但也可能是在加载之前发生了相同的调用。尝试始终包含您的代码，例如：
(function($) {
// DOM ready
})(jQuery);
回答by Rajesh Yogi
Please try with defer tag it's working for me.
请尝试使用 defer 标签，它对我有用。
<script src="filename.js" defer>
