虾皮前端实习一面

       虎鲸是6.5ssob上海投的，6.12约面，西安大麦的前端岗。    虾皮是老早投的深圳后端，然后被前端捞的，后端和项目一点没问，麻了问题：    1、js获取多个div元素的方法。如果这些div有父子关系，如何进行区分？如何由子获得父？    2、react状态管理的几种方式？除了redux还有哪些？    3、跨端如何解决？    4、选择器的优先级？    5、如何进行浏览器性能优化？    6、url的结构？    7、url从输入到响应页面的过程？    8、http2.0与1.0的区别？    9、tcp三次握手与四次挥手？    10、https加密的过程？    11、如何给元素设置水平，垂直居中？    12、react的useState如何放在if分支中会有什么问题？    13、浏览器如果断网了如何处理，缓存如何实现的？    14、defer和async有什么区别？（都没听说过defer）    15、promise有哪几种状态？......    16、短期规划？    题目：    1、拆分数字字符串，按照千分位添加逗号。    2、提取字符串中括号里的内容。（我给的思路是用栈或队列遍历，面试官说正则表达式可以秒，可是我不怎么会正则）总结：    两场面试都是四十分钟左右，问的都是前端比较基础的东西，但我只学了一个多月前端，也没专门看过八股，被拷打麻了。面试官看我都不会，后面就转而问场景题和一些计网之类的基础了。    下午面完虾皮后，大麦发邮件中止流程了。感觉今年前端面试的确比后端多，我都被前端捞了三次了

"所有不能击败你的，终将使你更强大。" 个人认为这句话的力量在于：1. 它承认了困难的真实性——不逃避你正在经历的痛苦 2. 它给出了明确的希望——现在的磨难都有其意义 3. 它建立了成长型思维——把挫折转化为养分 后来我慢慢明白： • 那些让我们夜不能寐的焦虑，都是在重塑我们的抗压能力 • 那些看似无法逾越的障碍，都是在拓展我们的能力边界 • 那些令人心碎的失败，都是在为未来的成功校准方向 这不是鸡汤，而是经过验证的人生智慧。每个强大的人都曾经历过想放弃的时刻，区别就在于他们选择再多坚持一会儿（当然实在坚持不下去了，放弃也是可以的）。 #能让你振作起来的一句话# 

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。

入职第一天，就感受到了满满的诚意。HR小姐姐全程陪着，讲解各种重要内容，什么六险一金啊（有商业保险），感觉自己被宠上天了。而且入职当天还送了免费大会员和会员购，哈利波特、蝙蝠侠、人生一串放肆看，看完还可以买周边，这福利也太香了吧！ 办公环境：超有爱 B站的办公环境真的是太棒了！每层楼都有猫猫狗狗，上班累了还能逗逗它们，解解压。而且办公椅和办公桌很协调，办公起来非常舒服。关键是，这里没有那种压抑的氛围，大家都很年轻，交流起来特别方便，氛围特别好。 工作氛围：轻松又自由 B站的工作氛围真的太棒了，拒绝奋斗逼文化和996，崇尚有效率的工作。弹性工作制，每月还有一天带薪休假，只要直属leader批准就...