2023.05.04 - 2023.05.06 更新前端面试问题总结（12道题）
获取更多面试相关问题可以访问
github 地址: https://github.com/pro-collection/interview-question/issues gitee 地址: https://gitee.com/yanleweb/interview-question/issues

初级开发者相关问题【共计 1 道题】
- 340.值类型和引用类型的区别?【热度: 1,625】【JavaScript】
中级开发者相关问题【共计 7 道题】
- 329.常见图片懒加载方式有哪些？【热度: 1,001】【web应用场景】
- 330.cookie 构成部分有哪些【热度: 598】【浏览器、web应用场景】
- 331.扫码登录实现方式【热度: 734】【web应用场景】
- 332.DNS 协议了解多少【热度: 712】【网络、web应用场景】【出题公司: 腾讯】
- 335.HTTP 304 状态码表达的请求过程是什么【热度: 459】【网络】【出题公司: 阿里巴巴】
- 336.[React] 事件绑定原理【热度: 1,097】【web框架】【出题公司: 小米】
- 337.函数式编程了解多少？【热度: 1,789】【web应用场景】【出题公司: 百度】
高级开发者相关问题【共计 4 道题】
- 328.script 预加载方式有哪些，这些加载方式有何区别？【热度: 420】【浏览器、web应用场景】
- 333.TCP/IP 如何保证数据包传输的有序可靠【热度: 336】【网络】【出题公司: 腾讯】
- 338.JavaScript 对象的底层数据结构是什么【热度: 517】【JavaScript】
- 339.JavaScript 中的变量在内存中的具体存储形式是什么【热度: 183】【JavaScript】

初级开发者相关问题【共计 1 道题】

340.值类型和引用类型的区别?【热度: 1,625】【JavaScript】

关键词：值类型和引用类型区别

在JavaScript中，值类型和引用类型是两种不同的数据类型，它们之间的区别在于数据存储和传递的方式不同。

值类型（也称为“原始类型”）包括 undefined、null、boolean、number和string。这些数据类型的值是可以直接存储在变量中的，这意味着如果我们将一个值类型的变量赋给另一个变量时，实际上是将值复制到新变量的内存空间中。在JavaScript中，值类型的变量是直接存储在栈中的。因此，值类型的变量永远不会出现“引用计数”错误，因为每个变量都可以被简单地复制和赋值。

引用类型包括对象、数组和函数等复杂数据类型。和值类型不同，引用类型的值是存储在堆中的，栈中存储的是变量的引用地址。当我们把一个引用类型的变量赋给另一个变量时，实际上是将变量的引用地址复制到了新变量的内存空间中。这意味着这两个变量引用同一个对象。如果我们修改一个变量，那么另一个变量也会被修改；因为它们引用同一个对象。如果我们在堆中创建多个对象，则会有多个变量引用它们。这一点需要非常小心，因为它可以导致一些问题，如“引用计数”错误。

总之，JavaScript中的值类型和引用类型之间的区别在于它们如何存储和传递。理解这两种不同的数据类型的工作原理，可以帮助我们更好地理解JavaScript的内部工作原理，从而更好地编写代码。

举例说明

下面是一个简单的例子，来说明值类型和引用类型在操作时的区别：

   // 值类型
var x = 1;
var y = x;
x = 2;
console.log(x); // 输出2 
console.log(y); // 输出1// 引用类型
var a = {name: 'Tom', age: 20};
var b = a;
a.age = 30;
console.log(a.age); // 输出30 
console.log(b.age); // 输出30，原因是 a 和 b 指向同一个对象

在这个例子中，我们首先创建一个值类型变量 x，并将其值设置为 1。接着我们将 x 的值赋给 y 变量。然后我们将 x 的值修改为 2，这不会影响变量 y，因为 x 和 y 之间的赋值使用的是值复制。这是值类型的典型特性。

接下来，我们创建了一个包含 name 和 age 属性的对象 a，并将其赋给变量 b。然后我们修改了 a 的 age 属性的值。此时，由于 a 和 b 引用同一个对象，因此 b.age 的值也随之改变，这才是引用类型的典型特性。

