延迟加载 javascript答案

【问题标题】：Defer loading javascript延迟加载 javascript
【发布时间】：2016-02-05 12:45:43
【问题描述】：

所以我已经阅读了一些教程，但我仍然对如何正确地做到这一点感到困惑。

我的网站是 Oaktreehealth.ca 我有太多 javascript 文件在首屏加载，我想推迟任何不需要立即加载的文件。

我已经阅读了本教程（以及一个很棒的网站！）：https://varvy.com/pagespeed/defer-loading-javascript.html

这是我的问题：

如何包含多个文件？我只是创建他使用的代码的多个实例吗？或者我可以将它们合二为一吗？
我如何知道我应该推迟哪些文件？有些对我来说很明显，有些我不确定。我是否应该反复试验，看看它每次是如何加载的？
我正在使用 wordpress，所以这仍然是一种好方法吗？还是有其他方法可以将它加载到我的 functions.php 文档中？
使用这个工具：https://varvy.com/tools/js/ 我可以看到我所有的外部脚本。如果我将它们添加到他使用的延迟代码中，我是否使用完整路径？如何为每个脚本找到它？
非常感谢！我知道其中一些问题一定是非常菜鸟！

【问题讨论】：

WordPress 没有 JavaScript 依赖管理系统吗？当你告诉 WordPress 加载一个脚本时，它没有一个参数来发送它依赖的脚本吗？
几个指针：！）除非在页眉中需要，否则在页脚区域加载 JS。（WP有这个选项）。 2）用户延迟脚本 - 在加载 Js 文件之前等待窗口加载事件。
您可以通过创建一个新的

标签： javascript php jquery wordpress optimization

【解决方案1】：

具体说明

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

复制上面的代码。
将代码粘贴到 HTML 中 </body> 标记之前（靠近 HTML 文件的底部）。
将“defer.js”改成你的外部JS文件名。
确保文件路径正确。例子：如果你只是放了“defer.js”，那么文件“defer.js”必须和你的HTML文件在同一个文件夹中

【讨论】：

【解决方案2】：

如果你在这里查看wp_enqueue_script 方法：

https://codex.wordpress.org/Function_Reference/wp_enqueue_script

您将看到第三个参数是您正在加载的脚本所依赖的脚本数组。如果您对所有脚本文件执行此操作，WordPress 将自动以正确的顺序加载您的 JavaScript。

【讨论】：

哇，这很深入。所以我也可以决定从插件加载什么顺序脚本？你知道某个地方有一个与我正在尝试做的事情类似的例子吗？
@Jenna 深入？这是标准的 wordpress 文档。他们在文档中有几个示例。
谢谢！我只是说它对我的特定需求非常广泛。我了解 wp_enqueue_script 方法的工作原理，我只是很难正确链接所有内容，因为我的文件中到处都有许多脚本

【解决方案3】：

关于问题的第 2 个问题（“我如何知道我应该推迟哪些 (javascript) 文件？”），请按照以下步骤操作：

(1) 使用https://developers.google.com/speed/pagespeed/insights/ (2) 单击“消除首屏内容中的渲染阻止 JavaScript 和 CSS”下的“显示如何修复” (3) 在“Render-blocking JavaScript”列表中查找应该延迟或以其他方式解决的脚本。

来源：https://varvy.com

【讨论】：