前端面试高频场景题解析：200+实战案例与解决方案

2026年3月17日 互联网

一、设备与环境检测类场景

1. 用户设备类型精准识别

在响应式布局场景中，需通过navigator.userAgent解析设备类型，但需注意该方法存在兼容性问题。推荐使用现代API组合方案：

  1. const deviceType = () => {
  2.   const ua = navigator.userAgent;
  3.   if (/Mobi|Android|iPhone/i.test(ua)) return 'mobile';
  4.   if (/iPad/i.test(ua)) return 'tablet';
  5.   return 'desktop';
  6. };

对于需要精确屏幕尺寸的场景，应结合window.screen.width与CSS媒体查询结果进行交叉验证。

2. 浏览器标签页活跃状态检测

通过Page Visibility API实现：

  1. document.addEventListener('visibilitychange', () => {
  2.   if (document.visibilityState === 'hidden') {
  3.     console.log('标签页进入后台');
  4.     // 暂停视频播放等操作
  5.   } else {
  6.     console.log('标签页恢复活跃');
  7.   }
  8. });

该方案可降低后台标签页的CPU占用，特别适用于视频播放类应用。

二、性能优化专项突破

3. 长任务(Long Task)监控体系

使用PerformanceObserver监听长任务：

  1. const observer = new PerformanceObserver((list) => {
  2.   list.getEntries().forEach((entry) => {
  3.     if (entry.duration > 50) {
  4.       console.warn('检测到长任务:', entry);
  5.       // 可上报至监控系统
  6.     }
  7.   });
  8. });
  9. observer.observe({ entryTypes: ['longtask'] });

建议结合Web Vitals指标建立综合性能评估体系，长任务阈值通常设置为50ms。

4. 大文件分片上传策略

关键考量因素包括：

  • 网络状况：通过navigator.connection.effectiveType检测网络类型
  • 文件大小：超过100MB文件建议分片

  • 并发控制：使用Promise.all控制同时上传的分片数

    1. async function uploadInChunks(file, chunkSize = 5*1024*1024) {
    2. const chunks = Math.ceil(file.size / chunkSize);
    3. const uploadTasks = [];
    5. for (let i = 0; i < chunks; i++) {
    6.   const start = i * chunkSize;
    7.   const end = Math.min(file.size, start + chunkSize);
    8.   const blob = file.slice(start, end);
    10.   uploadTasks.push(
    11.     fetch('/upload', {
    12.       method: 'POST',
    13.       body: blob,
    14.       headers: { 'Content-Range': `bytes ${start}-${end-1}/${file.size}` }
    15.     })
    16.   );
    17. }
    19. await Promise.all(uploadTasks);
    20. }

5. 静态资源加载耗时统计

推荐使用Resource Timing API：

  1. const resources = performance.getEntriesByType('resource');
  2. resources.forEach(resource => {
  3.   console.log(`${resource.name} 加载耗时: ${resource.duration}ms`);
  4. });

对于CDN资源，建议结合initiatorType区分不同类型资源（script/style/image等）。

三、交互与状态管理

6. 防重复请求实现方案

双重防护机制：

  1. let isRequesting = false;
  3. async function safeRequest(url) {
  4.   if (isRequesting) return Promise.reject('请求进行中');
  6.   isRequesting = true;
  7.   try {
  8.     const res = await fetch(url);
  9.     return res.json();
  10.   } finally {
  11.     isRequesting = false;
  12.   }
  13. }

对于表单提交场景，可结合debounce函数与请求状态锁实现更精细控制。

7. 鼠标拖拽交互实现

完整实现包含事件监听与边界处理：

  1. function makeDraggable(element) {
  2.   let pos = { x: 0, y: 0 };
  3.   let offset = { x: 0, y: 0 };
  5.   function mouseDownHandler(e) {
  6.     offset = {
  7.       x: element.offsetLeft - e.clientX,
  8.       y: element.offsetTop - e.clientY
  9.     };
  10.     document.addEventListener('mousemove', mouseMoveHandler);
  11.     document.addEventListener('mouseup', mouseUpHandler);
  12.   }
  14.   function mouseMoveHandler(e) {
  15.     pos = {
  16.       x: e.clientX + offset.x,
  17.       y: e.clientY + offset.y
  18.     };
  19.     element.style.left = `${pos.x}px`;
  20.     element.style.top = `${pos.y}px`;
  21.   }
  23.   function mouseUpHandler() {
  24.     document.removeEventListener('mousemove', mouseMoveHandler);
  25.     document.removeEventListener('mouseup', mouseUpHandler);
  26.   }
  28.   element.addEventListener('mousedown', mouseDownHandler);
  29. }

四、数据上报与监控

8. 埋点数据可靠上报

使用navigator.sendBeacon实现可靠上报：

  1. window.addEventListener('beforeunload', () => {
  2.   const data = JSON.stringify({ event: 'page_exit', ...analyticsData });
  3.   navigator.sendBeacon('/analytics', data);
  4. });

该方案相比XMLHttpRequest的优势在于：

  • 异步发送不阻塞页面卸载
  • 适用于低功耗设备
  • 自动处理请求重试

9. PV统计准确计数

需处理以下边界情况：

  1. let isPageViewSent = false;
  3. function trackPageView() {
  4.   if (isPageViewSent) return;
  6.   // 使用RequestIdleCallback避免阻塞渲染
  7.   requestIdleCallback(() => {
  8.     fetch('/track', { method: 'POST', body: 'pv' });
  9.     isPageViewSent = true;
  10.   });
  11. }
  13. // 监听路由变化（单页应用场景）
  14. window.addEventListener('popstate', trackPageView);

五、高级调试技巧

10. 错误归因定位

使用git bisect进行二分查找：

  1. # 示例命令流程
  2. git bisect start
  3. git bisect bad HEAD  # 当前版本有问题
  4. git bisect good v1.0.0  # 已知正常版本
  5. # 自动进入二分查找模式，每次测试后执行：
  6. git bisect good/bad

配合自动化测试脚本可大幅提升定位效率。

11. Git历史修改

精确删除指定commit：

  1. # 交互式变基
  2. git rebase -i HEAD~10
  3. # 在编辑器中将目标commit前的pick改为drop
  4. # 保存退出后完成历史修改

注意：该操作会重写提交历史，团队开发时需谨慎使用。

刷题资源推荐

  1. 在线练习平台：某代码托管平台提供的算法题库（含前端专项分类）
  2. 模拟面试系统：支持场景题随机抽测与自动评分
  3. 开源项目：前端性能监控工具集（含20+实战案例）
  4. 官方文档：MDN Web Docs的性能优化专题

建议采用”333”刷题法：每天3个场景题、3种解法对比、3次代码重构，持续21天可显著提升问题解决能力。掌握这些核心场景题的解题思路，将帮助你在技术面试中建立系统化思维，准确识别问题本质并给出最优解。

最新文章