浏览器面试题及详细答案 88道（45-55）

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

前后端面试题-专栏总目录

一、本文面试题目录

45. 可以手动禁止浏览器存储某些 cookie 吗？如何操作？

• 原理说明：浏览器允许用户通过设置或浏览器扩展手动管理 cookie，包括禁止特定网站存储 cookie。这基于浏览器的隐私控制机制，用户可根据需求限制 cookie 的存储和使用。
• 操作方式：
  • 浏览器设置：以 Chrome 为例，进入“设置”→“隐私和安全”→“Cookie 和其他网站数据”，可选择“阻止所有第三方 Cookie”“仅阻止第三方 Cookie（在 Incognito 模式下）”，或针对特定网站通过“网站设置”→“Cookie 和站点数据”进行单独配置（允许/阻止/清除）。
  • 浏览器扩展：如“Cookie AutoDelete”“uBlock Origin”等扩展可自动或手动管理特定网站的 cookie，实现禁止存储的功能。
• 示例场景：用户访问某广告较多的网站时，可通过浏览器设置阻止该网站存储跟踪类 cookie，保护隐私。

46. 浏览器的事件循环机制是怎样的？对事件循环的理解是什么？

• 原理说明：浏览器的事件循环（Event Loop）是处理单线程 JavaScript 运行时非阻塞 I/O 操作的机制。由于 JS 是单线程，无法同时处理多个任务，事件循环通过“执行栈”“任务队列”实现异步操作：
  1. 同步任务直接进入执行栈执行。
  2. 异步任务（如定时器、DOM 事件、网络请求）完成后，其回调函数被放入任务队列。
  3. 执行栈为空时，事件循环从任务队列中取出回调函数放入执行栈执行，反复循环。
• 核心理解：事件循环是浏览器协调同步和异步任务的“调度中心”，保证了 JS 单线程环境下非阻塞运行，避免因等待异步操作（如网络请求）导致程序卡顿。
• 示例代码：

  console.log('同步任务1');
  setTimeout(() => {console.log('异步任务（宏任务）');
  }, 0);
  Promise.resolve().then(() => {console.log('异步任务（微任务）');
  });
  console.log('同步任务2');
  // 输出顺序：同步任务1 → 同步任务2 → 异步任务（微任务） → 异步任务（宏任务）
  

47. 宏任务和微任务分别有哪些？它们的执行顺序是怎样的？

• 原理说明：任务队列分为宏任务（Macro Task）和微任务（Micro Task），二者执行优先级不同：
  • 宏任务：包含脚本整体代码、setTimeout、setInterval、setImmediate（Node）、I/O 操作、UI 渲染等。
  • 微任务：包含 Promise.then/catch/finally、process.nextTick（Node，优先级高于其他微任务）、MutationObserver、queueMicrotask 等。
• 执行顺序：
  1. 执行栈为空时，先执行所有微任务（清空微任务队列）。
  2. 然后从宏任务队列中取出一个任务执行。
  3. 重复“执行微任务→执行一个宏任务”的循环。
• 示例代码：

  console.log('同步代码');
  setTimeout(() => {console.log('宏任务1');Promise.resolve().then(() => console.log('微任务2'));
  }, 0);
  Promise.resolve().then(() => {console.log('微任务1');setTimeout(() => console.log('宏任务2'), 0);
  });
  // 输出顺序：同步代码 → 微任务1 → 宏任务1 → 微任务2 → 宏任务2
  

48. 什么是执行栈？事件触发的过程是怎样的？

• 执行栈（Call Stack）：

  • 原理：JS 引擎用于管理函数调用的栈结构，遵循“后进先出（LIFO）”原则。函数调用时入栈，执行完毕后出栈。
  • 示例：

    function a() { b(); }
    function b() { c(); }
    function c() { console.log('c'); }
    a(); 
    // 执行栈过程：a入栈 → b入栈 → c入栈 → c出栈 → b出栈 → a出栈
    

