快手-前端三面

05-16 懂车帝 日常前端实习一面 疑似KPI，这个实习面试是HR主动联系我的，好像是做跨端的，收前端简历 总时长25mins 地点：飞书，面试官没开摄像头  自我介绍 自我感觉Vue和React掌握程度各打几分，满分五分 说一下当时实习时候做项目遇到的难点 你觉得你现在具备独立开发的能力吗 React数据流传递有什么特点 Redux解决了一个什么问题 （简历上挂有博客地址） 个人博客最近在更新什么内容 学校没有什么前端方面的课程吗 CDN HTTP2和HTTP1区别 前端页面形容性能的指标，秒开率这些（没了解） React源码有看过吗，我说了一下react基本流程 那它相对于原生写法有什么...

去年秋招的一个周日中午投了蔚来简历，下午两点就给我打电话邀请我试驾（第一次），给我搞蒙了，我说你们这面试需要提前试驾吗然后过了两个月又邀请我试驾（第二次）今天（5.30）第三次邀我试驾，我寻思你们把校招生个人信息发给门店，搁这私用我们个人信息是吧，车卖不出去了就指着刚毕业的学生买你车

中午12点打电话约面, 约的下午2点, 全程40分钟上来先做两道算法, 然后面试官黑屏去做自己的事情了(浓浓的kpi味...)算法: 最长递增子序列 二叉树展开为链表八股:TCP和UDP最主要的区别讲一下滑动窗口进程和线程的区别和联系一个程序运行很慢,现在使用多线程和多进程的方式去优化,讲一下这两种方案的优缺点拷打实习js继承查找一个方法的顺序import和require的区别BFCURL到页面渲染过程vite和webpack的区别vite快的原因webpack相对于vite有什么优势面试体验一般,可能面试官刚睡醒没什么心情,交流的时候没什么反馈几乎是我单方面输出算法全a,八股基本都答出来了,...

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。