Front‑End Performance Optimization: Best Practices and Techniques

In a recent project the author encountered runtime performance issues and decided to share a concise yet thorough guide on front‑end performance optimization, referencing classic books such as "High‑Performance Site Construction Guide" and "High‑Performance JavaScript".

1. Prioritize the Most Impactful Parts

Before diving into code, identify the parts that affect performance the most, using Chrome DevTools to pinpoint the main culprits. Focus on loops, high‑frequency callbacks, and reduce the execution count of expensive code, e.g., replace an O(n³) algorithm with O(n²).

2. Throttle and Debounce High‑Frequency Events

For events like scroll and touchmove, apply debounce (delay execution until the event stops) or throttle (limit execution to a fixed interval). Both functions are available in libraries such as Underscore or Lodash.

2.1 Using debounce

Debounce ensures that a function runs only once after a series of rapid calls, ideal for input validation where only the final input matters.

2.2 Using throttle

Throttle limits a function to run at most once per specified time (e.g., every 300 ms), useful for updating UI elements like a "back‑to‑top" button during scrolling.

// Incorrect usage – creates a new throttled function on every event
$(window).on('scroll', function() {
    _.throttle(doSomething, 300);
});

// Correct usage – reuse the throttled function as the callback
$(window).on('scroll', _.throttle(doSomething, 200));

3. JavaScript Is Fast, DOM Is Slow

Micro‑benchmarks show that converting a string to a number with the + operator is only ~2 seconds faster than parseInt over 500 million iterations, a negligible gain that harms readability.

plus: 1694.392ms
parseInt: 3661.403ms

DOM operations are far more costly because each access may trigger layout, paint, and compositing steps.

3.1 Why DOM Is Slow

The browser parses HTML to build the DOM tree, parses CSS to build the CSSOM, then constructs the render tree. Any DOM or style change forces re‑calculation of layout and paint, which can be expensive.

3.2 Avoid Forced Synchronous Layouts

Reading layout information (e.g., offsetHeight) immediately after modifying the DOM forces a synchronous reflow; batch reads and writes instead.

3.3 Batch DOM Operations

Tools like fastdom queue reads and writes to minimize reflows.

4. Optimize Rendering Performance

Browsers aim for 60 fps (≈16.6 ms per frame). JavaScript execution should stay under ~10 ms per frame. The rendering pipeline consists of JavaScript, Style, Layout, Paint, and Composite steps.

Changing layout‑affecting properties (e.g., width, top) triggers layout and repaint.

Changing only paint‑affecting properties (e.g., background, color) skips layout.

Changing compositing‑only properties (e.g., opacity, transform) is cheapest.

Promote frequently animated elements to their own layer using will-change: transform; or transform: translateZ(0);.

5. Optimize JavaScript Execution

5.1 Use requestAnimationFrame

Schedule visual updates at the start of a frame with requestAnimationFrame instead of setTimeout or setInterval, which can cause frame drops.

5.2 Offload Heavy Computation to Web Workers

Web Workers provide background threads for intensive tasks, communicating results via postMessage. Example:

var workerContent = `
self.onmessage = function(evt){
    // ...
    // perform heavy computation
    var result = complexFunc();
    self.postMessage(result);
};`
var blob = new Blob([workerContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);

5.3 Animate with transform and opacity

These properties avoid layout and paint, resulting in smoother animations.

6. Optimize CSS

CSS selectors are matched right‑to‑left; the rightmost selector should be as specific as possible. Avoid the universal selector * and low‑specificity pseudo‑classes like :first‑child as key selectors.

/* Bad practice */
div p * {}

Limit the number of selectors and avoid CSS expressions for legacy IE.

7. Manage Scripts and Stylesheets Wisely

Place JavaScript at the bottom of the document and CSS in the head to prevent blocking HTML parsing and rendering. Use async or defer for non‑critical scripts, and ensure CSS loads quickly to avoid flash‑of‑unstyled‑content.

8. References

High‑Performance Site Construction Guide

Advanced High‑Performance Site Guide

High‑Performance JavaScript

Google Developers

Efficient JavaScript

Best Practices for Speeding Up Your Web Site