• 事件触发过程：

  1. 事件（如点击、定时器触发）发生时，浏览器将事件回调函数放入对应的任务队列。
  2. 执行栈为空时，事件循环从任务队列取出回调函数，压入执行栈执行。
  3. 回调函数执行过程中若有新的同步/异步任务，重复上述步骤。

• 示例：点击按钮触发事件

  <button id="btn">点击</button>
  <script>document.getElementById('btn').addEventListener('click', () => {console.log('点击事件回调'); // 点击后，该回调进入任务队列，执行栈空时执行});
  </script>
  

49. Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序是怎样的？

• 区别对比：

  维度	浏览器 Event Loop	Node Event Loop
  任务队列划分	宏任务 + 微任务	6 个阶段（timers、pending callbacks 等）+ 微任务
  微任务执行时机	每个宏任务后执行所有微任务	每个阶段完成后执行所有微任务
  典型场景	处理 DOM 事件、UI 渲染等	处理文件 I/O、网络请求等服务器端操作

• process.nextTick 执行顺序：

  • process.nextTick 是 Node 特有的微任务，不属于 Event Loop 的任何阶段，优先级高于其他微任务（如 Promise.then）。
  • 每次执行栈清空后（无论处于哪个阶段），都会先执行所有 process.nextTick 回调，再执行其他微任务。

• 示例代码（Node 环境）：

  setTimeout(() => {console.log('timer');
  }, 0);
  Promise.resolve().then(() => console.log('promise'));
  process.nextTick(() => console.log('nextTick'));
  // 输出顺序：nextTick → promise → timer
  

50. 如何避免浏览器内存泄漏？哪些操作会造成内存泄漏？

• 常见内存泄漏操作：

  • 意外的全局变量：未声明的变量被挂载到 window 上，不会被回收。
  • 闭包引用：闭包长期持有外部变量（如 DOM 元素、定时器）。
  • 未清除的定时器/事件监听器：定时器回调或事件监听器未移除，导致关联对象无法回收。
  • 脱离 DOM 的元素引用：保存了 DOM 元素的引用，但该元素已从 DOM 树移除。
  • 大对象未及时释放：如未清空的缓存、大型数组等。

• 避免方法：

  • 减少全局变量，使用 let/const 替代 var，及时手动清除不再使用的全局变量（赋值为 null）。
  • 定时器/事件监听器不再使用时，通过 clearTimeout、removeEventListener 移除。
  • 闭包中避免引用不必要的外部变量，或在使用后手动释放。
  • 定期检查脱离 DOM 的元素引用，及时清除。

• 示例（修复泄漏）：

  // 泄漏：未清除的事件监听器
  const btn = document.getElementById('btn');
  function handleClick() {}
  btn.addEventListener('click', handleClick);
  // 修复：移除监听器
  btn.removeEventListener('click', handleClick);
  

51. 浏览器是如何进行垃圾回收的？V8 的垃圾回收机制是怎样的？

• 浏览器垃圾回收原理：自动管理内存，回收不再被引用的对象。核心算法包括：

  • 引用计数：跟踪对象被引用的次数，次数为 0 时回收（缺点：无法解决循环引用）。
  • 标记-清除：从根对象（如 window）出发，标记可达对象，未标记的对象被视为垃圾并清除（现代浏览器主要采用）。

• V8 垃圾回收机制：

  • 基于“分代回收”，将内存分为新生代（存活时间短的对象）和老生代（存活时间长的对象）。
    • 新生代：采用“Scavenge 算法”，将内存分为 From 和 To 空间，复制存活对象到 To 空间，清空 From 空间，交换两者角色（高效但空间开销大）。
    • 老生代：采用“标记-清除”+“标记-整理”算法，先标记垃圾，清除后整理内存碎片（减少内存碎片，适合大对象）。
  • 优化策略：增量标记、并发标记（减少主线程阻塞时间）。

52. 不同浏览器对 ES6 语法的支持情况如何？如何检测浏览器是否支持某个特定的 API？

• ES6 语法支持情况：

  • 现代浏览器（Chrome、Firefox、Safari、Edge 等）对 ES6 核心特性（如 let/const、箭头函数、Promise、类、模块）支持较好。
  • 老旧浏览器（如 IE11 及以下）支持极差，几乎不支持 let/const、模块等特性。
  • 可通过 caniuse.com 查询具体特性的浏览器支持情况。

• 检测浏览器 API 支持的方法：

  1. 属性存在性检查：

     // 检测 Promise 支持
     if (window.Promise) {console.log('支持 Promise');
     } else {console.log('不支持 Promise');
     }
     

  2. 功能测试：某些 API 存在但功能不全，需测试具体行为：

     // 检测 Array.prototype.includes 支持
     if (Array.prototype.includes) {console.log('支持 includes');
     } else {// 可添加 polyfill
     }
     

  3. 使用工具：如 Modernizr 库自动检测并生成类名或对象，方便判断。

53. 什么是浏览器指纹？有什么用途？

• 原理说明：浏览器指纹是通过收集浏览器的配置信息（如用户代理、时区、语言、插件、屏幕分辨率等）生成的唯一标识，用于识别用户，即使在清除 cookie 后仍可能追踪。

• 组成信息：

  • 基础信息：User-Agent、Accept 头、IP 地址（间接）。
  • 设备信息：屏幕分辨率、色深、时区、语言。
  • 浏览器特性：支持的 API、插件列表、Canvas 指纹（绘制相同内容因渲染引擎差异产生的哈希值）、WebGL 指纹等。

• 用途：

  • 合法用途：反欺诈（如识别账号异常登录）、用户体验优化（记住用户偏好）。
  • 争议用途：广告追踪、用户行为分析（可能侵犯隐私）。

• 示例（获取基础指纹）：

  const fingerprint = {userAgent: navigator.userAgent,language: navigator.language,resolution: `${screen.width}x${screen.height}`,timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
  };
  console.log(fingerprint);
  

54. 浏览器如何实现打印功能？有哪些相关的 API 或属性？

• 实现方式：浏览器内置打印功能，可通过快捷键（如 Ctrl+P）或 JS API 触发，打印内容基于页面 DOM 渲染。

• 相关 API 和属性：

  • window.print()：触发浏览器打印对话框。
  • @media print：CSS 媒体查询，用于定义打印样式（如隐藏不必要元素）。
  • page-break-before/page-break-after：CSS 属性，控制分页位置。
  • document.execCommand('print')：部分浏览器支持，功能同 window.print()。

• 示例代码：

  <style>@media print {.no-print { display: none; } /* 打印时隐藏类为 no-print 的元素 */@page { margin: 2cm; } /* 设置打印页边距 */}
  </style>
  <button onclick="window.print()" class="no-print">打印</button>
  <div>打印内容...</div>
  

55. 浏览器可以直接播放哪些视频和音频格式？

• 视频格式：

  • MP4：主流格式，基于 H.264 视频编码和 AAC 音频编码，几乎所有浏览器支持。
  • WebM：开源格式，基于 VP8/VP9 视频编码和 Vorbis/Opus 音频编码，支持 Chrome、Firefox、Edge 等。
  • Ogg：较少使用，基于 Theora 视频编码和 Vorbis 音频编码，支持 Firefox、Chrome 等（IE/Edge 旧版不支持）。

• 音频格式：

  • MP3：广泛支持，所有现代浏览器均兼容。
  • WAV：无压缩格式，支持 Chrome、Firefox、Safari 等。
  • Ogg Vorbis：开源格式，支持 Chrome、Firefox 等。
  • AAC：常见于 MP4 容器，支持 Chrome、Safari、Edge 等。

• 示例（视频播放标签）：

  <video controls><source src="video.mp4" type="video/mp4"> <!-- 优先加载 MP4 --><source src="video.webm" type="video/webm"> <!-- 备选 WebM -->您的浏览器不支持视频播放
  </video>