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

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

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

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

Answer 2

好的让我试着解释一下：

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

注意：

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

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

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

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

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

答案是否，因为它取决于你执行匿名函数的位置。并且它仍然比window.load快。

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

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

2 个答案: