What is the best way to import and use JavaScript code in HTML pages? I am considering two options:
<script> tag with all.js file that is imported to HTML files, that uses selected JavaScript methods.<script> tag in each HTML file separately.What is the best design option here?
Lukasz, this innocent question is a big topic. To get started with JavaScript performance and maintainability in a nice place, follow Steve Souders' writings on this.
And use JSHint. That's much easier if your code is in a JavaScript-only file. To find out about other good practices, read idiomatic.js.
A single minified file is the most performant - less requests and smaller download. But not one global js for everywhere, that would be a pain to debug/develop.
Use a cdn for libraries as probably cached in browser.
IMO I will have separate tags for separate javascript snippets/plugins, it will make my javascript code easier to maintain. I can remove the plugin/add the plugin without disturbing the other javascript snippets.
But for performance issue, modern browsers will run 6 consecutive threads to download the resources, so it will be good idea to profile the loading times of the site/web app. You can use tools like Firebug/yslow to profile http requests being sent from the html page.
Personally I use template engines like Sitemesh and create templates for jsps for different parts of the application.
And for javascript I mainly use JQuery and a lot of plugins.
Minify js is a good and acceptable way. it also helps to build js files on the server side at run time. This is a big topic. Here are some good advices from yahoo. I use these as my guidlines. Also read on the topic js minify http://developer.yahoo.com/performance/rules.html
