延迟解析JavaScript以加载JQuery

Question

在使用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>

我仍然收到有关延迟解析JavaScript的警告。

- Googlebot

---

基本上，你的客户端代码应该存放在某个 .js 文件中，并将 defer 属性添加到 <script> 标签中。 - Brad Christie

我也尝试将代码和jQuery源码放在一个单独的JS文件中，但仍然收到警告。即使仅加载jQuery源码，我仍然会收到警告。 - Googlebot

你是否将jQuery的引用放在文档末尾附近？ - Interrobang

@Interrobang 是的，在页脚底部。 - Googlebot

只是删除 defer 吗？还是我完全没有理解这个问题？ - bfavaretto

@bfavaretto，这并不重要（无论是否使用defer）。问题是当加载jQuery库时，我收到了引用的警告。如何解决？ - Googlebot

Answer 1

我找到了这篇文档页面，其中提到：

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

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

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

- bfavaretto

Answer 2

这句话应该是“不应该是

”吗？

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

不要提供空的defer属性，使用defer ='defer'代替。

- Saket Patel

---

这不是取决于你是否使用xhtml吗？ - Andy Davies

只需使用defer即可。不需要使用defer='defer'。 - nu everest

Answer 3

只需将async添加到您的脚本中，例如：

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

- Joel Enanod Jr

---

这并不总是有效。如果您作为读者在模块化的框架/平台中执行此操作，请确保检查JS控制台以获取诸如“无法读取属性”和/或“未定义”的错误，然后修复这些调用/模块。预计今后的修改也需要进行类似的调整（可能无法正确推迟/异步）。 - dhaupin