AI 与 编程范式 (AI & Trends)

• 怎么理解现在的 AI 对程序员的影响？
• AI 辅助开发实践：
  • 如果用 AI 来写虚拟列表，提示词（Prompt）该怎么设计？
  • 如何对 AI 生成的代码进行 Code Review？

---

前端工程化 (Engineering)

• 构建工具： Webpack 的打包流程、常用 Loaders 和 Plugins 的作用、性能优化技巧（如懒加载、代码分割）。Vite 的构建原理（如 ESBuild 预编译、HMR 机制）及与 Webpack 的区别。

  1. Loader：
     • 作用： Loader用于处理模块中的资源文件，将它们转换为Webpack可以理解的模块。
     • 资源处理： Loader处理各种资源文件，如JavaScript、CSS、图片、字体等，执行加载、转换、编译等任务。
     • 模块级别： Loader工作在模块级别，通常用于处理单个文件或模块，它们直接与模块的内用容交互。
     • 配置： Loader通过 module.rules 进行配置。示例：Babel Loader用于将ES6+ 转换为ES5，CSS Loader用于加载CSS文件等。
  2. Plugin：
     • 作用： Plugin用于扩展Webpack的功能，执行各种自定义构建任务和优化。
     • 构建过程控制： Plugin可以介入Webpack的构建过程，在不同的生命周期阶段执行任务，如代码压缩、文件生成、HTML注入等。
     • 应用级别： Plugin工作在应用程序级别，可以操作整个构建过程，包括资源文件的加载和输出。
     • 配置： Plugin通过 plugins 进行配置。
     • 示例： HtmlWebpackPlugin用于生成HTML文件，UglifyJSPlugin用于代码压缩等。

• 工程化优化： Tree Shaking 移除未引用代码、按需加载第三方库。

• 代码规范： ESLint、Prettier、Husky 等在项目中的应用。

• Git： 常用工作流、代码合并与冲突解决。

• SSR/SSG： 项目如何支持 SSG，并做 SEO？（你 Nuxt 项目相关）

---

JavaScript 核心与基础 (JS Core & Basics)

• 数据类型： - JS 有哪些数据类型？

  • undefined 和 null 的区别是什么？
  • typeof(undefined) 和 typeof(null) 相等吗？（注意 typeof null === 'object' 的历史遗留问题）。

• 运行机制：

  • JS 为什么是单线程的？
  • 事件循环机制 (Event Loop)： 宏任务与微任务的执行顺序。
  • 函数缓存 (Memoization)： 如何实现？有什么应用场景？
  • 异步编程： 怎么实现异步编程？

• Promise 深入：

  • 讲一讲 Promise 的原理。
  • Promise.race 和 Promise.all 的区别。
  • 场景题： 三个相同的数组三次传入 Promise.race 会出现什么结果？
  • Promise 的执行时机（微任务队列）。
  • Promise 控制、并发限制。
  • async/await 的底层原理。

• 对象与操作：

  • 深比较： 如何实现两个对象的深比较？
  • 深拷贝与浅拷贝。

• 高级特性：

  • EventEmitter 的实现。
  • Proxy 与 Object.defineProperty 的区别（Proxy 优势：监听数组、无需递归遍历、拦截方式多）。

---

CSS 与 响应式 (CSS & Responsive)

• 单位辨析： px、rem、vw 的区别与适用场景。
• 多端适配： 手机端和 PC 端用同一套 HTML 要注意什么细节？（媒体查询、视口设置、交互差异）。

---

前端框架 (React / Vue)

• 组件设计：

  • 组件封装能力： 怎么样去封装一个组件（例如 el-dialog 弹窗）？
  • 追问方向： API 设计理念、Props/Events 定义、插槽 (Slots) 使用、状态管理（v-model）、生命周期处理、Teleport 的使用等。

• 框架原理：

  • React / Vue 的 diff 机制对比？
  • Vue 组合式 API (Composition API)：与 Options API 的对比，ref vs reactive，生命周期映射。
  • 虚拟 DOM (VDOM) 原理与性能优化。
  • 响应式原理（Vue 2 vs Vue 3）。

• 状态管理： Redux / Mobx / Vuex / Pinia 的设计思想和适用场景。

• 高阶能力：

  • 如何构建一个可拓展的 schema-form（表单系统）？
  • 动态路由、微前端架构。

---

浏览器与网络 (Browser & Network)

• 可视区域判断： 判断一个元素是否在窗口内（getBoundingClientRect vs IntersectionObserver）。

• 列表与滚动优化：

  • 虚拟列表 (Virtual List)： 怎么实现？复杂度是多少？（如果是 AI 写的代码如何 Review）。
  • 加载机制： 下拉加载（Pull-to-refresh）和滚动加载（Infinite Scroll）怎么实现？

