How Browsers Draw Web Pages

Abstraction Layers

Your computer is built on hardware, but to interact with it, you need firmware. Firmware is low-level software that controls and communicates with hardware components. However, since every hardware and its firmware differ, developers created an intermediary layer called the Hardware Abstraction Layer (HAL). HAL standardizes interactions between the operating system and hardware, allowing software to run on different devices without modification.

Beyond HAL, an additional abstraction layer is needed to manage software interactions with the operating system. This is the Operating System Abstraction Layer (OSAL), which standardizes how applications interact with different operating systems.

These abstraction principles extend to how browsers handle rendering across different GPU architectures.

GPU Render Libraries

GPUs are highly specialized hardware designed for parallel processing. To leverage them, different APIs and libraries exist, each with unique advantages:

• OpenGL: A cross-platform API for rendering 2D and 3D graphics. Although OpenGL’s major development slowed after 2015, OpenGL ES (used in mobile and embedded devices) continues to receive updates.
• Direct3D: A Microsoft API optimized for Windows platforms, used primarily in gaming and high-performance applications.
• Vulkan: A modern, low-level API providing better performance and cross-platform support. Unlike OpenGL, Vulkan offers explicit GPU control, reducing driver overhead.
• Metal: Apple’s proprietary low-level graphics API optimized for macOS and iOS devices.

Render Engine Abstraction Layer

Rendering engines require an abstraction layer to maintain compatibility across multiple GPU libraries. Rather than directly interacting with OpenGL, Direct3D, Vulkan, or Metal, browsers use intermediary rendering frameworks:

• ANGLE (Almost Native Graphics Layer Engine): Used by Chrome and Edge, it translates OpenGL ES calls into Direct3D, Vulkan, or Metal, depending on the platform. ANGLE ensures compatibility for systems lacking native OpenGL ES support.
• Skia: A 2D graphics library used by Chrome for rendering across different platforms efficiently.
• Cairo: A vector-based graphics library employed by Firefox for 2D rendering.
• CoreGraphics: Apple’s graphics library for Safari, optimized for macOS and iOS.
• Direct2D: Used in older versions of Microsoft Edge (before switching to Chromium) for high-performance 2D rendering on Windows.
• GDI/GDI+: An outdated graphics rendering system once used by legacy Internet Explorer versions.

These libraries enable browsers to optimize rendering while ensuring compatibility across various platforms and hardware.

Drawing Pixels on Screen

Raster & Vector Graphics

Raster graphics are composed of individual pixels, meaning they lose quality when scaled up. Vector graphics, however, use mathematical equations to define shapes, allowing them to scale indefinitely without loss of clarity.

Since screens are made of pixels, even vector graphics must eventually be rasterized before being displayed. The rendering engine handles this conversion, determining the resolution and quality of the final output.

Rendering Engines

Rendering engines convert HTML and CSS into visible pixels on the screen. Here are the primary browser rendering engines:

• WebKit: Used in Safari and previously by early Chromium versions.
• Blink: A fork of WebKit used in Chromium-based browsers like Chrome and Edge.
• Gecko: Mozilla’s rendering engine for Firefox.
• Trident: The now-obsolete rendering engine used in Internet Explorer.
• EdgeHTML: Used in Microsoft Edge before switching to Blink.

How Rendering Engines Work

The rendering process involves multiple stages:

1. HTML Parsing: Converts HTML into a Document Object Model (DOM), which represents the page structure as a tree.
2. CSS Parsing: Converts CSS into a CSS Object Model (CSSOM), defining how elements should appear.
3. Layout Calculation: Determines the position and size of each element based on the DOM and CSSOM.
4. Painting: Renders elements onto layers, applying styles like colors, shadows, and gradients.
5. Compositing: Combines the layers and displays the final image on the screen.

Advanced Rendering Techniques

Modern browsers optimize rendering through:

• Async Rendering: Using background threads to improve responsiveness and reduce blocking.
• GPU Acceleration: Offloading rendering tasks to the GPU for smoother performance.
• Lazy Rendering: Delaying the rendering of elements not immediately visible, improving performance for large web pages.

WebGL and WebGPU: Bringing 3D Graphics to the Browser

WebGL

WebGL (Web Graphics Library) is a JavaScript API that enables rendering 2D and 3D graphics directly within browsers, leveraging GPU capabilities. WebGL is based on OpenGL ES, allowing developers to write shaders and interact with GPU resources without additional plugins.

WebGPU: The Future of Web-Based Graphics

WebGPU is a next-generation API designed to succeed WebGL. It provides more efficient, low-level access to GPU resources, similar to Vulkan and Direct3D 12. WebGPU aims to improve performance and energy efficiency, particularly for web-based 3D applications and machine learning workloads.

How Browsers Play Videos

1. Decoding: Compressed video data (H.264, VP9, AV1) is decoded into individual frames.
2. Rendering: Frames are drawn onto the <video> element using the rendering engine.
3. Hardware Acceleration: The browser offloads decoding to the GPU for improved efficiency and reduced CPU usage.

How 3D Games Work in Browsers

Web-based 3D games rely on WebGL or WebGPU to render graphics efficiently. The process follows these steps:

1. Game Logic: JavaScript or WebAssembly handles physics, AI, and user interactions.
2. Scene Setup: WebGL/WebGPU or libraries like Three.js define objects, lights, and cameras.
3. Rendering: The API sends draw calls to the GPU, processing shaders and rasterizing models.
4. Compositing: The rendered frames are displayed, synchronized with user inputs for a smooth experience.

Conclusion

Browsers use multiple abstraction layers to efficiently render web pages, from high-level HTML and CSS processing to low-level GPU optimizations. Understanding these layers helps developers build optimized web applications while ensuring cross-platform compatibility. With the rise of WebGPU, browser graphics are poised for even greater performance improvements in the future.

References

• How Browsers Work

Album of the day: