JQuery performance with many plugins?
I've been using JQuery for a while, but mostly no plugins. Now I am looking for a project that can use a bunch of plugins. Is there any performance limitation for using a lot of plugins in a project - let's say something in the order of 10-20 plugins?
And how will performance affect if jQuery and its plugins are enabled on all pages? Even if all plugins are not used on every single page?
source to share
The quality of plugins varies greatly. Some of them work really well with best practices, others don't. Some are very short, others are bloated and ineffective. We could advise more if you listed the plugins you are considering.
Personally, I would combine all the scripts into one large mini script file, instead of maintaining different combinations of script files across different pages, and it leaves the client with the script resource loading.
However, as always, the key is your user interface profile and often. First of all, if you run into performance issues, reorganize what you are doing.
source to share
The only fixed cost for plugins is the cost of downloading them, i.e. the larger they are, the slower your page loads. However, most of the plugins I've seen, and JQuery itself, are tiny or small enough that it doesn't really matter.
Ultimately, what matters is how you use them, and what kind of boot initialization they do. Without a list, no one will tell you. You just need to pay attention when you create pages and be careful with what you do. It's very easy to write JQuery that changes a ton of DOM elements in tight loops without realizing it. Watch this.
Build your website and check with measurements.
source to share
John Resig (creator of jQuery) has a nice way of profiling jQuery , etc. I would say that the best way to see how performance will affect is to use all the plugins you need and test them.
Adding lots of js calls would also increase the HTTP requests, slowing down your website. Reading yahoo's best practices and using its Yslow extension is a good idea to check your site and see what can be improved. Google has article speed.
source to share
There are two things here:
- Page loading - this will obviously be slower the more files that are included in the page. This can be mitigated by caching and merging files.
- Javascript performance - this will depend on how well the plugins are written. While many plugins are great, I find a lot bloated and written to account for every probability, these are likely to be slower. Use your opinion.
source to share
I am assuming you are talking about js file load time.
I suggest you package all your jquery and plugin files into one file using something like YUI compressor. Also use etags for your static files.
This way your user only downloads the js file once and you can use it through your site.
Edit:
For execution performance, this depends on the quality of the code and the implementation of the plugins you are using. For example, if you use the livequery plugin too much, it will slow down the application. This is an example of good quality, but the implementation decision results in poor performance. However, using jQuery # live (v 1.3 or higher) has no performance limitation, since the underlying design and implementation are completely different. The result of this is that #live is less efficient than liveQuery, but faster. Therefore, it is important to read the source code to ensure that the quality of the code and implementation constraints to avoid performance issues.
source to share