面试高频手撕题 | 73.实现JSON.stringify

面的过程中说不是互联网公司 , 而是网络安全为主的 , 就面了十几分钟 , 感觉像是kpi1.Promise , Promise.all2.new操作符3.对SEO的优化有了解吗 ( 有的 , SSR ) 讲一下SSR4.前端安全问题了解吗 , 讲一下XSS和CSRF攻击5.两个项目在不同的浏览器和设备上都有良好的显示效果吗 , 你怎么能确保的6.浏览器兼容做过吗7.专业排名8.期望薪资5.6都没说出来 , 感觉要凉了

之前技术面过了约的主管面，虽然这次面试官也稍微迟到了一下，但是还能接受，不像上次那个压力面，再次鞭尸他，还给我发offer了，在武汉（最近出的事是不是真的啊，反正不打算接了），这次主管面纯聊天面啊嘻嘻1、开局说之前的技术面面试官对我评价挺好的相信我的技术能力，所以今天不问技术（但是我觉得其实我面成了粑粑，第一个有点规模的厂的面试也是第三次面试）2、面试官的自我介绍和目前组内的业务基本介绍（like，like，主要是react+ts的低代码）3、自我介绍（由于是主管面我觉得可能更看综合能力就把校内职务奖项技术栈项目等都阐述了一下）4、实习时间5、个人的优缺点（肯定吹自己能力和抗压吃苦耐劳啊，缺点只能说自己是油专双非了呜呜呜）6、问实习想学到什么，对公司团队的期望（公司业务恰好和我下一步想学的契合上了）7、聊到了技术方面面试官直接批了我的简历上项目说管理系统类似的没有多少技术含量（哭了，能被我和后端十来天搓出来的确实没啥技术含量，加点性能优化吹一吹不得了了）8、反问：目前的公司业务产品，给我介绍了目前他们做得三个产品，全是低代码啊（途中还介绍了用到的技术和我目前可以做得出来的部分）介绍也很细致9、反问：刚刚的产品全是react+ts的吗？我用vue做过类似的拖拽低代码。现在大部分公司都是react啊以后Vuer还是得转战react感悟：投了一周多简历了，大部分厂根本不看大二的，还有就是react+一个有含金量的管理系统或者小程序+一个低代码这种有技术含量项目组合的简历好投进去啊，面几家厂80%都是react，当然不是说Vue不行毕竟我也是Vue，只是说我面下来感觉大一点的厂都是大部分react，所以还是得学react做个项目当敲门砖（菜鸡的感悟不必理会，如果Vue大佬看到别骂我，Vue学好一点面大厂也是没问题的，其实面试问框架也没有特别特别多了）总结：今天面试体验很好的，面试官表达了想要我，约了明天的终面（是人力的面，一般会有什么问题啊求求牛友帮帮我），公司目前的业务虽然不契合我现在的技术但是刚好是我接下来准备学的技术和做的项目只不过base有点远消费还挺高，今天的面试也没啥有技术含量的分享了，只能祝愿大家早日oc（我也想oc）ps：大佬勿喷，有错评论区评论速改

1. 介绍实习经历，介绍项目；2. 聊实习时工作流程；3. 聊实习时最有意义的事情；4. 在项目中做了什么事情，怎么牵头的团队；5. webpack、vite深入；6. 怎么设计组件的？有哪些思路和注意点；7. js事件循环试题，注意点就是：构造函数、同步、宏任务、微任务(老生常谈)；8. css选择器权重；9. 手写Promise.all(秒了)。反问：1. 详细让面试官给我介绍业务；2. 工作流程(因为面试官问我了)；3. 技术栈。