在代码中我们看到，值类型的变量在赋值时是通过复制整个值本身的副本，在内存中分配了新的空间来存储。而引用类型的变量赋值时是将指针复制到新变量中，用来指向堆（heap）中存储对象的内存空间。

中级开发者相关问题【共计 7 道题】

329.常见图片懒加载方式有哪些？【热度: 1,001】【web应用场景】

关键词：图片懒加载、Intersection Observer API

图片懒加载可以延迟图片的加载，只有当图片即将进入视口范围时才进行加载。这可以大大减轻页面的加载时间，并降低带宽消耗，提高了用户的体验。以下是一些常见的实现方法：

Intersection Observer API

Intersection Observer API 是一种用于异步检查文档中元素与视口叠加程度的API。可以将其用于检测图片是否已经进入视口，并根据需要进行相应的处理。

   let observer = new IntersectionObserver(function (entries) {entries.forEach(function (entry) {if (entry.isIntersecting) {const lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;observer.unobserve(lazyImage);}});
});const lazyImages = [...document.querySelectorAll(".lazy")];
lazyImages.forEach(function (image) {observer.observe(image);
});

自定义监听器

或者，可以通过自定义监听器来实现懒加载。其中，应该避免在滚动事件处理程序中频繁进行图片加载，因为这可能会影响性能。相反，使用自定义监听器只会在滚动停止时进行图片加载。

   function lazyLoad() {const images = document.querySelectorAll(".lazy");const scrollTop = window.pageYOffset;images.forEach((img) => {if (img.offsetTop < window.innerHeight + scrollTop) {img.src = img.dataset.src;img.classList.remove("lazy");}});
}let lazyLoadThrottleTimeout;
document.addEventListener("scroll", function () {if (lazyLoadThrottleTimeout) {clearTimeout(lazyLoadThrottleTimeout);}lazyLoadThrottleTimeout = setTimeout(lazyLoad, 20);
});

在这个例子中，我们使用了 setTimeout() 函数来延迟图片的加载，以避免在滚动事件的频繁触发中对性能的影响。

无论使用哪种方法，都需要为需要懒加载的图片设置占位符，并将未加载的图片路径保存在 data 属性中，以便在需要时进行加载。这些占位符可以是简单的 div 或样式类，用于预留图片的空间，避免页面布局的混乱。

   <!-- 占位符示例 -->
<div class="lazy-placeholder" style="background-color: #ddd;height: 500px;"></div><!-- 图片示例 -->
<img class="lazy" data-src="path/to/image.jpg" alt="预览图" />

总体来说，图片懒加载是一种这很简单，但非常实用的优化技术，能够显著提高网页的性能和用户体验。

330.cookie 构成部分有哪些【热度: 598】【浏览器、web应用场景】

关键词：cookie 构成部分、cookie 作用路径、cookie 作用域

在 HTTP 协议中，cookie 是一种包含在请求和响应报文头中的数据，用于在客户端存储和读取信息。cookie 是由服务器发送的，客户端可以使用浏览器 API 将 cookie 存储在本地进行后续使用。

一个 cookie 通常由以下几个部分组成：

名称：cookie 的名称（键），通常是一个字符串。
值：cookie 的值，通常也是一个字符串。
失效时间：cookie 失效的时间，过期时间通常存储在一个 expires 属性中，以便浏览器自动清除失效的 cookie。
作用路径：cookie 的作用路径，只有在指定路径下的请求才会携带该 cookie。
作用域：cookie 的作用域，指定了该 cookie 绑定的域名，可以使用 domain 属性来设置。

例如，以下是一个设置了名称为 “user”、值为 “john”、失效时间为 2022 年 1 月 1 日，并且作用于全站的 cookie：

Set-Cookie: user=john; expires=Sat, 01 Jan 2022 00:00:00 GMT; path=/; domain=example.com

其中，Set-Cookie 是响应报文头，用于设置 cookie。在该响应报文中，将 cookie 数据设置为 “user=john”，失效时间为 “2022年1月1日”，作用路径为全站，作用域为 “example.com” 的域名。这个 cookie 就会被存储在客户端，以便在以后的请求中发送给服务器。

