前端学习32 相关面试题6

1. 性能优化

前端性能优化主要可以从资源加载、页面渲染、运行时效率和用户体验四个维度入手。在实际开发中，主要采用以下策略：

• 资源加载优化

使用 gzip/brotli 压缩资源，减少文件体积。

启用浏览器缓存（强缓存、协商缓存）提升复用率。

图片懒加载、压缩、使用 WebP 格式等。

合理使用 CDN 加速资源分发。

对第三方库采用按需引入或使用轻量替代方案。

• 代码层优化

路由懒加载、组件按需加载，减少初始包体积。

使用 Tree Shaking + ES Module 去除无用代码。

利用 Vite 或 Webpack 做打包优化（例如 splitChunks 拆包策略）。

使用 defer / async 加载脚本，避免阻塞解析。

• 页面渲染优化

首屏加载使用骨架屏、预渲染（如 SSR、预加载）优化体验。

合理使用虚拟列表、IntersectionObserver 优化长列表渲染。

减少 DOM 操作、避免频繁重排重绘。

• 运行时优化

使用防抖/节流控制高频事件，如 scroll、resize。

合理拆分组件，避免重复渲染。

使用缓存或计算属性避免重复计算。

• Vue 特有优化

使用 v-show 替代 v-if 控制频繁切换的 DOM。

合理使用 key，提升 diff 效率。

利用 keep-alive 缓存组件状态。

相应性能指标：

• LCP（Largest Contentful Paint） 最大内容元素加载完成时间。
• FCP(First Contentful Paint) 页面首个文本或图像内容渲染的时间
• FP（First Paint） 页面首次像素渲染的时间。
• TTI（Time to Interactive） 页面从开始加载到可以响应用户点击操作的时间。

2.浅拷贝、深拷贝方案

浅拷贝

• Object.assign()

const obj = { a: 1, b: { c: 2 } }
const copy = Object.assign({}, obj)

• 展开运算符(...)

const obj = { a: 1, b: { c: 2 } }
const copy = { ...obj }

• 数组的concat()方法

const arr = [1, 2, [3, 4]]
const copy = [].concat(arr)

深拷贝

• JSON.parse(JSON.stringify(obj))

const original = { a: 1, b: { c: 2 } }
const copy = JSON.parse(JSON.stringify(original))

• 手写递归深拷贝

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj

  const copy = Array.isArray(obj) ? [] : {}
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepClone(obj[key])
    }
  }
  return copy
}