字节-商业化-社招-4年

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： Web Storage、离线存储、浏览器解析 HTML 文件、浏览器渲染过程、浏览器的缓存机制、浏览器的存储机制 本轮共 22 道题。答案默认折叠，便于先自行作答。 1. 讲一下你的3D渲染的项目 题目要点 略 参考答案 略 2. 3D渲染顶点着色、剪裁你是怎么实现的 题目要点 略 参考答案 略 3. 顶点着色阶段中的坐标变换通常包括哪些步骤？为什么剪裁能提升性能 题目要点 略 参考答案 略 4. 在透视投影中，为什么需要视口变换（Viewport Transformation） 题目要点 略 参考答案 略 5. 像素着色阶段的任务是什么？它如何与光照模型（如Phong或Blinn-Phong）结合 题目要点 略 参考答案 略 6. 延迟渲染（Deferred Rendering）与前向渲染（Forward Rendering）在像素着色阶段的区别 题目要点 略 参考答案 略 7. 深度缓冲（Z-Buffer）的工作原理是什么 题目要点 略 参考答案 略 8. 浏览器绘制一帧的完整流程（从输入事件到像素合成） 题目要点 理清浏览器渲染从事件到显示的每个关键步骤。 解释每个阶段的作用和产生的结果。 强调布局、绘制和合成的性能开销及优化手段。 结合实际开发中的性能调优措施说明。 参考答案 考察点 ● 理解浏览器渲染的全流程 考察从用户输入到最终视觉呈现的各个环节。 ● 掌握事件处理、样式计算、布局、绘制和合成机制 考察对浏览器渲染流水线各阶段的深入理解。 ● 理解性能瓶颈和优化点 参考答案 一、浏览器绘制一帧的整体流程概览 从用户输入事件触发，到最终屏幕显示，浏览器大致执行以下步骤： 事件处理（Input Handling） JavaScript 执行（JS Execution） 样式计算（Style Recalculation） 布局计算（Layout / Reflow） 绘制（Painting） 合成（Compositing） 像素呈现（Rasterization & Display） 二、详细流程解析 1. 用户输入事件处理 浏览器捕获用户的输入事件（如点击、滚动、键盘等），将事件放入事件队列。 主线程从事件队列中取出事件，执行对应的事件处理程序（如回调函数）。 2. JavaScript 执行 事件处理回调可能修改 DOM 或样式。 JavaScript 运行在浏览器主线程，操作 DOM 会影响后续渲染。 3. 样式计算（Style Recalculation） 浏览器根据最新的 DOM 结构和 CSS 规则，计算每个元素的最终样式。 可能触发样式树（style tree）的重建或更新。 4. 布局计算（Layout / Reflow） 计算元素的几何信息（大小、位置等），生成布局树（layout tree）。 重新计算会影响元素相对或绝对位置。 这是性能较昂贵的过程，尤其是节点多或频繁触发。 5. 绘制（Painting） 将布局树转换为绘制指令（绘制图层的内容），如颜色、文字、边框等。 生成绘制层（paint layers），具体绘制到图层画布（layer canvas）。 6. 合成（Compositing） 多个绘制层按照层级关系组合（合成）成最终页面。 使用 GPU 加速合成，将图层合并为一张完整的图像。 合成阶段可以通过硬件加速提升性能，避免全部重绘。 7. 像素呈现（Rasterization & Display） 将合成后的图像转换成屏幕像素。 GPU 或显示设备将最终像素渲染到屏幕，完成一帧的视觉呈现。 三、流程图示意 用户输入 → 事件处理 → JS 执行 → 样式计算 → 布局 → 绘制 → 合成 → 屏幕显示 四、优化与注意点 避免频繁触发布局和绘制，减少重排和重绘次数。 使用 CSS3 硬件加速属性（transform、opacity）优化合成性能。 将复杂动画放入合成层，减少主线程压力。 合理分层减少合成开销，避免过度分层。 减少 JavaScript 执行时间，避免阻塞主线程。 9. 追问：requestAnimationFrame（RAF）在哪个阶段执行？为什么它比setTimeout更适合动画 题目要点 明确 RAF 在浏览器渲染流程中“绘制前”执行。 解释 RAF 与浏览器刷新同步，自动节流的机制。 对比 setTimeout，突出 RAF 动画性能和体验优势。 强调实际开发中推荐使用 RAF 实现动画更新。 参考答案 一、requestAnimationFrame 执行阶段 requestAnimationFrame 回调函数执行时机： RAF 的回调函数会在浏览器开始下一次渲染帧之前执行，即在 浏览器渲染管线中的“绘制（Painting）”之前或合成前的空隙期。 具体来说，RAF 的回调是在浏览器完成一帧的布局（Layout）和样式计算（Style Recalculation）之后，紧接着准备绘制和合成之前触发，保证动画逻辑与渲染同步。 二、为什么 RAF 比 setTimeout 更适合动画 1. 与浏览器刷新频率同步 RAF 会按照屏幕刷新频率（通常是 60fps，即约 16.7ms 一帧）自动调用回调，保证动画平滑且不卡顿。 setTimeout 不与渲染同步，回调可能在任意时刻执行，导致动画帧率不稳定甚至丢帧。 2. 自动节流和性能优化 浏览器在后台标签页会自动暂停 RAF 调用，节省资源；而 setTimeout 仍然会尝试执行，浪费性能。 RAF 允许浏览器合并多次绘制请求，提升性能。 3. 减少视觉撕裂 由于 RAF 在绘制之前触发，能保证动画状态在绘制前更新，减少视觉撕裂和跳帧现象。 setTimeout 可能导致更新与渲染不同步，画面不连贯。 三、总结 特点 requestAnimationFrame setTimeout 执行时机 渲染帧开始前（绘制前） 指定时间后，非渲染同步 帧率同步 与显示器刷新率同步，平滑动画 不保证同步，可能导致跳帧 性能优化 后台标签页自动暂停，节约资源 即使后台也运行，浪费性能 视觉效果 减少撕裂，动画更流畅 易出现撕裂和卡顿 10. 在布局（Layout）和绘制（Paint）阶段，浏览器如何避免不必要的重排（Reflow）和重绘（Repaint） 题目要点 明确重排与重绘的区别和性能影响 介绍浏览器批量更新、延迟计算和图层合成机制 结合实例说明如何避免强制同步布局 总结开发中避免不必要重排重绘的具体技巧和建议 参考答案 考察点 ● 理解重排和重绘的区别及性能影响 考察对浏览器渲染优化关键环节的掌握。 ...

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 全方位解读this、作用域链与闭包、事件循环、call、apply和bind、前端存储、react hooks、react 渲染机制、React函数组件更新 本轮共 25 道题。答案默认折叠，便于先自行作答。 1. 讲一下你平常使用的React Hooks 题目要点 熟练掌握常用 Hook（useState/useEffect/useRef/useMemo/useCallback/useContext） 能结合实际项目说明每个 Hook 的使用动机和实现效果 理解 Hook 的核心机制（闭包陷阱、依赖数组规则、执行时机等） 参考答案 考察点 ● 理解 React Hooks 的基本使用场景及原理 面试官关注候选人是否掌握了常用 Hook 的使用规范与时机。 ● 能否结合项目实际表达 Hooks 的应用能力 考察是否具备将 React 函数组件与 Hooks 结合的实际经验与思维能力。 参考答案 一、常用 React Hooks 介绍 1. useState —— 管理组件内部状态 功能：定义响应式的本地状态。 典型使用场景：表单输入值、按钮开关、局部 UI 状态等。 示例： const [count, setCount] = useState(0); 2. useEffect —— 副作用逻辑处理 功能：用于处理副作用逻辑，如数据请求、DOM 操作、订阅事件等。 依赖数组决定副作用执行时机。 常见场景： 页面初始化请求数据（空依赖数组） 监听某个状态变化触发逻辑（依赖项更新） 组件卸载时清理订阅（返回 cleanup 函数） useEffect(() => { const id = setInterval(() => { console.log('tick'); }, 1000); return () => clearInterval(id); }, []); 3. useRef —— 获取 DOM 或存储跨渲染变量 功能：可以持久保存可变值而不触发组件重新渲染；或获取 DOM 元素引用。 ...