I'm a great fan of the shortcut code for document ready, but I'm also a huge fan of self-invoking anonymous function (SIAFs), most especially since I clocked that adding javascript to the bottom of the page was the way to go!
Anyway, I decided to create this wee test script to see which was fastest:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>zero or one</title> <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script> $(function(){ var p = $("p").length; console.log("jQuery shortcut in the head", p); }); $(document).ready(function(){ var p = $("p").length; console.log("jQuery in the head", p); }); (function(){ var p =document.querySelectorAll("p").length; console.log("SIAF in the head", p); })(); (function($){ var p = $("p").length; console.log("SIAF with jQuery in the head", p); })(jQuery); </script> </head> <body> <p>I'm the content of this website</p> <script> $(function(){ var p = $("p").length; console.log("jQuery shortcut at the end of the body", p); }); $(document).ready(function(){ var p = $("p").length; console.log("jQuery at the end of the body", p); }); (function(){ var p = document.querySelectorAll("p").length; console.log("SIAF at the end of the body", p); })(); (function($){ var p = $("p").length; console.log("SIAF with jQuery at the end of the body", p); })(jQuery); </script> <code> <pre> SIAF in the head <span style="color:blue;">0</span> index.html:15 SIAF with jQuery in the head <span style="color:blue;">0</span> index.html:18 SIAF at the end of the body <span style="color:blue;">1</span> index.html:32 SIAF with jQuery at the end of the body <span style="color:blue;">1</span> index.html:35 jQuery shortcut in the head <span style="color:blue;">1</span> index.html:9 jQuery in the head <span style="color:blue;">1</span> index.html:12 jQuery shortcut at the end of the body <span style="color:blue;">1</span> index.html:26 jQuery at the end of the body <span style="color:blue;">1</span> index.html:29 </pre> </code> </body> </html>
The result is not overly exciting except that the SIAF in the head failed to see the paragraph. What was interesting, though, was that the SIAFs in the footer executed before the any of the scripts which relied upon jQuery, probably because they didn't have to wait for the jQuery library to load...
| Legend | Number of Paragraphs found |
|---|---|
| SIAF in the head | 0 |
| SIAF with jQuery in the head | 0 |
| SIAF at the end of the body | 1 |
| SIAF with jQuery at the end of the body | 1 |
| jQuery shortcut in the head | 1 |
| jQuery in the head | 1 |
| jQuery shortcut at the end of the body | 1 |
| jQuery at the end of the body | 1 |
No comments:
Post a Comment