如何提高前端应用的性能？```markdown # 前端性能优化实战指南 ## 1. 代码层面优化 ### 1.1 减少

# 前端性能优化实战指南

## 1. 代码层面优化

### 1.1 减少DOM操作
```javascript
// 错误示例：频繁操作DOM
for(let i=0; i<100; i++) {
  document.getElementById('container').innerHTML += '<div>'+i+'</div>';
}

// 正确示例：使用文档片段
const fragment = document.createDocumentFragment();
for(let i=0; i<100; i++) {
  const div = document.createElement('div');
  div.textContent = i;
  fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

1.2 事件委托

// 错误示例：为每个元素绑定事件
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

// 正确示例：事件委托
document.getElementById('container').addEventListener('click', (e) => {
  if(e.target.classList.contains('item')) {
    handleClick(e);
  }
});

2. 资源加载优化

2.1 图片优化

使用WebP格式替代JPEG/PNG
实现懒加载

<img data-src="image.jpg" class="lazyload">
<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if(entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  document.querySelectorAll('.lazyload').forEach(img => observer.observe(img));
</script>

2.2 代码分割

// 动态导入
const module = await import('./module.js');

3. 渲染性能优化

3.1 避免强制同步布局

// 错误示例：强制同步布局
function resizeAllParagraphs() {
  for(let i=0; i<paragraphs.length; i++) {
    paragraphs[i].style.width = box.offsetWidth + 'px';
  }
}

// 正确示例：批量读取后再修改
function resizeAllParagraphs() {
  const width = box.offsetWidth;
  for(let i=0; i<paragraphs.length; i++) {
    paragraphs[i].style.width = width + 'px';
  }
}

3.2 使用CSS动画替代JS动画

.box {
  transition: transform 0.3s ease-out;
}
.box:hover {
  transform: scale(1.1);
}

4. 缓存策略

4.1 Service Worker缓存

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/main.js'
      ]);
    })
  );
});

5. 构建优化

5.1 Tree Shaking

// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
  },
};

6. 监控与分析

6.1 Performance API

// 测量代码执行时间
performance.mark('start');
// 执行代码
performance.mark('end');
performance.measure('measure', 'start', 'end');
console.log(performance.getEntriesByName('measure')[0].duration);

最佳实践总结

减少重绘回流：使用transform/opacity等属性
合理使用缓存：HTTP缓存、Service Worker等
按需加载：路由懒加载、组件懒加载
优化关键渲染路径：内联关键CSS、异步加载非关键JS
持续监控：使用Lighthouse定期检测