2178 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Community Moderator
  • Bought between 50 and 99 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
+10 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
  • Exclusive Author
  • Has been a member for 3-4 years
  • 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
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
  • Serbia
  • Has been a member for 5-6 years
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/

491 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Won a Competition
  • Referred between 1000 and 1999 users
  • Author had a Free File of the Month
  • Author had a File in an Envato Bundle
  • Bought between 10 and 49 items
+3 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.

274 posts mekshq.com
  • Elite Author
  • Has been a member for 4-5 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Europe
  • Bought between 1 and 9 items
  • Referred between 50 and 99 users
  • Envato Studio (Microlancer) Beta Tester
meks says

Also, new jQuery 1.7 is faster than older versions …

2178 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Community Moderator
  • Bought between 50 and 99 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
+10 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!

2054 posts
  • Has been a member for 4-5 years
  • Bought between 50 and 99 items
  • Exclusive Author
  • United States
Landonw says

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

2178 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Community Moderator
  • Bought between 50 and 99 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
+10 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!

3424 posts
  • Football Contest Participant/Runner-up
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 100 and 499 items
  • Referred more than 2000 users
  • Has been a member for 4-5 years
+5 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.

5311 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
  • Author had a Free File of the Month
+5 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