I just checked my page size using firebug and all, and javascript files equal 478.2K!
<script src ="<%= Url.Content("/Scripts/MicrosoftAjax.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/MicrosoftMvcAjax.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery-1.3.2.min.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.form.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.validate.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/xVal.jquery.validate.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/temp.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery-ui-1.8.5.custom.min.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.ui.tabs.js") %>"></script
temp.js is my own file, and it has code of very few lines (like 10-20).
So what is going on? I mean how to fix this?
Start by getting rid of Microsoft*.js. If you use jquery you don't need those.
I would suggest that you use the minified versions of each js file and also that you combine them into one single js file (or as less as you can).
Here is an interesting article that may help you.
Except for temp.js (which you say is quite small), all the other files are third party libraries.
I assume you're using all those libraries on every page? If not, one thing you could do would be to only include them on pages where they're being used.
The file names suggest that some of them have been minimised. If the others haven't been, you could run them through a minimiser, or alternatively go back to their home pages to see if they supply a minimised version you could use.
Some of them may also provide an option on their site to only include functionality that you intend to use. JqueryUI does this for sure, though from the filename you're using it looks like you already made use of it for that, but check to see if any other libraries also offer that.
Check that you haven't got any overlapping functionality - you may be able to rationalise by removing redundant code. You would have to be very cautious if that means editing third party libraries (that's not usually a good idea), but you may find you've got entire libraries that are unnecessary, in which case it'd be a quick win to get rid of one of them.
If you want to off-load some of the scripts to a third party, Google hosts JQuery, JQueryUI and a lot of other plug ins, and they allow sites to load them from their servers. It wouldn't affect the size of the scripts that the user has to download, but would save your servers quite a lot of bandwidth.
At the end of the day though, you have got a lot of big scripts there, and they're providing a lot of functionality. If you need all that functionality, you'll have to put up with the weight of the code.
their are many thing you can do for this situation
use minified or production version instead of developer version
load them from CDN if you can do that.
If files not been changes from long time that you need TO use Cache.
their are many other thing you can do for application performance improvement.
You could try gzip compression so that the server compresses it and is uncompressed by the browser. That should help a bit.
Maybe something like this.
Or better still, in IIS itself like this.
considering that you're importing the jquery UI library, jquery, the microsoft ajax framework, some validation framework etc.. its not too bad..
You can try minify the files to save space. Here YUI Compressor
If you are using well-known and popular libraries (like jquery) you can use externally hosted files from a cdn (content delivery network), which are more than likely already in the browser cache (and therefore won't need to be downloaded again): google list of libs and jquery ref
Minify it :http://jscompress.com/
I would also suggest refactor it (rewrite it so there is less memory used).
Telerik Extensions For ASP.NET MVC
How about this approach?
MvcContrib: an Outer Curve Foundation project
MvcContrib.IncludeHandling is same approach.
Related
Is there any option to hide script source?
<script src="./script/jquery/jquery-X.X.X.js" type="text/javascript"></script>
delete this value or change to
<script src="./script/jquery/jquery" type="text/javascript"></script>
without changing a file name in the project?
No there isn't - the browser always needs to know the script is there to be able to use it.
Tools baked into every modern browser make it trivial to see all scripts, no matter how hard they have been obfuscated.
But maybe I have mis-understood your question - are you just trying to hide the path of your file?
You could use mod_rewrite (if using Apache webserver) to map one url to another in the .htaccess file:
RewriteEngine on
RewriteRule ^/script/jquery/jquery$ /script/jquery/jquery-1.2.3.js [NC,L]
Not sure what kind of feature that would be though. I can't see any benefit of doing so. One can always inspect any asset downloaded along with the page.
The only "protection" there is would be to build entire app into one bundle file (using Webpack for example) and then obfuscate the code. But there are plenty of deobfuscation tools already, available online. So no, you can't protect front assets.
I noticed that some programmers use two ways of calling .js file.
1- this way where you must have the js file:
<script src="lib/jquery.js" type="text/javascript"></script>
2- and this way where you don't need the js file :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
and I want to know which way is better to use.
The first option is using local files, The second option is using a CDN.
A CDN is a group of fast servers with several common use files. Is really useful to save bandwidth and speed up the download of your site.
However, as was mentioned, you would have problems if the end user don't have access to internet.
Basically, if you expect your application to be executed always online, a CDN is a great option. If you are developing an app that could be executed offline (like a CRM for a company) then it would be better to be served using local files.
If the CDN is down, then your website will be broke. But is more likely that your website is down than the CDN.
Depends.
Method #1 means you have a local copy of the file -- you don't need to rely on an existing path to the internet (from an intranet behind a firewall, spotty internet service, etc). You take care of any caching, and making sure the file exists.
Method #2 may give you a fast planet-wide content-delivery-network (CDN).
I have, and will continue to use both methods... but #2 is easier.
I'm using JQuery for an embedded system that is isolated from the outside word. Therefore jquery exists on the local server (the embedded system). The question is: what would be the best file name to include JQuery in my html?
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
I searched Stackoverflow and found the following threads despite of being useful they don't answer my specific question in this scenario:
What is the best way to include latest version of jQuery?
What is the best way to include jQuery in DotNetNuke 4.8.x?
Because if later we switch to a newer version, I don't have to go through the html files and update them. This is an embedded system and once it's running we hardly update any file. Besides the customer doesn't need to know the version of the libraries and developers know the version already.
jquery-1.6.4.js is better because
it helps clearly identify which version is being used
it prevents possible caching issues that might arise if you changed the jQuery version but not the file name.
Option 2.
Because when you update the version the version number of the file name will act as a cache buster.
This means if a browser caches your file, a change in file name will force it to redownload, as it's a completely new file.
On a prestoshop ecommerce site I have some modules which use jQuery plugins. The problem is that i have a lot of file requests and YSlow recommends me to use fewer requests by unifying the .js files.
Can you give me an advice about how can I unify the files used by those modules(which are basicaly jQuery plugins)?
It's telling you to use pack multiple javascript files into one. This may or may not be neccesary depending on how you load your files.
If you use something like head.js which loads your files async after the page is loaded then your page won't be blocking whilst your loading so packing them together doesnt matter
Or you can use something like multi-part XHR which will combine them for you. Take a look at supply.js.
Another popular option is require.js (Havn't checked that website in a while. It looks pretty neat. Loving the layout)
If you using a lot of <script src="foo"> in your <head> tag well then that's not a good way to go about it.
I am loading the following javascript files from a CDN. Is there any way I can check if these have been loaded correctly and if not, load them from a local folder?
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js
http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js
I know I can check the jquery file but not sure about the others. Any tips?
In your HTML, you can do something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
The example shown is loading jquery from Google CDN and falls back on a local copy of JQuery if that fails.
Credits to HTML5 Boilerplate for showing the trick
YepNope.js is a more robust solution for loading resources (like js files), checking whether they've been loaded or not, and then providing a fallback if necessary. This is just 1 feature among many provided by the library.