📌 面试答不上的问题 - 性能优化📌 面试答不上的问题前端性能优化是提升用户体验、降低加载时间、减少资源消耗的重要

📌 面试答不上的问题-性能优化

前端性能优化是提升用户体验、降低加载时间、减少资源消耗的重要手段，主要可以从 加载优化、渲染优化、交互优化 等方面入手。

以下是一些核心优化方案：

一、🔹 加载优化

1. 资源压缩与合并

HTML、CSS、JS 代码压缩：使用 Terser、cssnano、UglifyJS 等工具减少代码体积。
图片压缩：使用 tinypng、imagemin 等工具压缩 PNG/JPEG，使用 SVGO 处理 SVG。
字体优化：尽量减少字体种类，使用 woff2 格式，并通过 font-display: swap 提高首屏速度。

2. 代码分割（Code Splitting）

按需加载：使用 Webpack dynamic import() 进行异步组件加载。
路由懒加载：Vue 使用 Vue Router 的 () => import('xxx.vue')，React 使用 React.lazy 和 Suspense。
第三方库拆分：将 vendor.js（React/Vue 等框架）与业务代码分开。

3. 资源缓存

HTTP 缓存：合理设置 Cache-Control、ETag、Last-Modified 等策略。
Service Worker：使用 PWA 让静态资源缓存到本地，提高离线可用性。
本地存储：使用 localStorage、IndexedDB 缓存用户数据，减少 API 请求。

4. CDN 加速

静态资源托管到 CDN，减少服务器压力并提升资源加载速度。
使用 HTTP/2，减少 TCP 连接请求数，提高资源加载效率。

5. 预加载与预渲染

预加载（<link rel="preload">） ：对关键资源进行优先加载，如字体、重要 CSS、JS。
预渲染（Prerender） ：适用于 SEO 和静态页面，可以使用 prerender-spa-plugin 进行 Vue 预渲染。

二、🔹 渲染优化

1. 关键渲染路径优化

CSS 关键路径优化：将关键 CSS 直接写入 <style> 或 inline，避免阻塞渲染。
JS 放在 body 末尾或 defer、async，防止阻塞 HTML 解析。
减少 DOM 复杂度，减少 DOM 计算量，提高渲染效率。

2. 虚拟列表（Virtual List）

适用于大数据列表，如 Vue Virtual Scroll List、react-window，减少 DOM 负担，提高流畅度。

3. 图片优化

懒加载（Lazy Load）：使用 loading="lazy" 或 IntersectionObserver 实现懒加载。
WebP 格式：比 JPEG/PNG 体积更小，支持浏览器自动切换。

4. GPU 加速

利用 will-change、translate3d 触发 GPU 渲染，减少 CPU 计算开销。
避免 box-shadow、filter、opacity 过度使用，它们会导致重绘和重排。

5. CSS 动画优化

使用 transform 和 opacity 代替 left/top/margin/padding，减少回流（Reflow）。
使用 requestAnimationFrame 控制动画，提高流畅度。

三、🔹 交互优化

1. 事件优化

防抖（Debounce） ：适用于搜索框、输入框，减少 API 请求频率。
节流（Throttle） ：适用于滚动、窗口大小变化，降低 CPU 计算压力。

2. 减少 DOM 操作

减少直接操作 DOM，使用 DocumentFragment 批量更新。
Vue/React 状态管理优化，避免不必要的 setState 或 data 变更。

在 Uniapp 中，获取页面可视高度的方法：

onLoad() {
  uni.getSystemInfo({
    success: (res) => {
      this.windowHeight = res.windowHeight; // 视图高度
    }
  });
}

这样可以拿到 windowHeight，用于计算当前能显示的列表项数量。

获取单个列表项的高度

如果列表项高度是固定的，可以手动定义：

const itemHeight = 100; // 每个 item 高度

如果 列表项高度不固定，可以使用 querySelector 获取：

getItemHeight() {
  const query = uni.createSelectorQuery().in(this);
  query.select('.list-item').boundingClientRect((res) => {
    if (res) {
      this.itemHeight = res.height;
    }
  }).exec();
}

建议在 onReady 生命周期执行 getItemHeight()，确保 DOM 已经渲染。

3. Web Worker

将复杂计算放入 Web Worker 处理，避免主线程卡顿。

4. 延迟加载非核心内容

比如广告、评论区、推荐内容，避免影响主页面渲染速度。

四、🔹 性能监测

Google Lighthouse：检测页面性能得分，并给出优化建议。
Chrome DevTools：
- Performance 分析 CPU 占用、帧率、回流重绘 情况。
- Network 查看 资源大小、缓存、请求时长。
Web Vitals：
- LCP（Largest Contentful Paint） ：控制在 2.5s 内（首屏渲染速度）。
- FID（First Input Delay） ：控制在 100ms 内（交互响应速度）。
- CLS（Cumulative Layout Shift） ：减少页面布局偏移，避免内容跳动。

总结

优化点	方案
加载优化	代码压缩、CDN 加速、缓存优化、Code Splitting、懒加载
渲染优化	虚拟列表、减少 DOM 操作、CSS 优化、GPU 加速
交互优化	事件防抖/节流、Web Worker、多线程计算
性能监测	Google Lighthouse、Chrome DevTools、Web Vitals

这些优化措施结合使用，可以大幅提升前端应用的性能和用户体验！🚀

📌 面试答不上的问题 - 性能优化