Question

我搜索范围广泛，但是我没有找到任何来源说明这两种方法的优点，或者是什么“最佳”排队脚本的方法是在Wordpress中，关于性能和兼容性

所以，我的问题是以下：
与使用<script>相比，在Wordpress的页脚中将脚本放在wp_enqueue_script()内的优缺点是什么？

我的想法和脚本示例
我非常考虑页面/加载速度，因此我遵循了尽可能减少HTTP请求的各种“速度优化”技巧。因此，我主要通过使用<script>挂钩或将它们直接放在footer.php文件中来在页脚中“内联”脚本（在wp_footer()内）。但是，我的大多数脚本（我自己的）都是一小段javascript，然而，随着时间的推移编译。脚本的示例如下所示。我有许多同样大小的代码/脚本以及一些较小的和一些较大的代码/脚本。它可能相当于大约200-300行代码（未缩小）。

因此，关于性能，我有点猜测这是更可取的，尽管单个HTTP请求更多地将scipt作为文件加载的影响可能是完全无关紧要的。然而，这也是我开始怀疑的地方。是否更好地异步加载来自额外文件的这个javascript / jquery部分？

此外，我还有一个奇迹是，与将其作为文件加载相比，是否更好地加载脚本以避免任何“功能丧失”？我宁愿不在<head>中加载它，因为首先需要加载jQuery。与此同时，还应该注意到，我怀疑它是否确实有所作为，考虑到如果优化，页面加载现在非常快。

jQuery('.menu-toggle').click(function() {
  jQuery('#site-navigation .menu').slideToggle('slow');
  jQuery(function($) {
    if (jQuery('#sitenavigation .menu .children').is(":visible")) {
      jQuery("#sitenavigation .menu .children").slideUp();
    };
  });
});


jQuery(".searchform").click(function(e) {
  jQuery(".selected").removeClass("selected");
  jQuery(this).parent("div").addClass("selected");
  e.stopPropagation();
  if (jQuery("#search-dropdown-content").hasClass("selected")) {
    jQuery("#search-dropdown").css("color", "#B87E28");
  };
});

您对此有何看法，您是否有更多的考虑因素或优点/缺点？

此致

Answer 1

取决于。

首先，当然可以选择使用wp_enqueue_script，如果你不介意弄脏你的手（或找到一个插件为你做），你的脚本会在页脚中内嵌打印。

至于“我应该做什么”，我会说这主要取决于a）你运行的网站类型和b）访问者是谁。

这是一个你不希望很多访问者返回的网站（例如联盟登陆页面），你不希望你的访问者有多个页面浏览量（“我需要知道这些特定的信息。好的，谢谢，再见“）？内联所有内容。

这是一个用户定期返回的网站，会打多个网页吗？那么你真的想利用缓存静态资源，因为它可以节省带宽，你将需要更少的服务器功率。

您的用户是否主要使用高带宽固定电话的技术人员？使用谷歌（或其他大玩家）CDN可能会获得相当多的利润，因为他们之前可能已经从该CDN遇到了jquery lib并将其缓存。

您的用户是否主要是移动设备，可能是移动设备，又称高延迟，不稳定的连接？每一次来回都会受到伤害，表现明智，内联会更快/更快。

如果你没有概述任何js，并且你的页脚中包含你的所有js，你不应该遇到任何缺乏功能，除非你遇到非常具体的情况（例如一个被限制为GPRS的移动用户，并且现在爬行10kb / s）在这种情况下无论你做什么，除非用户等待很长时间才能完成所有事情，否则什么都不会有效。

我的建议：构建两个选项（嘿，它还会为您提供新技能），并将它们与您设想的用户所使用的场景进行比较。使用浏览器的开发工具，它们通常可以模拟较慢的连接，并且可能能够模拟糟糕的移动连接。并且不要认为这是最终的决定。随着使用模式的改变，另一种选择可能会成为更好的决定，因此请保持思维（和眼睛）的开放。

在页脚中放置脚本“内联”或使用wp_enqueue_script（wordpress）的优点/缺点

1 个答案: