可以使用匿名函数来推迟加载js吗？

Question

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

我看了一下facebook和googles的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'));

还是Patricks建议是在页面加载后真正推迟加载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>

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

Answer 1

两者都将异步下载脚本并在加载后推迟执行 ，但是第二个脚本等待开始加载脚本，直到所有其他资源（包括图像！）都已加载为止（实际上对我来说有点晚了）。

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

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

Answer 2

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

第一个代码段（ FB ， G+ ）Api，用于检查script是否存在并将其包括在内。 它称为自执行功能。

注意：

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

通常是Self-Executing Anonymous Functions语法。 自调用功能会立即运行，即在Javascript中遇到后立即执行。 它们将在解析器遇到后立即执行（执行顺序取决于您将函数或包含该功能的脚本放置在何处），因此也称为自执行名称。

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

要知道首先执行哪个加载事件，请看一下我对这个问题的答案： 此javascript / Jquery代码的执行顺序是什么？

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

答案是否定的 ，这取决于您将自执行匿名函数放在何处。 而且它仍然比window.load更快。

希望能帮助到你 ：）。 干杯!