javascript - 解决首屏内容中的 JavaScript 和 CSS 的选项

Question

我使用 Google 的 Page Speed 验证网站时出现以下错误:

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 1 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page.

JavaScript

我的页面底部有两个 javascript 文件:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/scripts/main?v=5jyyqQNx45M0Mbw-ZD6J9SVac8LfWyZZLh_wq6HtfQI1" type="text/javascript" async></script>

我从 Google CDN 获取 JQuery，从本地服务器获取 Main.js。

我对 Main.js 应用了异步，但这并没有解决问题......

...解决此问题的唯一方法是从 Google 的 CDN 向 JQuery 添加异步。

但随后 Main.js 中使用 JQuery 的代码停止工作......不知道为什么。

CSS

我不确定如何解决它。有什么建议吗？

有人可以帮帮我吗？

谢谢你， 米格尔

Answer 1

But then the code in Main.js using JQuery stops working ... No idea why.

该代码中断了，因为 jQuery 是在 Main.js 执行后加载的，并且由于 Main.js 依赖于它......好吧，它会失败。

您不会到处加载 CSS 和 JS，因此您实际上无能为力 - 除了使用纯 HTML。

linked google help page说:

• 如果您的 CSS/JS 文件很小，则使用内联标签加载它
• 您可以尝试将重要的 CSS/JS 放在一个文件中，将不那么重要的放在另一个异步加载的文件中