百度前端怎么准备
百度前端面试常问结果页：首屏快、直达准、弱网仍能用。这和后台管理系统不是同一套题。
五题覆盖首屏、直达卡、弱网、无障碍和协作。用你做过的列表或搜索页来答。
百度怎么面前端
- 性能数字要能讲测量方法。
- 直达卡涉及模板和安全，注意 XSS。
- 弱网要有截断策略。
面试阶段与知识点
第一批不把每个阶段拆成独立 URL，避免程序化重复页。阶段对应下面的题，练完再用模拟面试串起来。
- 首屏：关键渲染。
- 直达卡：模板安全。
- 弱网：截断。
- 商业与体验：位置争议。
值得开口练的题
每题给考察点、思路、结构化参考答案和追问。参考答案用来组织语言，面试时必须换成你自己的项目事实。
结果页首屏慢，你如何拆？
考察点
- SSR/CSR
- 关键 CSS
- 第三方
回答思路
先按 TTFB、下载、执行、渲染四段拆瓶颈，再优先砍掉阻塞首屏的第三方脚本。
结构化参考答案
- 首屏 HTML 内联关键搜索结果，摘要与次要卡片由客户端异步补全。
- 非关键 JS 后移或 defer，统计与广告脚本异步加载，不阻塞首次内容绘制。
- 结果卡片按距视口远近懒渲染，首屏只 mount 可见条目。
- 用 RUM 按网络类型与渠道分位看 FCP，不只依赖实验室 Lighthouse 分数。
面试官可能追问
- SEO 和首屏如何兼得？
- 实验平台脚本如何约束？
- 如何防止运营加同步脚本？
直达卡要插 HTML，如何避免 XSS？
考察点
- 白名单
- 转义
- 沙箱
回答思路
直达卡默认走结构化数据加组件渲染，必须插 HTML 时严格白名单转义并配 CSP 纵深。
结构化参考答案
- 优先用结构化 JSON 描述卡片字段，由前端受信组件渲染，禁止运营直接贴 HTML 片段。
- 确需富文本时对标签与属性做白名单过滤，事件处理器与脚本伪协议链接一律剥离。
- 外链只允许 https 且经跳转安全校验，站内链走路由白名单。
- 页面级 CSP 限制 inline script 与 eval，作为模板审核之外的第二道防线。
面试官可能追问
- 富文本高亮如何做？
- 第三方小程序卡怎么隔离？
- 如何审核模板？
2G 网络下结果页如何还能用？
考察点
- 截断
- 纯文本
- 重试
回答思路
弱网策略是优先出标题与链接的瘦模板，图片视频按需加载，搜索框始终可用。
结构化参考答案
- 检测到慢网或首包超时后切换瘦模板，隐藏大图与视频预览，保留标题、摘要与 URL。
- 图片统一占位，用户点击后再发起加载，避免弱网自动拉取大量资源。
- 接口失败采用指数退避重试并设上限，超限后展示离线提示而非无限转圈。
- 顶部搜索框与历史记录本地可用，保证用户能换词重搜而不必刷新整页。
面试官可能追问
- 如何识别伪 4G 其实很差？
- 瘦模板是否伤商业卡？
- 离线能否用上次结果？
键盘和读屏用户如何在结果列表里跳过重复导航？
考察点
- 跳过链接
- 标题层级
- 焦点
回答思路
无障碍不是贴 aria 标签，要保证键盘可达、标题层级正确且焦点不被广告劫持。
结构化参考答案
- 页首提供「跳到主结果」跳过链接，读屏与 Tab 用户可直达结果列表区。
- 每条结果用正确的 heading 层级，标题链接可聚焦且朗读顺序符合视觉逻辑。
- 无限滚动加载时向读屏播报新增条数，并提供暂停加载控件避免焦点丢失。
- 广告与商业卡不得抢占 Tab 顺序，弹层关闭后焦点回到触发元素。
面试官可能追问
- 无限滚动如何告知读屏？
- 弹层如何回焦？
- 如何做回归测试？
商业卡要插到第一条，体验认为伤害信任，你怎么谈？
考察点
- 标识
- 实验
- 底线
回答思路
商业结果必须清晰可识别，位置调整用实验衡量信任与收入，不能伪装成自然结果。
结构化参考答案
- 坚持所有商业卡展示可见的广告标识，字号与对比度经设计评审而非随意缩小。
- 用 A/B 同时看点击率、复搜率与投诉，不只看短期广告收入。
- 设定体验底线：商业卡不得使用与自然结果相同的样式伪装，违反则前端拒绝上线。
- 评审结论与实验数据归档，供后续争议时引用而不是口头争论。
面试官可能追问
- 标识不够明显谁定？
- 你如何拒绝伪装？
- 前端能否不做这个样式？
和岗位、模拟面试一起用
资料管理里保存目标岗位 JD，模拟面试会按简历出题。点题目下的按钮会把本题带进模拟开场，仍需先绑定简历与岗位。