Unlock Faster Page Loads: Mastering Browser Rendering and Performance Optimizations

Introduction

The previous article introduced basic browser concepts, history, and market share; this piece focuses on the fundamental principles of browsers and how mastering them can drive product performance, user experience, and sustainable business growth.

Business System Presentation Nodes

MCube first checks template cache status to decide whether to fetch the latest template from the network. After obtaining the template, it loads it, converts the product into a view‑tree structure, resolves expressions, binds custom events, and finally renders the view.

Browser Navigation Process

When a user accesses the business system, the browser and server go through a series of complex interactions.

1. Enter URL and Parse

1.1 User enters URL and presses Enter

Example:

https://www.businesssystem.com

1.2 Browser parses URL

The browser determines the protocol, host name, port (if any), path, and query parameters.

1.3 DNS resolution

Check local DNS cache for a matching IP address.

If not found, query the operating system.

The OS checks its cache and may request the local DNS server.

The local DNS server may recursively query other DNS servers until the IP address is found.

2. Establish Connection, Send Request, Receive Response

2.1 Establish TCP connection

After obtaining the IP address, the browser establishes a TCP/IP connection with the server. For HTTPS, an SSL/TLS handshake creates a secure channel.

2.2 Send HTTP request

The browser builds an HTTP request, e.g., GET /index.html HTTP/1.1, adds request headers (User-Agent, Accept, etc.) and an optional body for POST.

2.3 Server processes request

Parse the request and determine the required resource.

Interact with backend databases or services if needed.

Construct an HTTP response with status line (e.g., HTTP/1.1 200 OK), response headers (Content-Type, Content-Length) and the response body.

2.4 Send HTTP response

The server sends the response back to the browser.

2.5 Browser receives response

If the response is a redirect (301/302), the browser follows the Location header.

If the content is compressed (gzip), the browser decompresses it.

The browser uses the Content-Type header to decide how to handle the body (HTML, CSS, JS, images, etc.).

3. Parse and Load Resources, Render Page

3.1 Parse HTML

The browser parses the HTML document and builds the DOM tree, triggering additional requests for CSS, JavaScript, images, etc.

3.2 Load and Execute Resources

CSS: parsed into a CSSOM tree; combined with the DOM to form the render tree.

JavaScript: executed, potentially modifying the DOM or CSSOM.

Images and other assets: loaded asynchronously and rendered when ready.

3.3 Render page

The render tree is used to compute layout (position and size) for each element, then the page is painted. This may involve multiple reflows and repaints, especially when JavaScript changes the DOM or CSS.

4. User Interaction

After the page loads, users can interact (click, input, etc.). The browser responds to these actions, often updating the page dynamically via JavaScript.

5. Summary of Process

The presentation flow consists of URL parsing, establishing a connection, server processing, downloading and parsing the response, and finally rendering the page.

Technical Optimization Points

1. DNS Optimization

1.1 Enable DNS Prefetch

Browsers resolve domain names before the user clicks a link, reducing wait time.

<link rel="dns-prefetch" href="//example.com">

1.2 DNS Cache Optimization

Set appropriate TTL values: long TTL for static records, short TTL for frequently changing ones.

Long TTL (e.g., 24 hours) for stable records.

Short TTL (minutes to hours) for dynamic records.

1.3 Load Balancing and Redundancy

Use DNS load balancing to distribute traffic across multiple servers.

Configure multiple authoritative DNS servers for fault tolerance.

1.4 Reduce DNS Query Count

Consolidate resources under the same domain to minimize cross‑domain DNS lookups.

Limit external third‑party scripts and styles.

2. HTTP Protocol Optimization

2.1 Request Method Optimization

Use the correct HTTP method (GET for retrieval, POST for submission, etc.).

Merge requests where possible (e.g., combine CSS/JS files, use sprites for images).

2.2 Status Code Optimization

Return appropriate status codes (200, 404, 500, etc.).

Minimize redirects (avoid unnecessary 301/302).

2.3 Header and Response Optimization

Compress content with Gzip or Brotli.

Use cache‑control headers (Cache‑Control, Expires) to cache static assets.

Set Content‑Security‑Policy to prevent XSS.

Remove unnecessary headers to reduce payload size.

2.4 HTTP/2 and HTTP/3 Optimization

a. Multiplexing: enable HTTP/2/HTTP/3 to send multiple requests/responses over a single connection, reducing latency.

Avoid domain sharding; multiplexing makes it unnecessary.

b. Header compression: use HPACK (HTTP/2) or QPACK (HTTP/3) to shrink header size.

c. Reduce latency: leverage request priority/dependency and enable QUIC (HTTP/3) for faster handshakes.

3. CDN Optimization

Deploy static assets to a global CDN to lower user latency.

Utilize edge computing to run logic close to users, reducing server load.

Host images, CSS, and JavaScript on the CDN.

4. Page Rendering Optimizations

4.1 HTML Optimization

Simplify the HTML structure and reduce nesting.

Remove unnecessary elements and comments.

4.2 CSS Optimization

Compress CSS files (e.g., using CSSNano, CleanCSS).

Remove unused CSS rules (e.g., with PurgeCSS).

Place CSS in external stylesheets and load them in <head>.

Inline critical CSS and load non‑critical CSS asynchronously.

4.3 JavaScript Optimization

Compress and obfuscate scripts with tools like Terser.

Tree‑shake to eliminate dead code.

Separate critical scripts (in <head>) from non‑critical ones (defer/async or at the page bottom).

Code‑split with bundlers (e.g., Webpack) for on‑demand loading.

Reduce reflows/repaints by minimizing DOM manipulations; use document fragments or virtual DOM.

Apply throttling/debouncing for high‑frequency events.

Offload heavy computations to Web Workers.

4.4 Image Optimization

Compress images (ImageOptim, TinyPNG) and choose optimal formats (WebP, JPEG, PNG).

Use srcset and sizes for responsive images.

Lazy‑load images with loading="lazy" or JavaScript.

4.5 Other Optimizations (Fonts)

Control font loading with font-display to avoid FOIT/FOUT.

Subset fonts to include only needed characters, reducing file size.

Conclusion

In real business scenarios, developers must apply targeted optimization strategies at each node of the page presentation process to continuously improve performance and user experience, thereby driving business growth and creating sustainable value.