Common 综合
自我介绍 CN
我叫 XXX，毕业于 XX 大学、信息与计算科学专业，有5年的前端开发工作经验，先后就职于万兴科技、腾讯和百度。
在百度参与的是文心千帆大模型平台项目，在职期间解决过微前端接入、国际化改造、低代码建模、断点续传和 SDK 搭建等问题。
另外，因为之前有过相关经验，所以主导了组件库的重构工作，并搭建了新的组件库文档以及承担一些复杂组件的开发。
在工作之外，我还有自己的博客和一些开源项目，对前后端技术都有所了解。
以上是我的自我介绍，非常感谢！
讲讲做过的项目
关于做过的项目，我在百度这边主要做的是文心千帆大模型平台，负责数据管理及知识库等模块的开发。其中除了一些日常的需求迭代外，还对特定模块接入 qiankun 微前端，解决多应用协同开发的一些问题；
- 同时基于 react-i18next，完成数据洞察等核心模块的国际化改造，实现中英文的切换功能；
- 项目还涉及到低代码建模的需求，我这边是基于 ZRender 封装了 AIFlow 的框架，构建了可视化建模的低代码画布编辑器；
- 在数据集的大文件上传这块，我基于 Resumable.js 实现了断点续传；
- 此外，我还主导了千帆 SDK 项目的开发，从零搭建起 SDK 项目的基础架构，完成 npm 包发布和自动化构建部署等工作；
然后之前在腾讯，参与的是腾讯云智服工单系统的开发，其中我封装了对话框发送图片的压缩功能；
- 在样式方面，则通过 Styled-Components 这种基于 CSS-in-JS 的方案去替代 BEM 命名规范，在提升可维护性的同时，也借助了 ThemeProvider 等 API 去注入样式，实现动态主题切换；
- 在组件方面，我在这几家公司都对组件库进行了重构，并搭建了新的组件库文档，同时做了一些像组件实时在线调试、Algolia 全局 API 搜索以及自动化构建等配置，并承担一些复杂组件的开发。
在工作之余，我也有自己的一些开源项目，例如自主开发的通用组件库，以及 Nodejs 开发的工具网站等等，以上是我做的一些项目。
说说最有挑战性的项目
因为很多工作涉及的技术是可以通过自查官方文档去解决的，所以比较有挑战性的还是一些复杂组件的封装，比如颜色选择器，就会相对复杂，要实现颜色面板、色相柱、透明度柱和取色器等模块，很多需要自己去琢磨如何实现。
像颜色面板，它由三层背景色叠加，分别是纯黑、纯白和色相层，要实现在面板上点击和拖拽生成颜色的功能，就要把颜色面板滑块的位置和颜色值联系起来，这里用到的是 HSV 颜色值，对应色相、纯度和明度，其中色相由色相柱控制，纯度由滑块横坐标控制，明度由滑块纵坐标控制，因此只要拿到色相值和滑块位置就能计算出颜色值。
接下来是色相柱，即通过拖拽控制色相值的横条，它由红橙黄绿青蓝紫七种颜色组成，取值范围是 0 到 360，可以跟色相柱滑块的横坐标联系起来，计算出色相值。透明度柱也是同理，根据上限跟下限按滑块位置比例进行计算。
另外还有个取色器，可以直接实例一个内置的 EyeDropper 对象来实现，由于兼容性比较差，一般会配合 Canvas 来实现取色器，具体是通过 getImageData 获取画布的像素数据，其中 data 每四个值代表一个 rgba，利用这个规律获取屏幕中指定像素点的颜色值，从而实现取色功能。
说说千帆业务
千帆大模型平台跟字节的火山方舟一样，都是一个帮用户把 AI 运用到实际业务的平台，上面集成了各主流的大模型，直接就能调用生成文案、翻译和问答这些通用的 AI 能力。而且从数据处理、模型训练到最后部署上线，整个流程千帆都有相应的配套支持，不用自己折腾复杂的技术环节。然后我这边主要是负责千帆的数据管理和知识库等模块的开发，其中数据管理主要负责处理原始数据，通过清洗、标注等方式为模型训练和模型推理提供高质量的数据；而知识库则专门存储行业或企业的专业知识，主要是帮助模型在实际场景中准确解决问题。
说说低代码开发
低代码的话，我主要是在项目的可视化建模画布这块接触到，基于 ZRender 二次封装跟维护厂内的 AIFlow 框架，通过可视化界面配合少量代码去快速构建相应的功能，这里的 ZRender 是百度开源的矢量图形框架，它更偏向底层的图形操作，比如画个圆或描个路径啥的，我在它的基础上封装了低代码开发所需要的组件拖拽、选中跟连线等功能。另外，ZRender 的渲染流程也比较直观，首先通过 zrender.init() 创建画布，然后调用 add() 方法添加对应的图形，接着通过 setOption() 去更新组件的位置、样式和连接关系等数据，最后调用 refresh() 触发一次重绘，就能完成渲染，以上是我在低代码开发的一些实现。
说说 sdk 项目
千帆 SDK 的话，主要是为百度的文心千帆大模型平台提供一系列的接口，快速调用文心一言等大模型，实现各种 AI 功能，其中我主要基于 Rollup 构建了 SDK 的基础架构，因为 Rollup 基于 ESM 实现了高效的 Tree-shaking，适用 SDK 这类工具库的打包；然后是配置了 Prettier 和 ESLint 来统一代码风格，并把 SDK 发布成 npm 包，同时通过 npm 组织管理成员权限，在 Github 上维护 npm token，并且通过 Github Actions 实现自动化构建部署等等；
对编写的 Chat/Completions 等 API，我用 Jest 写了一些测试用例，包括异步场景和用 async-await 做流式解析的测试等等；
针对浏览器和 Node 两种环境的兼容，我则通过 rollup 的 plugin-node-resolve 来处理第三方模块路径，通过 plugin-commonjs 来完成 CommonJS 模块的转换，以及通过环境变量来区分不同环境的构建产物，做了一系列的适配；
以上是在 SDK 项目的一些工作。
⚡️ 🍀 讲讲流式解析
首先在客户端发起请求时设置 stream 为 true，启用流式响应，然后服务器会以分块传输编码的格式来返回数据，客户端拿到数据后通过 response 的 getReader 读取器来解码二进制数据，配合 TextDecoder 逐块读取，最后累加数据来实现流式解析。
⚡️ 🍀 移动端 rem 自适应的原理
rem 自适应的原理是通过 JS 监听视口的变化，动态调整根元素的 font-size，使 font-size 等于设备宽度除以设计稿基准的固定份数，然后将页面元素都用 rem 作为单位，实现元素根据屏幕尺寸等比例缩放的效果。
⚡️ 🍀 fixed 任何时候都以视口为定位基准吗
不一定，fixed 默认以视口为定位基准，但如果祖先元素设置了 transform、perspective、filter 或 backdrop-filter 等属性时，则会改为以该祖先元素为定位基准。
⚡️ 🍀 闭包是如何做到函数下次执行时仍然可以使用之前的变量的
闭包通过词法作用域链来实现变量持久化，将变量保存到独立的环境中，由内部函数持有而不被垃圾回收，闭包函数每次执行时，都会从这个独立的环境中去读取变量，从而保持状态的连续性。
⚡️ 🍀 实现国际化改造如何提取待翻译文本
可通过 i18next-cli 库从代码中提取待翻译的文本，并生成多语言资源文件。
⚡️ 🍀 Memo 和 useMemo 的区别
React.memo 是高阶组件，包装的是组件，通过比较 props 的变化决定是否跳过渲染，用于避免子组件不必要的渲染；而 useMemo 是 Hook，包装的是计算逻辑，用于缓存函数的返回值，避免不必要的计算。
⚡️ 🍀 Fiber 是如何把 state 关联起来的 / Fiber 是如何协助 useMemo 去避免不必要的渲染的
每个 Fiber 节点会维护一个 memoizedState 属性，用于存储组件状态，同时 Fiber 节点会通过 Hook 链表按调用顺序维护多个状态，这样在组件更新时，React 就能准确找到并复用之前的状态值。
⚡️ 🍀 微前端如何解决路径冲突
首先在主应用注册子应用时通过 prefix 去配置唯一的路径前缀，然后在子应用中将路由配置为相对路径模式，实现路径隔离。
⚡️ 🍀 模块联邦和微前端的区别
模块联邦允许在多个应用之间共享代码，实现微前端等场景的依赖复用；而微前端是将前端应用拆分成多个子应用，每个子应用可以独立开发、测试跟部署，而且可以实现全局资源共享，减少重复加载，提升整体的一个协作效率。模块联邦是共享代码的技术手段，而微前端是拆分应用的架构理念。
⚡️ 🍀 低代码的底层原理
低代码底层将用户操作生成的 JSON Schema 动态转为 AST 抽象语法树，再编译为框架代码，由运行时引擎渲染执行。
⚡️ 🍀 前端如何取消请求
中断请求的话，XMLHttpRequest 可以调用 abort() 方法来实现；Axios 可以通过 AbortController 或 CancelToken 来实现；而 Fetch 可以通过 AbortController 配合 abort() 方法来实现。
⚡️ 🍀 CORS 的简单请求和复杂请求是什么
CORS 的简单请求指的是使用 GET、POST 或 HEAD 方法，且请求头仅含安全字段，例如 Content-Type 设为 text/plain 等字段，这种属于简单请求，而反之则为复杂请求。
⚡️ 🍀 Etag 和 Last-Modified 的区别是什么
Etag 基于资源内容生成唯一哈希值，能更精确的检测资源变化，优先级更高；而 Last-Modified 则基于资源最后的修改时间，性能开销更低，但只精确到秒，容易误判。
⚡️ 🍀 JS 如何解决模块循环引用问题
可以把模块 A 和 B 的公共逻辑提取到一个新的模块 C，让 A 和 B 都依赖 C；也可以通过动态导入：如果模块 A 只在函数里用到模块 B，就可以在函数内部通过 import() 语法动态导入 B，避免初始化时循环引用。
⚡️ 🍀 NodeJS 是如何解决模块循环引用问题的
NodeJS 通过模块加载机制来解决循环引用问题，首次加载模块时，会先返回一个未初始化完全的半成品模块对象给引用方，等它执行完毕再自动填充对象，这种部分加载机制虽能避免崩溃，但不完整的导出值可能导致逻辑错误，因此我们一般会对代码进行重构或延迟加载（动态 require），解决循环引用问题。
⚡️ 🍀 React 中类组件有什么是函数组件替代不了的
类组件可以实现继承，而且像 getSnapshotBeforeUpdate 这类生命周期方法是函数组件无法模拟实现的，它可以在 DOM 更新前捕获滚动位置或元素尺寸这些 DOM 状态，并且返回的快照值可以作为参数传递给 componentDidUpdate，以便在更新后恢复这些状态，实现像恢复滚动位置之类的功能。
⚡️ 🍀 对 Vue3 中数据劫持用到的 Reflect 的理解
Reflect 提供各种操作对象的静态方法，跟 Proxy 的拦截方法一一对应；Reflect 跟 Proxy 结合使用时，可以拦截对象的基本操作，又能保证对象的原始行为不受到影响。
⚡️ 🍀 如何解决多错误场景下的 Toast 合并显示问题
可以通过设置全局错误标志位来控制，首次报错时直接显示 Toast 并标记为已显示，后续的报错如果标志位为 true 则忽略，等 Toast 关闭后重置标志位，实现批量请求失败时只触发一次 Toast 提示。
⚡️ 🍀 useEffect 的回调函数为什么不能是 async 函数
因为 async 函数会返回一个 Promise 对象，而 useEffect 的返回值需要是个清理函数，以便在组件卸载时清理副作用，防止内存泄漏，如果返回 Promise 对象的话，就无法正常执行清理操作了。
⚡️ 🍀 React 执行 createRoot 时内部做了哪些事情
React 执行 createRoot 时，会创建一个支持并发渲染的根节点，并初始化 Fiber 架构，绑定 DOM 容器，然后启用并发特性，接着注册事件委托机制，统一处理事件，为后续渲染构建基础架构。
⚡️ 🍀 微前端中多个子应用重复安装 NPM 包如何优化
微前端中可以通过依赖共享优化，在主应用中通过 webpack5 的模块联邦或 externals 将公共依赖提取出来，暴露给子应用复用，避免重复打包，同时配合沙箱隔离，确保版本兼容。
⚡️ 🍀 如何提升页面性能
首先采集页面关键的性能指标，然后根据各个指标，拆分成视觉卡顿和加载时长两个方向的优化。针对视觉卡顿，可以从屏幕帧率入手，通过 transform 和 opacity 等属性启用 GPU 加速，减少重排重绘，并利用防抖和节流，减少调用频率，以及使用 requestAnimationFrame 来实现高性能动画；而针对加载时长，可以对资源进行压缩合并，减少 HTTP 请求，配合 CDN 来加速静态资源的载入；其次，充分利用懒加载，可以减少首次加载的资源量，充分利用缓存，可以减少重复请求；另外，可以利用 SSR 服务端渲染来提升首屏加载速度。
⚡️ 🍀 前端性能优化会关注哪些指标
我一般会关注首次内容渲染时间 FCP、最大内容渲染时间 LCP、布局偏移累计分数 CLS 和单个函数的执行耗时这些关键指标。其中 FCP、LCP 和 CLS 可以使用开发者工具的 Performance 面板或在代码中通过 PerformanceObserver API 监听对应事件去获取，也可以直接通过 web-vitals 库来拿到这些指标；而单个函数的执行耗时可以通过 performance.now() 来计算。以上是性能优化中我关注的一些指标。
⚡️ 🍀 前端如何实现文件断点续传
断点续传首先需要对文件进行分块，可以通过 Blob.slice() 方法来实现；分块之后需要给每个切片添加唯一标识，以便记录上传进度，可以通过 SparkMD5 这类库来计算哈希值，这个过程也可以通过 Resumable.js 库来实现，使用时配置好上传地址、切片大小和并发上传数量等属性，配合 Resumable 提供的 API 来实现文件分块和添加标识；接着服务器根据标识的完整性来决定是否秒传，不是的话则返回已上传的切片信息，前端根据这些信息来上传剩余的切片，最后在服务器进行合并校验，实现断点续传。
说说图片压缩
我封装的图片压缩功能，主要是将原图绘制成 Canvas，然后利用 Canvas 的 toBlob() 方法，传入质量参数对图片进行压缩；
对 Canvas 的了解
Canvas 我主要用来实现一些图片操作，例如图片压缩、灰度化和取色器等功能，还有就是做一些简单的绘图。
前景色自动适配的实现
有个加权平均法的灰度转换公式，可以根据背景色的 rgb 值计算亮度，然后利用 HSL 颜色单位的亮度值，给前景色设置亮色或暗色。
说说主题切换
我在入口文件用 styled-components 的 ThemeProvider 来包裹下层组件并注入主题，然后在声明 styled 样式组件时通过 props 引入主题，同时用 Rudux 来完成全局主题切换。
说说组件库文档的搭建
我用 Docusaurus 来搭建组件库文档，并完成 Algolia 搜索配置和自动化构建发版。除此之外，我还封装了一个基于 React Live 的交互式代码编辑器，可以将 Markdown 中的代码块解析并展示到文档中。
说说 Nodejs 博客网站的搭建
技术栈方面，前端用的是 React，后端用的是 Koa 框架写 Nodejs，数据库用的是 MySQL 和 Redis，其中我在登录业务做了一些优化，包括通过 HTTPS 传输密码，使用 Crypto 对密码进行加密保存，在用户登录状态方面，我用 Session 来保存登录状态，并用 Redis 来存储 Session。
表单是怎么封装的
我用 Formik 来封装通用表单，具体过程是用 useFormik 钩子创建 formik 对象，然后在该对象中声明表单初始值，进行表单校验和处理表单提交操作，接着解构出对应的数据和方法供组件使用。在整体的处理上减少了大量的重复代码，提升了表单的可维护性。
如何写测试用例
我用 React Testing Library 测试库，配合 Jest 的语法来写测试用例，具体是校验组件中指定元素的类名、样式和属性等方面是否符合预期，以及事件是否生效，还有就是直接生成测试快照。
职业规划
我自己是想走技术专家路线，短期内聚焦提升业务架构能力，并持续深入学习更多知识；长期希望横向掌握工程化和全栈开发能力，能把控整个项目，独立负责从需求分析到部署上线的完整闭环，期间也希望能产出一些优秀的开源作品。
对前端的看法
我觉得前端是个面向用户的角色，需要注重用户体验，做好视觉交互跟性能优化，另外，前端从最开始的纯服务端渲染，到后面的单页面应用，各种库和框架相继出现，需要不断拥抱新的技术，持续学习。
优劣势
优势的话，我平时有良好的代码习惯，很注重代码的可读性跟可维护性，而且也比较追求细致入微的用户体验，会把页面的交互体验做到极致，另外我有很强的学习能力，平时有写博客的习惯，会记录各种技术问题和解决思路，并深入学习相关的知识，形成一整套知识体系；劣势的话，我是个慢热型的人，会更愿意跟熟悉的人打交道，还有技术上，我觉得还有成长的空间。
离职原因
我在百度做的基本是公有云的业务，然后现在组织发生一些变更，深圳这边只保留私有化的团队，所以协商解除合同，出来看看新的机会。
GZC：因为我计划未来在XX定居，然后最近也在关注那边的岗位，准备过去
到岗时间
收到 offer 后一周左右就可以到岗
收到 offer 后的两个星期左右吧，最迟一个月可以到岗（需要回去做好工作交接，以及找房子和搬家）
期望薪资
我想先了解一下薪资的结构（社保基数、公积金比例、年终是固定还是浮动、是否有商业险和其他补贴）
我目前是 XX * 16，社保公积金全额，公积金是 12% 的比例，我希望在这个基础上有 20-30% 的涨幅
是否有其他 Offer
目前手里是有两家公司的 Offer
- Offer 待遇：具体我这边不太方便透露，不过在我的期望之内；
- Offer 选择：我会综合对比看看，因为目前 XX 公司这边的工作内容和业务方向是我比较倾向的，而另外两家公司的话，一家是离我住的地方近点，另一家是这两年发展很快，都各有吸引我的点，所以我会综合工作内容、平台业务以及薪资待遇各方面对比看看。
有什么要问的
技术面：
- 目前业务团队的一个规模是怎样的
- 这个项目是否是新的业务线
- 项目涉及的技术栈大概有哪些
- 公司、团队氛围
总监面：
- 这个项目是否是新的业务线
- 业务未来的一个发展方向是怎样的
- 公司、团队氛围
HR 面：
- 晋升、考核机制
- 上下班时间
- 公司、团队氛围
对公司的了解
- 对金蝶的了解：我有了解过金蝶是国内的 ERP 龙头企业，公司通过一些云服务技术将 ERP 能力以 SaaS 的模式去交付，像基于 K8S 构建的苍穹平台之类的。然后也关注到公司有从传统 ERP 向云原生+AI 和云原生+低代码的一个转型，所以挺期待能参与这类高价值业务的技术建设。