前端react 面试题大全，不断补充中。

用户337480306665
238 阅读12分钟

  1. react 框架

    1. 在 React 18 中，SuspenseList 有哪些属性

      1. 在React 18中，SuspenseList组件有两个主要的属性：

      2. revealOrder：这个属性定义了Suspense组件的子组件是如何按顺序显示的。有三个可选值：

        • forwards：子组件从第一个开始依次显示。
        • backwards：子组件从最后一个开始依次显示。
        • together：所有子组件在所有数据准备就绪后一起显示。

      3. tail：这个属性定义了当revealOrder设为forwards或backwards时，未加载的项目如何显示。有三个可选值：

        • collapsed：未加载的项目会被隐藏，直到它们的前一个项目被加载后才会显示。
        • hidden：未加载的项目会被隐藏，直到所有项目都被加载后才会显示。
        • undefined：如果不设置tail，那么未加载的项目会立即显示它们的fallback UI。

  2. 浏览器输入url到展示页面的过程

    1. DNS 解析：浏览器首先会进行域名解析，找到与该 URL 对应的服务器的 IP 地址。这一步可能会从浏览器缓存、系统缓存、路由器缓存、ISP DNS 缓存、或者逐级向上的 DNS 服务器进行查询。
    2. 建立 TCP 连接：浏览器与服务器进行三次握手，确认连接的建立。首先客户端发送一个带有SYN标志的数据包给服务器，服务器接收后返回一个带有SYN/ACK标志的数据包，最后客户端再发送一个带有ACK标志的数据包，三次握手完成，TCP连接建立。
    3. 发送 HTTP 请求：浏览器向服务器发送一个 HTTP 请求。这个请求包含了很多信息，包括请求的方法（如 GET、POST），以及可能的 headers、cookies 等信息。
    4. 服务器处理请求并返回 HTTP 响应：服务器接收到请求后，会根据请求的路由和方法，进行相应的处理，并返回一个 HTTP 响应。响应中也包含了很多信息，如状态码（如 200、404）、响应的内容（如 HTML、JSON 等）、响应的 headers、cookies 等。
    5. 浏览器处理响应内容：浏览器接收到响应后，会根据响应的内容类型，进行相应的处理。如果是 HTML，那么浏览器会进行解析并渲染页面。
    6. 解析 HTML：浏览器会解析 HTML 文件构建 DOM 树。HTML 解析成一个 DOM 树的过程是逐步的，所以你可能已经注意到网页是逐步加载的。
    7. 请求并加载资源：在解析 HTML 并构建 DOM 的过程中，浏览器会请求并加载与 DOM 相关的资源，如 CSS 文件、JavaScript 文件、图片文件等。CSS 文件会被用来生成 CSSOM（CSS Object Model）。
    8. 执行 JavaScript：如果 HTML 中包含 JavaScript，那么 JavaScript 会被执行。注意，JavaScript 的执行可能会修改 DOM 树和 CSSOM。因为 JavaScript 可能会阻塞 DOM 的构建，所以现代网页通常会采用各种策略来优化这一点，如将脚本放在 HTML 的底部，或者使用 defer/async 属性。
    9. 渲染：当 DOM 树和 CSSOM 树构建完成后，浏览器会根据它们来构建渲染树（Render Tree），然后进行布局（计算元素的位置大小），最后绘制渲染树，将网页的内容呈现给用户。

3.浏览器缓存策略主要包括两种形式：强缓存和协商缓存。

** 1. 强缓存**：不会向服务器发送请求，直接从缓存中读取资源。在 Chrome 控制台的 Network 选项中可以看到该请求的 Size 显示为 from disk cache 或 from memory cache。强缓存通过 HTTP 头中的 Expires 和 Cache-Control 两个字段来控制。

    - **Expires**：HTTP/1.0 的产物，表示资源会在这个时间点后过期，需要再次请求。其值为服务器返回此响应的日期和时间加上某个时间段。这个时间是服务器时间，因此可能存在客户端与服务端时间不一致或者修改了本地时间的情况，这个缺点在 Cache-Control 中得到了改进。

    - **Cache-Control**：在 HTTP/1.1 中，用于替代 Expires，优先级高于 Expires。常见的取值有 private、public、no-cache、no-store、max-age、s-maxage 等。

