Indicate That Processor-Heavy Js Function Is Running (Gif Spinners Don't Animate)

Indicate that processor-heavy JS function is running (GIF spinners don't animate)

Modern browsers now run CSS animations independently of the UI thread if the animation is implemented using a transform, rather than by changing properties. An article on this can be found at http://www.phpied.com/css-animations-off-the-ui-thread/.

For example, some of the CSS spinners at http://projects.lukehaas.me/css-loaders/ are implemented with transforms and will not freeze when the UI thread is busy (e.g., the last spinner on that page).

CSS Animations stall when running javascript function

A browser page is single threaded. Updating the UI happens on the same thread as your javascript program. Which also means that any animation will not draw new frames while Javascript code is being executed. Typically, this is no big deal because most JS code is executed very quickly, faster than a single animation frame.

So the best advice is simply this: Don't do that. Don't lock up the JS engine for that long. Figure out a cleaner way to do it.

---

However, if you must, there is a way. You can get an additional thread via HTML5's Web Workers API. This isn't supported in older browsers, but it will allow you to run some long running CPU sucking code away from the main webpage and in it's own thread, and then have it post back some result to your page when it's done.

Check to see if system is able to display JS effects smoothly

The only way I know of do this is to actually run a representative animation and measure it's speed, either in time to render x frames or in total frames per fixed time. The animation libraries in both jQuery and YUI adapt the number of frames that they render based on the speed of rendering each frame as they go. You can look at how they do that to get some ideas how to measure this or if you're using one of those libraries, you may even be able to get the info out of them after an animation.

You could run this test animation and then cookie the result and then only rerun the test animation when you don't find the cookie. Or, you could run the desired animation in the normal course of your app, but measure how well it worked and if it was too slow or jerky, then cookie that you need to use something quicker next time.

---

Related Topics