Quantum CSS (aka Stylo): Mozilla’s Super Fast CSS

Quantum CSS is a new CSS engine which is previously called as Stylo. This new engine brings together futuristic innovation from four different browsers to create a new super CSS engine called Quantum CSS engine.

Four different browsers are :

• SERVO: The parallel browser Engine designed for both application and embedded use. The servo project aims to archive better parallelism.
• Firefox: the rule tree from Firefox.
• Chrome and Safari: the style and cache from chrome and safari.

It can run up to 18 times faster because of parallelization from other browsers. It takes the current optimization techniques of other browsers so even if it not running faster it will still run faster.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG, and XUL.

Along with HTML and JavaScript, CSS is a technology used by most websites to create visually engaging web page user interfaces for web applications, and user interfaces for many mobile applications.

Every browser has its rendering engine. In Chrome, it’s called Blink. In Edge, it’s called Edge HTML. In Safari, it’s called WebKit. And in Firefox, it’s called Gecko.  it takes  HTML and CSS files and turns them into pixels on the screen. All these rendering Engines have same work i.e to parse the files into DOM (Document Object Model) that browser can understand in this way DOM understands the structure of the page, every parent/child relationship between elements.

The CSS engine has two things when it starts calculating the styles: a DOM nodes and a list of style rules. CSS engine works from the top of the DOM node so it takes top node apply CSS rule on it .then later on it figures the value of CSS property and dimensions for each node.

CSS works on layouts colors, a style that can be changed according to need and also it is possible to just change one layer without doing the same on other layers. Then the process initiated from DOM nodes and proceeded by styles for the DOM node and then further giving the value and property.for this process CSS engine needs to do selector matching (for applying rules) and the cascade (filling missing values). Some default also added by the browser itself called agent style sheets.

How is Quantum CSS fast?

Now the process begins from Match selector, sort declaration, computer property values. It does not need a first-page load. It happens over and over again when a user interacts with the page, making changes to DOM and restyling is done. Servo project now uses for parallelization which means splitting up style computation for the different DOM nodes across the different cores. then a problem arises for doing this operation that is DOM trees are often uneven, for balancing work stealing technique is used.

Then when the node is processed the code takes its direct children and splits them up into 1 or more work units and puts them into a queue.

With the help of rule tree: selector matching is done for each DOM node. But for most nodes, the selector matching wouldn’t change. Suppose any rule applies to parent and if user willing to apply same rule on its child then the rules that match those child nodes won’t change. This problem is fixed by rule tree which is taken from Firefox. A note of rules is make which matches for those child nodes so we don’t have to do selector matching again and again for this it creates a link list of rules.

Style sharing cache: taken from safari and chrome it works after processing a node, now when a page with thousands of nodes but matching the same rule and same computed style but no optimization then CSS engine has to match selector and computer style for each paragraph. This problem is fixed by style sharing cache. it puts the computed styles in cache .then for the next node it runs a few check in the cache for reuse. Checks like -suppose for 2 nodes, the 2 nodes have same ids, classes, etc.

Quantum CSS covers all selector matching and checks which are applied to the DOM node.

All the technical details of Quantum CSS is at Mozilla Hacks.