javascript file storing [closed]
Want to improve this question? Update the question so it can be answered with facts and citations by editing开发者_开发技巧 this post.
Closed 9 years ago.
Improve this questionI have stored javascript files in the header.php of my project page. And overtime this has grown to lot of files. Need a help from senior member who can guide me how to store these? I looked all over net could not find anything on this. So this is my last stop. Should these be stored in header.php(so what i am doing is correct?). Should these be stored individually on the .php pages that are using them? Or is there another better and more efficient way to do this? (i do have some prototype and scriptaculous files also)
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js"></script>
<script src="javascript/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="javascript/jquery.colorbox.js"></script>
<script type="text/javascript" src="javascript/friends.js"></script>
<script type="text/javascript" src="javascript/site.js"></script>
<script type="text/javascript" src="javascript/search.js"></script>
<script type="text/javascript" src="javascript/settings.js"></script>
<script type="text/javascript" src="javascript/inbox.js"></script>
<script type="text/javascript" src="javascript/profile.js"></script>
<script type="text/javascript" src="javascript/color_picker.js"></script>
<script type="text/javascript" src="javascript/load_more.js"></script>
<script type='text/javascript' src='javascript/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='javascript/jquery.Queue.js'></script>
<script type='text/javascript' src='javascript/jquery.autocomplete.js'></script>
You are loading 15 scripts here, including 3 libraries! That is complete overkill and will slow down your pages. You should never have more than a couple of Javascript files: every extra file makes an extra HTTP request which is the #1 cause of slow pages.
At an absolute minimum you should combine all the files into one. You can use Google's Closure Compiler to do this which will also minimize the code.
However, your much larger problem is that you are using 3 different libraries simultaneously. I'm guessing you found some nice scripts on the internet like lightboxes, but each script uses a different library. You could certainly split your code into 3 files with each library and their plugins (i.e. all the jQuery stuff in one file, Scriptaculous in another) and just call one of them per page.
However, I would suggest starting from scratch and choosing one library, then find plugins just for that library. jQuery is the most popular and you are likely to find equivalent plugins for it. Combine all that into one Javascript fileand include it on every page. This way, users have only one file to download that will be cached for later requests.
Javascript modularization really is a PITA.
I personaly use the module handling features from Dojo toolkit, but there are standalone module systems like RequireJS that also do this. (I don't know what is the "traditional" solution for this in JQuery-land though)
If you don't want or can't use one of these module-handling libraries, you will need to structure everything by hand, so for every feature you will need to include its script tag on every single page that needs to use it (and in the correct order, if there are dependencies).
If it is taking too long to load all your scripts, there are some performance related things you can consider doing:
Merge some groups of related scripts into single, large, files. This will reduce the number of requests made to the server. (And reduce the number of script taggs in your HTML, as a bonus)
Put your script tags at the end of the
<body>instead of at the<head>. This way the browser at least gets to render the rest of the page first before stoping to load scripts.
First off all on a given page load only those js files which are required.
Secondly its best to us RequireJS if you have too many js files.
加载中,请稍侯......
精彩评论