Menu
Different pages of my site have different js needs (plugins mainly), some need a lightbox, some dont, some need a carousel, some dont etc.
With regards to pageloading speed should i
option 1 - reference each js file when it is needed:
so one page might have:
<script type="text/javascript" src="js/carousel/scrollable.js"></script>
<script type="text/javascript" src="js/jquery.easydrag.js"></script>
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script>
and another have:
<script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"></script>
<script type="text/javascript" src="st_wd_assets/js/typewatch.js"></script>
option 2 - combine and compress into one site_wide.js file:
so each page would reference:
<script type="text/javascript" src="js/site_wide.js"></script>
there would be unused selectors/event listeners though, how bad is this? I would include any plugin notes/accreditations at the top of the site_wide.js file
557
It is best to keep separate files or include all files in one file Javascript? To avoid multiple server requests, it is better to group all your JavaScript files into only one. If you're using C#.Net + ASP.Net, you can bundle your files — it is a very good way to compress your scripts.
you should load this js file in almost every document. some codes are useful in several webpages(not all pages) and it is complicated, which means it should be re-useable, then you need design it as a seperate component, such as an editor component, image upload component.
You can write your JS in separate files, but when it comes to deploying, it's more efficient to minify them all into a single file. For each script you load in your browser, you make a round-trip to the server, so it makes sense to minimize those.
Put the code for each page in a function If you really want to keep a single page, put the code that's specific to each page in functions for those pages, and then have code in the main part of the file call the appropriate function based on location.
It's usually best to combine these and serve one file, which you set the cache headers so that the client holds onto it, not requesting it each page. Remember that if a jQuery selector doesn't find anything, it doesn't do anything so that's not a major deal as long as you're using a good portion of your script each page, it's just fine that it has selectors without matches.
Make sure it's being cached by the client though, of all your work is for naught. Also make sure it's served minified and gzipped. And last, look at hosting your main libraries from a CDN.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