**2. 协商缓存**：强缓存失效后，浏览器会携带缓存标识向服务器发送请求，由服务器决定是否使用缓存。主要通过两组字段来进行协商：Last-Modified 和 If-Modified-Since，Etag 和 If-None-Match。

    - **Last-Modified 和 If-Modified-Since**：服务器在返回资源时，通过 Last-Modified 标识此资源的最后修改时间。浏览器再次请求此资源时，通过 If-Modified-Since 携带上次返回的 Last-Modified 值，询问服务器资源是否有更新。如果没有更新，服务器返回 304 状态码，表示资源未修改，可以使用缓存。

    - **Etag 和 If-None-Match**：为了解决 Last-Modified 无法解决的一些问题，如资源更新的时间未变，但内容变化；资源更新频繁，秒级内多次修改等问题，HTTP/1.1 引入了 Etag。Etag 是服务器为每个资源生成的唯一标识符，可能是文件的哈希值等。只要资源有变化，Etag 就会重新生成。浏览器在请求资源时，会携带 If-None-Match 字段，该字段的值为上次请求返回的 Etag 值。如果 Etag 没有变化，服务器返回 304 状态码，表示资源未修改，可以使用缓存。

强缓存和协商缓存的运行机制是：浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识。浏览器每接收到返回的请求结果，都会将该结果和缓存标识存入浏览器缓存中。

当强缓存有效时，直接使用强缓存数据，不会发起请求。当强缓存失效时，携带缓存标识发起 HTTP 请求，服务器根据缓存标识决定是否使用缓存。协商缓存无论是否使用缓存，都会发起请求。

4. 配置缓存主要是通过设置HTTP响应头来实现的。以下是一些常见的HTTP响应头和它们的作用：

1. `Cache-Control`：这是最重要的缓存相关的响应头，它可以设置缓存的最大有效期，是否允许私有缓存，是否允许公共缓存等。例如，`Cache-Control: max-age=3600, private`表示资源的最大有效期为3600秒，且只允许在私有缓存中存储。

2. `Expires`：这个响应头设置了资源的过期时间，它是HTTP 1.0的产物，现在已经被`Cache-Control`的`max-age`指令所取代。但是为了兼容旧的HTTP 1.0客户端，有些服务器仍然会设置这个响应头。

3. `Last-Modified`：这个响应头表示资源的最后修改时间，它用于协商缓存。当客户端再次请求这个资源时，它会将这个时间值放在`If-Modified-Since`的请求头中，如果资源没有变化，服务器会返回304状态码，表示资源没有变化，客户端可以使用缓存。

4. `ETag`：这个响应头是资源的一个唯一标识，它也用于协商缓存。当客户端再次请求这个资源时，它会将这个值放在`If-None-Match`的请求头中，如果资源没有变化，服务器会返回304状态码，表示资源没有变化，客户端可以使用缓存。

在具体的Web服务器软件中，如何设置这些响应头的方法是不同的。例如，在Apache服务器中，你可以在`.htaccess`文件中使用`mod_expires`和`mod_headers`模块来设置这些响应头。在Nginx服务器中，你可以在`nginx.conf`文件中使用`expires`和`add_header`指令来设置。在Node.js的Express框架中，你可以使用`res.setHeader`方法来设置。

5. HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），即超文本传输安全协议，是以安全为目标的HTTP通道，简单讲是HTTP的安全版。

HTTPS的工作原理主要基于SSL/TLS协议来提供数据加密、服务器身份验证以及数据完整性保护。以下是HTTPS的工作流程：

1. **客户端发起请求**：当你在浏览器中输入一个https开头的URL并按下回车键时，浏览器会向服务器发起一个HTTPS连接请求。

2. **服务器返回证书**：服务器接收到请求后，会返回一个包含公钥的数字证书。这个证书通常由一个受信任的证书颁发机构（CA）签发，并包含了服务器的公钥、证书的有效期、证书的所有者等信息。