331.扫码登录实现方式【热度: 734】【web应用场景】

关键词：扫码登录

扫码登录的实现原理核心是基于一个中转站，该中转站通常由应用提供商提供，用于维护手机和PC之间的会话状态。

整个扫码登录的流程如下：

用户在PC端访问应用，并选择使用扫码登录方式。此时，应用生成一个随机的认证码，并将该认证码通过二维码的形式显示在PC端的页面上。
用户打开手机上的应用，并选择使用扫码登录方式。此时，应用会打开手机端的相机，用户可以对着PC端的二维码进行扫描。
一旦用户扫描了二维码，手机上的应用会向应用提供商的中转站发送一个请求，请求包含之前生成的随机认证码和手机端的一个会话ID。
中转站验证认证码和会话ID是否匹配，如果匹配成功，则该中转站将用户的身份信息发送给应用，并创建一个PC端和手机端之间的会话状态。
应用使用收到的身份信息对用户进行认证，并创建一个与该用户关联的会话状态。同时，应用返回一个通过认证的响应给中转站。
中转站将该响应返回给手机端的应用，并携带一个用于表示该会话的令牌，此时手机和PC之间的认证流程就完成了。
当用户在PC端进行其他操作时，应用将会话令牌附加在请求中，并通过中转站向手机端的应用发起请求。手机端的应用使用会话令牌（也就是之前生成的令牌）来识别并验证会话状态，从而允许用户在PC端进行需要登录的操作。

332.DNS 协议了解多少【热度: 712】【网络、web应用场景】【出题公司: 腾讯】

关键词：DNS协议、DNS加速

DNS 基本概念

DNS（Domain Name System，域名系统）是因特网上用于将主机名转换为 IP 地址的协议。它是一个分布式数据库系统，通过将主机名映射到 IP 地址来实现主机名解析，并使用户能够通过更容易识别的主机名来访问互联网上的资源。

在使用 DNS 协议进行主机名解析时，系统首先查询本地 DNS 缓存。如果缓存中不存在结果，系统将向本地 DNS 服务器发出请求，并逐级向上查找，直到找到权威 DNS 服务器并获得解析结果。在域名解析的过程中，DNS 协议采用了分级命名空间的结构，不同的域名可以通过点分隔符分为多个级别，例如 www.example.com 可以分为三个级别：www、example 和 com。

除了将域名映射到 IP 地址之外，DNS 协议还支持多种其他功能：

逆向映射：将 IP 地址解析为域名。
邮件服务器设置：支持邮件服务器的自动发现和设置。
负载均衡：DNS 还可以实现简单的负载均衡，通过将相同 IP 地址的主机名映射到不同的 IP 地址来分散负载。
安全：DNSSEC（DNS Security Extensions，DNS 安全扩展）可以提供对域名解析的认证和完整性。

如何加快 DNS 的解析？

有以下几种方法可以加快 DNS 的解析：

使用高速 DNS 服务器：默认情况下，网络服务提供商（ISP）为其用户提供 DNS 服务器。但是，这些服务器不一定是最快的，有时会出现瓶颈。如果您想加快 DNS 解析，请尝试使用其他高速 DNS 服务器，例如 Google 的公共 DNS 服务器或 OpenDNS。
缓存 DNS 记录：在本地计算机上缓存 DNS 记录可以大大加快应用程序的响应。当您访问特定的网站时，计算机会自动缓存该网站的 DNS 记录。如果您再次访问该网站，则计算机将使用缓存的 DNS 记录。
减少 DNS 查找：当您访问一个网站时，您的计算机将会查找该域名的 IP 地址。如果网站有很多域名，则查找过程可能会变得非常缓慢。因此，尽可能使用较少的域名可以减少 DNS 查找的数量，并提高响应速度。
使用 CDN：CDN（内容分发网络）是一种将内容存储在全球多个位置的系统。这些位置通常都有专用的 DNS 服务器，可以大大加快站点的加载速度。
使用 DNS 缓存工具：一些辅助工具可以帮助您优化与 DNS 相关的设置，例如免费的 DNS Jumper 软件和 Namebench 工具，它们可以测试您的 DNS 响应时间并为您推荐最佳配置。

