Can anonymous function be used to defer js on load?

Question

I just read about deferring js on load. I found Particks article pretty interesting http://www.feedthebot.com/pagespeed/defer-loading-javascript.html.

I took a look at facebook and googles js code. They are all using anonymous functions so I was wondering whether this is deferring js to load after page is loaded?

 (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'));

or is Patricks recommendation the only way to really defer loading js after page is loaded?

<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, i really appreciate your expertise!

Answer 1

Both will download the script asynchronously and defer the execution after it is loaded, but the second script waits with starting to load the script until all other resources (including images!) have been loaded (which seems a bit late to me actually).

They are all using anonymous functions so I was wondering whether this is deferring js?

No, those IEFEs are only used to structure the code, they do execute immediately. What does defer the js is the dynamic creation of <script> elements.

Answer 2

Okay Let me try to explain it:

The First code snippet (FB, G+) Api for checking whether script is present or not and including it. It is called as self executing function.

Note:

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

Is usually syntax for Self-Executing Anonymous Functions. Self-invoking functions runs instantly i.e will be executed as soon as it is encountered in the Javascript. They executes as soon as it is encountered by parser(order of execution depends on where you place the function or script containing that) and thus the name self executing.

Your Second Snippet. Creates same functionality but binds it to window element and waits till all the window elements(DOM, images, frames, iframes, links, scripts etc) loads fully. And then and only then it starts executing your functionality. So its kinda slower. More faster than that is : JQuery's $(document).ready(.

To know which load event executes first have a look at My answer on this question: What will be the sequence of execution of this javascript/Jquery code?

Now again to your point: Can anonymous function be used to defer js on load?

The answer is NO, coz it depends where you put your self executing anonymous function. and still it'll be faster than window.load.

Hope it helps :). Cheers!