2026年3月初一位刚结束社招的朋友约我喝咖啡他刚面完深睿医疗Deepwise前端岗的一面和二面手里攥着满页的回忆题让我帮忙复盘。深睿医疗是做医学影像AI的产品跑在浏览器里医生在线阅片、看AI病灶检测结果、写诊断报告。这种业务决定了它招前端不会只问八股也不会只谈业务而是两头都要硬。这篇文章就把这轮面试涉及的题目完整拆开讲清楚每道题背后的考察逻辑、标准答题框架以及那些一不留神就丢分的细节。1. 面试全景与考察逻辑1.1 深睿医疗前端岗在找什么样的人先交代一个背景深睿医疗的主营业务是医学影像AI辅助诊断典型的场景是医生打开网页版工作站加载一整套CT或MRI序列AI在后台跑完模型后把肺结节、骨折、脑出血这类病灶的检测结果直接叠加到影像上医生在浏览器里完成标注、测量、写报告。这意味着前端面对的不是普通管理后台那种“表格加表单”而是大量医学影像文件、高分辨率图像渲染、高频标注交互、以及跟后端的实时数据同步。在这种背景下面试官选人基本看三件事第一前端基础扎不扎实能不能应对复杂交互第二对性能的理解到不到位能不能在真实的高数据量场景里扛住压力第三工程化思维成不成熟写出来的代码能不能被团队长期维护。这三点贯穿一面和二面的所有问题。很多候选人以为面医疗AI公司会考一堆算法或者深度学习知识实际上完全不是前端岗就是实打实考前端本身只是题目会更偏向数据处理、渲染和稳定性。这也就解释了为什么这份面经看起来“既有八股又有场景”。一面快速筛基础二面深度验能力两轮合起来才构成一个完整的人才评估。如果你正在准备类似的垂直行业前端岗医疗、工业、数字孪生、GIS完全可以照着这个思路去搭自己的复习框架。1.2 一面和二面的节奏差异我这位朋友回忆的情况是一面大约45分钟二面大约1小时中间没有HR面但二面末尾有十几分钟的开放交流和反问环节。从题目的分布上能明显看出两轮面试的职能分工。维度一面二面时长45分钟左右60分钟左右题目构成自我介绍、项目概览、八股题、手写题项目深挖、场景设计题、工程化开放题考察重点语言基础、浏览器机制、框架原理性能优化、业务理解、架构思维面试官倾向偏“手里有题目清单”偏“想听你怎么思考”决定作用筛掉基础不过关的候选人决定定级、薪资范围和最终offer一面本质上是“高压八股面”题量不小节奏很快问到框架时是从原理层面往下挖不会满足于“我知道Vue用了虚拟DOM”这种口头答案。二面则完全是另一副面孔面试官会在项目细节上不断追问比如“这个方案当时为什么不用另一种”“如果数据量再大十倍你怎么处理”问着问着直接切到开放场景题有点像技术评审。这里有个非常重要的判断一面决定你能不能进二面二面才决定你最终拿多少钱、什么职级。很多人把精力全花在一面背诵上二面被场景题问懵最后挂了还不知道问题出在哪。所以后面我会把二面的场景题单独拿出来重点拆。2. 一面高频八股逐题拆解2.1 闭包、原型链、事件循环考察的是工程落地能力一面开头是常规的自我介绍和项目概述大约8分钟之后面试官快速进入基础题环节。首先是JS基础我朋友被问到的问题如下闭包是什么你在项目里哪些地方实际用过说说JavaScript的原型链class继承和原型继承有什么本质区别给一段事件循环代码写出输出顺序并解释为什么。手写一个带并发限制的Promise调度器。第1题闭包看起来是送分题但面试官强调了“实际用过”。只答“函数内部访问外部变量”这种定义是不够的必须落到业务场景。我当时让朋友这样组织答案先讲闭包的形成条件——函数嵌套、内部函数引用外部变量、外部函数执行上下文存活再讲工程里的三类应用组件库里的私有状态封装、防抖节流的定时器保存、循环绑定事件的索引保存最后补一句“闭包会导致变量常驻内存所以要小心内存泄漏大对象用完要置空”。这样概念、场景、风险全都有面试官才会点头。第2题原型链问的是“本质区别”这其实是追问。“class是语法糖”这种回答太浅了要能讲出class继承里super、静态方法继承、实例属性初始化顺序以及new一个实例时原型链是怎么串起来的。我建议用一句话串出来“每个对象都有__proto__指向构造函数的prototype构造函数本身又有prototype.__proto__向上继续指最终指向Object.prototype再到null。”然后再对比Object.create和extends的差异基本就过关了。第3题事件循环几乎必考这次给出的大意是这样的console.log(script start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);答案是script start、script end、promise1、promise2、timeout。这类题光会说“先宏任务后微任务”不够要补充三个细节同步代码先执行微任务在当前宏任务执行完后清空setTimeout哪怕延时为0也属于下一个宏任务。严格的面试官还会继续追问requestAnimationFrame属于哪个阶段、async/await里await之后的代码什么时候执行如果基础比较熟也可以主动展开讲。第4题带并发限制的调度器几乎成了2026年前端手写题的新宠。核心是维护一个执行队列、一个正在执行的计数每次启动时判断并发数是否达到上限。写的时候注意两点用Promise.resolve().then启动而不是递归硬推失败时也要释放并发名额。很多人在失败处理上翻车导致调度器在reject场景下卡死这个问题我在后面的避坑部分还会讲。2.2 浏览器渲染与缓存从URL到页面每一步都可能藏题JS基础之后面试官把话题引向浏览器。第一题是经典的“从输入URL到页面展示浏览器做了什么”。这是一道考察知识体系完整度的题。我朋友的回答当时稍显凌乱我帮他整理成了四段式网络阶段DNS解析、TCP建连、TLS握手、HTTP请求、解析阶段HTML解析成DOM树、CSS解析成CSSOM树、渲染阶段合成Render Tree、布局Layout、绘制Paint、合成Composite、加载阶段JS执行与资源加载对渲染的阻塞。每一段都要能接住追问比如DNS为什么要缓存、TLS握手过程、defer和async的区别。第二题是重排和重绘这也是老八股了。当时面试官的追问方式是“如果你用JS改了元素的宽度浏览器一定会触发重排吗和直接改color有什么区别”回答要点是重排一定会导致重绘但重绘不一定重排影响布局的属性width、height、margin、top、display会触发重排只影响外观的属性color、background、visibility只触发重绘。工程上常见的优化手段是读写分离先批量读再批量写、用class切换替代逐条改样式、用transform替代top/left动画。第三题是浏览器缓存。面试官直接问“如果一个医生每天打开阅片工作站你觉得哪些资源可以强缓存哪些必须走协商缓存”这个问法把纯理论绑定到了医疗业务上。答案是要分清场景打包后的静态资源带hash戳的JS/CSS适合强缓存因为内容变了文件名就变index.html和接口数据必须走协商缓存避免拿到过期版本。顺带还要能说出ETag和Last-Modified的区别、Cache-Control优先级高于Expires这些细节点。复盘时我发现浏览器这一块能不能答好关键不在于背多少概念而在于有没有真实的性能优化经验。如果平时做过Lighthouse排查、做过资源分包答这类题会非常顺。2.3 手写题拼的不是背代码是边界意识一面后半段是手写题环节总共有三道防抖节流、深拷贝、Promise.all。这三道都是前端八股手写题里的“经典老三样”但面试官的关注点明显不在默写代码上。防抖和节流核心是说出使用场景的区别防抖适合输入框搜索、按钮连点节流适合滚动事件、拖拽、resize。实现上要写对this和参数传递很容易漏掉event对象透传。更进阶的是“立即执行版防抖”和“带cancel的防抖”能写出来就是加分项。节流还有首次立即执行和尾触发两种模式面试官如果追问就顺带讲出来会给“这个人是真的写过防抖节流”的印象。深拷贝则是典型的边界题。简单版能处理普通对象和数组但面试官会继续问循环引用怎么办Symbol作为key怎么处理Date、RegExp怎么办函数和undefined呢正确做法是借助WeakMap存储已拷贝对象遇到重复引用直接返回同一份对Date、RegExp、Map、Set做单独的类型判断Symbol key要放进Reflect.ownKeys的遍历里。我建议把深拷贝题当成“面试官引导你写一个递归版本”的题来应对每写一步他把坑抛出来你要能接住。Promise.all要注意的点是“一个失败全部失败且保持结果顺序”。实现时用计数器记录已完成数量结果数组按下标赋值而不是push。还有一个小坑入参可能不是Promise要先Promise.resolve包一层。面试官后续追问会集中在Promise.allSettled和Promise.race上提前准备好对比。手写题整体给人的感觉是招聘方明显在考察候选人有没有“写完再自查”的习惯。很多人写完防抖直接说“好了”其实连定时器类型都没处理清楚。能主动把边界情况和异常分支说出来的人面试官通常不会等代码结束就亮出微笑。3. 二面场景题与项目深挖的破题思路3.1 医学影像业务衍生出的场景题怎么答才不虚二面一开始是项目深挖面试官挑了一个和可视化相关的项目问了很多细节然后话锋一转抛出了一个场景题“如果让你在浏览器里展示一套CT序列可能有几百张切片医生要滚动切换、缩放、标注你会怎么设计”这道题就是典型的“不给标准答案看你怎么拆”。直接说“用Canvas吧”是最低分的回答。正确的思路是先澄清需求边界——这套CT是原始医学影像还是已经压缩过的医生是否需要同时对比多套序列标注结果要不要持久化到后端把这些边界问清楚再分层给方案。我的建议是分三层组织答案。数据层DICOM文件量很大前端直接解析所有切片会卡死要做切片懒加载、内存缓存、Web Worker做数据解析和预处理。渲染层单张切片用Canvas绘制超出一定缩放级别用WebGL做插值放大多个切片之间存在跨窗宽窗位调整的需求要用离屏Canvas提前算好再上屏。交互层标注信息作为独立图层叠加在影像之上跟影像图层分离这样医生拖拽缩放时标注不会闪烁重绘同时要考虑多视图联动横断面、矢状面、冠状面。面试官在这个基础上追加了一个问题“AI检测出的病灶要画框圈出来前端用什么方案标注才够快”我朋友按上面的分层思路答了“图层分离离屏Canvas局部重绘”面试官比较认可。这个场景题其实是那种“哪怕你没有医学影像经验也能答”的题关键是要表现出结构化拆解问题的能力而不是背一个现成方案。3.2 高频场景题大文件上传与快速切换菜单卡死二面还问了两道非常实际的高频场景题。第一道“医生要上传一个几百MB的DICOM文件网络不稳定你要怎么设计前端上传交互”这题考的是对大文件上传的完整认知2026年前端面试几乎人手一题。答案要分成几个模块文件切片比如每片5MB、断点续传记录已上传分片、分片Hash计算用Web Worker避免主线程卡死、并发控制限制同时上传的分片数、失败重试机制、整体进度条计算。面试官还可能继续追问“分片通过什么标识去重”“服务端崩了所有已上传的怎么处理”能答到用“文件内容计算出的唯一标识服务端分片清单接口”就稳了。第二道是运维侧场景“运营反馈用户在后台快速切换菜单时页面会卡死你如何排查”这题没有固定答案考的就是排查思维。规范答法是第一步复现用Performance面板和Network面板抓现场第二步看CPU如果切换菜单时主线程长时间占满优先怀疑同步渲染和网络请求堆积第三步看内存怀疑组件未正确销毁导致内存泄漏第四步定位到底层用Performance面板看具体哪段函数耗时最长。我朋友答得不错因为他真的修过一个类似的线上问题——菜单切换时旧组件的定时器没清理导致定时器越积越多。这种真实踩坑经验远比背答案有说服力。3.3 组件库、微前端、动态配置工程化开放题的加分点二面的最后阶段面试官把话题拉到工程化一共问了三个开放题。第一题是“如果让你从零搭建一套组件库怎么设计”。这道题考的是组件抽象能力和工程规范。一个好的回答要覆盖四层设计规范层设计令牌、颜色、间距、字体、基础组件层按钮、输入框、弹窗、业务组件层医疗场景的阅片工具栏、检查列表、工程配套层文档站点、单元测试、按需引入、主题定制。如果候选人只说“我用Vue写一堆组件就差不多了”面试官基本直接扣分。第二题是“qiankun这类微前端方案什么场景下值得用”。医疗公司通常有多个产品线——阅片工作站、报告系统、数据管理系统如果它们由不同团队维护但最终要集成到一个统一门户里微前端就是一个合理选项。答这题不能只夸微前端好要说出它的代价样式隔离方案shadow DOM还是css隔离、应用间通信、公共依赖如何复用、独立部署与灰度发布这些才是面试官真正想听的。第三题很有意思“运营希望改首页Banner和活动配置但不想每次都重新打包发版你会怎么做”这题对应的是“前端动态配置不用重新打包编译”的热门话题。可行方案有把页面配置抽成JSON Schema下发到前端渲染引入配置中心页面加载时拉取最新配置或者更简单一点用静态资源缓存策略配合服务端模板注入。关键点是权衡实时性与稳定性——配置变更不能影响正在使用的旧版本最好还能支持回滚。三个开放题问完二面基本就到了收尾和反问环节。整体看下来二面不关心你是否背诵过标准答案而是关心你有没有真的在复杂业务里趟过坑。4. 高频八股深度解析从背题到举一反三4.1 Vue 3响应式原理要和Vue 2对比着讲虽然深睿医疗的一面没有指定必须用Vue还是React但面试过程中主动聊到了Vue 3响应式这部分值得单独写深一点因为它是前端八股文里最容易被问出区分度的一块。Vue 2的响应式基于Object.defineProperty核心问题有两个只能拦截对象已有属性的get/set新增属性和删除属性不会被拦截所以必须用Vue.set或者this.$set对数组的处理要额外重写七个方法而且通过下标修改数组元素依然无法触发更新。Vue 3改成了Proxy代理整个对象新增属性、删除属性、数组下标修改都能被监听到同时Proxy还能拦截in操作符、for...in、Object.keys等更多操作。但回答不能停在“Proxy比defineProperty好”这种表面话术上。更值钱的是讲清楚Vue 3的依赖收集和派发更新机制。组件渲染时读取响应式数据会触发track把当前副作用函数收集到对应的dep里数据变更时触发trigger遍历dep执行副作用函数。这里可以类比成“发布订阅”数据是发布者组件的更新函数是订阅者dep是消息列表。再往下面试官大概率会追问ref和reactive的区别。答案是reactive只能用来代理对象ref主要处理基本类型它在内部把值包装成{ value: ... }读取和赋值都走.valueref其实也能接收对象但内部会调用reactive。还有nextTick的实现原理——利用微任务队列把多次数据变更合并成一次DOM更新这也是面试里容易被追问的点。如果基础允许建议再主动提一下响应式丢失问题用解构或展开运算符把reactive对象的属性拆出来再使用会失去响应式这种情况要改用toRefs。能讲到这个层次就已经超过绝大多数背八股的人了。4.2 虚拟滚动与Canvas渲染大数据量场景的两张王牌二面的影像场景题和后台卡顿排查题背后都指向两个核心技能虚拟滚动和Canvas渲染。这是2026年前端面试里“性能面”的必考点值得单独展开。虚拟滚动的本质是“只渲染可视区域内的行”对应到阅片场景就是“只解码当前窗口内的影像切片”。实现要点有三个容器高度和滚动高度单独设置滚动条撑起整个列表的视觉高度根据scrollTop计算可视范围的startIndex和endIndex渲染可视区域行再加前后缓冲区避免快速滚动白屏。如果列表行高不固定需要动态测量并维护每行偏移量复杂度会明显上升。我见过不少工作三四年的人在这题上说不出缓冲行的作用其实缓冲行正是防止“快速滚动时白屏闪烁”的关键。Canvas渲染的优化则更偏操作细节避免每一帧重新创建Canvas对象把不变的内容画到离屏Canvas上主Canvas只做drawImage动画循环用requestAnimationFrame而不是setInterval绘制大量图形时不要逐个设置fillStyle和strokeStyle先分组后统一设置对高分屏做devicePixelRatio适配否则图像发虚。这些点每一条都能在医疗影像标注、大屏可视化、数字孪生平台里找到对应场景。如果你在准备前端面试我强烈建议把“虚拟滚动Canvas优化”做成一个小demo不需要多复杂一个1万条数据的列表和一个Canvas画5000个圆圈就够。面试时拿出这个demo说现象、说瓶颈、说优化过程比背任何八股都更有说服力。这也是我认为面深睿这类垂类公司最有效的差异化策略。5. 一面二面常见问题与避坑指南5.1 面试中的典型翻车点这次复盘过程中我把我朋友踩过的坑、以及我过去帮别人复盘时常见的翻车点整理成了一份速查表都是真实发生过的场景翻车类型具体表现避坑方法背概念不落地闭包只背定义说不出业务场景每个概念准备一个自己的项目案例手写题忽略边界深拷贝不处理循环引用、Promise.all不处理异常写完主动跑边界测例说明处理方案场景题急于答方案场景题直接说“用Canvas”不问需求先问数据量、交互、兼容性再分层给方案项目叙述过于平淡只讲“我负责了什么模块”不讲难点和取舍用STAR结构背景-任务-动作-结果反问环节踩雷第一句就问“加班多不多、几点下班”先问技术方向、团队规划福利放到合适的环节再问细节记不准确事件循环输出顺序说错把经典例题做成交互式小项目亲手跑一遍这里特别想强调“场景题急于答方案”这条。我朋友在二面场景题第一反应也是“用Canvas”被我拦住后改成“我先确认几个问题”。面试官后来反馈说这种先问边界的习惯比直接给方案更让人放心。道理很简单真实工作中需求永远是不清晰的能主动澄清需求的人才是工程团队需要的人。5.2 复盘方法和后续学习路线面试结束不等于事情结束复盘才是拉差距的关键环节。我自己长期用的方法有三个。第一面完当天立刻把能回忆起的题目全部写下来然后对着录音把每道题的答案重新答一遍。人脑对刚结束的面试记忆衰减非常快拖过24小时再复盘基本只剩“感觉答得还行”。第二把面试题按主题归类放进自己的知识树里。我习惯把前端知识树分成JS基础、浏览器、框架、工程化、性能优化、网络、算法七类每次面试回来就在对应节点上补错题和考察点。第三针对翻车的题不在脑海里想“我觉得应该那样答”而是动手写一遍正确版本写不出来就说明还没真会。后续学习路线上如果目标就是深睿这种医疗AI垂类公司我的建议是优先补四个方向TypeScript医疗平台代码量大类型约束非常关键、Canvas和WebGL可视化直接对口影像渲染、Web Worker为主的并发处理大文件解析、分片计算、长任务卸载、以及微前端和性能监控这类工程化体系团队协作和线上稳定性。这些方向没有一个是靠刷选择题能学会的最好的方式是找一个医疗或数据可视化相关的开源项目啃一遍跟着issue和pr列表走一遍。最后再分享一个我个人的体会。前几年大家准备面试喜欢刷“八股文大全”面一个公司背一遍题。但这几年明显变了——面试官更愿意用“你项目里遇到什么卡点”代替“你背过什么知识点”尤其是深睿这种业务和前端技术深度绑定的公司。所以别把面经当标准答案要把它当成一道道思考题。你花在“为什么这么问”上的时间最终都会在面试场上变成你的底气。