Hello World

Appearance

On This Page

面试题[浏览器] ​

1. 跨域问题 ​

由于浏览器同源策略（浏览器安全功能，它会阻止一个域与另一个域的内容进行交互，能有效防止 XSS、CSRF 攻击）的限制，非同源的请求会被限制。

解决跨域问题的方法：

  • 配置 nginx 反向代理
  • 使用 jsonp 方式（script 方式）
  • 使用图片
  • 设置 CORS（跨域资源共享）
  • 利用 iframe 实现
  • WebSocket

2. 常见浏览器所用内核 ​

  • IE 浏览器内核：Trident 内核；
  • Chrome 浏览器内核：统称为 Chromium 内核，以前是 Webkit 内核，现在是 Blink内核；
  • Firefox 浏览器内核：Gecko 内核；
  • Safari 浏览器内核：Webkit 内核；
  • Opera 浏览器内核：最初是自己的 Presto 内核，后来加入谷歌大军，从 Webkit 又到了 Blink 内核。

3. token 可以放在 cookie 里吗 ​

当被问这个问题的时候，第一时间要想到安全问题。通常回答不可以，因为存在 CSRF（跨站请求伪造）风险，攻击者可以冒用 Cookie 中的信息来发送恶意请求。解决 CSRF 问题，可以设置同源检测（Origin 和 Referer 认证），也可以设置 Samesite 为 Strict。

4. DOM 树是怎么生成的 ​

5. 浏览器渲染页面的过程 ​

浏览器输入url，到看到页面会发生什么

6. 现代浏览器多进程 ​

现代浏览器采用多进程架构，主要包括以下几个常见的进程：

  1. 浏览器主进程（Browser Process）：也称为浏览器引擎进程或浏览器内核进程，负责协调和管理整个浏览器的工作。它处理用户界面、显示和用户交互，还管理其他子进程。
  2. 渲染进程（Renderer Process）：每个标签页或窗口都会有一个独立的渲染进程，负责处理网页内容的渲染。渲染进程使用浏览器的渲染引擎来解析 HTML、CSS，构建渲染树并进行页面布局和绘制。
  3. 插件进程（Plugin Process）：用于运行浏览器插件，如Flash Player、PDF 阅读器等。为了增强安全性和稳定性，现代浏览器已经逐渐停止对插件的支持。
  4. GPU 进程（GPU Process）：处理图形相关的任务，如页面的绘制和图形加速。它负责使用计算机的 GPU（图形处理器）来执行图形操作，提高页面渲染的性能。
  5. 网络进程（Network Process）：处理网络请求和响应，负责发送和接收网络数据。它负责与服务器通信，下载网页内容、样式、脚本以及其他资源。
  6. JavaScript 引擎进程（JavaScript Engine Process）：负责解析和执行 JavaScript 代码。现代浏览器通常使用高性能的 JavaScript 引擎，如V8引擎，它在单独的进程中运行。

这些进程通过进程间通信（IPC）进行通信和协调，以实现浏览器的各种功能。多进程架构的设计可以提高浏览器的安全性、稳定性和性能，同时隔离不同的任务，避免一个标签页或插件的崩溃影响整个浏览器的运行。

7. 浏览器渲染进程 ​

渲染进程是浏览器中负责处理网页渲染的核心组件之一。它负责将 HTML、CSS 和 JavaScript 转换为可视化的网页内容，以供用户在浏览器中查看和与之交互。

