CODEWITHSUNDEEP
jquerypluginsperformance
Michael L
Michael L

Reputation: 827

JQuery performance with many plugins?

I've been using JQuery for a while, but primarily without plugins - I'm now looking to do a project which could take advantage of a bunch of plugins - Are there any performance penalty to using a lot of plugins in a project - Lets say something in the order of 10-20 plugins?

And how will the performance be affected if JQuery and it's plugins are included on all pages - Even though all plugins are not being used on every single page?

Upvotes: 2

Views: 517

Answers (5)

GmonC
GmonC

Reputation: 10970

John Resig (jQuery creator) has a good way of profiling jQuery plugins and such. I would say that the best way to see how performance would be affected is by using all plugins you need and testing it.

Adding a lot of js calls would maximize http requests too, slowing down you website. Reading yahoo best practices and using it's extension Yslow is a good idea to test your site and see what can be improved. Google has speed articles as well.

Upvotes: 1

Aaron Qian
Aaron Qian

Reputation: 4485

I assume you are talking about js file loading time.

I suggest you to package all your jquery and plugin files into a single file using something like YUI compressor. Also use etags for your static files.

This way, your user only load the js file once, and you can use it through out your site.

Edit:

For execution performance, it depends on the code quality and implementation of the plugins you use. For example, if you use livequery plugin too much, it will slow down the app. This is an example of good quality, but implementation decision lead to slow performance. However using jQuery#live (v 1.3 or above) doesn't have the performance penalty, because the underlying design and implementation is completely different. The result is that #live is less powerful then liveQuery, but faster. So it is important to read the source code to make sure code quality and implementation limitations in order to avoid performance issues.

Upvotes: 0

redsquare
redsquare

Reputation: 78667

The quality of the plugins vary wildly. Some have been done really well using best practise, others have not. Some are really concise others are bloated and inefficient. We could advise more if you gave a list of the plugins you are considering.

Personally I would combine all the scripts into one large minified script file rather than have to maintain different combinations of script files on different pages also it leaves the client with one script resource download.

However as always the key is to profile your UI and often. Do the above first, if you encounter performance issues then refactor what you are doing.

Upvotes: 4

i_am_jorf
i_am_jorf

Reputation: 54600

The only constant cost of plugins is the cost of downloading them, i.e. the bigger they are, the slower your page loads. However, most plugins I've seen—and JQuery itself—are tiny, or small enough that it doesn't really matter.

In the end what matters is how you use them and what sort of initialization on load they do. Without a list, nobody can really tell you. You'll just have to pay attention as you build the pages, and be careful about what you do. It's really easy to write some JQuery that modifies a ton of DOM elements in tight loops without realizing it. Watch out for that.

Build your site, and verify through measurement.

Upvotes: 2

edeverett
edeverett

Reputation: 8218

There's two things to consider here:

  1. Page load - this will obviously be slower the more files that are included in a page. This can be mitigated by cacheing and combining the files.
  2. Javascript performance - this will depend on how well the plugins are written. While many plugins are great, I find many that are bloated and written to take every eventuallity into account, these ones are likely to be slower. Use your judgement.

Upvotes: 1

Related Questions