这次面试，主要还是对面主动联系为主，应该是看我写了 NextJS 和电商相关经历吧，他们认为和岗位比较匹配，于是得到了这次宝贵的面试经历。面试过程还是挺紧张刺激的，毕竟人家问到的，不一定你平时经常用。

HR 面

HR 面没有具体考察技术，但我看也问了不少涉及技术、协作相关的话题，和一般公司的人事还是有些不同，整体回答我感觉正常水平吧。以下回答都是在对话里面完成的，所以可以先思考再回答，并完整摘录。

HR：你说说你工作的心得吗，之前工作的部门规模，参与其中的角色作用

答：上家公司挺好的 是创业公司自营业务 大家相处起来氛围也很好 我们团队 20 人左右，我参与的项目里面 10 人这样。因为做了四年 我这边参与维护过的东西也多，就以近期的 AI 项目来说我这边主要是参与制作一个无限画布的功能，因为工期有一点紧，代码质量有一些不够好，我就去对这块做各种优化改进，以及最影响使用的一些性能问题吧 主要是涉及到 React 的组件渲染这块

HR：因为公司的全技术都是老板做起来的，他比较喜欢直接开会对接工作，我们没有产品经理，需求大多是一起讨论、简单文档，原型和说明反而要技术这边编写。你之前有没有经历过没有产品、直接对接技术负责人/老板的工作模式？遇到需求比较模糊、不完整的时候，你一般怎么处理？

答：有的 我第一份工作就是这样 当时在旅行社那边技术负责人就是和其他部门做对接 相当于是直接对接具体使用系统的人 不过当时这块的具体流程应该没有这么细 都是他们大佬带头开干 我这边做对接为主

不过结合之前的工作经历 其实我们也并非每个开发任务都有很详细的产品文档，也有不少是口头需求 临时改动 不过都是针对用户反馈和数据去做的调整 这种需求模糊挺多的，一般分两种情况，一个是业务层面的，这就只能拉上级详细确认，另外一种是交互层面的，我会自己简单设计方案让产品看一下，或者他觉得有更好的方案，再决定用哪个更好的方案

HR：今晚 8 点 45 分左右，进行技术面试，你时间上可以么

答：可以

HR：你期待工资多少？

答：（想先了解上班时长）公司正常上班时间是？

HR：10~7点，期间有1个小时休息，

答：双休吗

HR：是的

答：也就是 12-1 点休息这样是吗

HR：不是固定的，因为多数 11 点半左右开始开会到 1 点左右，你最近的工作时间和待遇如何

答：之前工作时间都比较固定 早上也是 10 点这样，中午是休息 2 小时，晚上我一般 6 点半到七点走，看任务完成情况吧

HR：我们每天会有 IT 技术会议，老板亲自带队跟进进度、同步需求、解决问题。需要你按时参会、主动汇报进度、主动反馈卡点。前后端错开开会，例如今天中午前端开，明天后端开

HR：我们团队没有测试，所有功能都是开发自己自测、自己验收、自己保证上线质量。你平时开发完，有没有自测的习惯？一般会检查哪些内容？如果上线后出现自己没测出的问题，你会怎么处理？

答：功能自测肯定是必须的 包括我每次提交代码之前 都会人工确认一次 确保不会把临时改动也带上去
不过也得分情况比如说有些功能需要有多个前置步骤，可能就会跳过一部分主要测改动后的部分，如果时间允许的话肯定需要完整跑几次

上线后出现问题的情况客观来说肯定会存在 不过因为代码合并产生的冲突导致的比较多 比如多个人在改同一个模块的情况下 所以每次合并的时候还是得确认清楚比较好 关于线上问题当时我们的方案是做 sentry 监听线上的报错信息，以及 clarity 跟踪用户的操作

所以还有一种方案就是 尽可能拆出不同的项目 比如说商城是前台，管理业务时另外一个后台项目，这样也能确保不会相互影响

前端这边有几位同事一起是吗

HR：你是指什么？

就是你说的前端开会

HR：目前 IT 团队配置前 2 后 2，大家都会参与

HR：你上一份薪资待遇如何？

答：税前 xx-xx

技术面

技术面考察的知识点非常丰富，基本上简历上能问的都问了一遍，面试官还是很有水平的。简单复盘下来，有些问题我完全答对，有些回答不够直接明了但也答中关键点了，有些比如 Jenkins、Electron 相关的就确实是不太清楚，也着实是没有答上。以下回答部分为印象记忆，可能和实际有出入。

面试官：http 1.1 2 3 的主要区别是什么

答：印象中区别在于连接重用，之前用过 Lighthouse 提示我有些资源走的是 1.1，优化过

