Web performance will be getting a boost with a new CSS property that is being drafted by the W3C; will-change. This new asset will mean that web-based applications - such as a website - could see an improvement in raw user interface performance when it comes to animations and general effects, making them snappier and smoother for the end-user.
The technical stuff
Some typical web-effects could be a sidebar that slides out, or hover effects on an image. These can be costly memory usage for a browser if there are a lot of repaints (re-drawing the pixels on screen) involved. Without any help, most of the time, processing by the browser is processed on the CPU of your computer/device but there is the danger of that getting bogged down with all the other processes it has to keep running.
A solution to this is to delegate some of this work to the GPU (graphics processing unit) which could accelerate processing. At the moment to do this, one would typically add this code:
.sidebar { transform: translate3d(0,0,0);}This code makes the browser take the processing of this element to the GPU but this is not what the code is actually used for and so is more of a 'hack'.
A neat solution
Instead, will-change will be a semantic and interoperable method to achieve a similar thing, leaving the browser to determine the best allocation of resources between the GPU and the CPU. It should be declared predictably so that the browser will know that a change in states is upcoming.
For example, say that a menu button has functionality that when pressed, opens out a sidebar that has CSS3 transitions attached to it. We would know then that if a user hovers over the button, there is a high probability that the button will get pressed and that the sidebar will animate. The code for this may look something like:
button:hover + .sidebar { will-change: transform;}Final words
At the time of writing, the property is still in a working draft but when it is implemented in browsers, look for small but noticeable differences in animations. This should help developers hit the 60 frames-per-second target of effects and transitions, due to the optimisations the browser can make for the code author ahead of time.