面试题（准备篇）
原型和原型链的理解
每个函数都有一个原型（prototype）
每个对象（prototype也是对象）都有__proto__，__proto__指向该函数的构造函数的prototype
当a（对象）访问a.name时，会先去找自身有没有name，没有就会通过__proto__找上层的prototype中有没有name，还是没有继续上向找，这个过程就是原型链
实例.__proto__ → 构造函数.prototype → Object.prototype → null
防抖和节流的理解、区别和实现
防抖是”第一次或最后一次说了算”
节流是”每隔一段时间执行一次”
宏任务和微任务
异步任务的两个类型：
常用的 promise 就是微任务
setTimeout，requestAnimationFrame 就是宏任务
执行顺序： 同步代码 → 微任务队列清空 → 一个宏任务 → 微任务队列清空 → 下一个宏任务……
登录鉴权方案
JWT（JSON Web Token）
登录返回token，每次请求都带上，过期就用长期token刷新请求token
Session方案：
服务端存储会话，客户端只存sessionId，过期就401或重定向到登录。
requestAnimationFrame和setTimeout / setInterval
rAF用来制作动画，使用定时器会有不精确的时间间隔,过度消耗性能。导致掉帧，卡，浪费资源。
rAF主要用于（滚动监听、Canvas 绘图、DOM 动画、游戏循环）,且是唯一的最佳选择
重放攻击
攻击拿到完整的Curl，重复的请求发送，导致数据或服务出现问题。
常见手段：
- 时间有效期
- 一次随机数
- 时间 + 随机数 + 签名
- https（加密传输）
浏览器到页面生成完整过程
- DNS解析（本地缓存，再系统hosts，最后问DNS服务器）
- TCP三次握手，HTTPS还需要TLS握手
- 你好 → 你好我也好（HTTPS返回加密方式） → 开始
- HTTP请求
- 返回HTML并处理
- 浏览器解析HTML
- 构建DOM
- CSS到CSSDOM 加 <head> 防止阻塞
<SCRIPT>加 defer/asyn 防止阻塞
- DOM+CSSDOM 生成树
- 计算位置和尺寸
- 绘制到屏幕上
- 合成，图层以合并输出画面
闭包
一个函数能够记住并访问它自己和它周围的变量，即使它已经离开了出生地（return了），就是闭包。
闭包使函数拥有了“记忆力”。
常见场景:
- 防抖/节流
- 私有变量
- 函数工厂，根据参数返回不同的结果和做不同的事件
- 缓存/记忆函数，避免重复计算
闭包会让变量不被垃圾回收，用完要注意释放，避免内存泄漏。常见就是removeEventListener和clearInterval
onMounted(() => {
const timer = setInterval(() => {
console.log('running')
}, 1000)
// 组件销毁时没清除定时器 → 内存泄漏
// ✅ 应该在 onUnmounted 里清除
onUnmounted(() => clearInterval(timer))
})
function bindEvent() {
const bigData = new Array(100000).fill('数据')
function handleClick() {
console.log(bigData)
}
const btn = document.getElementById('btn')
btn.addEventListener('click', handleClick)
// 用完后移除监听器，闭包引用断开，bigData 可以被回收
return function cleanup() {
btn.removeEventListener('click', handleClick)
}
}
const cleanup = bindEvent()
// 不需要时调用
cleanup()
深拷贝和浅拷贝
浅拷贝：只复制对象的第一层
深拷贝：所有层级都复制，且是独立的新对象，互不影响
1. JSON.parse简单暴力
JSON.parse(JSON.stringify(obj))
2. structuredClone
const deep = structuredClone(obj)
3. 递归
function deepClone(obj) {
if notnull notobject
const clone = Array.isArray(obj) ? [] : {}
for(let key in obj) {
if(obj.hasOwnProperty(key)) {
clone[key] = deepClone(obj[key])
}
}
}
4. 生产项目用 lodash 库