一、面试基本情况本次面试主要围绕 React 相关技术、流式传输以及算法与 React Hook 实现展开，包含技术原理问答和两道代码实现题。二、技术问题回顾与解答1. React Router 的实现机制React Router 基于 HTML5 的 history API 实现单页面应用的路由功能。它通过监听浏览器的 popstate 事件（当用户点击浏览器的前进、后退按钮时触发）以及手动调用 history.pushState()、history.replaceState() 方法来更新 URL 地址，同时不触发页面刷新。在 React 组件中，通过 BrowserRouter（基于 history API）、HashRouter（基于 URL 的 hash 部分，兼容性更好）等组件包裹应用，结合 Route 组件定义不同路径对应的渲染组件。当 URL 变化时，React Router 会根据当前路径匹配相应的 Route 并重新渲染对应的组件，从而实现页面内容的更新 。不过在本次面试中，我对这块知识掌握不够扎实，未能完整清晰作答。2. React memo 是做了什么React.memo 是一个高阶组件，用于对函数式组件进行性能优化。它会对组件的 props 进行浅比较，如果前后两次传入的 props 浅比较结果相同，就直接复用之前渲染的结果，不再重新执行组件函数，从而避免不必要的重复渲染。但需要注意，它仅对 props 变化进行比较，当组件内部状态（如通过 useState 创建的状态）变化时，即使 props 未变，组件仍会重新渲染。3. React Suspense 怎么实现的React Suspense 用于处理组件的异步加载情况，让开发者可以指定在异步操作（如数据获取、动态导入组件）进行时显示的加载状态。它通过在组件树中标记一个“等待”区域，当子组件中有异步操作未完成时，会先渲染 Suspense 组件指定的 fallback 内容（如加载动画），直到异步操作完成，再渲染实际的子组件内容。内部实现依赖于 React 的 Fiber 架构，利用 Fiber 的可中断、可恢复特性，在等待异步操作完成期间释放 CPU 资源，不阻塞主线程，提高应用的响应性能 。4. 流式传输相关讨论在讨论流式传输时，我提出可以在前端利用 Server-Sent Events（SSE）实现。SSE 是一种单向的、由服务器向客户端推送数据的技术，适合用于实时数据传输场景。同时，对于 JSON 数据的处理，采用流式解析会更加高效，比如在处理阶乘等数据量较大且逐步生成的场景下，流式解析无需一次性将所有数据加载到内存中，而是边接收数据边解析处理，减少内存占用，提升数据处理效率。三、代码题实现1. 大数相减（考虑负数结果）function subtractLargeNumbers(num1, num2) {    function compare(num1, num2) {        if (num1.length > num2.length) return 1;        if (num1.length < num2.length) return -1;        for (let i = 0; i < num1.length; i++) {            if (num1[i] > num2[i]) return 1;            if (num1[i] < num2[i]) return -1;        }        return 0;    }    const sign = compare(num1.split(''), num2.split(''));    let larger = sign >= 0? num1 : num2;    let smaller = sign >= 0? num2 : num1;    let result = '';    let carry = 0;    for (let i = 0; i < larger.length; i++) {        let diff = parseInt(larger[larger.length - 1 - i]) - (parseInt(smaller[smaller.length - 1 - i]) || 0) - carry;        if (diff < 0) {            diff += 10;            carry = 1;        } else {            carry = 0;        }        result = diff + result;    }    while (result[0] === '0' && result.length > 1) {        result = result.slice(1);    }    return sign < 0? '-' + result : result;}2. 实现一个可暂停、继续的倒计时 React Hookimport { useState, useEffect } from'react';function useCountdown(initialTime) {    const [time, setTime] = useState(initialTime);    const [isRunning, setIsRunning] = useState(true);    let intervalId;    useEffect(() => {        if (isRunning && time > 0) {            intervalId = setInterval(() => {                setTime(prevTime => prevTime - 1);            }, 1000);        } else {            clearInterval(intervalId);        }        return () => clearInterval(intervalId);    }, [isRunning, time]);    const start = () => {        setIsRunning(true);    };    const pause = () => {        setIsRunning(false);    };    return {        time,        start,        pause    };