Hello World

Appearance

On This Page

面试题[浏览器] ​

1. 跨域问题 ​

跨域指的是浏览器无法访问不同域名、协议、端口的资源，这种行为是由浏览器的同源策略（Same-Origin Policy）保护机制引起的，非同源的请求会被限制（同源策略是浏览器安全功能，它会阻止一个域与另一个域的内容进行交互，能有效防止 XSS、CSRF 攻击）。

解决跨域问题的方法：

  • CORS（跨域资源共享）：CORS是一种W3C标准，它允许服务器明确地允许来自其他源的请求。通过在服务器端设置适当的响应头，例如Access-Control-Allow-Origin，可以指定允许哪些源进行跨域请求。这种方法需要服务器端的配合，因为需要在服务器上配置CORS。
  • JSONP：JSONP是一种利用<script>标签的跨域请求方式。它通过动态创建一个<script>标签，并将跨域请求的URL作为其src属性。服务器端需要将响应的数据以函数调用的形式返回，客户端通过定义对应的回调函数来接收数据。但它只支持 GET 请求。
  • 代理服务器：通过 Vue CLI 提供的 devServer 选项配置代理，代理服务器会将请求转发到目标服务器，从而绕过同源策略。
  • WebSocket：WebSocket是一种基于TCP的全双工通信协议，它允许客户端和服务器之间建立持久的连接，并进行实时的双向数据传输。通过WebSocket，跨域通信可以更加高效和实时。
  • PostMessage：如果跨域的两个页面属于同一父域下的不同子域，或者属于同一页面的不同iframe，可以使用postMessage方法进行通信。通过窗口或iframe之间的消息传递来实现数据共享。
  • Nginx反向代理：在Nginx中配置反向代理，将前端请求发送到反向代理服务器，反向代理服务器再将请求转发给后端接口，从而实现跨域。这种方法需要一定的服务器配置知识。

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

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

3. DOM 树是怎么生成的 ​

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

浏览器渲染页面的过程是一个复杂而精细的任务，它涉及多个步骤和组件的协同工作。以下是浏览器渲染页面的主要过程：

  1. HTML解析与DOM树构建：
    • 浏览器从网络获取HTML文件，并从上到下逐行解析。
    • 在解析过程中，浏览器会构建文档对象模型（DOM），这是一个表示HTML文档结构的树形数据结构。DOM的节点与HTML文档中的标签、文本节点和属性相对应。
  2. CSS解析与CSSOM树构建：
    • 与HTML解析并行，浏览器还会解析外部和内部的CSS样式表。
    • CSS解析后，会生成CSS对象模型（CSSOM），这也是一个树形结构，描述了页面上所有的CSS选择器及其层级结构和属性。
  3. 渲染树生成：
    • 一旦DOM和CSSOM都构建完成，浏览器会结合这两个树生成渲染树（Render Tree）。
    • 渲染树只包含需要显示的节点和样式信息，例如，设置了display: none的节点不会出现在渲染树中。
  4. 布局处理：
    • 渲染树生成后，浏览器会进行布局处理，也称为回流（Reflow）。
    • 布局处理阶段，浏览器会根据CSS样式信息为渲染树中的每个节点计算其位置和尺寸。这涉及到复杂的盒模型计算，以确保元素在页面上正确排列。
  5. 绘制：
    • 在布局处理完成后，浏览器会进入绘制阶段。
    • 绘制阶段，浏览器会遍历渲染树，将每个节点的内容绘制到屏幕上。这是一个渐进式的过程，边解析边绘制，以提高用户体验。
  6. JavaScript执行：
    • 在HTML解析过程中，如果遇到<script>标签，浏览器会暂停HTML解析，等待JavaScript文件下载并执行。
    • JavaScript代码可能会修改DOM或CSSOM，从而导致回流和重绘。因此，JavaScript的执行顺序和性能对页面渲染有很大影响。
    • 需要注意的是，使用defer或async属性可以改变JavaScript的加载和执行方式，以优化页面性能。
  7. 分层与合成（可选）：
    • 对于复杂的页面，浏览器可能会将页面分成多个图层（Layer），以提高渲染效率。
    • 每个图层都会单独生成绘制指令，并交给合成器线程进行合成和栅格化。
    • 合成器线程会将图层合并成一个完整的图像，然后显示在屏幕上。

