CSSOM | CSS Object Model implemented in pure JavaScript | Parser library

First, minify your style.css with gulp or other tools or online tools like Cssminifier that convert your style.css to style.min.css, for example, then add it to the site header as shown below. .

From a (C++ etc.) application development perspective, JavaScript engines are embeddable libraries; and a browser is one such embedder. Any library defines a public interface through which it can be used -- its Application Programming Interface (or API for short). There is no standard for what a JS engine's API should look like; each engine defines its own, and evolves it as necessary over time. V8's is here.

The core functionality of a JS engine's API is to allow the embedder to provide objects and functions to the JavaScript environment that are backed by the embedder's own C++ implementations. Essentially, this defines a mapping, sometimes also called "bindings". For example, the embedder can say "I want there to be a document object, and it should appear to have a property .location that's backed by my getter function DocumentLocationGetter() {...}, and it should (appear to) have a method .createElement() that's backed by my other function DocumentCreateElement(...) {...}", and so on.

And that's the answer to both of your questions: the browser exposes certain functions to JavaScript that can then be called from there. The browser decides what to do when such a function is called (e.g.: add or remove a DOM node, change a CSS property, store an event handler in some element's event handlers list, ...). Of course the browser/embedder can also call into the JS engine, for example when invoking an event handler, it can tell the engine "please execute function button1_clicked now".

For more details, see e.g. v8.dev/docs/embed.

The author of the article is focusing on the domContentLoaded event or as in the moment when the page is ready to be present to the user, no more white screen. When the blue vertical line appears in the timeline matters. This is an important event to understand how quickly the page is available to the user. How long does the user have to stare at the white screen before the content is present?

Due to the advent of single-page applications, almost all of the content is only available after the main scripts load. This is why so many of the top web application uses server-side rendered pages delivered first then the javascript take control of the single page application. They even employ code-splitting to load just what is needed on the current page.

The article dives into the effects of including external CSS and js files. How the loading and parsing of these files can push the domContentLoaded event, meaning more delays in changing that white screen to content, even though the content (HTML) is already parsed and ready to be presented.

The performance event log does show details of what is happening, but if you scroll down further, you can find the Event:readystatechange and Event:pageshow, representing the timestamp of when the content is presented to the user. These events are after the script and style computation. The

CSSOM does not state this directly, but instead references css-color-4:

To serialize a CSS component value depends on the component, as follows:

If is a component of a resolved value, see CSS Color 4 §4.6 Resolving Values.

If is a component of a computed value, see CSS Color 4 §4.7 Serializing Values.

For the purposes of getComputedStyle(), both of the above lines mean the same thing. Specifically, section 4.7.2 covers the majority of commonly used formats:

4.7.2. Serializing sRGB values

The serialized form of the following sRGB values:

• hex colors
• rgb() and rgba() values
• hsl() and hsla() values
• hwb() values
• named colors

is derived from the computed value and thus, uses either the rgb() or rgba() form (depending on whether the alpha is exactly 1, or not), with lowercase letters for the function name.

Section 4.7.6 covers system colors (computes to lowercase), transparent (computes to rgba(0, 0, 0, 0)) and currentColor (computes to lowercase currentcolor).

As css-color-4 introduces several new ways to specify colors, other sections exist for other formats such as §4.7.3 for LCH values, §4.7.4 for the color() function, and more.

This means that color values from getComputedStyle() are guaranteed to be in either rgb() or rgba() format, depending on the alpha value, only when the specified values are in any of the formats in §4.7.2. But §4.7.2 and §4.7.6 cover the vast majority of use cases in everyday CSS, so they can still be relied on. Considering the other, exotic formats aren't really supported anywhere yet, it's probably not worth testing for them until they enjoy any sort of mainstream use.

The HTML is assembled, but no layout or painting or compositing or anything like that.

The only rendering is the HTML document.

Usually, the most compelling reason for this technique is SEO. Even crawlers (like Google) that run your JavaScript won't do it all the time, and they tend to have strict limits for what they will run and for how long.

No, overflowed content cannot affect window.innerWidth. What you are seeing is an issue with chrome dev tools. The window is still 1600px even though chrome is artificially resizing to a mobile device size.

There are several issues here you're conflating, so it's difficult to close this one as a duplicate, even though each of the questions you raise by themselves have been asked, and answered before. So I hope this helps!

How is the root element of the CSSOM (CSS Object Model) determined

The root is simply the root element of the document, or html, let there be no misunderstanding about that.

authors seem to make the assumption that the body element is the root (..) An example of this is here https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3/

Ehm, no. The example on that page uses "root" as the top of the particular subtree it is talking about, which just happens to be there, but that is a coincidence; the example could well have been for a table, and then

Whats more is the fact that the HTML specification doesn't seem to require EITHER of these tags in markup (maybe I'm misunderstanding this though).

The start tags for both and are optional, so yes, they can be omitted from a HTML document. Same for . But the elements themselves are still there! All the content is inside the html element, start tag or not. You can test this for yourself by loading a HTML document, say