2191 posts
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+14 more
mpc Volunteer moderator says

Hi, I wanted to include some smooth transitions into my upcoming theme. Make all the hovers (changing color) and stuff with jQuery to look nice and nit. I am wondering how will this effect the site performance? Is it worth it? What do you think? I know the performance relays on many factors but still I need your opinion. The other thing is that I will have to pass my settings from PHP to jQuery which will done through wp_localize_script (JSON) this should be too overwhelming for the server right? :)

Tell me what you think, I need your opinion on this one!

premium-theme-park
premium-theme-park Recent Posts Threads Started
27 posts
  • Has been part of the Envato Community for over 3 years
  • Sells items exclusively on Envato Market
  • Located in South Africa
premium-theme-park says

I’m not sure how many objects you need to add jQuery FX too, but if you use your selectors correctly it will speed up your page(s) a lot.


$("div#selector")...

is better then:

$(".selector")...

it’s better to not use CSS classes for your selector (use ID’s), because jQuery will loop through the entire doc to look for selectors so the more specific you make your selectors the better…

On the topic of JSON :

I would rather make a writable *.js file and have a PHP string with all your setting write to that file every time you update the settings…

You can use fopen to open the file, fwrite to write to the file and fclose to close the file once you are done writing your sting to it…

Or you could use the file_put_contents PHP function but it’s a little slower to write to the file (a couple of m/s nothing huge).

All the documentation you need for this should be in the PHP documentation.

Hope this helps, inbox me if you get stuck.

814 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Contributed a free file of the month
+3 more
rvision_ says
premium-theme-park said

$("div#selector")...

is better then:

$(".selector")...

True, but div#selector is wrong, there is no need to specify an element if you have the element ID. If you have many elements in, for example, a wrapper container, fastest will be to cache the container and reuse it like this:


$container=$('#myelement');
$container.find('a')... /* do whatever */
$container.find('ul')... /* do whatever */

For further info, take a look at http://addyosmani.com/jqprovenperformance/

492 posts
  • Has referred 1000+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+8 more
pixelentity says

modern javascript engines are utterly fast and unless you’re coding gmail ui, code level optimizations will have low to zero impact on performances.

what really kill cpu are reflows.

278 posts mekshq.com
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Had an item featured in a magazine
  • Sells items exclusively on Envato Market
+5 more
meks says

Also, new jQuery 1.7 is faster than older versions …

2191 posts
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+14 more
mpc Volunteer moderator says

Thanks guys for those advices, I will look into this ;) If anyone has anything to add please share your thoughts!

2057 posts
  • Has collected 50+ items on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Sells items exclusively on Envato Market
  • Located in United States
Landonw says

I recommend using CSS3 transitions and effects instead, but it’s your theme so do as you please :P

2191 posts
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+14 more
mpc Volunteer moderator says
LandonWilson said
I recommend using CSS3 transitions and effects instead, but it’s your theme so do as you please :P

But I guess CSS3 is not as widely supported as JavaScript…

BTW The presentation on jQuery Performance that Rvision_ posted is awesome ;) Thanks!

3431 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark Volunteer moderator says
mpc said
LandonWilson said
I recommend using CSS3 transitions and effects instead, but it’s your theme so do as you please :P
But I guess CSS3 is not as widely supported as JavaScript…

It really just depends on whether the animation is crucial to the experience or not. For non-essential animations, I agree that CSS3 transitions are the way to go. If it’s imperative that the animation is visible to all users, then use javascript animations.

5342 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 more
CodingJack says

There isn’t much you can do as far as maintaining a consistent frame rate (especially across browsers) other than pulling back on the complexity of your animation. My suggestion would be to test on an average computer. If advanced transitions are poor even in the GPU accelerated browsers then you may want to simplify them.

by
by
by
by
by
by