通过使用高速 DNS 服务器、缓存 DNS 记录、减少 DNS 查找、使用 CDN 和 DNS 缓存工具等方法，可以显著提高 DNS 解析速度，从而加快应用程序响应时间。

335.HTTP 304 状态码表达的请求过程是什么【热度: 459】【网络】【出题公司: 阿里巴巴】

关键词：304状态码、304请求过程、304过程、304请求

HTTP 304 状态码是表示所请求的资源未修改，可以直接使用客户端缓存的版本。当客户端发送 GET 请求时，服务器会检查该资源的 ETag（实体标签）或 Last-Modified（最后修改时间）等信息，与客户端缓存中的相应信息进行比较。如果这些信息相同，则表示资源未发生更改，服务器返回 304 状态码，告诉客户端直接使用本地缓存的资源即可，无需重新下载，这样可以大大节省网络带宽和服务器资源消耗。

下面是 HTTP 304 的具体过程：

客户端首先给服务器发送一个请求，该请求包含了一个 If-Modified-Since 或者 If-None-Match 字段，用来在服务器端判断访问的资源是否已经被修改过。
如果服务器端检查发现访问的资源没有发生改变，服务器就不会发送资源内容，而是返回 304 的状态码给客户端。
客户端接收到 304 的状态码后，会从本地缓存中加载相应的资源。
如果服务器端发现访问的资源已经发生过改变，服务器会发送新的资源内容给客户端，并且返回 200 的状态码。

需要注意的是，客户端缓存中的资源不一定完全等同于服务器端的资源，可能由于缓存失效等原因导致客户端缓存中的资源与服务器端不完全一致，因此在实际应用中，需要谨慎使用 304 缓存机制，尤其对于那些变化频繁的资源，建议设置较短的缓存时间，以避免出现缓存失效等问题。

336.[React] 事件绑定原理【热度: 1,097】【web框架】【出题公司: 小米】

关键词：react事件绑定、react合成事件、react事件监听

绑定原理与过程

在 React 中，事件绑定不同于传统的直接在 HTML 元素添加事件监听器的方式。React 的事件绑定是建立在自定义组件上的，因此需要对 React 组件的生命周期进行理解。

React 事件绑定的原理可以概括为三个步骤：

创建 React 元素

在 React 中，事件的绑定是通过在 JSX 中创建元素时给元素添加一个事件属性实现的。例如：

<button onClick={this.handleClick}>点我</button>

这里使用 onClick 属性将组件的 handleClick 方法传递给一个按钮组件，这个按钮组件在点击之后会调用 handleClick 方法。

挂载事件处理函数

当 React 元素插入文档中之后，React 会在元素宿主节点上挂载事件处理函数。这个过程是在 React 元素生成之后、组件挂载之前完成的。React 在执行组件挂载生命周期函数之前，会将所有元素上声明的事件处理函数统一挂载到 DOM 上。

移除事件处理函数

当 React 元素被移除文档时，React 会自动移除对应的事件处理函数。这个过程是在组件卸载之后、元素从 DOM 中移除之前执行的。

React 的事件绑定表现为组件的方法，所以在事件处理函数中，可以通过 this 关键字来访问组件的状态和属性。

需要注意的是，React 组件中不能使用原生事件绑定方式，比如使用 element.addEventListener('click', function(){})，因为这样做会导致 React 无法正确地跟踪组件状态的变化，从而可能导致一些潜在问题。

React 组件中为何不能使用原生事件绑定方式

React 组件中不能使用原生事件绑定方式是因为，React 使用的是 Virtual DOM 技术，而不是直接操作 DOM。React 的 Virtual DOM 能够自动监测组件（即数据）状态的变化和更新，从而根据更新后的状态重新渲染视图，并在必要的时候更新真实 DOM。

如果使用原生事件绑定方式，比如使用 element.addEventListener('click', function(){})，那么这些绑定的事件处理函数是直接绑定在真实的 DOM 元素上的，并不参与 Virtual DOM 中的数据流程，这样就会导致以下两个问题：

