CSS Hardware acceleration - a brief history.
Hardware acceleration in browsers is actually a concept made possible by two technologies; Graphics processing unit(GPU) in computing machines(computers, mobile devices) and new version of browsers which can interact with GPU. If we see the wikipedia definition of GPU it says - âa specialised electronic circuit designed to rapidly manipulate and alter memory to accelerate the creation of images in a frame buffer intended for output to a displayâ. In simple words it basically is used to optimise and serve better performance when we have image or videos displaying. Better the GPU; better the performance. An example of GPU config; my macbook has âIntel HD Graphics 4000 512 MBâ.
Now, modern browsers have been able to use the GPU (first browser to use is IE9 in 2010) to show rich media on the webpage. Rich media here refers to things like images, videos, css animations and 3D graphics. Earlier, only applications like desktop games, video players were able to use them and browsers relied on CPU to do all the rich media processing.
The way browsers do it is by offloading all the rich media layers to the GPU which takes on the work of moving and presenting them. A very good blog explains how chrome does it - âChrome uses textures(a bitmap image thatâs moved from main memory i.e. RAM to video memory i.e. VRAM, on your GPU) to get chunks of web page content onto the GPU. Textures can be cheaply mapped to different positions and transformations by applying them to a really simple rectangular mesh.â Thereâs a lot of technical detail to it which google has shared here . For now, understanding that rich media presentation happens through GPU in modern browsers should be enough.
Also there are limits how a web application can use it,since the GPU memory is limited and if you overuse it by having a lot of rich media it does cause crashes.