• 文件处理：

  • 大文件上传： 分片上传、断点续传、秒传的实现原理。
  • 前端如何处理视频编码/解码？(ffmpeg.wasm)。

• 性能优化：

  • 加载性能： 减少 HTTP 请求、压缩资源、浏览器缓存、代码分割、懒加载、Gzip、CDN。
  • 运行时性能： 避免频繁 DOM 操作、防抖 (Debounce)与节流 (Throttle)、Web Worker、重绘与回流优化。
  • OffscreenCanvas 的使用。

• 缓存策略：

  • 强缓存 (Cache-Control)： - max-age: 有效期。
    • no-cache: 不走强缓存，走协商缓存。
    • no-store: 彻底不缓存。
  • 协商缓存 (304)： - Last-Modified / If-Modified-Since (基于时间，有秒级误差)。
    • ETag / If-None-Match (基于内容指纹，更精准)。

• 网络协议：

  • HTTP/1.1 vs HTTP/2 vs HTTP/3： 多路复用、头部压缩、QUIC 协议。
  • 跨域： CORS、JSONP、Nginx 反代理。
  • 通信方式： REST vs RPC；WebSocket vs SSE vs EventSource。

---

算法 (Algorithms)

• 几何算法： 判断一个点是否在一个三角形内部（面积法、向量叉积法、重心坐标法）。
• 常用手写： 手写 Promise、手写防抖节流、深拷贝。

---

库与工具 (Tools & Libs)

• Redis： 用途（缓存、消息队列、分布式锁）。
• 消息队列： Kafka / RabbitMQ / MQTT / ZMQ 的区别。
• 微服务通信： 服务间如何交互。

---

前端安全 (Security)

• XSS (跨站脚本攻击)： 原理（注入恶意脚本）、防范（转义、CSP）。
• CSRF (跨站请求伪造)： 原理（利用用户凭证）、防范（SameSite Cookie、Token/Referer 验证）。

---

框架对比 (Framework Comparison)

• React 和 Vue 的区别，以及你对它们的理解。
• 微服务、实时流、渲染机制等差异理解。
• 微调 (Fine-tuning) 和 RAG (检索增强生成) 在 AI 应用中的概念。

---

WebSocket 场景

• WebSocket 连接在弱网环境下不稳定如何处理？心跳机制如何设计？

  1. 智能重连机制 (Reconnection Strategy)
     • 指数退避算法 (Exponential Backoff): 重连间隔逐步递增 (1s -> 2s -> 4s -> ...)。
     • 随机抖动 (Jitter): 增加随机数，避免拥塞。
     • 最大重试次数: 避免无限空耗。
  2. 可靠消息保证 (Message Reliability)
     • 消息队列: 前端维护发送缓冲队列 (Buffer Queue)。
     • ACK 机制与序列号: 消息带 id/seq，收到 Server ACK 后才从队列移除。
     • 重连补发: 连接恢复后，检查队列补发未 ACK 消息。

• 高并发消息处理（聊天室 200 -> 500 人）：

  1. 逻辑层： Set 防重、消息缓冲池。
  2. 渲染层： 虚拟列表 (Virtual List)、requestAnimationFrame 分批渲染/节流刷帧。
  3. 视觉层： 同用户消息合并。

• 多 Tab 共享连接（避免服务器压力）：

  • SharedWorker (最佳实践): 所有 Tab 连接同一个 Worker，由 Worker 维持唯一的 WS 连接并分发消息。
  • BroadcastChannel: 主 Tab 维护连接，广播给其他 Tab。

• WebSocket 消息顺序如何保证？

  • 后端： 发送严格递增的 seqId。
  • 前端： 维护 nextExpectedSeqId 和 排序缓冲池。
    1. 命中: seqId === nextExpectedSeqId -> 渲染，next++。
    2. 超前: seqId > nextExpectedSeqId -> 放入缓冲池暂存，由于可能丢包，开启定时器尝试“补洞”。
    3. 过期: seqId < nextExpectedSeqId -> 丢弃。

---

Web Worker 相关

• Worker 场景： 复杂 JSON 解析、路径规划、图像滤镜等 CPU 密集型任务。
• 通信与性能：
  • postMessage (结构化克隆): 默认行为，数据拷贝，有性能开销 ($O(n)$)。
  • Transferable (零拷贝): 适用于 ArrayBuffer 等二进制数据。
    • 特点： 瞬间完成 ($O(1)$)，但原对象在发送方会失效 (Neutering)。
    • 注意： 只能转移 buffer (如 myUint8Array.buffer)。