如何停止渲染阻止 Javascript 和 CSS？答案

【问题标题】：How to stop render-blocking Javascript and CSS?如何停止渲染阻止 Javascript 和 CSS？
【发布时间】：2015-08-13 09:30:49
【问题描述】：

我已经在 Google PageSpeed Insights 上测试了我的页面它一直在说“消除首屏内容中的渲染阻塞 JavaScript 和 CSS”

它说我有 17 个阻塞脚本和 11 个阻塞 CSS 资源。

我尝试将所有 JS 移动到页面底部以最后加载它，但是 Google 仍然说我有渲染阻止 JS...

有谁知道我该如何解决这个问题？

提前感谢您的帮助。

【问题讨论】：

Eliminate external render-blocking的可能重复
那是关于 CSS 而不是 js。
注意：您当前的问题标题询问“如何停止渲染阻止 Javascript 和 CSS？”在你的问题文本中你提到：“11个阻塞CSS资源”。关于 javascript 和 css 的建议的可能重复讨论的公认答案，并提供了对两者的建议解决方案的初步见解。不过感谢 Q，我不知道我的武器库中还有另一个反对内联 js/css 仇恨者的论点（有趣的是，谷歌又提出了这一点，顺便说一下，我收藏中的其他一些人也来自领先的 google-devs )。
注意：我引用的是 Google 告诉我的内容，而不是我自己说的话。正如您从这一行中看到的那样“我已经尝试将所有 JS 移动到页面底部以最后加载它，但是 Google 仍然说我有渲染阻止 JS……”我纯粹是在谈论 JS。
这只是对您的评论“那是关于 CSS 而不是 js”的回应。此外，我想向您提示，在已接受的答案中有一个有用的建议：Same goes for the javascript. Include the "must have code" inline and load the "nice to have code" on page load，因此仅将所有 javascript 移动到 html 的末尾不一定是解决方案。相反，如果其中有初始页面布局所需的内容，您可能想要搜索 javascript。只是想提供帮助（特别是因为您没有为您的特定情况共享任何重构代码..） .

标签： javascript css optimization pagespeed

【解决方案1】：

您需要深入了解Critical Rendering Path 研究。

简单规则：在您的网页中仅加载对用户显示非常重要的内容。页面加载完成后可以加载其余内容。

在页面上下载 JS 时，它会停止 DOM 生成，从而停止下载其他资源。将 JS 放在底部会起作用，但在下载 JS 时它仍然会阻止您的渲染。为了克服这个问题，建议将async 标签添加到您的脚本标签中。但是添加async 可能会导致其他问题。 See here。更多关于此的阅读可以是found here。

同样的情况也适用于 CSS，但优点是它不会阻塞 DOM 生成。更多关于此的阅读可以找到here。

【讨论】：

【解决方案2】：

您好，我试过了，但它让网站变慢了，不知道为什么把它放回去说消除 Google 页面内的渲染阻止 JavaScript 和 CSS。

如果有人知道为什么通过删除阻止 css 会降低网站速度enter image description here

【讨论】：