事件绑定后，如果组件状态变化并且重新渲染，那么重新渲染后的组件实例会重新创建一个新的 DOM 元素，而旧的 DOM 元素会被销毁，导致原来的事件处理函数被绑定在了一个不存在的元素上，导致事件失效。
使用原生事件绑定方式，无法在事件处理函数中直接访问组件实例的状态和属性。例如，在事件处理函数中想要访问一个组件的状态或者属性，就必须使用组件实例的引用（即 this 指针），但是这个 this 指针指向的并不是组件实例本身，而是真实的 DOM 元素，这样就无法直接访问组件状态和属性。

因此，在 React 中，我们必须使用 onClick 等钩子函数来绑定事件处理函数，这样 React 就能够在其 Virtual DOM 中正确地跟踪组件状态变化，并保证事件处理函数的正确性。当然，在一些极端的情况下，React 也提供了访问真实 DOM 元素的机制，比如 ref 属性，这个可以在某些场景下使用。

337.函数式编程了解多少？【热度: 1,789】【web应用场景】【出题公司: 百度】

关键词：函数式编程

函数式编程的核心概念

函数式编程是一种编程范式，它将程序看做是一系列函数的组合，函数是应用的基础单位。函数式编程主要有以下核心概念：

纯函数：函数的输出只取决于输入，没有任何副作用，不会修改外部变量或状态，所以对于同样的输入，永远返回同样的输出值。因此，纯函数可以有效地避免副作用和竞态条件等问题，使得代码更加可靠、易于调试和测试。
不可变性：在函数式编程中，数据通常是不可变的，即不允许在内部进行修改。这样可以避免副作用的发生，提高代码可靠性。
函数组合：函数可以组合成复杂的函数，从而减少重复代码的产生。
高阶函数：高阶函数是指可以接收其他函数作为参数，也可以返回函数的函数。例如，函数柯里化和函数的组合就是高阶函数的应用场景。
惰性计算：指在必要的时候才计算（执行）函数，而不是在每个可能的执行路径上都执行，从而提高性能。

函数式编程的核心概念是将函数作为基本构建块来组合构建程序，通过纯函数、不可变性、函数组合、高阶函数和惰性计算等概念来实现代码的简洁性、可读性和可维护性，以及高效的性能运行。

函数式编程的优势

函数式编程有以下优势：

易于理解和维护：函数式编程强调数据不变性和纯函数概念，可以提高代码的可读性和可维护性，因为它避免了按照顺序对变量进行修改，并强调函数行为的确定性。
更少的 bug：由于函数式编程强调纯函数的概念，它可以消除由于副作用引起的bug。因为纯函数不会修改外部状态或数据结构，只是将输入转换为输出。这么做有助于保持代码更加可靠。
更好的可测试性：由于纯函数不具有副作用，它更容易测试，因为测试数据是预测性的。
更少的重构：函数式编程使用函数组合和柯里化等方法来简化代码。它将大型问题分解为微小问题，从而减少了代码重构的需要。
避免并发问题：由于函数式编程强调不变性和纯函数的概念，这使得并发问题变得更简单。纯函数允许并行运行，因此，当程序在不同的线程上执行时，它更容易保持同步。
代码复用：由于函数是基本构建块，并且可以组合成更高级别的功能块，使用函数式编程可以更大程度上推崇代码复用，减少代码冗余。

函数式编程通过强调纯函数、不可变数据结构和函数组合等概念，可以提高代码可读性和可维护性，降低程序bug出现的风险，更容易测试，并且更容易将问题分解为更容易处理的小部分，更好地应对并发和可扩展性。

高级开发者相关问题【共计 4 道题】

328.script 预加载方式有哪些，这些加载方式有何区别？【热度: 420】【浏览器、web应用场景】

关键词：script 预加载

在浏览器中，可以通过预加载 JavaScript 脚本来提高性能和用户体验。预加载是指在浏览器解析完当前页面之前，提前加载并解析相关资源（例如 JavaScript 文件、CSS 文件等）。这样可以在用户请求访问其他页面时，减少资源加载的时间和延迟，从而提高页面加载速度和用户体验。

以下是两种预加载 JavaScript 脚本的方法：

defer 属性

