25秋招产品记录贴

1. display: none 和 visibility: hidden 的区别• 渲染层面：◦ display: none：元素完全从渲染树移除，不占据空间（回流+重绘）。◦ visibility: hidden：元素仍在渲染树中，占据空间但不可见（仅重绘）。• 子元素影响：◦ display: none：子元素也会被隐藏。◦ visibility: hidden：子元素可通过 visibility: visible 单独显示。2. 三列布局（两边固定，中间自适应）方案1：Flex 布局.container { display: flex; }  .left, .right { width: 200px; }  .center { flex: 1; }  方案2：Calc 计算.center { width: calc(100% - 400px); margin: 0 200px; }  方案3：绝对定位 + margin.container { position: relative; }  .left, .right { position: absolute; width: 200px; }  .center { margin: 0 200px; }  3. 闭包• 定义：函数内部引用外部作用域变量，且变量在外部作用域释放后仍被保留。• 作用：实现私有变量、函数防抖/节流等。• 注意：过度使用可能导致内存泄漏。4. React 状态管理方案及区别方案 特点 ** useState** 组件级状态，适合简单逻辑。 ** useContext** 跨组件状态，适合全局轻量级状态（避免逐层传递 props）。 ** Zustand** 轻量级全局状态管理，基于 Context + immer，支持订阅和模块化。 ** Redux** 复杂全局状态管理，需手动配置 reducer、action 等，适合大型应用。 5. 虚拟列表实现• 核心原理：仅渲染可见区域内的列表项，通过滚动事件动态计算并更新显示内容。• 关键步骤：1. 计算可见区域起始索引和结束索引。2. 渲染对应索引的列表项。3. 通过 transform 或 padding 模拟滚动位置，保持滚动条正常显示。6. React 性能优化• 组件优化：◦ 使用 React.memo 缓存函数组件，避免无必要重渲染。◦ useCallback 缓存回调函数，避免子组件因引用变化重渲染。• 状态优化：◦ 避免在 useState 中存储不必要的状态（如临时计算值）。◦ 使用 useReducer 处理复杂状态逻辑，减少重复更新。• 其他：◦ 虚拟列表/表格（长列表优化）。◦ 懒加载（React.lazy + Suspense）。◦ 避免内联函数在渲染中重复创建。7. React 的状态（补充常见问题）• 状态更新异步性：◦ 合成事件和生命周期中，setState 异步更新，需通过回调获取最新值。◦ 原生事件（如 setTimeout）中，setState 同步更新。• 状态穿透问题：◦ 多层组件传递状态时，可用 useContext 或状态管理库简化。8. 代码题：生成有效括号组合（回溯法）var generateParenthesis = (n) => {    const res = [];    const backtrack = (path, left, right) => {      if (path.length === 2 * n) res.push(path);      if (left < n) backtrack(path + '(', left + 1, right);      if (right < left) backtrack(path + ')', left, right + 1);    };    backtrack('', 0, 0);    return res;  };  思路：通过回溯法枚举所有可能，用 left 和 right 控制左右括号数量，确保任意时刻 right ≤ left 且总数不超过 n。

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

timeline：4.24一面5.6二面5.8hr面5.12oc特别感恩我的mentor啊，一面后一直主动问我流程到哪了———————面经一面75min：学校有没有相关课程怎么学的前端对自己有什么规划项目怎么成型的，自己怎么想着做的大二学校的课怎么办项目有设计图吗，能100%准确还原设计图吗像水平垂直居中的话，即使设置了他有时候也不是完全的居中，知道为什么吗行高知道有什么属性吗（不了解，然后面试官说了一个，不知道）flex1margin折叠怎么解决bfcflex盒会margin合并吗手写：两个fetch请求，要求先发第一个，拿到第一个的结果作为参数然后发第二个，用一个对象接收这两个结果，然后作为参数调用回调函数。生成器迭代器 还学过什么语言c语言和js有什么区别c语言里的指针能对应js里的什么es6什么新东西（忘了问的哪个了，带了耳机光录了自己的声音，自己光说了不太清楚没有了解，然后现在想不起来问的哪个了我服了深拷贝方法object.assign参数、返回值、原码逻辑了解什么打包工具吗讲讲常用hooksuseeffect作用时间手写：封装自定义钩子和组件实现倒计时二面55min：大二的课怎么办周围有同学出来实习吗可实习时长手里有其他公司流程吗star介绍项目平常有用ai吗，用的什么模型，对你有什么帮助吗项目难点怎么学的前端为什么选前端对移动端有了解吗快排伪代码和时间空间复杂度和稳定性用过Linux指令吗然后下面就是一些常规八股打发时间了http和httpshttp状态码get和post区别session、cookie、token输入一个URL后反问业务？tob还是toc？tob。然后说了一些公有云私有云什么的我也没听懂。什么时候出结果？马上。怎么看ai对编码的影响