3. **客户端验证证书**：浏览器收到证书后，会验证证书的有效性。这包括验证证书是否过期，是否被吊销，是否由受信任的CA签发，以及证书中的域名是否和当前网站的域名相匹配。

4. **密钥交换**：如果证书验证通过，浏览器会生成一个随机的对称加密密钥（也叫会话密钥），然后用服务器的公钥加密这个会话密钥，再发送给服务器。

5. **服务器解密**：服务器收到浏览器发送的加密过的会话密钥后，会用自己的私钥解密，得到会话密钥。这样，服务器和浏览器就共享了一个会话密钥，他们可以用这个密钥进行对称加密通信。

6. **加密通信**：服务器和浏览器之间的所有通信都会用这个会话密钥加密，保证了数据的机密性和完整性。

7. **断开连接**：当通信结束后，会话密钥会被丢弃，如果需要再次通信，就需要重新进行密钥交换。

通过以上步骤，HTTPS实现了数据的加密传输，防止了中间人攻击，保证了数据的机密性和完整性。

6. js 遍历数组的方法 1. for循环 1. for...in循环 1. for...of循环 1. forEach()方法 1. map()方法 1. reduce()方法 1. filter()方法

  1. 什么是闭包

    在JavaScript中，闭包是一个非常重要的概念。闭包是指那些能够访问自身作用域外部作用域的函数。在JavaScript中，只有函数可以创建作用域，因此闭包通常表现为一个函数包含对其外部作用域的引用。

    具体来说，当一个函数被定义在另一个函数内部时，内部函数可以访问其外部函数的变量，即使外部函数已经执行完毕并返回，这些变量仍然可以被内部函数访问。这就是闭包的基本概念。

  2. js 时间循环中，什么是宏任务，什么是微任务。

    JavaScript的事件循环是其执行异步操作的机制。在事件循环中，有两种任务类型：宏任务（MacroTask）和微任务（MicroTask）。

    1. 宏任务（MacroTask）：包括整体代码script，setTimeout，setInterval，setImmediate（Node环境），I/O，UI rendering等。每一个宏任务会形成一个新的执行上下文。
    2. 微任务（MicroTask）：包括Promise，process.nextTick（Node环境），MutationObserver（浏览器环境）等。微任务通常来自于JavaScript引擎的内部队列，是当前宏任务执行完毕后立即执行的任务。

    事件循环的流程大致如下：

    1. 先执行整体的script主代码（宏任务）。
    2. 执行过程中，同步任务直接执行，宏任务进入宏任务队列，微任务进入微任务队列。
    3. 当前宏任务执行完毕，立即执行所有微任务（如果在执行微任务过程中，产生了新的微任务，也会加入到微任务队列的末尾，一并执行）。
    4. 当所有微任务执行完毕，看是否需要执行UI渲染。
    5. 然后继续下一个宏任务，执行同样的流程。

    这种机制保证了在宏任务执行过程中，任何微任务都不会被阻塞，都会在当前宏任务结束后立即执行。

  3. react18 setState后，发生了什么？

    在React 18中，当你调用setState方法后，React会进行以下步骤：

    1. 调度更新：首先，React将新的state和组件实例放入一个更新队列中，而不会立即更新组件。这是因为React可能会在多次setState调用之后一次性更新组件，以提高性能。

    2. 开始Reconciliation过程：当更新被调度后，React会开始Reconciliation（协调）过程。在这个过程中，React会比较新旧两个state，确定是否需要更新DOM。

    3. 渲染组件：如果确定需要更新DOM，React会开始渲染组件。这包括调用render方法，并将新的state传递给它。然后，React会生成一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较。

    4. Commit阶段：在这个阶段，React会将在Reconciliation过程中确定的所有DOM更新应用到实际的DOM中。在这个阶段，React会调用componentDidUpdate和componentDidMount等生命周期方法。

    5. 调用回调函数：如果你在setState方法中提供了一个回调函数，React会在更新完成后调用它。

    值得注意的是，React 18引入了新的并发模式（Concurrent Mode），它允许React在渲染过程中中断和恢复工作，以保持应用的响应性。这意味着React可能会在处理其他更重要的更新或事件（如用户输入）时，中断正在进行的渲染工作。

avatar
文章
阅读
粉丝