xzboss

    面试相关

    一、JavaScript（按考察频率从高到低排序）

    1. nodejs的事件循环
    1. == 与 === 的区别
    2. JS 有哪些数据类型？分别如何判断数据类型？
    3. 闭包是什么？有哪些使用场景？如何避免闭包导致的内存泄漏？
    4. 事件循环的执行机制是什么？宏任务和微任务分别包含哪些？
      • 从task任务队列中取第一个task，执行它。
      • 执行微任务队列里的所有微任务。
      • 浏览器判断是否更新渲染屏幕，如果需要重新绘制，则执行下面步骤，如果不需要重新绘制，则流程回到步骤1，这样不断循环。
        • 触发resize、scroll事件，建立媒体查询
        • 建立css动画
        • 执行requestAnimationFrame回调
        • 执行 IntersectionObserver 回调
        • 更新渲染屏幕。
        • 浏览器判断当前帧是否还有空闲时间，如果有空闲时间，则。
          • 从 requestIdleCallback回调函数队列中取第一个，执行它。
      • 执行微任务队列里的所有微任务。
      • 流程回到步骤9，直到requestIdleCallback回调函数队列清空或当前帧没有空闲时间。
      • 流程回到步骤1，这样不断循环。

    宏任务（macrotask）

    - `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">script</font>`<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);"> 整体代码</font>
- `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">setTimeout</font>`
- `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">setInterval</font>`
- `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">setImmediate</font>`<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">（Node.js）</font>
- <font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">I/O 操作（ajax、文件读取）</font>
- <font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">UI 渲染事件</font>
- `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">requestAnimationFrame</font>`<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">（浏览器）</font>

    微任务（microtask）

    - `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">Promise.then / catch / finally</font>`
