字节跳动前端怎么准备
字节前端面试公开讨论里，信息流性能出现得很多：列表、图片、首屏和埋点。框架 API 只是入场券。
本页五题对准虚拟列表、图片、首屏、埋点和跨团队协作。用你做过的 Feed 或中后台大表来答。
字节怎么面前端
- 手写或讲清事件循环之后，通常进入业务页面性能。
- 会问你如何证明优化有效：FCP、滚动帧率、接口次数。
- 埋点准确性经常被当成「前端职责」来追问。
面试阶段与知识点
第一批不把每个阶段拆成独立 URL，避免程序化重复页。阶段对应下面的题，练完再用模拟面试串起来。
- 机制：事件循环要能连到卡顿。
- 长列表：虚拟列表和回收。
- 体验指标：首屏和埋点。
- 协作：和客户端、数据同学对口径。
值得开口练的题
每题给考察点、思路、结构化参考答案和追问。参考答案用来组织语言，面试时必须换成你自己的项目事实。
信息流向下滑动掉帧，你怎么查？
考察点
- 主线程
- 布局抖动
- 列表回收
回答思路
先录滚动复现卡顿，用性能面板拆长任务和强制布局，再决定虚拟列表还是减渲染。
结构化参考答案
- 录制滚动过程，定位超过 16ms 的长任务，区分 JS 执行、样式计算、布局与绘制各占比。
- 排查 scroll 回调里读 offsetHeight 再写 style 的循环，这类强制同步布局会直接拖垮帧率。
- 超长 Feed 用窗口化只渲染视口附近条目，回收 cell 时复位内部状态并释放视频播放器实例。
- 图片解码与内联视频预览改走异步或 Web Worker，避免在滚动高峰占满主线程。
面试官可能追问
- iOS 和 Android WebView 差异你怎么验证？
- 虚拟列表回顶如何保持位置？
- 如何证明帧率真的好了？
首屏要快，但运营要首屏塞三屏内容，你怎么做？
考察点
- 关键渲染路径
- 折叠
- 降级
回答思路
首屏只渲染视口内关键模块，其余运营位按优先级延迟加载，并用真实用户指标验收。
结构化参考答案
- 骨架屏与首屏关键数据接口优先返回，运营模块按距视口远近排队异步挂载。
- 非视口图片禁止预下载，字体做子集化，避免阻塞文字首次绘制。
- 弱网环境自动切换更瘦的首屏模板，减少首包体积与并行请求数。
- 上线后用 RUM 看 FCP 和 LCP 分位，不靠实验室旗舰机自嗨。
面试官可能追问
- SEO 静态页和客户端首屏如何分工？
- A/B 怎么避免把首屏变慢的实验全量？
- 谁有权加首屏模块？
曝光埋点比服务端播放数多很多，你怎么查？
考察点
- 可见性
- 重复上报
- 口径
回答思路
先和数据同学对齐「曝光」的业务定义，再查预渲染、重复上报和可见性阈值是否一致。
结构化参考答案
- 确认埋点是否要求卡片进入视口才上报，预渲染或离屏占位是否被误算曝光。
- 去重键用内容 ID 加会话标识，回滑同一卡片不应重复计数。
- 抽同一份原始日志与数据侧对账，定位差异发生在客户端还是聚合层。
- 修复后用回放脚本验证，不 retroactive 修改历史统计口径。
面试官可能追问
- 快滑是否该报曝光？
- 多端重复如何去重？
- 埋点失败重试会不会再放大？
一张 PNG 在列表里把内存打高，你会怎么做？
考察点
- 解码
- 尺寸
- 格式
回答思路
列表场景不应解码远大于显示尺寸的位图，要从请求尺寸、格式选择和离屏回收三处下手。
结构化参考答案
- 按列宽与 devicePixelRatio 请求 CDN 裁剪后的合适尺寸，禁止原图直出进列表。
- 静态图优先 WebP 或 AVIF，动效改视频或 Lottie，减少单帧解码内存峰值。
- cell 滚出视口时释放 ImageBitmap 引用，配合对象池复用 DOM 节点。
- 监控单条图片加载失败与内存占用，失败占位不影响整列表滚动。
面试官可能追问
- 模糊占位如何不影响 CLS？
- CDN 裁剪失败怎么办？
- 如何防止运营上传原图直出？
数据同学说前端改了曝光规则没打招呼，你怎么处理？
考察点
- 口径变更
- 通知
- 版本
回答思路
埋点是跨团队契约，口径变更必须版本化、可追溯，漏同步时要先止血再补流程。
结构化参考答案
- 先承认沟通疏漏，立刻补变更文档并在 SDK 里打版本号，方便数据侧过滤新旧逻辑。
- 旧逻辑上报打标字段，让数据同学能按版本回放对比，而不是混算。
- 建立埋点变更清单：改动人、生效时间、影响哪些报表与实验。
- 以后埋点改动走评审，产品催上线也不能跳过数据同学确认。
面试官可能追问
- 已经污染的数据怎么办？
- 如何避免再漏？
- 产品催着上线你还卡评审吗？
和岗位、模拟面试一起用
资料管理里保存目标岗位 JD，模拟面试会按简历出题。点题目下的按钮会把本题带进模拟开场，仍需先绑定简历与岗位。