此外，在渲染过程中，浏览器还会进行性能优化，如懒加载、按需加载、资源压缩等，以提高页面加载速度和用户体验。

5. 现代浏览器多进程 ​

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

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

6. 浏览器渲染进程 ​

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

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

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

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

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

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

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

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

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

8. 浏览器存储 ​

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

  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 文件和图像等。

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

9. localStorage、sessionStorage 和 cookie 的区别 ​

10. 浏览器缓存策略 ​

11. 浏览器缓存和 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 请求和响应中使用特定的头部字段来控制缓存的行为和验证缓存的有效性。

12. V8 垃圾回收 ​

13. JavaScript 的内存管理 ​

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

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

14. V8 和 WebKit 的区别 ​

V8和WebKit是两个在Web开发领域具有重要地位的技术组件，它们各自承担着不同的角色和功能。以下是V8和WebKit之间的主要区别：

  1. 定义与用途
    1. V8：
      • V8是Google开发的开源JavaScript引擎。
      • 它主要用于Google Chrome浏览器和Node.js平台，提供高性能的JavaScript执行环境。
    2. WebKit：
      • WebKit是一个开源的页面渲染以及逻辑处理引擎。
      • 它不仅包含JavaScript引擎（如早期的JavaScriptCore，后可能被其他引擎如V8替代），还包含用于解析和渲染HTML、CSS等内容的WebCore组件。
      • WebKit是Safari浏览器的基础，也被其他浏览器（如旧版Chrome，但Chrome后来转用了Blink作为渲染引擎，它是WebKit的一个分支）采用。
  2. 技术特点与优化
    1. V8：
      • 使用C++编写，专为高性能设计。
      • 采用Ignition和TurboFan两个编译器，分别负责代码的解释和优化。
      • 强调在现代硬件上的性能优化，尤其是在多核处理器上。
      • 引入了隐藏类（Hidden Classes）和内联缓存（Inline Caching）等优化技术，以提高对象属性访问和方法调用的效率。
    2. WebKit：
      • 包含多个模块，如WebCore（负责HTML、CSS的解析和渲染）、JavaScript引擎（如早期的JavaScriptCore）、WebKit Embedding API（负责浏览器UI与WebKit的交互）等。
      • JavaScript引擎部分（如JavaScriptCore）也使用C++编写，并采用了JIT（Just-In-Time）编译技术来提高执行效率。
      • WebKit注重跨平台兼容性和稳定性，支持多种操作系统和硬件平台。
  3. 应用场景与生态系统
    1. V8：
      • 广泛应用于需要高性能JavaScript执行环境的场景，如Chrome浏览器和Node.js。
      • Node.js利用V8引擎，使得JavaScript能够在服务器端运行，推动了全栈JavaScript开发的发展。
    2. WebKit：
      • 作为Safari浏览器的基础，为用户提供流畅的网页浏览体验。
      • 也被其他浏览器和开发者工具采用，用于构建基于Web的应用程序和服务。
  4. 发展趋势与未来
    1. V8：
      • 随着Web技术的不断发展，V8引擎也在不断进化，引入新的优化技术和特性。
      • V8在性能、内存管理、安全性等方面持续优化，以适应日益增长的Web应用需求。
    2. WebKit：
      • WebKit也在不断更新和完善，以支持新的Web标准和特性。
      • 随着Web应用的复杂性和交互性不断增加，WebKit在渲染性能、兼容性、安全性等方面也面临着持续的挑战和机遇。