- `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">async/await</font>`<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">（底层是 Promise）</font>
- `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">queueMicrotask()</font>`
- `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">MutationObserver</font>`<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">（浏览器）</font>
- `<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">process.nextTick</font>`<font style="color:rgb(0, 0, 0);background-color:rgba(0, 0, 0, 0);">（Node.js，优先级最高）</font>

    5. this 的指向规则有哪些？箭头函数的 this 有什么特点？ 6. 原型和原型链的概念是什么？原型链的终点是什么？

    比较特殊的是Function，他自己就是自己的构造函数，所以Function.__proto__===Function.prototype

    1. for in 和 for of 的区别是什么？分别适用什么场景？
    2. 如何实现深拷贝？JSON.parse (JSON.stringify ()) 实现深拷贝有什么缺陷？
    3. async/await 的原理是什么？和 Promise 的关系是什么？
    4. 什么是变量提升、暂时性死区？
    5. import 和 require 的区别是什么？ESM 和 CJS 的差异有哪些？
    6. 如何中断 Promise？
    • 用标志，来决定是否提前返回
    • 封装一个promise，把他的resolve或reject保存到全局
    1. 什么是尾调用优化和尾递归？
    • 但是node和浏览器豆没有很好的支持，主要是因为调试麻烦且不符合开发者预期
    • 简易转为循环去解决
    1. Object.assign 和扩展运算符是深拷贝还是浅拷贝？两者有什么区别？
    2. isNaN 和 Number.isNaN 有什么区别？typeof NaN 的结果是什么？
    3. Object.is 与 ==、=== 的区别是什么？
    4. ES6 的 Iterator 迭代器是什么？有什么作用？
    5. ES6 的 Reflect 对象有什么作用？
    6. forEach 中能否使用 await？为什么？
    7. 什么是函数柯里化？如何实现？
    8. 什么是 Promise 的值穿透？
    9. 如何用 JS 计算一个页面有多少种不同的 HTML 标签？
    10. bind 连续调用多次，最终 this 的绑定值是什么？
    11. 什么是 tree shaking？工作原理是什么？
    12. 堆和栈的区别是什么？
    13. JS 的严格模式有什么特点和作用？

    二、CSS（按考察频率从高到低排序）

    1. 实现元素水平垂直居中的方案有哪些？（至少说出 5 种）
    • grid布局：place-items: center
    1. 什么是 BFC？如何触发 BFC？BFC 有哪些应用场景？
    2. Flex 布局的常用属性有哪些？justify-content 和 align-items 分别有哪些取值？
    3. CSS 选择器的优先级规则是什么？
    4. 什么是盒模型？标准盒模型和怪异盒模型的区别是什么？
    5. 什么是重排（回流）和重绘？如何减少重排和重绘？
    6. 移动端 1px 边框问题怎么解决？
    7. 移动端适配方案有哪些？rem、em、vw/vh 的区别是什么？
    8. 什么是 margin 重叠？如何解决 margin 重叠问题？
    9. v-if 和 v-show 的区别是什么？
    10. 如何实现三栏布局（两边固定宽度，中间自适应）？
    11. :has ()、:where ()、:is () 伪类分别有什么作用？
    12. 什么是容器查询（@container）？和媒体查询的区别是什么？
    13. CSS 的层叠上下文是什么？如何触发层叠上下文？
    14. Grid 布局的常用属性有哪些？auto-fit 和 minmax 的作用是什么？
    15. CSS 中 if () 函数的作用是什么？
    16. Tailwind CSS、UnoCSS、Panda CSS 的区别是什么？
    17. 什么是 CSS Sprites？有什么优缺点？
    18. 如何实现 CSS 主题切换？
    19. 如何实现 CSS 抛物线动画？

    三、HTML（按考察频率从高到低排序）

    1. HTML5 有哪些语义化标签？语义化的好处是什么？
    • SEO/维护性/无障碍/流览器默认行为
    1. 常见的 meta 标签有哪些？分别有什么作用？如何做 SEO 优化？
    2. script 标签的 defer 和 async 属性的区别是什么？
    3. src 和 href 的区别是什么？
    4. 本地存储 localStorage、sessionStorage、cookie 的区别是什么？
    5. HTML 的文档渲染流程是什么？CSS 和 JS 的加载会阻塞渲染吗？
    6. 如何实现 HTML 的离线存储？
    7. 什么是 Web Components？Shadow DOM 有什么作用？
    8. form 表单有哪些常用属性？如何阻止表单默认提交行为？
    9. canvas 和 svg 的区别是什么？

    四、浏览器（按考察频率从高到低排序）

    1. 从输入 URL 到页面完整展示的完整流程是什么？
    2. 浏览器的缓存机制是什么？强缓存和协商缓存分别有什么特点？Cache-Control、ETag、Last-Modified 的作用是什么？
    3. 浏览器的垃圾回收机制是什么？V8 的垃圾回收流程是怎样的？
    4. 什么是跨域？常见的跨域解决方案有哪些？CORS 的简单请求和复杂请求有什么区别？
    5. Web Worker 的作用是什么？使用场景有哪些？和主线程如何通信？
    6. 什么是 Service Worker？如何实现 PWA 的离线缓存能力？
    7. 浏览器的同源策略是什么？有哪些限制？
    8. 浏览器的事件冒泡和事件捕获是什么？如何阻止事件冒泡 / 默认行为？
    9. localStorage 存满了怎么办？
    10. window.requestAnimationFrame 和 setTimeout、setInterval 的区别是什么？
    11. 什么是 XSS 攻击？如何防范 XSS 攻击？
    12. 什么是 CSRF 攻击？如何防范 CSRF 攻击？

    五、计算机网络（按考察频率从高到低排序）

    1. HTTP/1.1、HTTP/2、HTTP/3 的区别是什么？
    2. TCP 的三次握手和四次挥手的流程是什么？为什么需要三次握手 / 四次挥手？
    3. TCP 和 UDP 的区别是什么？分别适用什么场景？
    4. HTTPS 的工作原理是什么？和 HTTP 的区别是什么？
    5. WebSocket 的工作原理是什么？和 SSE 的区别是什么？适用场景分别是什么？
    6. SSE 的特点是什么？如何实现 SSE 的断线重连？
    7. DNS 的解析流程是什么？
    8. TCP 的流量控制和拥塞控制分别是什么？
    9. 常见的 HTTP 状态码有哪些？分别代表什么含义？
    10. HTTP 的请求方法有哪些？GET 和 POST 的区别是什么？
    11. 什么是 CDN？CDN 的工作原理是什么？为什么静态资源要放在 CDN 上？
    12. 什么是 WebSocket 心跳机制？如何实现？
    13. MCP 协议是什么？有什么应用场景？

    六、Vue（按考察频率从高到低排序）

    1. Vue3 的响应式原理是什么？Proxy 和 Object.defineProperty 的区别是什么？Proxy 有什么局限性？
    2. Vue2 和 Vue3 的区别是什么？（从响应式、API、性能、生命周期等角度说明）
    3. ref 和 reactive 的区别是什么？
    4. Vue 的 diff 算法原理是什么？Vue3 的 diff 算法做了哪些优化？
    5. 虚拟 DOM 的优缺点是什么？
    6. Vue 组件通信的方式有哪些？
    7. Composition API 和 Options API 的区别是什么？有什么优势？
    8. v-for 中为什么要绑定 key？key 的作用是什么？
    9. keep-alive 的作用是什么？有哪些属性？
    10. Pinia 和 Vuex 的区别是什么？Pinia 的设计原理是什么？
    11. Vue 的路由守卫有哪些？分别的执行顺序是什么？
    12. nextTick 的原理是什么？使用场景有哪些？
    13. Vue2 为什么不能检测数组的变化？如何解决？
    14. VueUse 的常用函数有哪些？你在项目中用过哪些？
    15. Nuxt3 有哪些特性？SSR、ISR 的区别是什么？
    16. 什么是 Vue 的自定义指令？如何实现一个自定义指令？
    17. Vue 的插槽有哪些类型？分别怎么使用？
    18. 什么是单向数据流？Vue 为什么要遵循单向数据流？

    七、React（按考察频率从高到低排序）

    1. React 的 Fiber 架构原理是什么？Reconciler 的工作流程是怎样的？
    2. useEffect 和 useLayoutEffect 的区别是什么？
    3. React Hooks 的使用规则是什么？为什么 Hooks 必须在组件顶层调用？
    4. React 的 diff 算法原理是什么？
    5. useState 的实现原理是什么？
    6. useMemo 和 useCallback 的区别是什么？分别有什么作用？
    7. React 18 的并发特性有哪些？useTransition、useDeferredValue 的作用是什么？
    8. React 的事件机制和原生事件的区别是什么？执行顺序是怎样的？
    9. React 的渲染流程是什么？
    10. 虚拟 DOM 的优缺点是什么？和 Vue 的虚拟 DOM 实现有什么区别？
    11. React 服务端组件（Server Components）的原理是什么？和客户端组件的区别是什么？
    12. Next.js 的 App Router 和 Pages Router 的区别是什么？Server Actions 的作用是什么？
    13. 什么是闭包陷阱？在 React Hooks 中如何避免闭包陷阱？
    14. 如何手写 useState/useEffect？
    15. React 的合成事件是什么？有什么优势？
    16. Redux、Zustand、Recoil、Jotai 的区别是什么？分别适用什么场景？
    17. React Query（TanStack Query）的原理是什么？有什么优势？
    18. 如何优化 React 应用的性能？

    八、性能优化（按考察频率从高到低排序）

    1. 首屏加载优化方案有哪些？如何优化 FCP、LCP 指标？
    2. Web Vitals 核心指标（LCP、FID/INP、CLS）分别是什么？如何测量和优化？
    3. 长列表优化方案是什么？虚拟列表的实现原理是什么？如何处理不定高的虚拟列表？
    4. 页面交互卡顿（FPS 低）如何排查和优化？
    5. 什么是代码分割（Code Splitting）？如何实现？
    6. 图片优化方案有哪些？懒加载的实现原理是什么？
    7. 如何减少首屏的资源体积？Tree Shaking 的工作原理是什么？
    8. 大文件上传如何优化？断点续传的实现思路是什么？
    9. 长文本渲染如何优化？
    10. 滚动体验优化方案有哪些？
    11. 如何优化 CSS 的加载和执行性能？
    12. 如何做前端埋点和性能监控？

    九、工程化（Webpack/Vite 等，按考察频率从高到低排序）

    1. Vite 和 Webpack 的区别是什么？Vite 为什么启动速度更快？
    2. Webpack 的构建流程是什么？
    3. Vite 的 HMR（热模块替换）原理是什么？和 Webpack 的 HMR 有什么区别？
    4. 什么是模块联邦？适用场景是什么？
    5. esbuild、Turbopack、Rolldown 的区别是什么？
    6. Webpack 的 Loader 和 Plugin 的区别是什么？常见的 Loader 和 Plugin 有哪些？
    7. 如何做前端项目的构建优化？
    8. 什么是 Monorepo？有什么优缺点？
    9. 如何实现前端项目的 CI/CD 流程？
    10. 你做过哪些工程化提效的工作？

    十、TypeScript（按考察频率从高到低排序）

    1. type 和 interface 的区别是什么？
    2. 什么是泛型？泛型的作用是什么？
    3. 如何实现 DeepPartial工具类型？
    4. 常见的 TS 工具类型有哪些？（Partial、Required、Pick、Omit、Exclude、Extract 等）分别怎么使用？
    5. 什么是类型体操？你写过哪些复杂的 TS 类型？
    6. any、unknown、never 的区别是什么？
    7. TS 的类型推断是什么？有什么作用？
    8. 什么是枚举？枚举和常量的区别是什么？
    9. 如何在 TS 项目中做类型声明？declare 的作用是什么？
    10. TS 的装饰器是什么？有什么应用场景？

    十一、状态管理（按考察频率从高到低排序）

    1. 你在项目中怎么选型状态管理方案？不同状态管理工具的适用场景是什么？
    2. Pinia 和 Vuex 的区别是什么？Pinia 的核心概念有哪些？
    3. Redux 的核心原理是什么？
    4. Zustand 和 Redux 的区别是什么？Zustand 的优势是什么？
    5. 什么是状态提升？什么场景下需要状态提升？
    6. 全局状态和局部状态如何划分？
    7. 如何做状态的持久化？
    8. 服务端状态和客户端状态的管理有什么区别？

    十二、设计模式（按考察频率从高到低排序）

    1. 你在前端项目中用过哪些设计模式？分别解决了什么问题？
    2. 发布 - 订阅模式和观察者模式的区别是什么？
    3. 单例模式的实现思路是什么？适用场景有哪些？
    4. 工厂模式的适用场景是什么？
    5. 装饰器模式的作用是什么？和代理模式的区别是什么？
    6. 代理模式的适用场景是什么？Vue 的响应式是代理模式的应用吗？
    7. 策略模式的适用场景是什么？
    8. 适配器模式的作用是什么？
    9. 如何实现一个可复用的组件库？需要遵循哪些设计原则？

    十三、AI 相关（按考察频率从高到低排序）

    1. 你如何使用 AI 工具辅助前端开发？如何保证 AI 生成的代码质量？
    2. 如果让你用 AI 重构一个老旧遗留项目，你会设计怎样的流程？
    3. 什么是 RAG（检索增强生成）？前端在 RAG 链路中可以做哪些优化？
    4. 什么是 Prompt 工程？你有哪些写 Prompt 的技巧？
    5. 如何防范 Prompt 注入攻击？
    6. AI 组件库设计需要考虑哪些点？
    7. 大模型前端流式渲染如何实现？如何做流式数据的解析？
    8. 什么是 Function Calling？前端如何实现大模型的工具调用？
    9. 前端如何结合 WebAssembly 优化 AI 模型的前端推理性能？
    10. 你了解哪些 AI 辅助编码的工具？各自的优缺点是什么？

    十四、项目 & 场景题（按考察频率从高到低排序）

    1. 你做过的性能最差的页面是怎么优化的？请说出具体的优化点和量化成果。
    2. 如何实现一个实时协作的在线文档项目？前端架构怎么设计？
    3. 如何实现一个支持上拉加载、下拉刷新的无限滚动列表？
    4. 如何处理复杂动态表单（动态增删、联动、校验、分步）？
    5. 如何设计实现一套前端组件库？从设计、开发、测试到发布的流程是什么？
    6. 微前端的实现方案有哪些？qiankun 和模块联邦的区别是什么？
    7. 如何实现一个可拖拽的表格列宽调整功能？
    8. 如何实现一个富文本编辑器？接入第三方编辑器时需要考虑哪些问题？
    9. 前端国际化怎么实现？需要考虑哪些边界问题？
    10. 如何实现大文件分片上传和断点续传？
    11. 登录鉴权的方案有哪些？双 Token 机制的实现流程是什么？
    12. 如何处理前端的异常和错误监控？

    十五、跨端

    1. React Native 跨端改造中如何划分模块？遇到过哪些问题？
    2. 跨端模块划分的“三层架构”是什么？为什么不在业务里直接写 Platform 判断？
    3. uni-app 的核心原理是什么？如何实现“一套代码，多端运行”？
    4. 跨端项目中如何处理不同平台（H5、小程序、App）的 API 差异？
    5. 小程序为什么要做分包？分包如何划分？主包和子包分别放什么？
    6. 分包加载的体验优化有哪些策略？（预加载、loading、重试机制）
    7. 如何实现不同尺寸屏幕（折叠屏）上的 UI 适配？
    8. 遇到过哪些棘手的多端兼容性问题？是如何解决的？
    9. uni-appx 与标准 uni-app 的主要区别是什么？对鸿蒙开发有哪些优势？
    10. 如何优化一个 uni-app 应用的启动速度？
    11. 如何监控和优化内存使用，避免内存泄漏？
    12. 跨端项目中的公共组件如何抽离和维护？多人协作时如何避免乱改？
    13. 国际化 i18n 方案如何跨端实现？语言包太大怎么优化？
    14. React.lazy 和动态 import 的区别？
    15. Web 端的“路由懒加载 / 代码分割”与小程序的“分包”思想有什么对应关系？
    16. 跨端应用中如何处理不同端（RN/小程序/H5）的支付、通知等原生能力差异？
    17. 如何实现跨端应用的统一请求层封装？
    18. 跨端框架（如 uni-app）的编译原理是什么？

    十六、H5

    1. H5 和 Native 的交互方式有哪些？（JSBridge / URL Scheme / 消息通道）
    2. JSBridge 的原理是什么？如何实现同步调用和异步调用？
    3. WebView 中如何调用 Native 的相册、相机、定位等能力？
    4. H5 页面在 App 内如何解决缓存问题？（强制刷新、版本管理、离线包）
    5. 什么是离线包方案？如何实现 H5 的秒开？
    6. WebView 白屏的原因有哪些？如何定位和解决？
    7. 如何优化 H5 在 App 内的首屏加载速度？
    8. H5 与 Native 的通信有哪些性能问题？如何优化？
    9. iOS 和 Android WebView 的兼容性差异有哪些？（如键盘弹起、日期选择器）
    10. 软键盘弹起导致 H5 页面布局错乱怎么解决？
    11. WebView 中如何调试 H5 页面？（vConsole / Chrome DevTools / 抓包工具）
    12. 如何实现 H5 页面在 App 内的登录态同步？（Cookie / Token 注入）
    13. H5 如何监听 App 的前后台切换事件？（visibilitychange / 原生通知）
    14. 什么是 WebView 的内存泄漏？如何避免？
    15. H5 页面如何做右滑返回上一页的适配？
    16. App 内 H5 如何实现分享到微信、朋友圈等？
    17. H5 如何获取 Native 设备的网络状态、电量等信息？
    18. 如何实现 H5 页面的手势冲突处理？（如左右滑动与 App 侧滑返回的冲突）
    19. WebView 的加载进度条如何实现？
    20. 什么是 Schema 跳转？如何用 Schema 唤起 App 或跳转指定页面？
    21. WKWebView 和 UIWebView 的区别是什么？（iOS 方向）
    22. Android WebView 的 X5 内核是什么？有什么优势？
    23. 如何实现 H5 页面的预加载和预渲染？
    24. H5 页面中如何处理大图加载导致的 OOM 问题？
    25. WebView 如何支持 file 协议的本地资源访问？

    十七、微前端

    1. 什么是微前端？它解决了什么问题？
    2. 微前端有哪些常见的实现方案？（iframe / Web Components / qiankun / single-spa / Module Federation）
    3. 为什么通常在微前端应用隔离中不选择 iframe 方案？
    4. qiankun 是如何做 JS 隔离的？（JS 沙箱、Proxy Sandbox）
    5. 如何在微前端中实现 CSS 隔离？
    6. 微前端的核心原则有哪些？（技术无关性、独立性、隔离性、通信性、组合性）
    7. 微前端中的通信机制有哪些？（Props / 事件总线 / 全局状态 / URL参数）
    8. qiankun 与 single-spa 的区别是什么？
    9. 微前端如何处理路由？（主应用路由 / 子应用路由 / 混合路由）
    10. Module Federation 在微前端中的作用是什么？
    11. 微前端如何实现子应用的预加载？
    12. 微前端的性能优化策略有哪些？（懒加载、预加载、缓存、CDN）
    13. 微前端如何处理依赖冲突？（版本隔离、共享依赖、沙箱隔离）
    14. 微前端如何实现统一的错误处理？
    15. 微前端如何实现跨子应用的全局状态管理？
    16. single-spa 的工作原理是什么？（生命周期：load、bootstrap、mount、unmount）
    17. 微前端如何处理子应用的生命周期？
    18. 微前端如何实现单点登录（SSO）？
    19. 微前端如何处理 SEO？（SSR / 预渲染 / 主应用代理）
    20. 微前端的部署策略有哪些？（独立部署 / 统一部署 / 灰度部署）
    21. 微前端如何处理版本兼容性？
    22. 微前端的安全性问题有哪些？（XSS、数据泄露、资源劫持）及解决方法
    23. 微前端如何实现动态主题切换？
    24. 微前端如何处理大型表单？（分片管理、数据同步、校验统一）

    十五、其他补充（按考察频率从高到低排序）

    1. Git 的常用操作有哪些？Git reset 和 Git revert 的区别是什么？如何解决 Git 冲突？
    2. 微前端的沙箱隔离机制是怎么实现的？
    3. 什么是 LRU 缓存？如何实现 LRU 缓存？
    4. WebAssembly 的适用场景是什么？前端项目中怎么接入 WebAssembly？
    5. 什么是影子 DOM（Shadow DOM）？适用场景有哪些？
    6. 什么是虚拟线程？JS 中怎么用虚拟线程？
    7. 大数相加如何实现？
    8. 如何实现 Promise 的并发控制？
    9. 什么是 SWR（Stale-While-Revalidate）请求缓存策略？
    10. 如何实现数组转树结构？
    11. 为什么 JavaScript 是单线程的？
    12. base64 编码图片为什么会让数据量变大？什么场景下适合用 base64 图片？
    13. 前端如何做权限控制？（按钮权限、路由权限）
    14. 前端的本地缓存有哪些方案？分别适合什么场景？
    15. 什么是 GraphQL？和 RESTful API 的区别是什么？

    十六、其他相关

    1. 你为什么来的杭州/上海/南京
    2. 为什么离职
    3. 项目中你觉得最难的点，怎么解决
    4. 常用的vibecoding方式
    5. 你的优势
    6. 你的劣势

    十七、反问

    1. 团队规模
    2. 岗位职责
    3. 业务方向（这个一般提前自己能了解
    4. 平时加班多吗

    一、基础能力考察（通用技术底层理解）

    初问

    1. 你简历里提到精通ES6+，能不能说3个你平时开发中最常用的ES6+特性，以及它们解决了什么痛点？
    2. Vue3的Composition API和Vue2的Options API相比，核心优势是什么？你在项目里一般怎么组织Composition API的代码？
    3. 简历里提到你有用过Vite和Webpack，两者在构建原理上最核心的区别是什么？什么场景下你会选择Vite，什么场景下可能更适合Webpack？

    追问

    1. 刚才你提到了<font style="color:rgb(34, 34, 34);background-color:rgb(250, 251, 253);">Promise</font>，那<font style="color:rgb(34, 34, 34);background-color:rgb(250, 251, 253);">Promise.all</font>、<font style="color:rgb(34, 34, 34);background-color:rgb(250, 251, 253);">Promise.race</font>、<font style="color:rgb(34, 34, 34);background-color:rgb(250, 251, 253);">Promise.allSettled</font>分别适用于什么业务场景？你在项目里有没有实际用到过？
    2. Vue3的响应式原理是基于Proxy实现的，和Vue2的Object.defineProperty相比，Proxy解决了哪些旧版本的问题？有没有什么场景下Proxy的响应式会不生效，你是怎么处理的？
    3. Vite在生产环境还是用Rollup打包，为什么不直接用开发环境的esbuild？有没有遇到过Vite开发环境和生产环境表现不一致的问题，怎么排查的？

    深问

    1. 说一下你对Event Loop的理解？宏任务和微任务的执行顺序是什么？如果有一个非常耗时的同步任务阻塞了主线程，你有什么方案去优化？
    2. 你怎么理解前端的单向数据流和双向绑定？它们各自的适用场景是什么？为什么React推荐单向数据流，而Vue默认支持双向绑定？
    3. 如果让你从0到1搭建一个中后台项目的工程化框架，你会从哪些方面考虑？比如规范、性能、稳定性、提效这些维度，你会做哪些设计？

    二、项目经验考察（按简历项目逐个深挖）

    ▶️ 星图AI应用开发平台相关

    初问
    1. 你提到自研了数据缓冲调度器优化流式输出体验，这个调度器的核心逻辑是什么？怎么解决后端速率波动的问题？
    2. 你扩展了vue-router实现了路由返回带参和跳转兜底，具体是怎么扩展的？跳转兜底的触发逻辑是什么？
    3. 你设计了多模态SSE接口兼容层，适配器模式在这里具体是怎么应用的？3种异构后端架构的差异主要在哪里？
    追问
    1. 流式输出的时候，如果用户主动打断了当前请求，你的缓冲调度器怎么处理未消费的缓存数据？怎么避免旧请求的内容渲染到新的对话里？
    2. 页面权限动态管控你是怎么实现的？是路由级别的权限还是按钮级别的权限？如果是后端动态返回权限配置，前端怎么和路由系统做结合？
    3. 你封装的Trace可视化组件需要适配多格式数据源，怎么设计组件的props和适配层，才能让上层业务不用关心数据源的格式差异？
    深问
    1. 如果现在要做一个大语言模型的对话页面，需要支持代码高亮、公式渲染、markdown解析、多模态内容（图片/音频）穿插，同时要保证流式输出的流畅度，你会怎么设计整个渲染链路？怎么避免频繁的DOM更新导致的页面卡顿？
    2. 你们的平台支持用户快速构建并部署Web应用，那你有没有考虑过用户自定义的代码安全性问题？比如防止XSS注入、防止用户代码访问平台的全局变量，你会做哪些沙箱隔离方案？
    3. SSE本身只支持单向通信，如果后端需要推送更复杂的信令（比如中断请求、限流通知、模型调用状态变更），你会怎么扩展当前的SSE兼容层？如果要换成WebSocket，你会怎么设计平滑迁移的方案？

    ▶️ 混沌演练平台相关

    初问
    1. 你独立实现了DOM转矢量PDF的功能，还封装成了开源库，整个DOM->SVG->PDF的链路核心难点是什么？字体裁剪你是怎么做的？
    2. 多ECharts图表页面你把LCP从6s优化到1.5s，具体做了哪些工作？局部懒加载和预渲染是怎么结合的？
    3. 你主导了基于MicroApp的微前端重构，怎么解决的样式污染问题？新旧路由兼容是怎么做的？
    追问
    1. DOM转SVG的时候，怎么处理复杂的CSS样式（比如渐变、阴影、transform、伪元素）？如果页面里有外部图片、跨域资源，导出的时候怎么处理？
    2. 甘特图拖拽的时候你用防抖优化到延迟50ms以内，除了防抖还有没有做其他优化？比如数据分片渲染、虚拟滚动？如果数据量到了几千条任务，你怎么保证拖拽和缩放的流畅度？
    3. 微前端架构下，你怎么处理父子应用的通信问题？如果子应用需要共享主应用的用户信息、权限状态，怎么保证数据的响应式同步？有没有遇到过微前端下的路由冲突问题，怎么解决的？
    深问
    1. 你封装的这个dom-to-vector-pdf库，如果要支持导出100页以上的长文档，怎么避免内存溢出？怎么实现分页导出的时候内容不被截断（比如表格、图片刚好在分页线的位置）？
    2. 如果现在让你做一个性能监控SDK，专门采集页面的LCP、FID、CLS这些核心Web Vital指标，你会怎么设计采集逻辑？怎么保证SDK本身不会影响页面性能？
    3. 你们的混沌演练平台需要支持多云环境的故障注入，前端需要对接不同云厂商的API，你怎么设计这部分的前端架构，才能最大程度复用逻辑，同时支持新的云厂商快速接入？

    ▶️ 聘播播小程序相关

    初问
    1. 你用Taro开发多端项目，有没有遇到过多端样式或者API不一致的问题？怎么处理的？
    2. 大文件上传的秒传和断点续传是怎么实现的？MD5哈希是在前端计算的吗？大文件计算MD5的时候怎么避免阻塞主线程？
    3. 你基于NutUI二次封装了通用列表组件，怎么设计组件的扩展性？如果业务有特殊的列表项渲染需求，怎么在不修改通用组件的前提下支持？
    追问
    1. 小程序的性能优化你有做过哪些工作？比如包体积优化、首屏加载优化？你们的小程序包体积有多大，做了哪些措施控制包体积？
    2. 断点续传的时候，如果用户刷新了页面或者网络中断重连，怎么恢复之前的上传进度？如果某个分片上传失败，你怎么处理重试逻辑？
    3. 纯前端导出CSV的时候，如果数据量很大（比如几万条），怎么处理？会不会有内存溢出的问题？怎么解决？
    深问
    1. 如果现在要你开发一个支持百万级数据滚动的长列表，不管是小程序端还是H5端，你会怎么设计？虚拟滚动的核心原理是什么？如果列表项高度不固定，怎么处理？
    2. 小程序的双线程架构你了解吗？逻辑层和渲染层分离会带来什么问题？比如频繁的setData为什么会导致卡顿？你在开发中怎么优化setData的性能？
    3. 你做的是三端协同的招聘小程序，涉及到主播简历、雇主信息这些敏感数据，前端层面你会做哪些安全措施？比如防止数据泄露、防止接口被恶意调用？

    三、技术深度与软技能考察

    初问

    1. 你提到有参与开源贡献和独立开发npm库，开发开源库和业务代码最大的区别是什么？你在开发dom-to-vector-pdf的时候做了哪些兼容性和鲁棒性的处理？
    2. 你说深度使用Vibe Coding做了研发提效项目，具体是怎么结合Skills体系的？这个项目落地后带来了哪些具体的提效数据？
    3. 你在跨部门协作的时候，有没有遇到过产品需求不合理的情况？你是怎么处理的？能不能举个实际的例子？

    追问

    1. 如果让你做一个公共组件库，你会从哪些方面保证组件的通用性和可维护性？怎么设计组件的API，才能做到既灵活又易用？
    2. 你提到擅长性能优化，一般你排查性能问题的流程是什么？会用到哪些工具？怎么判断一个性能优化的收益是符合预期的？
    3. 你平时怎么学习前端新技术？最近有没有研究什么你觉得比较有意思的前端方向？你觉得AI对前端开发的影响是什么？

    深问

    1. 现在很多业务都在做AI相关的前端应用，你认为AI时代的前端开发和传统的前端开发相比，有哪些新的技术挑战？你做了哪些准备？
    2. 如果让你带领一个3-5人的前端小组，负责一个从0到1的AI平台项目，你会怎么规划整个前端的技术路线？怎么保证团队的开发效率和代码质量？
    3. 你未来3年的职业规划是什么？你认为自己现在的短板是什么？怎么弥补？