以下是渲染进程的主要功能和工作流程：

  1. 解析 HTML：渲染进程接收到网络传输的 HTML 文档后，通过解析器逐行读取并解析文档结构。解析器将 HTML 标记转换为解析树（DOM 树）。
  2. 构建渲染树：基于 DOM 树和 CSS 样式信息，渲染进程构建渲染树（Render Tree）。渲染树由可视化的网页内容组成，其中每个节点都与其对应的样式信息关联。
  3. 布局（Layout）：渲染树中的每个节点都包含了位置和尺寸信息。布局引擎根据这些信息，计算出每个节点在屏幕上的精确位置，并生成布局（Layout）。
  4. 绘制（Painting）：渲染进程使用绘图引擎将布局转换为可视化的像素信息，即绘制。绘制涉及颜色、字体、图像等元素的渲染。
  5. 合成（Compositing）：渲染进程将绘制的结果合成为最终的页面图像。这涉及将多个图层（Layer）合并，并按正确的顺序进行显示。
  6. 显示和交互：最终，渲染进程将渲染好的页面图像显示在浏览器窗口上，用户可以与之交互。渲染进程还负责处理用户的输入事件，并将其传递给相应的处理程序。

需要注意的是，现代浏览器通常采用多进程架构，其中渲染进程是其中之一。其他进程如网络进程、JavaScript 引擎进程和浏览器主进程等也扮演着不同的角色，协同工作来实现浏览器的功能。渲染进程与这些进程之间通过进程间通信（IPC）来进行数据交换和协调。

8. 浏览器存储和浏览器缓存的区别 ​

浏览器存储和浏览器缓存是两个不同的概念，它们在作用、使用方式和存储内容等方面有所区别。

浏览器存储（Browser Storage）指的是浏览器在客户端（用户的设备）上保存和管理数据的机制。它主要用于在浏览器中存储数据，以供后续的访问和使用。常见的浏览器存储机制包括 Cookie、Web Storage（sessionStorage 和 localStorage）、IndexedDB 等。这些存储机制可用于存储用户首选项、会话数据、缓存数据等。浏览器存储是由开发者主动使用相应的 API 将数据存储在客户端，并通过 API 进行读取和更新。

浏览器缓存（Browser Cache）是指浏览器在本地缓存网页资源，以便在后续的访问中能够更快地加载和呈现页面内容。浏览器缓存的主要目的是减少网络请求，提高网页的加载速度和性能。当浏览器首次请求某个资源时，它会检查是否存在缓存的副本，如果存在且仍然有效，则直接从缓存中获取资源而不是向服务器重新请求。常见的缓存机制包括浏览器缓存、Service Worker 缓存和 HTTP 缓存。浏览器缓存是由浏览器根据服务器返回的响应头中的缓存相关字段来决定资源是否被缓存以及缓存的有效期。

因此，浏览器存储是指在客户端存储数据，供开发者主动使用；而浏览器缓存是指浏览器在本地缓存网页资源，自动处理缓存逻辑。两者都可以用于提升性能和用户体验，但其机制、使用方式和存储内容有所不同。

9. 浏览器存储 ​

浏览器存储指的是浏览器用于在客户端保存和管理数据的机制。浏览器提供了不同的存储机制，以满足不同的数据存储需求。以下是几种常见的浏览器存储方式：

  1. Cookie：Cookie 是浏览器存储数据的最古老和最简单的机制之一。它可以存储少量的文本数据，并在每次请求中自动发送到服务器。Cookie 可用于会话管理、用户身份验证和存储用户首选项等。
  2. Web Storage（本地存储）：Web Storage 提供了一种在浏览器中存储键值对数据的机制，包括 sessionStorage 和 localStorage。sessionStorage 存储的数据在浏览器会话期间有效，而 localStorage 存储的数据则长期保存在浏览器中。这些数据可以跨页面访问，并且存储容量较大。
  3. IndexedDB：IndexedDB 是一个客户端数据库，用于存储结构化数据。它提供了一种异步 API，可用于存储和检索大量数据。IndexedDB 允许开发者创建对象存储空间，并使用键值对进行数据存储。
  4. WebSQL：WebSQL 是一个已被废弃的浏览器存储机制，它提供了一种 SQL 数据库的接口，用于在浏览器中存储和查询数据。尽管它在某些浏览器中仍然可用，但不再被推荐使用。
  5. Cache Storage：Cache Storage 允许开发者缓存网络请求的响应，以便在离线状态下提供离线访问和更快的加载速度。它适用于存储网页资源，如 HTML、CSS、JavaScript 文件和图像等。

