前端性能优化[编辑 | 编辑源代码]

前端性能优化是指通过一系列技术手段提升网页加载速度、交互流畅度和资源使用效率的过程。良好的性能优化能显著改善用户体验、降低服务器负载并提高搜索引擎排名。本文将系统介绍前端性能优化的核心策略、工具和实际案例。

核心优化方向[编辑 | 编辑源代码]

1. 减少资源体积[编辑 | 编辑源代码]

代码压缩[编辑 | 编辑源代码]

使用工具（如Webpack、Terser）压缩JavaScript、CSS和HTML代码，删除注释、空白字符和无用代码。

// 原始代码
function calculateSum(a, b) {
    return a + b;
}

// 压缩后
function calculateSum(n,d){return n+d}

图片优化[编辑 | 编辑源代码]

使用WebP格式替代JPEG/PNG（节省30%-50%体积）
通过工具（如Squoosh）进行有损/无损压缩
响应式图片（`<picture>` + `srcset`）

2. 高效加载策略[编辑 | 编辑源代码]

懒加载[编辑 | 编辑源代码]

延迟加载非关键资源（如图片、iframe）：

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

资源预加载[编辑 | 编辑源代码]

使用`<link rel="preload">`提前加载关键资源：

<link rel="preload" href="font.woff2" as="font" crossorigin>

3. 浏览器缓存[编辑 | 编辑源代码]

通过HTTP缓存头控制资源缓存：

# Nginx配置示例
location ~* \.(js|css|png)$ {
    expires 365d;
    add_header Cache-Control "public";
}

4. 代码执行优化[编辑 | 编辑源代码]

防抖与节流[编辑 | 编辑源代码]

控制高频事件触发频率：

// 节流实现（每200ms最多执行一次）
function throttle(fn, delay) {
    let lastCall = 0;
    return function(...args) {
        const now = new Date().getTime();
        if (now - lastCall < delay) return;
        lastCall = now;
        return fn(...args);
    }
}