场景设计面试题

前端场景设计面试题，按需求给出实现方案：大文件上传、无限滚动、搜索补全、权限系统、实时协作等。共 5 道题。

• 大文件上传怎样设计分片、断点续传、秒传和并发控制？

  用 Blob.slice 把文件切成固定大小分片，按文件哈希标识上传任务；上传前询问服务端已有分片实现断点续传和秒传，用并发池限制同时上传的分片数，全部完成后通知服务端合并并校验。

• 无限滚动和虚拟列表怎样选型？怎样触发加载并恢复滚动位置？

  无限滚动解决"何时加载下一页"，虚拟列表解决"已加载的数据太多时只渲染可见部分"，数据量大时两者组合；用 IntersectionObserver 观察列表底部哨兵元素触发加载，返回列表时用缓存数据和记录的位置手动恢复滚动。

• 搜索联想（自动补全）组件要处理哪些问题？

  输入防抖减少请求，用 AbortController 取消旧请求并校验返回对应的关键词以避免竞态；按关键词缓存结果；按 WAI-ARIA combobox 模式实现方向键、Enter、Escape 操作和 aria-expanded、aria-activedescendant 等属性。

• 前端权限控制怎样设计路由、按钮和接口三层？

  前端根据服务端下发的权限码控制路由可达、菜单与按钮的显示，以及请求拦截后的统一处理；这些都只是展示控制，可以被绕过，真正的授权必须由服务端对每个请求、每个资源校验。

• 前端倒计时为什么会走慢？怎样用服务端时间校准？

  setTimeout/setInterval 只保证不早于指定延迟执行，主线程繁忙和后台标签页节流都会累积误差；倒计时应以目标时间点为准每次重新计算剩余时间，用 performance.now 计时避免系统时钟被修改，并通过接口往返估算与服务端的时间差。