这些浏览器存储机制各有特点，可以根据具体的需求选择合适的存储方式。开发者可以利用这些存储机制来实现数据的持久化存储、缓存管理和离线访问等功能。

10. localStorage、sessionStorage 和 cookie 的区别 ​

11. 浏览器缓存策略 ​

12. 浏览器缓存和 HTTP 缓存的区别 ​

浏览器缓存和 HTTP 缓存是两个相关但不完全相同的概念。

浏览器缓存是指浏览器在本地缓存已访问过的网页资源，以便在后续的访问中能够更快地加载和呈现页面内容。浏览器缓存是由浏览器自身控制和管理的，可以通过设置响应头来指定缓存策略，如 Cache-Control、Expires、Last-Modified 和 ETag 等。浏览器缓存的主要目的是减少网络请求，提高网页的加载速度和性能。

HTTP 缓存是一种缓存机制，是通过在服务器和客户端之间使用 HTTP 头部字段来控制的。HTTP 缓存使用的响应头字段包括 Cache-Control、Expires、Last-Modified 和 ETag 等，还有对应的请求头字段，如 If-Modified-Since、If-None-Match 等。HTTP 缓存允许服务器和客户端进行缓存协商，以决定是否使用缓存、使用何种缓存以及如何验证缓存的有效性。

可以说，浏览器缓存是基于 HTTP 缓存机制实现的一种具体应用。浏览器根据服务器返回的 HTTP 头部字段来判断是否缓存资源、如何缓存以及如何验证缓存的有效性。浏览器会根据响应头中的缓存相关字段决定是否缓存资源，而在后续的请求中，可以根据条件字段发送条件请求以验证缓存的有效性。

总结起来，浏览器缓存是基于 HTTP 缓存机制实现的，它是浏览器在本地缓存已访问过的网页资源的机制。HTTP 缓存是一种缓存机制，通过在 HTTP 请求和响应中使用特定的头部字段来控制缓存的行为和验证缓存的有效性。

13. V8 垃圾回收 ​

14. JavaScript 的内存管理 ​

JavaScript 的内存管理是自动进行的，由 JavaScript 引擎负责分配和回收内存。下面是一些关键概念和机制：

  1. 堆和栈：JavaScript 中的变量可以存储在堆（heap）或栈（stack）中。基本类型的值（如数字、布尔值等）通常存储在栈中，而对象、数组、函数等复杂类型的值存储在堆中。
  2. 垃圾回收：JavaScript 引擎使用垃圾回收（Garbage Collection）机制来自动回收不再使用的内存。当一个对象不再被引用（即没有任何变量或属性引用该对象），这个对象就可以被当作垃圾，垃圾回收器会自动释放其占用的内存。垃圾回收器会周期性地检查哪些对象是可达的，哪些是不可达的。具体的垃圾回收算法和实现方式因引擎而异。
  3. 标记清除：标记清除是常见的垃圾回收算法。它通过标记阶段和清除阶段来识别和回收垃圾对象。在标记阶段，垃圾回收器会遍历从根对象（如全局对象、活动函数栈等）出发，标记所有可达的对象。在清除阶段，垃圾回收器会遍历整个堆空间，回收未被标记的对象。这样的对象会被认为是不再需要的，其占用的内存将被释放。
  4. 引用计数：引用计数是另一种垃圾回收算法，它通过跟踪对象的引用次数来判断是否为垃圾。当对象被引用时，引用计数加一；当引用失效或被重新赋值时，引用计数减一。当对象的引用计数为零时，该对象就可以被回收。
  5. 循环引用和内存泄漏：循环引用指的是对象之间形成相互引用的关系，导致无法通过标记清除等算法判断是否为垃圾。如果存在循环引用，即使这些对象不再被使用，它们也不会被回收，从而造成内存泄漏。要避免内存泄漏，需要注意及时解除循环引用。常见的内存泄漏情况包括循环引用、未清理的计时器、未及时解绑的事件监听器等。