Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I think you're at risk of <a href="http://c2.com/cgi/wiki?PrematureOptimization" rel="nofollow">premature optimization</a>. I'd just load in scripts normally, and if you see performance problems, then you can bring in tools like Require.js. With just 4 scripts, I doubt you're going to have any problems.</p> <p>That said, a few pointers for loading script:</p> <ul> <li><p>Load the scripts at the bottom of the <code>&lt;body&gt;</code> (just before the <code>&lt;/body&gt;</code> closing tag), not in the <code>&lt;head&gt;</code> - this way the loading of your page content won't be held up by your scripts.</p></li> <li><p>Wrap your custom script in <code>document.ready</code>:</p> <pre><code>$(document).ready(function() { // your code }); </code></pre> <p>this mean your script won't run until everything's been loaded, avoiding any problems with load order.</p></li> <li><p>Use Google's CDN to load jQuery. It's fast, and (more importantly) a lot of sites use it, so it's likely to be already cached by the user:</p> <pre><code> &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt; </code></pre> <p><a href="https://developers.google.com/speed/libraries/devguide" rel="nofollow">https://developers.google.com/speed/libraries/devguide</a></p></li> </ul> <p>If you're still worried about the different ways to load scripts, this is the best resource I know of, with exhaustive Pro/Cons of each approach:</p> <p><a href="https://developer.mozilla.org/en-US/docs/XUL_School/Appendix_D:_Loading_Scripts" rel="nofollow">https://developer.mozilla.org/en-US/docs/XUL_School/Appendix_D:_Loading_Scripts</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload