New levels of creativity are being doled out on the web-page every day. Designers and developers are using an excessive amount of DOM to achieve fascinating visual effects. Multiple nested <div> tags have become common-place.
The flip-side of this is the load on the browser and its rendering engine. The rendering engine has to maintain in memory many all the DOM nodes and has to perform a recalc for each of these <div>s so that it can render the visuals correctly.
Why the developers did this is another story, but the fact remains that browsers consumed a lot of memory and maintained high-levels of cpu usage to display the content. This also often challenged the responsiveness of the browser, sometimes on slower machines the drag or delay could be felt.
This is where Houdini
Instead of putting addition DOM to achieve an effect, Houdini
provides a hook into the rendering engine and allows the web-developer
to run his own code and do his own rendering. It has owned a Pandora's box - effects which were impossible through the existing CSS - DOM model are now so simply within the web-developers reach to be used executed as he/she wants.
The Paint API
The Paint API corresponds to the paint phase of the rendering process
The Paint API exposes a restricted version of the Canvas API to do the drawing. Web developers are allowed to use worklets
, a paintWorklet
to be precise, to define colors, line widths, styles and draw lines, arcs, rectangles and paths.
The Paint API has added paint() function as one of the ways to define the image property in CSS.
background-image: paint(box-fill-effect, blue);
Click here for more information on the paintWorklet()
The strength of Houdini
is that the code specified within its framework will render at the same speed as the CSS properties.
Armed with this information, let us write our first Houdini code.