Speed Enquiry

[mimeartist 26 Likes (Newbie)]

Just trying to squeeze the last drop of speed out a project...

 

Reading up on CSS speed checks, I was surprised to read https://css-tricks.com/efficiently-rendering-css/ that in CSS you put the class before the ID as it renders right to left, I'd imagine this is not as important as it once was - However thought I'd ask... which is the quickest way to animate a class with an ID div...

 

Is it (as I use presently)

 

gsap.to('#circle_logo .roundTextShadow',theSpeed, { 'fill':theTextColor});

 

or is it, as per CSS in the document, 

 

gsap.to(' .roundTextShadow #circle_logo',theSpeed, { 'fill':theTextColor});

 

I imagine GSAP is doing all it can to speed things up, so just wondered out of interest whether this is something I should be considering

 

 

 

[elegantseagulls 1,443 Likes (Superhero)]

Hi @mimeartist,

 

I could be wrong, but I believe GSAP uses document.querySelector(yourSelectors) (you'll want to look into how JS handles that to see what it's looking for first) to access elements. That said, the code you have isn't exact interchangeable either, as one represents the parent element and the other the child. The most efficient method would be just to target the ID, as that should be a unique-to-the-page identifier, or just a group of unique classes, if you are writing semantic HTML.

 

There's a few things you could do to boost your GSAP code however:
Move your theSpeed inside the animation object as: duration: theSpeed, and 'fill' shouldn't need to be a string, so your tween should look like:
gsap.to('#circle_logo .roundTextShadow', { duration: theSpeed, fill: theTextColor });

 

This is a good resource for writing efficient animation code via @ZachSaucier: https://css-tricks.com/tips-for-writing-animation-code-efficiently/

[ZachSaucier 7,152 Likes (Superhero)]

Yeah, those selectors are not equivalent. But if the speed of the selection of the targets is a true performance concern for your application then I applaud your performance because it must be blazingly fast  I say that because in real applications I would doubt the difference would ever be noticeable. Most likely performance issues will stem from other things (loading too much data, animating non-performant properties, etc.).

[mimeartist 26 Likes (Newbie)]

Thank you both,

 

I have quite a few items on screen, so figured saving a few milliseconds on each might make things even smoother... it's smooth on my 5 year old iMac so not to  bothered... but it's nice to get it as trim as possbile before launch rather than after

 

So just to confirm - it's fine to use the id then class, and right to left is unlikely to make much differnce?

[ZachSaucier 7,152 Likes (Superhero)]

9 minutes ago, mimeartist said:

it's fine to use the id then class, and right to left is unlikely to make much differnce?

Like I said, I doubt you'd be able to tell the difference. 

[GreenSock 18,587 Likes (Superhero)]

4 hours ago, elegantseagulls said:

I believe GSAP uses document.querySelector(yourSelectors)

It uses document.querySelectorAll(), yeah. And I agree with the others here - it won't make any noticeable difference unless maybe if you've got 100,000+ nodes in your document but if that's the case you've got other issues

 

You're welcome to use your own method of selecting, and then just pass the result into GSAP if you don't want to have it use the standard document.querySelectorAll(). 👍

[elegantseagulls 1,443 Likes (Superhero)]

Gah! I'm blaming lack of coffee for missing the 'All'.