编辑“︁前端性能优化”︁（章节）

= 前端性能优化 =

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

== 核心优化方向 ==

=== 1. 减少资源体积 ===
==== 代码压缩 ====
使用工具（如Webpack、Terser）压缩JavaScript、CSS和HTML代码，删除注释、空白字符和无用代码。

<syntaxhighlight lang="javascript">
// 原始代码
function calculateSum(a, b) {
    return a + b;
}

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

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

=== 2. 高效加载策略 ===
==== 懒加载 ====
延迟加载非关键资源（如图片、iframe）：

<syntaxhighlight lang="html">
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">
</syntaxhighlight>

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

<syntaxhighlight lang="html">
<link rel="preload" href="font.woff2" as="font" crossorigin>
</syntaxhighlight>

=== 3. 浏览器缓存 ===
通过HTTP缓存头控制资源缓存：

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

=== 4. 代码执行优化 ===
==== 防抖与节流 ====
控制高频事件触发频率：

<syntaxhighlight lang="javascript">
// 节流实现（每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);
    }
}
</syntaxhighlight>

==== 虚拟列表 ====
仅渲染可见区域的列表项（适用于大数据量场景）：

<mermaid>
flowchart TD
    A[获取容器高度] --> B[计算可见项数量]
    B --> C[仅渲染可见项]
    C --> D[监听滚动事件动态更新]
</mermaid>

== 关键性能指标 ==
使用Web Vitals核心指标评估性能：
* '''LCP'''（Largest Contentful Paint）：最大内容渲染时间
* '''FID'''（First Input Delay）：首次输入延迟
* '''CLS'''（Cumulative Layout Shift）：累计布局偏移

<math>
\text{CLS} = \sum \left( \text{impact fraction} \times \text{distance fraction} \right)
</math>

== 工具链 ==
{| class="wikitable"
|+ 常用性能分析工具
! 工具类型 !! 代表工具
|-
| 性能分析 || Lighthouse、WebPageTest
|-
| 代码分析 || BundlePhobia、Source Map Explorer
|-
| 监控系统 || Sentry、Google Analytics
|}

== 实战案例 ==
'''电商网站优化方案'''：
1. 将首屏图片转为WebP格式（体积减少45%）
2. 使用CDN分发静态资源（延迟降低60%）
3. 实现产品列表的虚拟滚动（渲染时间从1200ms→200ms）
4. 预加载结算页关键资源（FID降低至50ms以下）

== 进阶技巧 ==
* '''Web Workers'''：将耗时任务移出主线程
* '''WASM'''：性能敏感模块用Rust/C++编写
* '''Service Worker'''：实现离线缓存和资源策略

通过系统性地应用这些优化手段，可使页面加载性能提升50%-300%。建议定期使用Lighthouse进行审计，并建立持续的性能监控机制。

[[Category:计算机科学]]
[[Category:面试技巧]]
[[Category:前端基础]]