小红书前端怎么准备
小红书前端面试常问双列瀑布流和视频：高度未知、滚动回收、自动播放策略。创作发布则是失败重试。
五题覆盖瀑布流、视频、发布、暗水印感知和协作。用你做过的双列或发布器来答。
小红书怎么面前端
- 瀑布流会追问滚动回顶和占位高度。
- 视频自动播放要谈耗电和静音政策。
- 发布失败不能丢草稿。
面试阶段与知识点
第一批不把每个阶段拆成独立 URL，避免程序化重复页。阶段对应下面的题，练完再用模拟面试串起来。
- 瀑布流：未知高度。
- 视频：自动播放。
- 发布：草稿和重试。
- 创作体验：审核延迟。
值得开口练的题
每题给考察点、思路、结构化参考答案和追问。参考答案用来组织语言，面试时必须换成你自己的项目事实。
双列瀑布流图片高度未知，如何避免跳动？
考察点
- 占位
- 布局
- 回收
回答思路
未知高度图片先用宽高比占位，加载后只微调单卡位置，配合窗口化回收控制 CLS。
结构化参考答案
- 接口返回图片原始宽高或宽高比，按列宽预先计算占位高度，避免加载后整列重排。
- 缺失尺寸时先用统一灰色占位块，图片加载完成后仅更新该项高度并平滑过渡。
- 滚动窗口化回收 distant cell，回顶时用首个可见项 id 作锚点恢复滚动位置。
- 上线前用 Web Vitals 监控 CLS，瀑布流场景 CLS 应控制在产品阈值内。
面试官可能追问
- 用户旋转屏幕怎么办？
- 插入置顶笔记如何不打乱？
- 如何测低端机滚动？
Feed 视频自动播放规则你怎么定？
考察点
- 可见性
- 静音
- 耗电
回答思路
自动播放只针对视口内最显著一条，默认静音，离屏立即暂停并释放解码资源。
结构化参考答案
- 用 IntersectionObserver 判断可见面积超过阈值（如 60%）才触发播放，避免半露即播。
- 全局只允许一个 video 元素处于 playing 状态，滑走当前条立刻 pause 并 detach src。
- 默认 muted 跟随系统静音开关，用户首次开声后记住偏好但不在公共场合默认外放。
- 离屏超过两屏距离的条目取消预加载，平衡首帧速度与流量耗电。
面试官可能追问
- Wi-Fi 和流量是否不同策略？
- 如何避免声音吓到用户？
- 预加载几条合适？
发布笔记图文失败，如何不丢内容？
考察点
- 草稿
- 分片
- 状态
回答思路
本地草稿是创作内容真源，上传失败可续传，服务端拒绝也要保留草稿并展示原因。
结构化参考答案
- 编辑过程中每次有效变更 debounce 写入 IndexedDB 草稿，杀进程后可恢复。
- 图片采用分片上传，失败从已传分片续传，不必用户重新选图。
- 点击发布后按钮进入 loading 并禁止重复提交，进度条展示图文与封面上传阶段。
- 服务端审核或格式拒绝时保留草稿，页面展示具体拒绝原因与修改入口。
面试官可能追问
- 多设备草稿如何同步？
- 部分图片违规怎么办？
- 如何防止草稿把磁盘写满？
如何减少布局抖动导致的误点？
考察点
- CLS
- 热区
- 延迟
回答思路
误点多半是 late-loading 内容把按钮顶走，要预留占位并稳定关键操作区热区。
结构化参考答案
- 广告、推荐卡等异步模块预留固定 min-height，加载完成后不允许推动下方固定按钮。
- 对可能 late-shift 区域的点击做 pointerup 位置校验，位移超阈值则取消触发。
- 底部主操作栏使用 fixed 布局，与滚动内容隔离，避免被瀑布流卡片挤动。
- 监控误点率与 CLS 关联，运营插卡必须申报高度范围否则不予上线。
面试官可能追问
- 弹层动画能否造成误点？
- 如何做自动化检测？
- 运营插卡如何约束高度？
审核很慢，创作者觉得发布石沉大海，前端能做什么？
考察点
- 状态可见
- 预期
- 通知
回答思路
前端不能把审核时长承诺成过审，但要把状态、预期与结果通知说清楚。
结构化参考答案
- 发布成功后展示「审核中」「已发布」「未通过」三态，每态有对应图标与说明文案。
- 预估审核时长展示区间（如 1–24 小时），不写「即将过审」等无法兑现的话术。
- 审核结果通过 push 或站内信通知，点击可直达笔记详情与拒绝原因页。
- 收集用户等待时长反馈定期同步审核团队，前端只负责透传不捏造进度。
面试官可能追问
- 未过原因能展示多细？
- 如何避免伪造「已爆」？
- 你如何和审核产品对齐文案？
和岗位、模拟面试一起用
资料管理里保存目标岗位 JD，模拟面试会按简历出题。点题目下的按钮会把本题带进模拟开场，仍需先绑定简历与岗位。