Hey all,
I’m working on a website for a client and we’ve decided to use CSS3 instead of Flash for multiple reasons, compatibility with mobile devices being the main. However, there’s a lot of animation on the page such as fading, positioning and opening/closing and it seems to be tripping over itself attempting to process everything.
I’ve created an animation class that schedules all of the animations so that there’s only one setTimeout running for those animations at any given time. I’ve also set it up so that any web browser capable of CSS3 transitions use those instead of the JS animations. The animations lag in both CSS3 and JS functionality, although the CSS3 is slightly better.
Some animations lag even if they’re the only animation running. For instance, trying to fade a full-screen image in/out chugs even on test pages I’ve created only containing the one function.
I understand that Flash uses hardware acceleration and has optimized rendering, and the reason the browser is lagging is most likely because it’s all being processed unoptimized and through the CPU. However, I’m sure there must be a way to make this site smoother than it is.
I’m posting here because my deadline is coming hard and fast, to ask for assistance with:
Tips on how to optimize my code to run smoother in JS and/or CSS3.
Any info on how to be able to fade large images/areas with less lag
[snippity].
I’ve been trying to move most of my code into OOP as I’ve gone along, but some functions are still a bit “spaghetti” due to my time crunch. Sorry about that.
Thank you in advance for anybody kind enough to help me out.
I think you are hitting browser limitations there, it’s smooth as silk in FF5 and chrome 12 which both have alot of improvements in JS processing. I’m not sure if it will help (not having tried it myself) but because you are fading the background on a solid colour you could change your approach to fading. Instead of fading the large image in/out, fade a white overlay see if that has any impact on performance.
My suspicion is that for last generation browsers you will still hit issues with JS animation. FF 4 + had a new javascript engine written, chrome has always been pretty fast and I think Opera has (or is planning) improvements to its JS engine.
I’m actually currently fading a div with a white background instead of the image itself, sorry for the confusion. Would you say fading a stretched 2x2 image would process faster than the div?
Also: I get lag running the site in Chrome 13 when I load the pages with a lot of content/images such as the “rooms” page.
I edited my post for the 2x2 image thing before you replied, it’s probably better to use the solid colour. I’ve found that both behave differently, I don’t really have any better solution to offer.
Sometimes ‘lag’ can also be caused by the PC or device it’s being used on versus the browser. As a rule of thumb though I’d always assume your users are using older hardware so it its slow for you…
If you don’t end up finding a solution to animation perhaps you can compromise on the amount of animation you are using? Target the areas that lag alot and use simple show/hide instead of fades or slides. I find often that clients are amenable to change or compromise if you explain your reasons for choosing a certain technology (ie avoiding flash because its a godawful maintenance nightmare and likely to cost them more money down the track).
I was able to cut out a lot of the lag by optimizing (read: completely rewriting) my code. I wrote an engine that replaces setTimeout. I use the same syntax in my custom function setDelay() and they’re all added to an array sorted by the soonest “arrival time” (milliseconds until their delay ends) and processed in order, and together if they are within 25ms apart.
Next step is to start cutting down on the animated space, I’m not sure I can optimize my code any further.
Fun fact though, Safari actually runs the page absolutely perfectly smooth with no hiccups or stutters at all. Chrome is very chuggy, on the other hand. I am surprised because I’ve always thought Chrome to be pretty much the best of everything.
I’m curious, are you queuing the animations now or are some of them running concurrently (eg, fade + slide)?
Chrome is great, but I think there are still some aspects of it that are ‘green’ (Although I’m loving the new dev tools). Alot of that new aspect of chrome is also what makes it so great though (distinct lack of bloat), and the JS engine is one area where I haven’t had or heard any issues.
I’m doing my best to keep them separated for performance, but some run concurrently (For instance, rolling over the menu while something else is happening).