前端学习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
}
查看9道真题和解析