Boost Front-End Performance: CSS Over JS, Algorithms, and Low-Level Optimizations

1. Introduction

Performance optimization can be divided into code, build, and network layers; this article focuses on the code layer of front‑end performance and is organized into four main sections.

2. Replace JS with CSS

CSS Animations

Before CSS2, even simple animations required JavaScript. Example JavaScript:

<code>let redBox = document.getElementById('redBox');
let l = 10;
setInterval(() => {
    l += 3;
    redBox.style.left = `${l}px`;
}, 50);</code>

CSS3 introduced transitions, animations, and transforms, which are now widely supported. Example CSS:

<code>#redBox { animation: mymove 5s infinite; }
@keyframes mymove {
    from { left: 0; }
    to { left: 200px; }
}</code>

Using CSS components (e.g., Vant Space, Ant Design Space) can reduce bundle size; many component props are implemented purely with CSS.

<code>@mixin space($size: 8px, $direction: horizontal, $align: center, $wrap: false) {
    display: inline-flex;
    gap: $size;
    @if ($direction == 'vertical') { flex-direction: column; }
    @if ($align == 'center') { align-items: center; }
    @if ($align == 'start') { align-items: flex-start; }
    @if ($align == 'end') { align-items: flex-end; }
    @if ($align == 'baseline') { align-items: baseline; }
    @if ($wrap == true and $direction == 'horizontal') { flex-wrap: wrap; }
}</code>

3. Deep Dive into JavaScript

If‑else Optimization

Understanding CPU execution flow shows that nested if‑else statements cause extra jumps. Simplify by early returning:

<code>function check(age, sex) {
    if (age > 18 && sex == 1) return '符合条件';
    return '不符合条件';
}</code>

Switch Optimization

When case values are dense, compilers can transform a switch into an array lookup, dramatically speeding up execution.

<code>function getPrice(level) {
    switch (level) {
        case 10: return 100;
        case 9:  return 80;
        case 8:
        case 7:
        case 6:  return 50;
        case 5:
        case 4:
        case 3:
        case 2:
        case 1:  return 20;
        default: return 10;
    }
}</code>

Loop Optimization

Early return and caching the array length avoid unnecessary iterations and function calls.

<code>function findUserByName(users) {
    const len = users.length;
    for (let i = 0; i < len; i++) {
        if (users[i].name === '张三') return users[i];
    }
    return null;
}</code>

4. Front‑End Algorithms

Examples include generating palindrome numbers, case‑switching strings, and power‑of‑two detection, each with different performance characteristics.

<code>// Palindrome numbers (numeric method)
function findPalindromeNumbers3(max) {
    const res = [];
    for (let i = 1; i <= max; i++) {
        let n = i, rev = 0;
        while (n > 0) { rev = rev * 10 + n % 10; n = Math.floor(n / 10); }
        if (i === rev) res.push(i);
    }
    return res;
}</code>

<code>// Case switching without regex
function switchLetterCase2(s) {
    let res = '';
    for (let i = 0; i < s.length; i++) {
        const c = s[i];
        const code = c.charCodeAt(0);
        if (code >= 65 && code <= 90) res += c.toLowerCase();
        else if (code >= 97 && code <= 122) res += c.toUpperCase();
        else res += c;
    }
    return res;
}</code>

<code>// Bitwise power‑of‑two check
function isPowerOfTwo(n) {
    return n > 0 && (n & (n - 1)) === 0;
}</code>

5. Computer Fundamentals

Memory Access

CPU reads data via a fast cache before loading it into registers; this hierarchy hides the latency of main memory.

Bitwise Operations

Bitwise tricks speed up checks and flag handling, as seen in Vue 3 source code where flags are combined with shifts and bitwise OR.

<code>export const enum ShapeFlags {
  ELEMENT = 1,
  FUNCTIONAL_COMPONENT = 1 << 1,
  STATEFUL_COMPONENT = 1 << 2,
  TEXT_CHILDREN = 1 << 3,
  ARRAY_CHILDREN = 1 << 4,
  SLOTS_CHILDREN = 1 << 5,
  TELEPORT = 1 << 6,
  SUSPENSE = 1 << 7,
  COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
  COMPONENT_KEPT_ALIVE = 1 << 9,
  COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT
}
if (shapeFlag & ShapeFlags.ELEMENT || shapeFlag & ShapeFlags.TELEPORT) { /* ... */ }</code>

6. Conclusion

The article broadens the perspective on front‑end performance by covering JavaScript fundamentals, framework source‑code insights, CSS animation/component techniques, algorithmic examples, and low‑level hardware concepts, encouraging developers to adopt both breadth and depth in optimization strategies.