企业官网建设流程全解析

2026年3月初，一位刚结束社招的朋友约我喝咖啡，他刚面完深睿医疗（Deepwise）前端岗的一面和二面，手里攥着满页的回忆题让我帮忙复盘。深睿医疗是做医学影像AI的，产品跑在浏览器里：医生在线阅片、看AI病灶检测结果、写诊断报告。这种业务决定了它招前端不会只问八股，也不会只谈业务，而是两头都要硬。这篇文章就把这轮面试涉及的题目完整拆开，讲清楚每道题背后的考察逻辑、标准答题框架，以及那些一不留神就丢分的细节。

1. 面试全景与考察逻辑

1.1 深睿医疗前端岗在找什么样的人

先交代一个背景：深睿医疗的主营业务是医学影像AI辅助诊断，典型的场景是医生打开网页版工作站，加载一整套CT或MRI序列，AI在后台跑完模型后，把肺结节、骨折、脑出血这类病灶的检测结果直接叠加到影像上，医生在浏览器里完成标注、测量、写报告。这意味着前端面对的不是普通管理后台那种“表格加表单”，而是大量医学影像文件、高分辨率图像渲染、高频标注交互、以及跟后端的实时数据同步。

在这种背景下，面试官选人基本看三件事：第一，前端基础扎不扎实，能不能应对复杂交互；第二，对性能的理解到不到位，能不能在真实的高数据量场景里扛住压力；第三，工程化思维成不成熟，写出来的代码能不能被团队长期维护。这三点贯穿一面和二面的所有问题。很多候选人以为面医疗AI公司会考一堆算法或者深度学习知识，实际上完全不是，前端岗就是实打实考前端本身，只是题目会更偏向数据处理、渲染和稳定性。

这也就解释了为什么这份面经看起来“既有八股又有场景”。一面快速筛基础，二面深度验能力，两轮合起来才构成一个完整的人才评估。如果你正在准备类似的垂直行业前端岗（医疗、工业、数字孪生、GIS），完全可以照着这个思路去搭自己的复习框架。

1.2 一面和二面的节奏差异

我这位朋友回忆的情况是：一面大约45分钟，二面大约1小时，中间没有HR面，但二面末尾有十几分钟的开放交流和反问环节。从题目的分布上能明显看出两轮面试的职能分工。

一面本质上是“高压八股面”，题量不小，节奏很快，问到框架时是从原理层面往下挖，不会满足于“我知道Vue用了虚拟DOM”这种口头答案。二面则完全是另一副面孔，面试官会在项目细节上不断追问，比如“这个方案当时为什么不用另一种”“如果数据量再大十倍你怎么处理”，问着问着直接切到开放场景题，有点像技术评审。

这里有个非常重要的判断：一面决定你能不能进二面，二面才决定你最终拿多少钱、什么职级。很多人把精力全花在一面背诵上，二面被场景题问懵，最后挂了还不知道问题出在哪。所以后面我会把二面的场景题单独拿出来重点拆。

2. 一面高频八股逐题拆解

2.1 闭包、原型链、事件循环：考察的是工程落地能力

一面开头是常规的自我介绍和项目概述，大约8分钟，之后面试官快速进入基础题环节。首先是JS基础，我朋友被问到的问题如下：

1. 闭包是什么？你在项目里哪些地方实际用过？
2. 说说JavaScript的原型链，class继承和原型继承有什么本质区别？
3. 给一段事件循环代码，写出输出顺序，并解释为什么。
4. 手写一个带并发限制的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: ... }，读取和赋值都走.value；ref其实也能接收对象，但内部会调用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 面试中的典型翻车点

这次复盘过程中，我把我朋友踩过的坑、以及我过去帮别人复盘时常见的翻车点整理成了一份速查表，都是真实发生过的场景：

这里特别想强调“场景题急于答方案”这条。我朋友在二面场景题第一反应也是“用Canvas”，被我拦住后改成“我先确认几个问题”。面试官后来反馈说，这种先问边界的习惯比直接给方案更让人放心。道理很简单：真实工作中需求永远是不清晰的，能主动澄清需求的人才是工程团队需要的人。

5.2 复盘方法和后续学习路线

面试结束不等于事情结束，复盘才是拉差距的关键环节。我自己长期用的方法有三个。

第一，面完当天立刻把能回忆起的题目全部写下来，然后对着录音把每道题的答案重新答一遍。人脑对刚结束的面试记忆衰减非常快，拖过24小时再复盘基本只剩“感觉答得还行”。第二，把面试题按主题归类，放进自己的知识树里。我习惯把前端知识树分成JS基础、浏览器、框架、工程化、性能优化、网络、算法七类，每次面试回来就在对应节点上补错题和考察点。第三，针对翻车的题，不在脑海里想“我觉得应该那样答”，而是动手写一遍正确版本，写不出来就说明还没真会。

后续学习路线上，如果目标就是深睿这种医疗AI垂类公司，我的建议是优先补四个方向：TypeScript（医疗平台代码量大，类型约束非常关键）、Canvas和WebGL可视化（直接对口影像渲染）、Web Worker为主的并发处理（大文件解析、分片计算、长任务卸载）、以及微前端和性能监控这类工程化体系（团队协作和线上稳定性）。这些方向没有一个是靠刷选择题能学会的，最好的方式是找一个医疗或数据可视化相关的开源项目啃一遍，跟着issue和pr列表走一遍。

最后再分享一个我个人的体会。前几年大家准备面试喜欢刷“八股文大全”，面一个公司背一遍题。但这几年明显变了——面试官更愿意用“你项目里遇到什么卡点”代替“你背过什么知识点”，尤其是深睿这种业务和前端技术深度绑定的公司。所以别把面经当标准答案，要把它当成一道道思考题。你花在“为什么这么问”上的时间，最终都会在面试场上变成你的底气。