<script> 标签的 defer 属性可以告诉浏览器，让 JavaScript 文件在页面文档解析完成之后再执行。这种方式可以保证页面不会因为脚本加载和执行而被阻塞，同时又能够保证脚本能够按照正确的顺序执行（即按照在 HTML 中出现的顺序，因为 defer 属性会按照这个顺序依次加载和执行）。

   <!DOCTYPE html>
<html><head><title>My Page</title><script src="script1.js" defer></script><script src="script2.js" defer></script></head><body>...</body>
</html>

prefetch 和 preload

预加载的另一种方法是使用 Link 标签的 prefetch 或 preload 属性。这种方法可以在不影响当前页面加载的情况下，预先加载需要后续页面需要的 JavaScript 文件和其他资源。

其中，prefetch 属性指示浏览器预先加载并缓存 JavaScript 文件，但不会立即执行文件。而 preload 属性则会在浏览器空闲时立即加载文件，并且可以指定文件的类型、优先级等属性。

   <head><title>My Page</title><link rel="prefetch" href="script1.js" /><link rel="preload" href="script2.js" as="script" />
</head>

需要注意的是，使用 prefetch 和 preload 属性时，应该避免将其用于太多的资源文件，否则可能会引发网络瓶颈和性能问题。可以在需要优化的资源文件上使用这些属性，并通过测试和性能分析来调整其预加载的优先级和时机，以达到最优化的预加载效果。

333.TCP/IP 如何保证数据包传输的有序可靠【热度: 336】【网络】【出题公司: 腾讯】

关键词：TCP/IP 可靠性、TCP/IP 序列号、TCP/IP 超时

TCP/IP 采用以下几种机制来保证数据包传输的有序可靠：

确认和重传：每当 TCP/IP 协议收到一个数据包时，将向发送方回送一个确认信息。如果接收方未收到数据包，则发送方将重传该数据包。这种确认和重传的机制可以确保数据包能够可靠地传输，即使在网络故障或拥塞的情况下也能保证数据包的可靠性。
滑动窗口：滑动窗口是 TCP/IP 协议用来控制发送方和接收方之间数据流的一种机制。发送方会将窗口大小告知接收方，接收方在收到数据包时，会回送一个告知发送方可以继续发送数据的指令。滑动窗口机制可以通过有效地控制数据包的发送与接收，实现有序的数据传输。
序列号：每个数据包都会附带一个序列号，接收方通过序列号对数据包进行排序，从而实现传输的有序性。
超时重传时间：TCP/IP 建立了一个计时器，如果在指定时间内没有收到确认信息，则会重新发送未确认的数据包。这种机制可以帮助保证数据包传输的可靠性，确保数据包能够及时被送达。

总之，TCP/IP 协议通过确认和重传、滑动窗口、序列号以及超时重传时间等机制，保证了数据包传输的有序可靠性。这些机制可以确保数据包能够被及时送达，有效地防止了数据包丢失、重复和乱序等问题，从而提供了高效可靠的传输服务。

338.JavaScript 对象的底层数据结构是什么【热度: 517】【JavaScript】

关键词：JavaScript 对象数据结构

在JavaScript中，对象是一种无序的键值对集合，可以保存和传递信息。对象是一种非常重要的数据类型，在JavaScript中，几乎所有东西都是对象。

在底层，JavaScript对象的数据结构是哈希表（Hash Table），也可以称为散列表。哈希表是一种使用哈希函数将键值映射到数据中的位置的数据结构。它允许效率高且快速地插入、查找和删除数据，这些操作在算法的平均情况下都需要常数时间。哈希表的主要思想是将键值对转换为索引的方式在常数时间内获取值，因此哈希表非常适合用于大量的键值对数据存储。

在JavaScript中，对象的键值对存储使用了类似哈希表的技术。JavaScript引擎使用一个称为哈希表种子的随机数字来计算键的哈希值，然后使用头插法（链表或树）将键和值存储在桶中，以实现高效的插入和查询操作。因此，JavaScript对象在实现上使用了哈希表来存储和访问键值对，从而提供了非常高效的数据存储和查找操作，使之成为了编写JavaScript代码的强大工具。