Web 前端性能优化技巧

📅 2026-01-15 | ⏱️ 6分钟 | 👁 1,286 次阅读 | 💬 9 条评论

前言

最近接手了一个老项目，首屏加载时间要8秒。经过两周优化，成功压缩到1.5秒以内。分享实战经验。

一、资源优化

1. 图片优化

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="图片" loading="lazy">
</picture>

2. JavaScript 优化

// 动态加载
import('./heavy.js').then(m => m.init());

// 代码分割
const LazyComponent = lazy(() => import('./Heavy'));

3. CSS 优化

/* 关键 CSS 内联 */
<style>
    body { margin: 0; font-family: sans-serif; }
</style>

二、网络优化

资源预加载

<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="preconnect" href="https://api.example.com">
<link rel="preload" href="font.woff2" as="font">

三、渲染优化

防抖和节流

const debounce = (fn, delay) => {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
};

四、效果对比

• 首屏加载：8.2s → 1.5s

• 页面大小：5.8MB → 850KB

• 性能评分：32 → 94