面试题：Vue CLI跨平台开发中移动端性能优化与适配的深度实践

Vue 组件的生命周期管理：
- created 与 mounted：在 created 钩子中避免复杂计算和 DOM 操作，只进行数据初始化等轻量操作。复杂的异步数据获取和 DOM 操作放到 mounted 钩子中，确保组件渲染时不会因复杂操作阻塞主线程。例如，如果需要从后端获取大量数据，在 created 中发起请求，在 mounted 中处理返回数据并更新 DOM。
- beforeDestroy：及时清理定时器、事件监听器等，防止内存泄漏。比如在组件内使用了 setInterval，在 beforeDestroy 钩子中使用 clearInterval 清除它。
数据绑定优化：
- 减少不必要的数据绑定：只绑定真正需要在模板中使用的数据。例如，如果某些数据仅用于组件内部逻辑计算，不用于模板展示，就不要将其绑定到数据对象上。
- 使用 v - onces：对于不需要响应式更新的静态内容，使用 v - once 指令。这样该元素及其子元素只会渲染一次，后续数据变化不会重新渲染它们，提升性能。比如页面中的版权信息等静态文本。

Vue CLI 的优化配置：
- 生产环境配置：在 vue.config.js 中配置 productionSourceMap: false，关闭生产环境的 source map，减小打包体积，加快加载速度。
- 开启 gzip 压缩：在服务器端配置 gzip 压缩，同时在 vue.config.js 中使用 compression - webpack - plugin 插件对打包后的文件进行压缩，进一步减小文件传输大小。
代码拆分：
- 路由懒加载：使用 import() 语法进行路由组件的懒加载。例如：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('./views/Home.vue')
  }
];

这样在初始加载时，只有必要的路由组件会被加载，减少初始加载包体积。

分辨率适配：
- 使用 rem 或 vw/vh 单位：基于 rem 单位，可以根据根元素字体大小进行适配。通过 JavaScript 根据设备宽度动态设置根元素字体大小，实现不同分辨率下的布局适配。例如，设置 html { font - size: 100 * (window.innerWidth / 750) }，然后在 CSS 中使用 rem 单位定义尺寸。
- 图片适配：使用 srcset 和 sizes 属性，根据设备像素比和屏幕宽度加载合适尺寸的图片。例如：

<img
  src="small.jpg"
  srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"
  sizes="(max - width: 600px) 100vw, 50vw"
  alt="example"
>

硬件性能：
- 避免过度动画：复杂动画会消耗大量硬件资源，尤其是在低端移动设备上。尽量使用 CSS 硬件加速属性（如 transform 和 opacity），这些属性触发的动画会利用 GPU 加速。例如，使用 transform: translateX(50px) 代替 left: 50px 进行元素位置移动动画。
- 优化图片资源：压缩图片质量，在不影响视觉效果的前提下减小图片文件大小。对于动图，可以考虑使用 WebP 格式，它在保证画质的同时通常比传统格式体积更小。

使用 Chrome DevTools：
- Performance 面板：在 Chrome DevTools 的 Performance 面板中录制页面操作，如页面切换、动画过渡等。可以分析帧率、CPU 使用率、任务耗时等指标。帧率低于 60fps 通常意味着性能问题，需要分析是哪些任务导致了卡顿。
- Audits 面板：运行 Audits 分析，它会从性能、可访问性、最佳实践等多个方面给出评分和优化建议。重点关注性能得分和相关性能优化提示，如过大的资源文件、未优化的图片等。
使用 Lighthouse：Lighthouse 是一个开源的自动化工具，可用于改善网络应用的质量。可以在 Chrome 浏览器扩展中安装 Lighthouse，或者使用命令行工具。它会对页面性能进行全面评估，并生成详细报告，指出性能瓶颈和改进方向，如首次内容绘制时间、最大内容绘制时间等关键指标。
真机测试：在不同型号、不同性能的移动设备上进行真机测试，直接体验页面性能和适配效果。可以使用第三方测试平台，如腾讯 GT 等，它能实时监控设备的 CPU、内存、帧率等性能指标，帮助发现性能问题。

星途面试题库