一、资源加载优化：让首屏更快呈现

1. 静态资源压缩与合并

资源体积是影响首屏加载速度的核心因素。通过工具（如Webpack、Vite的内置优化）对JS/CSS进行Tree Shaking和代码压缩，可减少30%-70%的体积。例如，Webpack的TerserPlugin能移除注释、空格及未使用的代码。

// Webpack配置示例
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

合并文件需权衡缓存效率与单次请求开销。对于变化频繁的代码，建议按功能拆分；稳定的基础库（如React、Vue）可合并为vendor.js，利用长期缓存（Cache-Control: max-age=31536000）。

2. 图片与媒体优化

图片占页面体积的60%以上，优化策略包括：

格式选择：WebP格式比JPEG体积小26%，支持透明通道；AVIF格式压缩率更高，但需检测浏览器兼容性。
响应式图片：通过<picture>标签或srcset属性，根据设备分辨率加载不同尺寸图片。
懒加载：对非首屏图片使用loading="lazy"属性，延迟加载。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="示例图片">
</picture>

3. 预加载关键资源

通过<link rel="preload">提前加载首屏必需的CSS/JS，避免渲染阻塞。需注意预加载资源需在后续代码中实际使用，否则会浪费带宽。

<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="app.js" as="script">

二、渲染性能优化：减少用户等待的每一毫秒

1. 减少主线程阻塞

JS执行、样式计算（Recalc Style）和布局（Layout）会阻塞主线程。优化策略包括：

代码拆分：将路由级代码拆分为异步Chunk，按需加载。
防抖/节流：对高频事件（如滚动、输入）进行节流，减少不必要的计算。
使用Web Worker：将复杂计算（如数据解析）移至Worker线程。

// 节流函数示例
function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall >= delay) {
      func.apply(this, args);
      lastCall = now;
    }
  };
}

2. 优化CSS与布局

避免强制同步布局：读取DOM属性（如offsetWidth）后立即修改样式会触发强制同步布局，应批量读取后统一修改。
使用Flex/Grid布局：相比浮动布局，Flex/Grid能减少布局计算量。
减少重绘（Repaint）：通过transform和opacity实现动画，避免触发重排（Reflow）。

3. 虚拟滚动与分页

对于长列表（如表格、Feed流），虚拟滚动技术仅渲染可视区域内的DOM节点，大幅减少内存占用。行业常见技术方案如react-window或vue-virtual-scroller可实现此功能。

三、代码质量优化：从源头提升性能

1. 减少DOM操作

频繁的DOM操作会导致性能下降。优化方法包括：

使用文档片段（DocumentFragment）：批量插入节点。
避免内联样式：内联样式会强制浏览器重新计算样式，应使用CSS类。

// 使用DocumentFragment优化
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

2. 缓存DOM查询结果

对频繁访问的DOM元素，应缓存引用而非重复查询。

// 不推荐：每次循环都查询DOM
for (let i = 0; i < 100; i++) {
  document.querySelectorAll('.item')[i].style.color = 'red';
}
// 推荐：缓存查询结果
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.style.color = 'red';
});

3. 事件委托

对大量相似元素的事件监听，使用事件委托减少监听器数量。

// 事件委托示例
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    console.log('Item clicked:', e.target.dataset.id);
  }
});

四、架构级优化：构建高性能前端系统

1. 服务端渲染（SSR）与静态生成（SSG）

SSR：首屏由服务端直接返回HTML，减少客户端渲染时间，适合动态内容。
SSG：构建时生成静态HTML，适合内容变化少的页面（如文档站），加载速度最快。

2. 边缘计算与CDN加速

通过CDN边缘节点缓存静态资源，减少网络延迟。部分云服务商提供边缘函数（Edge Function），可在靠近用户的边缘节点执行轻量级JS逻辑。

3. 性能监控与持续优化

RUM（Real User Monitoring）：通过Performance API采集真实用户性能数据（如FCP、LCP）。
Lighthouse CI：集成到构建流程，自动检测性能问题。

// 采集性能指标示例
performance.getEntriesByType('paint').forEach(entry => {
  if (entry.name === 'first-contentful-paint') {
    console.log('FCP:', entry.startTime);
  }
});

五、最佳实践总结

分层优化：从资源加载（网络层）到渲染（浏览器层）再到代码（应用层）逐层优化。
数据驱动：通过性能监控工具定位瓶颈，而非盲目优化。
渐进式改进：优先解决影响用户体验的关键问题（如首屏加载时间）。
兼容性与回退：优化方案需考虑浏览器兼容性，提供降级方案。

前端性能优化是一个系统工程，需结合技术手段与用户体验设计。通过持续监控、迭代优化，可显著提升应用响应速度与用户满意度。

前端性能优化：从代码到架构的深度实践指南