Inside a super fast CSS engine: Quantum CSS (aka Stylo)

Inside a super fast CSS engine: Quantum CSS( aka Stylo)

You may have heard of Project Quantuma | itas a major rewrite of Firefoxas internals to construct Firefox fast. Weare swapping in parts from our experimental browser, Servo, and building massive improvements to other parts of the engine.

The project has been compared to replacing a jet engine while the plane is still in flight. Weare constructing the changes in place, component by component, so that you can see the effects in Firefox as soon as each component is ready.

And the first major component from Servoaa new CSS engine called Quantum CSS( previously known as Stylo) ais now available for testing in our Nightly version. You can make sure that itas turned on for you by going to about: config and setting layout.css.servo.enabled to true.

This new engine brings together state-of-the-art inventions from four different browsers to create a new super CSS engine.

It takes advantage of modern hardware, parallelizing the run across all of the cores in your machine. This means it can run up to 2 or 4 or even 18 periods faster.

On top of that, it combines existing state-of-the-art optimizations from other browsers. So even if it werenat running in parallel, it would still be one fast CSS engine.

But what does the CSS engine do? First letas look at the CSS engine and how it fits into the rest of the browser. Then we can look at how Quantum CSS attains it all faster.

What does the CSS engine do?

The CSS engine is part of the browseras rendering engine. The rendering engine takes the websiteas HTML and CSS files and turns them into pixels on the screen.

Each browser has a rendering engine. In Chrome, itas called Blink. In Edge, itas called EdgeHTML. In Safari, itas called WebKit. And in Firefox, itas called Gecko.

To get from files to pixels, all of these rendering engines basically do the same things 😛 TAGEND Parse the files into objects the browser can understand, including the DOM. At this point, the DOM knows about the structure of the page. It knows about parent/ child relations between elements. It doesnat know what those elements should look like, though. Figure out what the elements should look like. For each DOM node, the CSS engine figures out which CSS rules apply. Then it figures out values for each CSS property for that DOM node.Styling Figure out dimensions for each node and where it goes on the screen. Boxes are created for each thing that will show up on the screen. The boxes donat only represent DOM nodesa | you will also have boxes for things inside the DOM nodes, like lines of text.Measuring Paint the different boxes. This can happen on multiple layers. I think of this like old-time hand depict animation, with onionskin layers of newspaper. That makes it possible to merely change one layer without having to repaint things on other layers.Painting Take those different painted layers, apply any compositor-only properties like transforms, and turn them into one image. This is basically like taking a picture of the layers stacked together. This image will then be rendered on the screen.Assembling a DOM tree a listing of style rules figure out which rules apply to the nodeaaaaka selector matching fill in any missing values with values from the parent or a default valueaaka the cascade colour p span li div #warning Do the 2 nodes have the same ids, classes, etc? If so, then they would match the same rules. For anything that isnat selector basedainline styles, for exampleado the nodes have the same values? If so, then the rules from above either wonat be overridden, or will be overridden in the same way. Do both parents point to the same computed style object? If so, then the inherited values will also be the same. : first-child

Leave a Reply

Customer Reviews

0 reviews
No reviews has found