腾讯音乐前端实习一面 30min，大概率kpi面

腾讯音乐前端实习一面常见问题及解答如下：

• 渲染层面：

  display: none：元素从渲染树中完全移除，不占据空间，触发回流（reflow）和重绘（repaint）。

  visibility: hidden：元素仍在渲染树中，占据空间但不可见，仅触发重绘。

• 子元素影响：

  display: none：子元素也会被隐藏，且无法通过 CSS 单独显示。

  visibility: hidden：子元素可通过 visibility: visible 单独显示。

• 方案 1：Flex 布局

  .container { display: flex; }.left, .right { width: 200px; }.center { flex: 1; }

  优点：代码简洁，天然支持响应式。

  缺点：需注意浏览器兼容性（IE 部分版本不支持）。

• 方案 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; }

  优点：脱离文档流，不依赖父容器宽度。

  缺点：绝对定位元素可能覆盖其他内容，需注意层级管理。

• 定义：函数内部引用外部作用域变量，且变量在外部作用域释放后仍被保留。
• 作用：

  实现私有变量（如模块模式）。

  函数防抖/节流（通过闭包保存计时器）。

• 注意：过度使用可能导致内存泄漏（如未清除的定时器或事件监听）。

• useState：组件级状态，适合简单逻辑（如表单输入）。
• useContext：跨组件状态，适合全局轻量级状态（如主题切换），避免逐层传递 props。
• Zustand：轻量级全局状态管理，基于 Context + immer，支持订阅和模块化。
• Redux：复杂全局状态管理，需手动配置 reducer、action 等，适合大型应用（如电商系统）。

• 组件优化：

  使用 React.memo 缓存函数组件，避免无必要重渲染。

  useCallback 缓存回调函数，避免子组件因引用变化重渲染。

• 状态优化：

  避免在 useState 中存储临时计算值（如 const total = a + b 应改用 useMemo）。

  使用 useReducer 处理复杂状态逻辑，减少重复更新。

• 其他优化：

  虚拟列表/表格（长列表优化）。

  懒加载（React.lazy + Suspense）。

  避免内联函数在渲染中重复创建（如 onClick={() => {...}} 应改为 useCallback）。

• 状态更新异步性：

  合成事件和生命周期中，setState 异步更新，需通过回调获取最新值（如 setState({ count: 1 }, () => {...})）。

  原生事件（如 setTimeout）中，setState 同步更新。

• 状态穿透问题：

  多层组件传递状态时，可用 useContext 或状态管理库（如 Redux）简化。

• 思路：

  通过回溯法枚举所有可能，用 left 和 right 控制左右括号数量。

  确保任意时刻 right ≤ left（避免无效括号）且总数不超过 n。

• 核心原理：仅渲染可见区域内的列表项，通过滚动事件动态计算并更新显示内容。
• 关键步骤：

  计算可见区域起始索引和结束索引。

  渲染对应索引的列表项。

  通过 transform 或 padding 模拟滚动位置，保持滚动条正常显示。

• 准备项目细节：重点梳理参与过的前端项目（如技术选型、性能优化、难点解决）。
• 复习基础：巩固 HTML/CSS/JavaScript 核心知识（如事件循环、原型链、作用域链）。
• 模拟面试：通过牛客网等平台练习手写代码题（如防抖、节流、深拷贝）。
• 了解公司业务：提前熟悉腾讯音乐的产品（如 QQ 音乐、全民 K 歌），思考前端技术如何赋能业务。