面试问我怎么设计前端监控SDK，我现场画了架构图

26岁，上海某电商平台前端工程师，用Vue3、TypeScript和Vite。今天去漕河泾一家跨境电商公司面试，前端负责人看了我的GitHub仓库，说挺有意思的。

面试开始先聊到之前做的Node中间层降本项目。我用BFF层合并了9个后端接口成一个GraphQL聚合接口，首屏加载从3.1秒降到2.2秒，线上90分位请求耗时减少35%。面试官追问缓存策略怎么搞，我说聚合结果缓存5分钟加etag，热点商品位单独做CDN预热。

一题：实现一个简单的防抖函数，并考虑取消功能。

这题属于手写基础，但得写出工程化的水准。

我的思考：用闭包存储定时器，每次调用前先清掉前一次的，返回带取消方法的对象，this和参数要透传。

回答要点：timer在闭包里，每次调用先clearTimeout，然后setTimeout，返回这个函数；cancel方法里clearTimeout就行。

追问1："请同时实现节流，并对比使用场景。"

我答："节流是固定频率执行，防抖是执行最后一次点击；拖拽和滚动场景用节流，搜索输入用防抖。两者可以合并实现成更通用的工具函数。"

追问2："在React里怎么优雅地封装成Hook？"

我说："封装useDebounce和useThrottle，返回值包含防抖后的值和取消方法；注意在cleanup里清除timer防止内存泄漏；依赖项数组控制触发时机和防抖延迟。"

追问3："如果需要支持Promise返回，你会怎么做？"

我想了想："返回Promise，执行时resolve；加abortController信号传递用于中途取消；用泛型定义返回类型让类型提示更友好。"

（顺手推几个技术大厂的机会，前、后端or测试，感兴趣就试试 ）

二题：CSS Grid和Flexbox的区别与各自的最佳实践。

这题我平时带团队经常讲，总结得比较系统。

我的思考：Grid是二维布局，Flex是一维；Grid适合页面整体骨架和响应式分栏，Flex适合组件内部元素对齐。

回答要点：Grid用grid-template-areas布局很直观，行列明确；Flex用justify-content和align-items在小尺度对齐更灵活；移动端优先用Grid做跨列布局，内部组件用Flex。

追问1："常见布局什么时候选哪个？"

我脱口而出："导航栏用Flex，页眉页脚加侧边栏和内容区用Grid，卡片内部元素列排布也用Grid。"

追问2："如果浏览器不支持Grid，怎么降级？"

我答："先检测@supports，降级方案用Flex；写feature queries加polyfill；或者做双版本编译，按需加载。"

追问3："你如何评估布局性能？"

我说："减少重排，用transform和opacity；避免深层嵌套；动态class合并；用React.memo拆分组件；用Lighthouse和Performance API采集指标。"

三题：从零设计一个前端监控SDK，说说你的思路。

这道题考的是系统设计能力。

我的思考：三大块——异常捕获、性能指标、用户行为；还需要考虑采样率、上报策略和隐私合规。

回答要点：用Performance API采集LCP、CLS、TTFB这些关键指标；window.onerror全局捕获异常；堆栈信息要脱敏处理；用户行为用录屏采样但要控制比例；上报用batch加压缩，减小网络开销。

追问1："怎么降低上报对主线程的影响？"

我答："用requestIdleCallback或setTimeout延时执行；分批上报不要阻塞；数据压缩减少传输体积；用WASM做序列化提升效率。"

追问2："跨域资源怎么影响性能指标？"

我说："服务端设置Timing-Allow-Origin响应头；对图片和脚本加crossorigin属性；资源预加载加DNS预解析减少握手时间。"

追问3："隐私合规怎么保证？"

我认真答："IP和UA信息脱敏；用户行为不录入表单输入内容；提供退出埋点的选项；整体符合GDPR和国内个人信息保护法要求。"

面完快结束时，HR问我有没有考虑过转行，我愣了一下说暂时没，还想在前端领域继续深耕。她说最近圈子里有个人37岁程序员转行做保洁月入4万的消息传得挺火的。我心想职业路径多元是好事，但继续精进核心技术、做懂业务的产品型工程师，也不失为一条稳健的路。