面试官：1.1 和 2 呢

答：没回答上

复盘：这里主要区别的确是并发，1.1 和 2 的最大区别，而 3 增加了 QUIC，使用 UDP 协议

AI 的回答挺详细的，这里分享出来记录 传送门

面试官：这里不行不要紧，那这个浏览器内核有哪一些

答：主要三个，Safari、Chrome、IE

面试官：它们的内核是什么，这是浏览器

答：Blink（Chrome），还有一个叫什么来着，Webkit（Safari）

复盘：其实还有一个 Firefox 浏览器，用的是 Gecko，不过其实很少人用，IE 是 Trident

面试官：可以说明下 Restful API 的 Methods 吗

答：主要用的是 GET、POST、PUT、DELETE 这些

面试官：POST、PUT、PATCH 的区别是啥

答：我理解 POST、PUT 都是提交数据，PATCH 是更新

复盘：这里就答错了，POST 是创建，PUT 是全量更新、PATCH 是部分更新，参考 传送门（之前自己小窝的后端也有这个问题，一个更新接口既要支持全量更新也要支持部分更新咋弄了，我倒是用了一套很诡异的实现，默认按照 PATCH 的逻辑形式来，传什么改什么，全量传默认等同于 PUT 了其实

面试官：Tailwind 里面 Container 是干什么用的

答：Container 主要是容器查询，比如根据容器大小去设置子元素的宽高啥的

面试官：Tailwind 里面哪个呢，怎么用

答：（这里我理解成 md:xx sm:xx 这个东西了，他问的是 className 里面写的那个）这里没有很好回答出来

复盘：直接看 文档 吧，就是这样的一个东西

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

我理解其实就是基于 CSS 容器查询的一个实现。最近确实用到了这个东西，不过是在我 Vue 3 哪个主页项目上，用的还是纯 CSS，哈哈。

面试官：Grid 和 Flex 的区别

答：现在我 Grid 用的多一些，Flex 兼容性更好，两者主要区别一个是宫格，宽高固定，一个是宽高自由可以单独指定。

面试官：block、inline-block、inline 区别是啥

答：block 就是最常见的占满一行的，inline-block 我记得是基线对齐那种模式，主要是和 inline 一起，inline 就是常见的文本排版，这个 inline-block 稍微有点不一样是个整体，也参与到那个基线对齐

复盘：这里其实也算答到了一点，如果更具体一点比如说 inline 的 margin 上下无效、padding 不影响行高计算估计更加分，依旧是 AI 传送门

面试官：align-items 和 justify-content 区别是啥

答：一个垂直居中一个横向居中（实际上这个根据 Flex 的对齐方式，会有出入）

面试官：justify-content 的 space-around、space-between、space-evenly 区别是啥

答：三个 div 举例的话，一个是左右有间距、一个是中间有间距，再一个是比较居中（这里其实没讲清楚，但大概意思一样）

复盘：其实这几个都不咋常用的，大多都是宫格形式布局... 直接上 MDN 链接

  • space-between：首个元素放置于起点，末尾元素放置于终点

  • space-around：每个元素周围分配相同的空间

    • 类似于 Float/Flex + Padding + 负数 Margin 实现宫格间距的那种默认实现
    • 现在有 Gap 属性可以解决间距，但是不能解决一行摆几个元素占比多大的问题，这种场景上 Grid 更舒服
  • space-evenly：每个元素之间的间隔相等
面试官：React 的生命周期

答：现在新版 React 已经没有生命周期函数了，都是改成 useEffect 这种 Hooks 了。（他其实想问我组件挂载到结束，React 都干了些啥，但是一开始没表达清楚我当时也没转过来，死磕在 Vue 那种生命周期函数上了，之后回答完全偏了）

复盘：我的理解是这样，首先组件挂载，先执行渲染函数，得到虚拟 DOM 然后加入渲染队列，渲染成实际 DOM，再执行 useEffect，更新组件状态同理，最后卸载组件。还是看 AI 完整解答 吧，它讲的更详细。

面试官：useCallback 和 useMemo 的区别

答：一个是类似 Vue computed 合并计算结果，一个是缓存函数，都需要传 deps（完美回答）

面试官：为什么这段 TypeScript 后面要加一个 as const
const obj = {
  city: {
    name: "ShangHai",
    zip: 200000,
  }
} as const;

答：as const 主要是确定变量类型，假如不写的话就有可能识别成 string 或者联合类型 string | number 这种，就不方便去判断具体类型

