Jump to content
Search Community

Speed Enquiry

mimeartist test
Moderator Tag

Recommended Posts

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




Link to comment
Share on other sites

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/

  • Like 2
Link to comment
Share on other sites

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.).

  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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(). 👍

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...