Ariya Hidayat has written an excellent article on GPU Composited CSS and how it can be used to optimize web rendering performance.
The impact of adding CSS transforms is evident in developer timline and this experiment is a way to capture that information using browser-perf. The results from this experiment clearly indicate how certain CSS properties move rendering load to the GPU, and how that that impact the overall responsiveness of the page.
- Ensure that you have node and npm installed
- Ensure that you have Selenium running, or can connect to Sauce Labs
- Dowload this gist using
git clone https://gist.github.com/853d34ebd776047836f3.git
- Install other dependencies using
node index.js to get the data for the number for the specified number of rectangles. Remember to change the string 'addOne()' to values like addTen() or addHundred() for getting more rectangles on the screen, and seeing what the numbers for each look like.
The purpose of this experiment was to prove that the changing the color causes a paint. An effective way to achieve the same effect is to have 2 rectangles with alternative opacity.