拼多多前端怎么准备
拼多多前端面试公开讨论里，包体和低端机性能很重。活动页还要扛峰值，不能只在旗舰机上好看。
五题覆盖包体、列表、活动容灾、弱网下单和效率争议。用你做过的活动页或电商列表来答。
拼多多怎么面前端
- 可能问你如何砍包、如何测低端机。
- 活动页会问降级和白屏监控。
- 准备「快」和「可维护」的冲突。
面试阶段与知识点
第一批不把每个阶段拆成独立 URL，避免程序化重复页。阶段对应下面的题，练完再用模拟面试串起来。
- 包体：低端机。
- 列表：复用。
- 活动页：容灾。
- 效率：花活与转化。
值得开口练的题
每题给考察点、思路、结构化参考答案和追问。参考答案用来组织语言，面试时必须换成你自己的项目事实。
活动页 JS 太大，低端机白屏两秒，你怎么砍？
考察点
- 拆包
- 首屏
- 依赖
回答思路
拼团活动页首屏只留购买最小运行时，可视化编辑器与重动效按路由或交互延迟加载。
结构化参考答案
- 路由级 code split，首屏 bundle 只含 SKU 选择、价格、参团按钮与必要 polyfill。
- 可视化搭建运行时、动效库、分享 SDK 等非关键依赖延迟 import，不进首包。
- 首屏以下模块的图片与 Lottie 懒加载，骨架占位高度与真实模块对齐。
- 用千元 Android 真机测 TTI 与可交互时间，gzip 体积只是参考而非唯一指标。
面试官可能追问
- 如何防止运营再塞依赖？
- SSR 是否值得？
- 砍包后如何回归活动配置？
超长商品列表如何复用 cell 避免内存涨？
考察点
- 回收
- 状态
- 图片
回答思路
拼团商品列表必须窗口化渲染，cell 状态外置到 store，滚出视口释放图片与监听器。
结构化参考答案
- 只 mount 视口上下各一屏范围内的 cell，滚出回收池时 unmount 并重置内部 state。
- 选中态、倒计时等状态存于 itemId 索引的 store，cell 复用时从 store hydrate。
- 列表图片按 cell 宽度请求合适尺寸，离屏时 revoke objectURL 释放内存。
- 长跑压测监控 JS heap 与 native bitmap，内存曲线应平稳而非锯齿上涨。
面试官可能追问
- 回顶如何瞬间到达？
- 插入广告位如何不算乱？
- 如何测泄漏？
活动配置把页面配挂了，前端如何容灾？
考察点
- 默认模板
- 监控
- 开关
回答思路
活动页配置渲染失败时要有上次成功模板或最小参团页兜底，并一键切静态容灾。
结构化参考答案
- 配置发布前 schema 校验与预览，校验失败阻断上线，禁止脏配置进 CDN。
- 运行时 React error boundary 捕获渲染异常，自动降级到预置最小参团页模板。
- 白屏率与 JS 错误率超阈值自动告警， on-call 可一键切换静态 HTML 容灾页。
- 容灾页仍保留 SKU、拼团价与参团按钮，峰值下用户仍可完成拼单。
面试官可能追问
- 如何避免错误配置全量？
- 降级页如何仍能下单？
- 谁审核配置？
弱网下活动倒计时和库存数字乱跳，如何处理？
考察点
- 服务器时间
- 节流
- 售罄
回答思路
拼团倒计时必须校准服务器时间，库存展示节流更新，请求失败不能显示成零库存。
结构化参考答案
- 页面 init 时拉服务器时间 offset，倒计时基于 serverNow 计算，禁止纯本地 Date.now 漂移。
- 库存数字接口做 500ms 节流合并刷新，售罄状态一旦确认立即 disable 参团按钮。
- 弱网请求失败时保留上次可信库存展示并标注「网络异常，请刷新」，不 flash 到 0。
- 禁止把接口 timeout 解析为库存为零，避免用户误以为已抢光而流失。
面试官可能追问
- 开多个 Tab 如何同步？
- 如何防止倒计时到 0 仍可点？
- 校时失败怎么办？
运营要加全屏动效，你认为伤害转化，如何说服？
考察点
- 实验
- 低端机
- 预算
回答思路
全屏动效在低端机常拖慢 TTI 与参团点击，要用转化对比与动效预算而不是主观争论。
结构化参考答案
- 提议只在 deviceMemory 充足或 Wi-Fi 下播放全屏动效，蜂窝与低端机默认静态海报。
- A/B 对比参团转化率、页面退出率与 TTI，动效组若转化更低则不上线。
- 与运营约定单次动效时长上限与可跳过按钮，超时自动结束不阻塞操作。
- 实验失败则默认关闭动效开关，写入活动模板规范避免后续重复踩坑。
面试官可能追问
- 运营以品牌为由坚持，你怎么办？
- 如何避免每次都吵？
- 前端能否做开关默认关？
和岗位、模拟面试一起用
资料管理里保存目标岗位 JD，模拟面试会按简历出题。点题目下的按钮会把本题带进模拟开场，仍需先绑定简历与岗位。