复盘：也算是讲到了一点但回答其实不太准确，其实它会把所有值设置成 readonly 表示这个值不会发生任何变化，并且每个对象的类型固定，这里涉及到了“类型拓宽”概念，传送门。

面试官：SPA、MPA 区别是啥

答：SPA 就是 React 这种（我理解成 CSR 了），MPA 就是 NextJS 那种（其实这里是 SSR）

复盘：这里基本答错。CSR、SSR、SSG 是一个概念，SPA、MPA 又是另外一个概念，现在的框架基本上都是融合操作，并不能算具体的 SPA 了，MPA 其实就是之前 PHP 那种老的，依旧 AI 传送门

面试官：interface 和 type 什么区别

答：我这边常用可能还是 interface，type 主要是做联合类型，虽说 interface 也可以做（其实说的是 extends，继承和联合还是有区别的）

复盘：其实区别也挺多，不过建议定义对象类型优先使用 interface，其次再去使用 type。传送门

面试官：我看到你提到了 Electron，我要在视窗里面建立独立的悬浮部分怎么做

答：这个确实没做过（上一次搞 Electron 都是 2 年前了，很多 API 也没印象了，彻底挂）

复盘：传送门，其实我也不确定 AI 的回答是不是他想问的。

面试官：Electron 的 contextBridge 是干什么用的

答：我记得是主进程和子进程去通信使用的，一个前台一个后台，需要用这个传数据

复盘：直接看 文档 吧，确实差不多是这样子，但我认为这个回答并不是很好，毕竟真的好久没摸过 Electron 了（看了眼我 Electron Fiddle 是 24 年安装的，之后一直吃灰）近 2 年都在搞 Felo，他们也没有说需要做客户端。

面试官：来一道 IQ 题（印象记得是猜谁才是凶手，只有一个人回答是正确的）

复盘：这题似乎没有标准答案，主要看你怎么分析每个分支下会产生什么结果，第一次遇到这样的面试题，确实给困惑住了，这是 AI 对这道题内容的猜测，传送门 应该差不多是这样子。

面试官：你不是做了个 AI 项目么，你觉得当时最核心的业务目标是什么，是提高用户留存还是付费还是验证产品方向呢（其实一开始也没听清楚）

答：主要是文员这块吧，我们做的是 PPT、网页 什么的，竞争也挺大的

面试官：你觉得哪些功能是正需求哪些是伪需求

答：我觉得网页多一些

复盘：其实这里我也不知道如何回答，毕竟是运营和产品的策略嘛，我们感觉没啥用也得做不是么，仔细想想似乎这种需求挺多的，有一些还直接被其他优先级更高的需求给埋没掉了，印象最深的是要给 PPT 里面的 SVG 做一个编辑器，虽然我引入了一个库尝试了一下但是发现有个不小的 Bug 挺难解决的，就没继续看了

面试官：你推动切换组件库和优化代码这块本质上是解决什么问题

答：组件数据重构是开发的时候不够顺

面试官：你这个是个人项目还是公司项目，公司项目怎么协调这个平衡

答：因为当时是我们大量推 Vibe Coding 嘛，每个人自己做一套，缺乏统一约束嘛，所以就想着给它做稳定。

面试官：你有没有考虑过需求排期问题，怎么解决的

答：有需求肯定是需求为主嘛，这些都是有空去优化的，当然我也希望一开始流程就能写清晰，这样最好

面试官：那你项目约定怎么做好

答：首先第一个就是组件目录结构那些嘛，哪些公用哪些单独的，Vibe Coding 也是一样你得指清楚哪里哪里嘛，就这块比较重要一些

面试官：我看你用过 Jenkins，那你解释一下 WebHook 是干嘛用的

答：主要是触发构建，你肯定要去 Git 平台绑定这个 Hook 才能发这个创建请求嘛

面试官：Jenkins SCM 是什么

答：这个词挺熟悉的，但是没想起来是什么，是以 Jenkins 本地作为驱动的啥（彻底挂）

复盘：SCM = Source Code Management（源码管理），其实是 Jenkins 里面拉项目仓库代码的方式，传送门 虽说这个 AI 的回答我看的也挺懵的，实际使用差不多就是设一下仓库地址，拉到临时的位置，就可以用 Shell 去做构建等操作了。我自己写的一个简单的 CI 工具，直接只有 Shell 功能，直接在服务器构建，其他全没有...

面试官：Nginx 你主要拿去干什么，有弄过 SSL 吗

答：网站托管，反向代理，我现在用 Caddy 多一些，因为它自动处理 SSL，不用我自己搞，之前用面板操作所以用 Nginx，它里面有个签发 SSL 的工具这样。

面试结束，等待回复