Front‑End Optimization Best Practices

The article shares a comprehensive summary of front‑end optimization techniques, aimed at developers preparing for interviews or improving site performance.

1. Reduce HTTP requests

Principle: Each request incurs network overhead, especially on poor connections, and multiple small files increase latency.

Solution: Combine images (CSS sprites), merge CSS and JS files, and use lazy‑load techniques.

2. Understand Repaint and Reflow

Principle: Repaint changes visual appearance without layout changes, while Reflow recalculates geometry and is costly.

Reduction methods: Prefer changing classes instead of inline styles, use fixed or absolute positioning for animated elements, and limit the scope of Reflow.

3. Reduce DOM operations

Principle: Accessing the DOM is expensive and can cause repeated Repaint/Reflow.

Solution: Store references in variables, batch DOM updates, and minimize queries; note that :hover in IE can degrade performance.

4. Use JSON for data exchange

Principle: JSON is a lightweight, language‑independent format native to JavaScript, offering smaller payloads than XML.

JS operations on JSON:

var obj={"name":"darren","age":24,"location":"beijing"};

var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];

These structures enable efficient data handling.

5. Efficient use of HTML tags and CSS styles

Principle: Understand HTML semantics (flow, metadata, phrasing elements) and CSS selector performance (ID > class > tag > pseudo‑class).

Avoid deeply nested tables and overly specific selectors that increase rendering cost.

6. Use CDN acceleration

Principle: A Content Delivery Network places servers closer to users, reducing latency and improving stability.

Be aware of CDN’s real‑time synchronization limitations and employ cache‑purge strategies when content changes.

7. Place CSS and JS in external files, CSS in &lt;head&gt; , JS before </body>

External files improve maintainability and allow browsers to cache resources; loading JS at the end prevents blocking rendering.

8. Minify CSS and JS files

Principle: Compression reduces file size, speeding downloads.

Example using YUI Compressor:

java -jar yuicompressor-2.4.2.jar api.js > api.min.js

java -jar yuicompressor-2.4.2.jar style.css > style.min.css

Ensure JDK is installed and environment variables are set.

9. Compress images and use sprite technique

Principle: Reduce image resolution, change format, lower quality, or combine multiple images into a single sprite to cut HTTP requests.

Implementation details are widely available online.

10. Control cookie size and pollution

Principle: Large or unnecessary cookies increase request size and latency.

Keep cookies small, set appropriate domain scopes, and define reasonable expiration times.

The article concludes with a reminder that these practices collectively enhance front‑end performance and are common interview topics.