延迟解析 JavaScript 以加载 JQuery答案

【问题标题】：Defer parsing of JavaScript for JQuery load延迟解析 JavaScript 以加载 JQuery
【发布时间】：2012-03-19 19:21:44
【问题描述】：

在使用 Google Page Speed 测试网站时，发现无法摆脱 Defer parsing of JavaScript。我删除了所有的 javascript 代码，只留下了一小段代码

<script defer type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.test').click(function(){
            $(this).slideDown();
        });
    });
</script>

或者即使没有任何 jquery 代码，只需将 jQuery 文件独立加载为

<script defer type="text/javascript" src="jquery.min.js"></script>

仍然收到Defer parsing of JavaScript 的警告。

【问题讨论】：

基本上，您的客户端代码应该驻留在某个.js 文件中，并将defer 属性添加到<script> 标记中。
我还尝试将代码和 jQuery 源代码放在一个 JS 文件中，但仍然收到警告。即使单独加载 jquery 源，我也会收到警告。
您是否将 jQuery 包含放在文档末尾附近？
@Interrobang 是在页脚底部。
只删除defer?还是我根本没听懂这个问题？

标签： javascript jquery performance jquery-deferred pagespeed

【解决方案1】：

我找到了this documentation page，上面写着：

要使用这种技术，您应该首先在 onload 事件之前识别出文档实际未使用的所有 JavaScript 函数。对于包含超过 25 个未调用函数的任何文件，请将所有这些函数移动到单独的外部 JS 文件中。这可能需要对代码进行一些重构以解决文件之间的依赖关系。（对于包含少于 25 个未调用函数的文件，不值得重构。）

然后，在包含文档的头部插入一个 JavaScript 事件侦听器，强制在 onload 事件之后加载外部文件。您可以通过任何常用的脚本方式来执行此操作，但我们建议使用非常简单的脚本化 DOM 元素（以避免跨浏览器和同域策略问题）。这是一个示例（其中“deferredfunctions.js”包含要延迟加载的函数）

我从中了解到：您应该从 onload 事件处理程序“延迟加载”jQuery（有关如何执行此操作的示例，请参见上面的链接）。

【讨论】：

【解决方案2】：

不应该是这样的

<script defer='defer' type="text/javascript" src="jquery.min.js"></script>

使用 defer='defer' 代替提供空的 defere 属性

【讨论】：

这不取决于你是否使用xhtml吗？
只需使用defer。你不需要defer='defer'。

【解决方案3】：

只需将此添加到您的脚本async 示例中：

<script type="text/javascript" async src="jquery.min.js"></script>

【讨论】：

这并不总是那么好用。如果您的读者在模块化框架/平台中执行此操作，请确保检查 JS 控制台是否存在“无法读取属性”和/或“未定义”等错误，然后修复这些调用/模块。预计会有这样的行为，并且在未来的模组中也需要进行调整（可能无法正确延迟/异步）。