前端在页面渲染优化和组件优化经验？

1️⃣ 页面渲染优化（整体性能）

核心目标：减少渲染时间、提升首屏速度、避免卡顿

1. 资源优化

   • 压缩 JS/CSS/图片（Webpack、Terser、imagemin）

   • 按需加载（Code Splitting、动态 import）

   • 使用 CDN 提升静态资源加载速度

   • 图片懒加载（loading="lazy"或 IntersectionObserver）

2. 减少阻塞

   • 避免阻塞渲染的同步 JS（defer / async）

   • 减少重排（Reflow）和重绘（Repaint）

   • 减少 DOM 节点数量，使用虚拟列表（Virtual List）

3. 缓存策略

   • HTTP 缓存（Cache-Control、ETag）

   • Service Worker 缓存静态资源或 API 响应

   • 本地存储（LocalStorage / IndexedDB）做频繁数据缓存

4. 网络优化

   • 接口请求合并 / 减少请求数量

   • 使用 HTTP/2 或 gRPC

   • 预加载关键资源（<link rel="preload">）

5. 首屏渲染优化

   • SSR（Server Side Rendering）或静态生成（SSG）

   • Skeleton Screen / 占位内容，提升感知性能

   • Critical CSS 内联关键样式

2️⃣ 组件优化（局部渲染性能）

核心目标：减少不必要的重新渲染，提高可维护性

1. 避免不必要的渲染

   • React：React.memo/useMemo/useCallback

   • Vue：合理使用v-if/v-show，组件懒加载

   • 避免直接修改状态对象，保持不可变数据

2. 虚拟化列表

   • 对大量数据渲染，使用虚拟列表（React Window / Vue Virtual Scroll）

3. 拆分组件

   • 单一职责，减少父组件更新导致的子组件重复渲染

   • 动态组件加载（按需加载）

4. 事件优化

   • 减少全局事件绑定，使用事件委托

   • 节流 / 防抖（scroll、input、resize）

5. CSS / 动画优化

   • 避免动画触发 Reflow（用 transform / opacity）

   • CSS 动画替代 JS 动画

   • 避免复杂选择器影响渲染

6. 避免重复请求

   • 数据缓存、共享状态（Redux / Vuex / Pinia）

   • 使用 Suspense / Promise 缓存接口请求结果

🔹 总结经验写法示例

在项目中，我通过 SSR 与懒加载优化首屏渲染，利用虚拟列表减少大数据量表格渲染压力；同时对 React/Vue 组件使用 memo 化和 useMemo 提升局部渲染性能，并结合节流、防抖优化滚动和输入事件，整体页面性能提升了约 30%，用户感知加载时间缩短明显。