En Cómo funciona un navegador web por dentro, un curso divulgativo, se hace referencia al curso Inside look at modern web browser en el que se explica el funcionamiento del motor del navegador Google Chrome.

En Rendering on the Web se analizan las distintas formas que existen de generar páginas web en la actualidad:

As developers, we are often faced with decisions that will affect the entire architecture of our applications. One of the core decisions web developers must make is where to implement logic and rendering in their application. This can be a difficult, since there are a number of different ways to build a website.

Our understanding of this space is informed by our work in Chrome talking to large sites over the past few years. Broadly speaking, we would encourage developers to consider server rendering or static rendering over a full rehydration approach.

In order to better understand the architectures we’re choosing from when we make this decision, we need to have a solid understanding of each approach and consistent terminology to use when speaking about them. The differences between these approaches help illustrate the trade-offs of rendering on the web through the lens of performance.

Rendering

• SSR: Server-Side Rendering – rendering a client-side or universal app to HTML on the server.
• CSR: Client-Side Rendering – rendering an app in a browser, generally using the DOM.
• Rehydration: “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data.
• Prerendering: running a client-side application at build time to capture its initial state as static HTML.

Performance

• TTFB: Time to First Byte – seen as the time between clicking a link and the first bit of content coming in.
• FP: First Paint – the first time any pixel gets becomes visible to the user.
• FCP: First Contentful Paint – the time when requested content (article body, etc) becomes visible.
• TTI: Time To Interactive – the time at which a page becomes interactive (events wired up, etc).

Desde hace un tiempo, esto se ha convertido en lo más normal:

Entras en una página web en el móvil y te sale el aviso de cookies que inunda toda la página web.

En el artículo To Grid or to Flex? se analizan las ventajas y desventajas de realizar un diseño con CSS Grid o CSS Flex:

What surprised me about reading the responses in the thread was the number of people stating that they would only use Grid for page-level layout, and flexbox for everything else. If you take this as a rule, then you’re severely limiting yourself when it comes to Grid’s power. The main piece of advice I would give is to take every design individually, analyse the options available and don’t make assumptions about which technology you need. Here are some of the questions you could ask yourself when it comes to choosing a layout method.

Often, if you’re having to use calc() a lot to get precise track sizes (factoring in gutters, for example) then it’s worth considering using Grid, as the fr unit will do the heavy lifting for you and save you any number of headaches. While that’s fine as a general principle, it’s not the whole picture. There are cases when you might need Grid, even though your layout doesn’t require calc(). One example might be a fixed-width, two-dimensional layout, where each track is 200px wide – you don’t need calc() to tell you how wide those tracks should be, but you might still want the behaviour of Grid. Likewise, there are cases for using flexbox where you do need calc(), so this can only be interpreted as a guideline.