前端性能优化：三个简单有效的技巧
在快节奏的Web开发中，性能优化直接影响用户体验。分享三个简单但高效的技巧，帮你快速提升页面性能：
1. 图片懒加载
现代网站常因图片过多导致加载缓慢。通过loading="lazy"属性，轻松实现图片视口懒加载：
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" />
或使用Intersection Observer API动态加载，减少首屏请求。
2. 代码分割（Code Splitting）
利用Webpack或Vite的动态导入，将代码按需加载：
// React示例
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
结合Suspense使用，显著降低首包体积。
3. 减少重绘与回流
频繁的DOM操作会触发重绘（Repaint）和回流（Reflow）。优化技巧：
- 使用
transform替代top/left动画。 - 批量DOM更新（如DocumentFragment）。
- 避免在循环中读取布局属性（如
offsetHeight）。
