1. call、apply、bind 的区别？

• 都是改变函数执行时的 this 指向。
• call 和 apply 立即执行函数，call 接收参数列表，apply 接收参数数组。
• bind 返回一个新函数，不会立即执行，可预设部分参数（函数柯里化）。

2. 如何解决跨域问题？

• JSONP（只支持 GET）。
• CORS（后端设置响应头 Access-Control-Allow-Origin 等）。
• 代理服务器（开发时用 webpack devServer 代理，生产用 Nginx 反向代理）。
• postMessage、WebSocket、document.domain（同主域）等。

3. localStorage、sessionStorage、cookie 的区别？

• 存储大小：cookie 约 4KB，Web Storage 约 5MB。
• 有效期：cookie 可设置过期时间，localStorage 永久有效除非清除，sessionStorage 仅在当前会话有效。
• 作用域：localStorage 同源窗口共享，sessionStorage 仅在当前标签页有效。
• 与服务器通信：cookie 每次请求自动携带，Web Storage 不自动发送。

4. 虚拟 DOM 是什么？有什么优点？

• 虚拟 DOM 是一个用 JavaScript 对象表示的轻量级 DOM 结构。
• 优点：提高性能（通过 diff 算法减少直接操作真实 DOM 的次数）、跨平台（可渲染到非浏览器环境，如 React Native）。
• 流程：数据变化 -> 生成新虚拟 DOM -> diff 比较新旧虚拟 DOM -> 批量更新真实 DOM。

5. React 中的 key 有什么作用？

• key 帮助 React 识别哪些元素改变了，比如被添加或删除。它用于在同级元素中唯一标识。
• 使用稳定且唯一的 key（如 id），避免使用数组索引（可能导致性能问题和组件状态错误）。

6. Vue 双向数据绑定的原理是什么？

• 基于数据劫持和发布-订阅模式。
• Vue 2 使用 Object.defineProperty 劫持数据属性的 getter/setter，Vue 3 使用 Proxy。
• 当数据变化时，触发 setter，通知订阅者（Watcher），进而更新视图。
• v-model 是语法糖，绑定 value 属性和 input 事件。

7. Vue 生命周期钩子有哪些？

• 创建前后：beforeCreate、created
• 挂载前后：beforeMount、mounted
• 更新前后：beforeUpdate、updated
• 销毁前后：beforeDestroy、destroyed（Vue 3 中改为 beforeUnmount、unmounted）
• 其他：activated/deactivated（keep-alive）、errorCaptured

8. 前端性能优化可以从哪些方面入手？

• 减少请求数：合并文件、雪碧图、懒加载。
• 减小资源体积：压缩（Gzip）、代码分割、Tree Shaking。
• 利用缓存：强缓存、CDN 缓存。
• 优化渲染：减少重排重绘、使用虚拟滚动、防抖节流。
• 预加载：preload、prefetch。
• 图片优化：使用 WebP 格式、响应式图片。
• 服务端渲染（SSR）或静态生成。

9. 什么是 XSS 攻击？如何防范？

• XSS（跨站脚本攻击）：攻击者在目标网站注入恶意脚本，当用户浏览时执行。
• 类型：反射型、存储型、DOM 型。
• 防范：对用户输入进行转义（HTML 实体编码）、使用 CSP（内容安全策略）、对 Cookie 设置 HttpOnly 防止窃取。

10. 什么是 CSRF 攻击？如何防范？

• CSRF（跨站请求伪造）：攻击者诱导用户访问第三方网站，利用用户的登录状态向目标网站发起恶意请求。
• 防范：使用 Token（CSRF Token）、同源检测（检查 Referer）、SameSite Cookie 属性、验证码。