> 面试流程从2024年2月份持续到5月底（杭州、厦门、福州），面试情况：交换过简历信息的有88家，约面试的20家，面试通过有4家。 > 所有react相关的在另外一篇文章：[react在2024年的面试总结](https://blog.5udou.cn/blog/detail/1717465969083) > 针对一些印象比较深的公司列举，其他的小众的就不说了 ### 1、字节头条这次找工作，面了字节头条两个部门，第一个部门是保险业务，第二个是数字孪生业务（这个纯粹是凑HR的KPI的，招的人不是前端的，而是类似于售前技术支持角色的，也不知道啥玩意，纯粹当炮灰的，这让我对字节这家公司的面试的需求性产生严重的怀疑）主要问的问题是： * 2D地图的渲染、3D地图的性能优化； * http1.1和http2的keep-alive与多路复用的区别； * 首屏的加载优化； * 同一个域名并发个数限制； * 如何实现不限制次数的编辑撤销行为（自己想到双指针的方式）； * 图表组件svg和canvas的区别； * 用户页面操作数据的上报如果采用DOM树采集快照的缺点； * 低代码报表平台的设计； * 还问到如果后端给了大量的数据需要渲染的话，怎么办？我一开始回答是可以使用图表下面的DataZoom的功能实现，然后另外一种就是采样了；笔试题： ```js // 实现一个promisify函数，满足下面的调用 const promisify = (fn) => { // 这里其实就是args即可的，不用去考虑多参数的可能 return (args) => { return new Promise((resolve, reject) => { // 这样才能把callback变成这个 fn(args, (err, data) => { if (err) { return reject(err) } resolve(data) }) }) } } const test = (path, callback) => { callback(null, path) } const rr = promisify(test); rr('hellp') .then((data) => console.log('data is',data)) .catch(err => console.error(err)) ``` ### 2、蚂蚁蚂蚁也是面了两个部门，均挂在二面。蚂蚁的第一次面试按照流程来的，第二次面试就有点蒙圈了，都是电话面试的，笔试题也是用的阿里的笔试系统，怀疑是瞎搞的，也是没有招聘的需求，乱面试的吧。问的技术问题当时没有马上记录，笔试题做了这些，基本全都做出来了。第一道题是最常见的：异步控制并发个数，在22年的时候碰到了两次；第二道题是打平数组： ```js /** [ ['戴尔', '苹果', '联想'], ['笔记本', '平板电脑', 'PC机', '上网本'], ['黑色', '银色', '白色'], ] 输出：['戴尔-笔记本-黑色', '戴尔-笔记本-银色', '戴尔-笔记本-白色','戴尔-平板电脑-黑色', ....] */ // 我的解法 const flattenArray = (sourceArr) => { if (sourceArr.length <= 1) { return sourceArr } const result = sourceArr.slice(1).reduce((pre, current) => { const res = []; for (let i = 0; i < pre.length; i +=1 ) { for (let j = 0; j < current.length; j += 1) { res.push(`${pre[i]}-${current[j]}`) } } return res; }, sourceArr[0]) return result } ``` 第三道题是异步函数的封装： ```js /** 实现这个函数： function cacheAsyncFnWrap(fn) {} 满足如下要求： 1. 如果第一次调用，那就等待调用返回 2. 如果第二次调用，那就等待第一次调用结束之后一起返回结果 3. 如果第三次调用，已经有结果了，那么直接返回结果 **/ // 测试代码： function testFn() { console.log('testFn called'); return new Promise((resolve) => { setTimeout(() => { resolve('testFnResult'); }, 5000) }) } const wrapedTestFn = cacheAsyncFnWrap(testFn); wrapedTestFn().then(res => { console.log('1:', res); }); setTimeout(() => { wrapedTestFn().then(res => { console.log('2:', res); }); }, 2000); setTimeout(() => { wrapedTestFn().then(res => { console.log('3:', res); }); }, 6000); /** 打印结果将是： testFn called // 过了5秒之后打印： 1: testFnResult 2: testFnResult // 过了6秒之后打印： 3: testFnResult **/ // 我的解法是： function cacheAsyncFnWrap(fn) { let isGoing = false; let hasRes = false; let result; let cacheAsync; return () => { return new Promise((resolve) => { if (hasRes) { resolve(result) return; } if (!isGoing) { isGoing = true; cacheAsync = fn() cacheAsync.then(data => { result = data; resolve(data) }) }else { cacheAsync.then(data => resolve(data)) } }) } } // 后面我觉得不够简洁，问了下GPT，果然AI给的解法很简单： function cacheAsyncFnWrap(fn) { let result; let promise; return async function () { if (!promise) { promise = fn().then((res) => { result = res; }); } await promise; return result; }; } ``` 第四道题考察递归：对给定的数组进行组合，产出所有可能的数字组合 ```js function permute(nums) { const result = []; function backtrack(temp, remaining) { if (remaining.length === 0) { result.push(temp); return; } // 从第0位开始遍历，剩余的位数作为参数往下继续递归， // temp值作为一个结果一直在递归中追加 for (let i = 0; i < remaining.length; i++) { const newTemp = [...temp, remaining[i]]; // 剩余的数字进行拆分，去除remaining[i]这个数字，剩余的重新组合成数组往下递归 const newRemaining = [...remaining.slice(0, i), ...remaining.slice(i + 1)]; backtrack(newTemp, newRemaining); } } backtrack([], nums); return result; } // 测试 const nums = [1, 2, 3, 4]; const permutations = permute(nums); console.log(permutations); ``` 第五道题：简单实现洋葱模型 ```js // 模拟Koa框架的洋葱模型实现 class Koa { constructor() { this.middleware = []; } use(fn) { this.middleware.push(fn); } async run(ctx, index) { if (index === this.middleware.length) return; // 所有中间件都执行完毕 const middleware = this.middleware[index]; await middleware(ctx, () => this.run(ctx, index + 1)); } async handleRequest(ctx) { await this.run(ctx, 0); } listen() { const ctx = { request: {} }; this.handleRequest(ctx); } } // 创建一个Koa实例 const app = new Koa(); // 中间件1 app.use(async (ctx, next) => { console.log('Middleware 1 - before'); await next(); console.log('Middleware 1 - after'); }); // 中间件2 app.use(async (ctx, next) => { console.log('Middleware 2 - before'); await next(); console.log('Middleware 2 - after'); }); // 中间件3 app.use(async (ctx, next) => { console.log('Middleware 3'); }); // 启动服务 app.listen(); ``` 第六道题：设计一个组件，实现高性能的搜索组件 ```js import React, { useCallback, useEffect, useRef, useState } from "react"; interface Item { id: number; name: string; birthday: number; } interface IProps { list: Item[]; // extraFilterCondition: (data: Item[]) => Item[]; } const defaultEmptyArr: any[] = []; const useDebounce = ( fn: T, delay: number, dep: any[] = defaultEmptyArr ) => { const { current } = useRef<{ fn: T | null; timer: NodeJS.Timeout | null }>({ fn: null, timer: null, }); useEffect(() => { current.fn = fn; }, [fn]); return useCallback(function f(this: any, ...args: any[]) { if (current.timer) { clearTimeout(current.timer); } current.timer = setTimeout(() => { current.fn?.call(this, ...args); }, delay); }, dep); }; export const Search = (props: IProps) => { const { list } = props; const [keyword, setKeyword] = useState(""); // const isFiltering = useRef(false); const [actualList, setActualList] = useState([]); const [filterList, setFilterList] = useState([]); useEffect(() => { const newList = list.filter( (item) => item.birthday > new Date(2024, 4, 1).getTime() ); setActualList(newList); }, [list]); const handleInputChange = (e: React.ChangeEvent) => { setKeyword(e.target.value); }; const handleFilter = useCallback(() => { if (!keyword) { setFilterList([]); return; } const filterList = actualList .filter((item) => item.name.includes(keyword)) .sort((a, b) => a.name.localeCompare(b.name)); setFilterList(filterList); }, [keyword, actualList]); const handleFilterCb = useDebounce(handleFilter, 500); useEffect(() => { console.log(Date.now()); handleFilterCb(); }, [keyword, handleFilterCb]); return (

{filterList.length ? ( filterList.map((item) =>

{item.name}

) ) : keyword ? (

您搜索的内容为空，请重新搜索

) : null}

); }; ``` ### 3、诸云科技(厦门) > 这次找工作，也想看看福建老家的机会。非常基础常规的面试，都是八股文式的面试，刚好，我的弱点。最后做了一道笔试题： ```js // 对下面的数组进行去重，主要考察了一些基础类型的比较： const data = [ 3, 1, [1], 1, [1], true, /123/, function func() {}, true, {}, "1", new String("a"), "a", NaN, undefined, NaN, undefined, {}, /123/, null, null, function func() {}, new String("a"), ]; // 自定义比较函数 function isEqual(a, b) { // 判断是否为 NaN if (Number.isNaN(a) && Number.isNaN(b)) { return true; } // 判断是否为函数 if (typeof a === "function" && typeof b === "function") { // 如果两个函数的源码相同，则认为它们相等 return a.toString() === b.toString(); } // 判断是否为 undefined 或 null if ((a == null && b == null) || (a === undefined && b === undefined)) { return true; } // 如果a和b是对象，则转换为JSON字符串进行比较 if (typeof a === "object" && typeof b === "object") { return JSON.stringify(a) === JSON.stringify(b); } if (a instanceof RegExp && b instanceof RegExp) { return a.toString() === b.toString(); } // 否则直接比较 return a === b; } // 使用filter和indexOf进行去重，这个是后面去问了GPT提供的写法 // 这个用findIndex有点意思，findIndex表示找到数组中第一个满足条件的索引 // 如果找到并且等于自身，说明是第一个加进来的，否则后面找到的都算是重复的！ // 很有意思哦~~ const uniqueData = data.filter((value, index, self) => { return self.findIndex((item) => isEqual(item, value)) === index; }); ``` ### 4、厦门云行+锐捷 + 永辉 + 网龙 (均是福州的) > 特别提到厦门云行这家是因为他们的面试还挺有特色的，会根据候选人的回答进行深入探究，而不是一味的八股文问题，虽然最后没通过，不过还是印象蛮深刻的 > 后面这三家都是福州的公司，前两家的面试都是八股文的面试，尤其永辉，但是永辉的面试流程是我目前面试过来最爽快的一家（当天面完当天给结果），网龙的面试因为老大是国外回来的，整体面试也是很舒服。锐捷就是比较老牌的传统企业，所以在二面的面试中，聊到管理上的一些方式，那个技术负责人不认同我的一些管理方式，最后二面没过。 #### 4.1、浏览器的存储方式有哪些？ > 这道问题来自永辉的二面，`Web SQL Database`和`Cache Storage`没有答出来，因为真实业务中基本没用，也没啥印象。 1. **Cookies**：Cookies是最早的浏览器存储方式之一，主要用于保存用户的会话信息、用户偏好、跟踪用户行为等。Cookies有一定的大小限制（通常不超过4KB），并且会在特定时间后过期。 2. **Local Storage**：Local Storage是HTML5引入的一种本地存储机制，用于存储大量数据（通常为5MB左右）且数据没有过期时间限制。Local Storage是同步存储的，即数据的读取和写入是同步操作。 3. **Session Storage**：Session Storage与Local Storage类似，但存储的数据只在单个会话期间有效，当会话结束（即浏览器窗口或标签页关闭）时，数据就会被清除。它的存储容量与Local Storage相同（通常为5MB左右）。 4. **IndexedDB**：IndexedDB是一个低级API，用于客户端存储大量结构化数据。它是一个事务型的数据库系统，可以存储更多的数据，适合复杂的应用场景，如离线Web应用。IndexedDB是异步操作的，因此不会阻塞浏览器的UI线程。 5. **Web SQL Database**：Web SQL Database是一种基于SQL的存储方式，可以在浏览器中使用SQL语句进行数据操作。不过，Web SQL已经被废弃，新的项目不推荐使用。 6. **Cache Storage**：Cache Storage是Service Workers提供的一种存储方式，主要用于存储网络请求的响应数据，从而实现离线功能和提高应用性能。Cache Storage可以存储大量数据，并且可以使用Service Workers来控制缓存的更新和清除。 7. **File System API**：一些浏览器提供了File System API，用于直接访问用户本地文件系统，可以读取和写入文件。不过，这个API在大多数浏览器中仍处于试验阶段，并且出于安全原因，需要用户明确授权。这道问题可以拓展：浏览器中主要有以下几种Worker，用于不同的并行任务处理需求： 1. **Web Worker**： - **特点**：用于在后台运行脚本，执行与用户界面无关的任务，如数据处理、复杂计算等。它可以有效地避免阻塞主线程，从而保持用户界面的响应速度。 - **使用场景**：长时间运行的JavaScript任务、数据处理、文件操作等。 - **限制**：不能直接操作DOM，只能通过消息传递与主线程通信。 2. **Service Worker**： - **特点**：用于拦截和处理网络请求、实现离线缓存、推送通知等。它运行在浏览器的后台，独立于网页生命周期，因此可以在网页关闭后仍然运行。 - **使用场景**：离线应用支持、缓存策略控制、后台同步、推送通知等。 - **限制**：运行在HTTPS环境中，以确保安全。 3. **Shared Worker**： - **特点**：允许多个浏览上下文（如多个标签页、iframe等）共享同一个Worker实例，便于在多个页面间共享数据和状态。 - **使用场景**：跨页面的数据共享、协作编辑等。 - **限制**：浏览器支持较少，消息传递需要处理复杂的通信逻辑。 4. **Audio Worklet**： - **特点**：用于处理Web Audio API中的音频节点，以实现低延迟的自定义音频处理。Audio Worklet允许开发者在音频处理管道中插入自定义音频处理代码。 - **使用场景**：实时音频处理、音频效果处理、自定义音频节点等。 - **限制**：需要一定的音频处理知识，且受限于实时处理的性能要求。 #### 4.2、`konvas`的性能问题 > 这道题来自于永辉的二面，问我地图使用konvas的绘制，那konvas如何做到一两千个元素不卡顿？ Konvas 通过提供图层机制，使得不同的图形元素可以分层绘制和管理。每个图层可以单独进行缓存和重绘，这样可以避免不必要的全局重绘操作，提高性能。通过缓存不频繁变化的图层，Konva 能够减少重绘的开销。 Konvas 设计每一个Layer会生成两个`

Hello React TypeScript.

Start editing to see some magic happen!