Front-End Optimization Techniques: ES6 Syntax, JavaScript Array Methods, and CSS Performance Tips

The article shares a collection of front‑end code optimization techniques and practical tips aimed at improving website performance and maintainability.

ES6 Syntax and JavaScript Optimizations

Common issues such as over‑reliance on traditional loops, redundant timers, and memory‑leaking closures are addressed. Simple ES6 patterns like ternary operators and Array.includes can replace verbose if statements:

if (code === '202' || code === '203' || code === '204')
// becomes
if (['202','203','204'].includes(code))

Array transformation can be done concisely with map :

var arr = ['1','2','3'];
arr = arr.map(v => Number(v));

var str = [['1','2'],['2','3']];
str = str.map(v => v.map(item => Number(item)));

Array iteration helpers:

every – returns true only if all elements satisfy the condition.

some – returns true if any element satisfies the condition.

filter – creates a new array with elements that meet the condition.

arr.every((currentValue, index, array) => { /* ... */ })
arr.some((currentValue, index, array) => { /* ... */ })
arr.filter((currentValue, index, array) => { /* ... */ })

Minimizing Closures and Timers

Excessive closures keep stack memory alive, leading to performance degradation and potential memory leaks. Use timers wisely: for repeatedly running code prefer setInterval over repeatedly creating setTimeout instances.

CSS Optimization Techniques

Use CSS sprites to combine multiple small icons into a single image, reducing HTTP requests:

.main { background: url('../img/sprit.png') no-repeat; background-size: x y; }
.box { background-position: x y; }

Avoid CSS expressions, which trigger unnecessary re‑calculations and can cause extra requests when an empty src attribute is present on img tags.

.box { background-color: expression((new Date()).getHours()%2 ? 'red' : 'blue'); }

Reduce cookie size and set appropriate expiration to lessen bandwidth usage.

Prefer CSS animations over JavaScript‑driven ones for smoother performance and lower code overhead.

Preventing Repaint and Reflow

Repaint occurs when visual styles change (e.g., background‑color), while reflow happens when layout calculations are needed (e.g., size or position changes). Minimizing these operations improves rendering speed.

Cross‑Browser Compatibility Snippets

Getting scroll position:

var scrollTop = document.documentElement.scrollTop || document.scrollTop;

Preventing default actions:

function preventDefault(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}

Stopping event propagation:

function stopPropagation(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.canceBubble = true;
  }
}

Overall, applying these ES6, JavaScript, and CSS best practices can significantly reduce code redundancy, improve load times, and ensure smoother operation across different browsers.