如何提高前端应用的性能？

提高前端应用性能的实用方案

1. 代码优化

1.1 减少JavaScript体积

// 使用Tree Shaking删除未使用代码
import { functionA } from 'module'; // 只导入需要的部分

// 代码分割实现按需加载
const module = await import('./module.js');

• 使用Webpack/Rollup进行打包优化
• 启用Gzip/Brotli压缩
• 删除console.log等调试代码

1.2 CSS优化

/* 避免深层嵌套 */
.header .nav .item {} /* 差 */
.nav-item {} /* 好 */

/* 使用CSS变量 */
:root {
  --primary-color: #4285f4;
}
.button {
  color: var(--primary-color);
}

2. 资源加载策略

2.1 图片优化

<!-- 使用WebP格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="示例">
</picture>

<!-- 懒加载 -->
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy">

2.2 资源预加载

<!-- 关键资源预加载 -->
<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.js" as="script">

3. 渲染优化

3.1 减少重排重绘

// 批量DOM操作
const fragment = document.createDocumentFragment();
items.forEach(item => {
  fragment.appendChild(createItemElement(item));
});
container.appendChild(fragment);

// 使用will-change提示浏览器
.element {
  will-change: transform;
}

3.2 虚拟滚动

// 只渲染可见区域内容
function renderVisibleItems() {
  const startIdx = Math.floor(scrollTop / itemHeight);
  const endIdx = Math.min(
    startIdx + visibleCount,
    totalItems
  );
  // 仅渲染startIdx到endIdx之间的元素
}

4. 缓存策略

4.1 Service Worker缓存

// 注册Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

// sw.js示例
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

4.2 HTTP缓存头

Cache-Control: public, max-age=31536000
ETag: "xyz123"

5. 性能监控

5.1 核心Web指标

// 测量LCP
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP:', entry.startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

5.2 错误监控

// 全局错误捕获
window.addEventListener('error', (event) => {
  trackError(event.error);
});

6. 现代化技术栈

6.1 使用Web Components

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }
  connectedCallback() {
    this.shadowRoot.innerHTML = `<div>内容</div>`;
  }
}
customElements.define('my-element', MyElement);

6.2 WASM加速

WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(obj => {
    obj.instance.exports.compute();
  });

7. 移动端优化

7.1 触摸响应优化

/* 消除300ms点击延迟 */
html {
  touch-action: manipulation;
}

7.2 减少内存使用

// 及时清理事件监听器
element.removeEventListener('click', handler);

// 使用WeakMap避免内存泄漏
const weakMap = new WeakMap();
weakMap.set(element, data);

8. 构建优化

8.1 持久化缓存

// webpack.config.js
output: {
  filename: '[name].[contenthash].js',
}

8.2 现代模式构建

// package.json
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ]
}

9. 关键优化指标

1. 首次内容绘制(FCP) < 1.8s
2. 最大内容绘制(LCP) < 2.5s
3. 累积布局偏移(CLS) < 0.1
4. 交互响应时间(TTI) < 3.8s

10. 持续优化流程

1. 建立性能基准
2. 使用Lighthouse定期检测
3. 设置性能预算
4. 监控生产环境性能
5. A/B测试优化效果

通过以上多种技术手段的组合应用，可以显著提升前端应用的性能表现，为用户提供更流畅的体验。