可以使用匿名函数来延迟加载 js 吗？答案

【问题标题】：Can anonymous function be used to defer js on load?可以使用匿名函数来延迟加载 js 吗？
【发布时间】：2014-06-07 15:00:31
【问题描述】：

我刚刚阅读了有关延迟加载 js 的信息。我发现 Particks 的文章很有趣http://www.feedthebot.com/pagespeed/defer-loading-javascript.html。

我查看了 facebook 和 google 的 js 代码。他们都在使用匿名函数，所以我想知道这是否是在页面加载后延迟 js 加载？

 (function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "http://connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));

或者帕特里克推荐是真正延迟加载页面后加载js的唯一方法吗？

<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>

thx，我非常感谢您的专业知识！

【问题讨论】：

据我了解，是fb脚本只是避免多次加载同一个脚本还是？

标签： javascript deferred-execution deferred-loading

【解决方案1】：

Both will download the script asynchronously and defer the execution after it is loaded，但第二个脚本等待开始加载脚本，直到所有其他资源（包括图像！）都已加载（实际上对我来说似乎有点晚了）。

他们都在使用匿名函数，所以我想知道这是否是延迟 js？

不，那些IEFEs 仅用于构造代码，它们会立即执行。推迟js的是<script>元素的动态创建。

【讨论】：

延迟在这种情况下是什么意思。是否“足够”推迟说它对谷歌页面速度优化有好处？
是的。 defer 基本上意味着“在加载和执行脚本之前无需停止 HTML 解析器和其他一切”，这是 google 页面速度抱怨的事情。

【解决方案2】：

好吧，让我试着解释一下：

第一个代码 sn-p (FB, G+) Api 用于检查 script 是否存在并包含它。它被称为自执行函数。

注意：

(function(x){
...
}(x));

通常是Self-Executing Anonymous Functions 的语法。自调用函数会立即运行，即一旦在 Javascript 中遇到就会执行。它们在解析器遇到时立即执行（执行顺序取决于您放置包含它的函数或脚本的位置），因此名称自行执行。

你的第二个片段。创建相同的功能，但将其绑定到window 元素并等待所有窗口元素（DOM、图像、框架、iframe、链接、脚本等）loads 完全。然后，只有这样它才会开始执行您的功能。所以它有点慢。比这更快的是：JQuery 的$(document).ready(。

要知道首先执行哪个加载事件，请查看我对这个问题的回答：What will be the sequence of execution of this javascript/Jquery code?

现在再说一遍：可以使用匿名函数来延迟加载 js 吗？

答案是否，因为这取决于您将自己执行的匿名函数放在哪里。仍然会比window.load 快。

希望它有所帮助:)。干杯！

【讨论】：