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

目录：

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

  • 994. 实现一个 JS 函数， 功能是从数组中随机取一个元素【热度: 215】【JavaScript】

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

  • 977. iterator 对象有哪些特征【热度: 288】【JavaScript】
  • 979. node 中 nextTick 与 setTimeout 有什么区别【热度: 220】【Nodejs】
  • 982. [React] 在 redux 中如何写一个记录状态变更的日志插件【热度: 52】【web框架】【出题公司: 腾讯】
  • 987. 实现一个 once 函数，记忆返回结果只执行一次【热度: 319】【JavaScript】
  • 990. 查找页面出现次数最多的 HTML 标签【热度: 379】【web应用场景】
  • 992. 常见的 http code 4xx 都有哪些状态码【热度: 545】【网络】【出题公司: 美团】
  • 993. 304 是什么状态码， 跟哪些 header 有关【热度: 546】【网络】【出题公司: 美团】
  • 996. 如何实现页面文本不可选中，不可复制【热度: 255】【web应用场景】【出题公司: 京东】

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

  • 978. iterator 和 数组 有什么关系【热度: 119】【JavaScript】
  • 980. [React] 对象数据状态不可变是什么概念【热度: 113】【web框架】【出题公司: 阿里巴巴】
  • 981. [React] 如何实践数据不可变状态【热度: 114】【web框架】【出题公司: 阿里巴巴】
  • 983. [React] 在 setState 时发生了什么【热度: 169】【web框架】【出题公司: 小米】
  • 984. HTTPS 安全协议主要是啥【热度: 779】【网络】
  • 985. https 加密协议里面: TLS 和 SSL 分别是什么，有何区别【热度: 51】【网络】
  • 986. https 层可以做哪些性能优化【热度: 172】【网络】
  • 988. [React]在应用中如何排查性能问题【热度: 255】【web框架】【出题公司: TOP100互联网】
  • 989. 有哪些前端性能分析工具【热度: 400】【web应用场景】【出题公司: TOP100互联网】
  • 991. 部署一个 node 应用要考虑哪些因素【热度: 98】【Nodejs、工程化】【出题公司: 腾讯】
  • 995. http3 有哪些核心的新特性【热度: 313】【网络】

994. 实现一个 JS 函数， 功能是从数组中随机取一个元素【热度: 215】【JavaScript】

关键词：随机取数函数

以下是使用 JavaScript 实现从数组中随机取一个元素的函数：

复制 1function getRandomElement(arr) {
 2  if (!Array.isArray(arr) || arr.length === 0) {
 3    return null;
 4  }
 5  const randomIndex = Math.floor(Math.random() * arr.length);
 6  return arr[randomIndex];
 7}

你可以这样使用这个函数：

复制 1const array = [1, 2, 3, 4, 5];
 2const randomElement = getRandomElement(array);
 3console.log(randomElement);

977. iterator 对象有哪些特征【热度: 288】【JavaScript】

关键词：iterator 对象

在 JavaScript 中，Iterator（迭代器）对象具有以下特征：

一、定义与目的

1. 实现特定迭代行为：
   • Iterator 对象是为了实现对可迭代对象（如数组、字符串、集合等）的遍历操作而设计的。它提供了一种标准化的方式来依次访问可迭代对象中的元素。

二、主要特征

1. 具有next()方法：

   • Iterator 对象必须有一个next()方法。每次调用这个方法，它会返回一个对象，该对象包含两个属性：
     • value：表示当前迭代位置的元素值。如果迭代已经完成，这个值为undefined。
     • done：一个布尔值，表示迭代是否已经完成。如果迭代完成，done为true；否则为false。
   • 例如：

   复制 1const iterable = [1, 2, 3];
    2const iterator = iterable[Symbol.iterator]();
    3console.log(iterator.next()); // { value: 1, done: false }
    4console.log(iterator.next()); // { value: 2, done: false }
    5console.log(iterator.next()); // { value: 3, done: false }
    6console.log(iterator.next()); // { value: undefined, done: true }

2. 与可迭代对象关联：

   • Iterator 对象通常是由可迭代对象通过调用其Symbol.iterator方法生成的。不同的可迭代对象可以生成不同的 Iterator 对象，但它们都遵循相同的next()方法约定。
   • 例如，数组的Symbol.iterator方法会返回一个 Iterator 对象，用于遍历数组的元素。

3. 单向遍历：

   • Iterator 对象通常只能进行单向遍历，即从可迭代对象的起始位置依次访问到结束位置，不能反向遍历。一旦迭代完成，再次调用next()方法将始终返回{ value: undefined, done: true }。

4. 可用于各种迭代场景：

   • Iterator 对象可以与for...of循环、扩展运算符（...）、解构赋值等语言特性一起使用，使得对可迭代对象的遍历更加简洁和方便。
   • 例如：

   复制 1const iterable = [1, 2, 3];
    2for (const value of iterable) {
    3  console.log(value);
    4}

   • 这里的for...of循环内部会自动调用可迭代对象的Symbol.iterator方法获取 Iterator 对象，并依次调用其next()方法来遍历元素。

Iterator 对象在 JavaScript 中提供了一种灵活和统一的方式来遍历可迭代对象，通过next()方法和特定的返回值格式，实现了对可迭代对象的有序访问和迭代控制。

979. node 中 nextTick 与 setTimeout 有什么区别【热度: 220】【Nodejs】

关键词：nextTick 与 setTimeout 区别

在 Node.js 中，process.nextTick()和setTimeout()有以下区别：

一、执行时机

1. process.nextTick()：

   • nextTick会在当前事件循环的当前阶段结束后立即执行回调函数。这意味着它会在所有同步代码执行完毕后，但在事件循环进入下一个阶段之前执行。
   • 例如：

   复制 1console.log("Sync code");
    2process.nextTick(() => {
    3  console.log("NextTick callback");
    4});
    5console.log("After nextTick call");

   • 在这个例子中，输出顺序将是“Sync code”，“After nextTick call”，然后是“NextTick callback”。

2. setTimeout()：

   • setTimeout会在指定的延迟时间过后，将回调函数添加到事件循环的定时器阶段进行执行。实际的执行时间可能会比指定的延迟时间稍长，因为它取决于事件循环的负载和其他正在等待执行的任务。
   • 例如：

   复制 1console.log("Sync code");
    2setTimeout(() => {
    3  console.log("Timeout callback");
    4}, 0);
    5console.log("After setTimeout call");

   • 在这个例子中，输出顺序通常是“Sync code”，“After setTimeout call”，然后在一段时间后是“Timeout callback”。

二、用途

1. process.nextTick()：

   • 通常用于在当前操作完成后尽快执行一些关键任务，而不希望阻塞事件循环的其他任务。例如，在异步函数中，可能需要在返回控制给调用者之前执行一些清理操作，可以使用nextTick来确保这些操作在当前阶段完成后立即执行。
   • 它也可以用于避免深度递归导致的栈溢出，通过将递归操作拆分成多个nextTick回调，可以控制执行的深度，防止栈的过度增长。

2. setTimeout()：

   • 主要用于在特定的延迟时间后执行某个任务。例如，实现超时处理、定期执行某个任务或者在一定时间后触发某个操作。
   • setTimeout可以设置不同的延迟时间，以满足不同的需求。

三、性能影响

1. process.nextTick()：

   • 过度使用nextTick可能会导致事件循环被阻塞，因为它会在当前阶段结束后立即执行回调，而如果连续调用nextTick，可能会导致其他任务无法及时执行。
   • 在一些情况下，可能会导致性能问题，特别是当有大量的nextTick回调排队等待执行时。

2. setTimeout()：

   • 由于setTimeout是在定时器阶段执行，它不会像nextTick那样立即阻塞事件循环。但是，如果设置的延迟时间过短，可能会导致频繁的定时器触发，增加事件循环的负担。
   • 需要注意的是，setTimeout的最小延迟时间在不同的浏览器和 Node.js 环境中可能会有所不同，并且实际的延迟时间可能会受到系统负载和其他因素的影响。

982. [React] 在 redux 中如何写一个记录状态变更的日志插件【热度: 52】【web框架】【出题公司: 腾讯】

关键词：redux 插件

在 Redux 中，可以编写一个日志插件来记录状态的变更。以下是实现的步骤：

1. 创建日志插件函数：

复制 1const loggerMiddleware = (store) => (next) => (action) => {
 2  console.log("prev state", store.getState());
 3  console.log("action", action);
 4  const result = next(action);
 5  console.log("next state", store.getState());
 6  return result;
 7};

这个函数接收一个 Redux store 对象，返回一个中间件函数。这个中间件函数接收下一个中间件的调用函数next和当前的动作action。

2. 将日志插件添加到 Redux store：

复制 1import { createStore, applyMiddleware } from "redux";
 2import rootReducer from "./reducers";
 3import loggerMiddleware from "./loggerMiddleware";
 4
 5const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

在创建 Redux store 的时候，使用applyMiddleware函数将日志插件中间件添加到 store 中。

这样，每当有动作被派发时，日志插件就会在控制台打印出当前的状态、动作和下一个状态，从而实现记录状态变更的目的。

987. 实现一个 once 函数，记忆返回结果只执行一次【热度: 319】【JavaScript】

关键词：once 函数

以下是使用 JavaScript 实现一个once函数的方法：

复制 1function once(func) {
 2  let hasRun = false;
 3  let result;
 4  return function () {
 5    if (!hasRun) {
 6      result = func.apply(this, arguments);
 7      hasRun = true;
 8    }
 9    return result;
10  };
11}

你可以这样使用这个函数：

复制 1function expensiveOperation() {
 2  console.log("执行了昂贵的操作");
 3  return 42;
 4}
 5
 6const memoizedOperation = once(expensiveOperation);
 7
 8console.log(memoizedOperation()); // 执行了昂贵的操作，返回 42
 9console.log(memoizedOperation()); // 直接返回上次的结果 42，不再执行昂贵的操作

在这个实现中，once函数接收一个函数作为参数，并返回一个新的函数。新函数会记住第一次调用时的结果，后续调用直接返回这个结果，而不会再次执行传入的函数。

990. 查找页面出现次数最多的 HTML 标签【热度: 379】【web应用场景】

关键词：标签查找

作者备注

主要是考察 getElementsByTagName 选择器， 以及如何获取元素标签名：tagName

直接上代码

复制 1<!DOCTYPE html>
 2<html lang="en">
 3
 4<head>
 5  <meta charset="UTF-8">
 6</head>
 7
 8<body>
 9  <div>Some content</div>
10  <p>Another paragraph</p>
11  <p>Another paragraph</p>
12  <p>Another paragraph</p>
13  <div>More div content</p>
14  <span>Span element</span>
15  <script>
16    function findMostFrequentTag() {
17      const allElements = document.getElementsByTagName('*');
18      const tagCount = {};
19      for (let i = 0; i < allElements.length; i++) {
20        const tagName = allElements[i].tagName;
21        if (tagCount[tagName]) {
22          tagCount[tagName]++;
23        } else {
24          tagCount[tagName] = 1;
25        }
26      }
27      let mostFrequentTag = null;
28      let maxCount = 0;
29      for (const tag in tagCount) {
30        if (tagCount[tag] > maxCount) {
31          mostFrequentTag = tag;
32          maxCount = tagCount[tag];
33        }
34      }
35      return mostFrequentTag;
36    }
37    const mostFrequent = findMostFrequentTag();
38    console.log(`The most frequent tag is: ${mostFrequent}`);
39  </script>
40</body>
41
42</html>

992. 常见的 http code 4xx 都有哪些状态码【热度: 545】【网络】【出题公司: 美团】

关键词：http 状态码

HTTP 状态码中 4xx 类状态码表示客户端错误。常见的 4xx 状态码有：

一、400 Bad Request（错误请求）

1. 含义：

   • 服务器无法理解客户端的请求，通常是由于请求格式错误、参数错误或缺少必要的信息导致的。
   • 例如，请求的 URL 语法错误、请求体格式不正确、缺少必需的请求头等情况都可能导致这个状态码。

2. 可能的原因和解决方法：

   • 检查请求的 URL 是否正确，确保没有拼写错误或无效的路径。
   • 检查请求体的格式是否符合服务器的要求，例如 JSON 格式是否正确。
   • 确认是否提供了所有必需的请求参数和请求头。

二、401 Unauthorized（未授权）

1. 含义：

   • 表示客户端请求需要身份验证，但未提供有效的身份验证信息，或者提供的身份验证信息不正确。
   • 例如，访问需要登录的资源但未提供登录凭证，或者登录凭证已过期。

2. 可能的原因和解决方法：

   • 检查是否需要提供登录凭证，如果需要，确保提供了正确的用户名和密码。
   • 如果使用了 API 密钥或令牌，确认其是否有效且正确包含在请求中。
   • 检查服务器的身份验证机制是否正确配置。

三、403 Forbidden（禁止访问）

1. 含义：

   • 服务器理解请求，但拒绝执行，通常是由于客户端没有足够的权限访问请求的资源。
   • 与 401 不同，403 表示客户端已经经过身份验证，但仍然没有权限执行请求。

2. 可能的原因和解决方法：

   • 确认客户端是否具有访问请求资源的权限。这可能涉及到用户角色、权限设置等方面的问题。
   • 检查服务器的访问控制列表（ACL）是否正确配置，确保客户端的请求在允许的范围内。

四、404 Not Found（未找到）

1. 含义：

   • 服务器无法找到请求的资源。这可能是由于请求的 URL 错误、资源已被删除或移动，或者服务器配置问题导致的。

2. 可能的原因和解决方法：

   • 检查请求的 URL 是否正确，确保资源的路径和名称没有错误。
   • 如果资源已被删除或移动，可能需要更新链接或进行重定向。
   • 确认服务器的配置是否正确，确保资源能够被正确地映射到相应的 URL。

五、405 Method Not Allowed（方法不被允许）

1. 含义：

   • 客户端使用了不被服务器支持的 HTTP 方法来请求资源。例如，使用 PUT 方法请求一个只支持 GET 和 POST 方法的资源。

2. 可能的原因和解决方法：

   • 检查请求的方法是否正确，根据服务器的文档或 API 说明，使用正确的 HTTP 方法。
   • 如果需要使用特定的方法，确保服务器已正确配置以支持该方法。

六、408 Request Timeout（请求超时）

1. 含义：

   • 客户端在规定的时间内没有发送完整的请求，或者服务器在规定的时间内没有响应客户端的请求。

2. 可能的原因和解决方法：

   • 检查网络连接是否稳定，确保客户端能够及时发送请求。
   • 如果是服务器响应超时，可能需要优化服务器的性能，减少响应时间。
   • 调整超时时间设置，根据实际情况增加客户端或服务器的超时时间。

七、429 Too Many Requests（请求过多）

1. 含义：

   • 客户端在一定时间内发送了过多的请求，超出了服务器的限制。

2. 可能的原因和解决方法：

   • 遵循服务器的请求速率限制，减少请求的频率。
   • 如果可能，使用缓存或异步处理来减少对服务器的请求次数。
   • 检查是否有不必要的重复请求，可以进行优化以减少请求数量。

993. 304 是什么状态码， 跟哪些 header 有关【热度: 546】【网络】【出题公司: 美团】

关键词：http 状态码

304 是 HTTP 状态码中的“Not Modified”（未修改）状态码。

当客户端（通常是浏览器）向服务器请求资源时，如果服务器判断该资源自上次客户端获取后没有被修改，就会返回 304 状态码，告诉客户端可以使用其本地缓存的版本，而无需再次传输整个资源。

304 状态码主要与以下 HTTP 响应头有关：

一、Last-Modified 和 If-Modified-Since

1. Last-Modified：

   • 服务器在首次响应资源时，在响应头中添加这个字段，表明资源的最后修改时间。
   • 例如：Last-Modified: Thu, 12 Oct 2023 10:30:00 GMT。

2. If-Modified-Since：

   • 当客户端再次请求该资源时，会在请求头中添加这个字段，其值为上次服务器返回的Last-Modified的值。
   • 服务器收到请求后，会比较资源的最后修改时间与If-Modified-Since的值。如果资源自该时间后没有被修改，就返回 304 状态码。

二、ETag 和 If-None-Match

1. ETag：

   • 服务器为资源生成的一个唯一标识符，通常基于资源的内容计算得出。
   • 例如：ETag: "abcdef123456"。

2. If-None-Match：

   • 当客户端再次请求资源时，会在请求头中添加这个字段，其值为上次服务器返回的ETag的值。
   • 服务器收到请求后，会比较资源当前的ETag与If-None-Match的值。如果一致，说明资源未被修改，返回 304 状态码。

996. 如何实现页面文本不可选中，不可复制【热度: 255】【web应用场景】【出题公司: 京东】

关键词：禁止文本复制

可以通过 CSS 和 JavaScript 结合的方式实现页面文本不可选中和不可复制。

一、使用 CSS

可以通过设置 CSS 属性来禁止用户选中页面文本：

复制 1body {
 2  -webkit-user-select: none;
 3  -moz-user-select: none;
 4  -ms-user-select: none;
 5  user-select: none;
 6}

这将禁止在整个页面上进行文本选择。

二、使用 JavaScript

如果仅使用 CSS 不能满足需求，可以结合 JavaScript 进一步增强禁止复制的功能。以下是一个示例：

复制 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5  </head>
 6
 7  <body>
 8    <p>这是一些不可选中和不可复制的文本。</p>
 9    <script>
10      document.addEventListener("copy", function (e) {
11        e.preventDefault();
12      });
13    </script>
14  </body>
15</html>

在这个例子中，通过监听copy事件并调用preventDefault()方法来阻止复制操作。

978. iterator 和 数组 有什么关系【热度: 119】【JavaScript】

关键词：iterator 对象、iterator 和 数组关系

在 JavaScript 中，Iterator（迭代器）和数组有着密切的关系：

一、数组作为可迭代对象

1. 可在迭代场景中使用：

   • 数组是一种内置的可迭代对象，这意味着它可以在需要可迭代对象的地方使用，比如在for...of循环、扩展运算符（...）和Array.from()等方法中。
   • 例如：

   复制 1const arr = [1, 2, 3];
    2for (const item of arr) {
    3  console.log(item);
    4}

2. 实现了迭代协议：

   • 数组实现了可迭代对象的协议，即拥有一个Symbol.iterator方法。这个方法返回一个 Iterator 对象，用于遍历数组的元素。

二、Iterator 用于遍历数组

1. 提供遍历机制：

   • Iterator 对象为数组的遍历提供了一种标准化的方式。通过调用数组的Symbol.iterator方法获取 Iterator 对象，然后可以使用next()方法逐个访问数组的元素。
   • 例如：

   复制 1const arr = [4, 5, 6];
    2const iterator = arr[Symbol.iterator]();
    3let result = iterator.next();
    4while (!result.done) {
    5  console.log(result.value);
    6  result = iterator.next();
    7}

2. 灵活的迭代控制：

   • 使用 Iterator 对象可以更灵活地控制数组的遍历过程。可以在遍历过程中暂停、恢复或根据特定条件进行遍历。
   • 例如，可以实现一个自定义的迭代器，只遍历数组中的偶数元素：

   复制 1function evenNumberIterator(arr) {
    2  let index = 0;
    3  return {
    4    next() {
    5      while (index < arr.length) {
    6        const value = arr[index];
    7        index++;
    8        if (value % 2 === 0) {
    9          return { value, done: false };
   10        }
   11      }
   12      return { done: true };
   13    },
   14  };
   15}
   16
   17const arr = [1, 2, 3, 4, 5, 6];
   18const iterator = evenNumberIterator(arr);
   19let result = iterator.next();
   20while (!result.done) {
   21  console.log(result.value);
   22  result = iterator.next();
   23}

三、数组方法与 Iterator 的关系

1. 某些数组方法利用 Iterator：

   • 一些数组方法，如forEach()、map()、filter()等，内部实际上是使用 Iterator 来遍历数组的元素。
   • 例如，map()方法创建一个新数组，其中每个元素都是对原始数组中对应元素调用提供的函数的结果：

   复制 1const arr = [7, 8, 9];
    2const newArr = arr.map((item) => item * 2);
    3console.log(newArr);

2. 可迭代性的扩展：

   • 通过利用 Iterator，可以为数组定义自定义的迭代行为。例如，可以创建一个自定义的类，该类的实例是可迭代的，并且可以像数组一样进行遍历。
   • 例如：

   复制 1class CustomArray {
    2  constructor() {
    3    this.data = [];
    4  }
    5
    6  add(item) {
    7    this.data.push(item);
    8  }
    9
   10  *[Symbol.iterator]() {
   11    for (const item of this.data) {
   12      yield item;
   13    }
   14  }
   15}
   16
   17const customArr = new CustomArray();
   18customArr.add(10);
   19customArr.add(11);
   20customArr.add(12);
   21
   22for (const item of customArr) {
   23  console.log(item);
   24}

总之，Iterator 和数组在 JavaScript 中紧密相关。数组作为可迭代对象，可以通过 Iterator 进行遍历，而 Iterator 为数组的遍历提供了灵活的控制和扩展机制。这种关系使得在处理数组和其他可迭代对象时，可以使用统一的迭代模式和方法。

980. [React] 对象数据状态不可变是什么概念【热度: 113】【web框架】【出题公司: 阿里巴巴】

关键词：react 数据不可变

在 React 中，“对象数据状态不可变”是一个重要的概念，它主要有以下几个方面的含义：

一、保证数据的稳定性和可预测性

1. 避免意外的副作用：

   • 当 React 组件的状态是可变的时，在复杂的应用中很容易出现意外的副作用。例如，如果多个组件共享一个可变的状态对象，一个组件对该对象的修改可能会影响到其他组件的行为，导致难以调试的错误。而不可变的对象状态确保了任何对状态的修改都会创建一个新的对象，不会影响到原始状态，从而避免了这种意外的副作用。
   • 例如，如果一个组件修改了一个共享的可变状态对象，而另一个组件依赖于这个对象的原始值，那么这个依赖关系可能会被破坏，导致错误的行为。而如果状态是不可变的，每个组件都可以放心地使用自己的状态副本，而不会担心其他组件对状态的修改。

2. 易于理解和调试：

   • 不可变的状态使得代码更容易理解和调试。因为状态的变化是通过创建新的对象来实现的，所以可以更容易地跟踪状态的变化过程。可以通过比较不同时间点的状态对象来确定哪些部分发生了变化，从而更容易找到问题的根源。
   • 例如，如果在调试一个 React 应用时，发现某个组件的行为不正确，可以通过检查该组件的状态变化历史来确定问题所在。如果状态是不可变的，可以很容易地比较不同时间点的状态对象，找出哪些属性发生了变化，以及这些变化是如何影响组件的行为的。

二、优化 React 的渲染性能

1. 高效的渲染优化：

   • React 依赖于状态的不可变性来进行渲染优化。当组件的状态发生变化时，React 会通过比较新旧状态的引用是否相同来决定是否需要重新渲染组件。如果状态是不可变的，那么只要状态对象的引用发生了变化，React 就可以确定状态发生了变化，需要重新渲染组件。而如果状态是可变的，React 就需要进行深度比较来确定状态是否发生了变化，这会增加性能开销。
   • 例如，如果一个组件的状态是一个不可变的对象，当状态发生变化时，React 可以快速判断出状态发生了变化，因为新的状态对象的引用与旧的状态对象的引用不同。而如果状态是可变的，React 就需要进行深度比较来确定状态是否发生了变化，这可能会导致性能问题，特别是在大型应用中。

2. 避免不必要的重新渲染：

   • 通过使用不可变的状态，可以避免不必要的重新渲染。如果一个组件的状态没有发生变化，React 可以直接使用上次渲染的结果，而不需要重新执行组件的渲染函数。这可以提高应用的性能，特别是在复杂的应用中，有很多组件需要频繁渲染的情况下。
   • 例如，如果一个组件的状态是一个不可变的对象，并且在某个操作后状态没有发生变化，React 可以直接使用上次渲染的结果，而不需要重新渲染该组件。而如果状态是可变的，React 就需要进行深度比较来确定状态是否发生了变化，这可能会导致不必要的重新渲染。

三、实现方式和工具

1. 使用不可变数据结构库：

   • 在 React 中，可以使用不可变数据结构库，如 Immutable.js，来实现不可变的对象状态。Immutable.js 提供了一系列不可变的数据结构，如Map、List和Set，这些数据结构可以有效地管理不可变的对象状态。
   • 例如，可以使用 Immutable.js 的Map来表示一个不可变的对象状态：

   复制 1import { Map } from "immutable";
    2
    3const initialState = Map({
    4  count: 0,
    5  name: "Initial Name",
    6});

   • 然后，可以使用 Immutable.js 的方法来更新状态，这些方法会返回一个新的不可变对象，而不是修改原始对象：

   复制 1const newState = state.set("count", state.get("count") + 1);

2. 使用纯函数和扩散语法：

   • 另一种实现不可变对象状态的方式是使用纯函数和扩散语法。纯函数是指一个函数的返回值仅取决于其输入参数，并且没有副作用。可以使用纯函数来更新状态，通过创建一个新的对象来表示新的状态，而不是修改原始状态。
   • 例如，可以定义一个纯函数来更新状态：

   复制 1const updateState = (oldState, newData) => ({
    2  ...oldState,
    3  ...newData,
    4});

   • 然后，可以在 React 组件中使用这个纯函数来更新状态：

   复制 1const [state, setState] = useState({ count: 0 });
    2
    3const increment = () => {
    4  setState(updateState(state, { count: state.count + 1 }));
    5};

   • 在这个例子中，increment函数调用updateState函数来更新组件的状态，创建一个新的状态对象，而不是修改原始状态。

981. [React] 如何实践数据不可变状态【热度: 114】【web框架】【出题公司: 阿里巴巴】

关键词：react 数据不可变

在 React 中，可以通过以下几种方式来实践数据不可变状态：

一、使用不可变数据结构库（如 Immutable.js）

1. 安装和导入 Immutable.js：

   • 首先，安装 Immutable.js 库：npm install immutable。
   • 然后，在 React 组件中导入所需的 Immutable 数据结构，如Map和List：

   复制 1import { Map, List } from "immutable";

2. 创建不可变状态：

   • 使用 Immutable 数据结构来创建组件的初始状态。例如，使用Map来表示一个包含多个属性的对象：

   复制 1const initialState = Map({
    2  count: 0,
    3  name: "Initial Name",
    4});

   • 或者使用List来表示一个数组：

   复制 1const initialList = List([1, 2, 3]);

3. 更新不可变状态：

   • Immutable.js 提供了一系列方法来更新不可变数据结构，这些方法会返回一个新的不可变对象，而不是修改原始对象。例如，要增加count属性的值，可以使用set方法：

   复制 1const newState = state.set("count", state.get("count") + 1);

   • 要添加一个元素到List中，可以使用push方法：

   复制 1const newList = list.push(4);

4. 在 React 组件中使用：

   • 在 React 组件中，可以使用useState钩子来管理不可变状态。将初始状态设置为 Immutable 对象，并在更新状态时使用 Immutable 的方法：

   复制 1import React, { useState } from "react";
    2import { Map } from "immutable";
    3
    4function MyComponent() {
    5  const [state, setState] = useState(Map({ count: 0 }));
    6
    7  const increment = () => {
    8    setState(state.set("count", state.get("count") + 1));
    9  };
   10
   11  return (
   12    <div>
   13      <p>Count: {state.get("count")}</p>
   14      <button onClick={increment}>Increment</button>
   15    </div>
   16  );
   17}

二、使用纯函数和扩散语法（Spread Syntax）

1. 纯函数更新状态：

   • 在 React 中，尽量使用纯函数来更新状态。纯函数是指一个函数的返回值仅取决于其输入参数，并且没有副作用。
   • 例如，定义一个函数来更新状态：

   复制 1const updateState = (oldState, newData) => ({
    2  ...oldState,
    3  ...newData,
    4});

   • 这个函数接受旧状态和新数据作为参数，并返回一个新的状态对象，其中包含旧状态和新数据的合并。

2. 在 React 组件中使用：

   • 在 React 组件中，可以使用useState钩子和纯函数来更新状态：

   复制 1import React, { useState } from "react";
    2
    3function MyComponent() {
    4  const [state, setState] = useState({ count: 0 });
    5
    6  const increment = () => {
    7    setState(updateState(state, { count: state.count + 1 }));
    8  };
    9
   10  return (
   11    <div>
   12      <p>Count: {state.count}</p>
   13      <button onClick={increment}>Increment</button>
   14    </div>
   15  );
   16}

   • 在这个例子中，increment函数调用updateState函数来更新组件的状态，创建一个新的状态对象，而不是修改原始状态。

三、避免直接修改状态对象

1. 不要直接修改状态：

   • 在 React 中，永远不要直接修改组件的状态对象。例如，不要使用以下方式修改状态：

   复制 1state.count++;
    2setState(state);

   • 这种方式会导致不可预测的行为，因为 React 依赖于状态的不可变性来进行渲染优化。

2. 创建新的对象或数组：

   • 当需要更新状态时，创建一个新的对象或数组来表示新的状态。可以使用对象字面量或数组字面量来创建新的对象或数组，或者使用扩散语法来复制旧对象或数组的属性，并添加或修改需要更新的属性。
   • 例如，要更新一个包含多个属性的对象状态，可以这样做：

   复制 1const newState = {
    2  ...state,
    3  count: state.count + 1,
    4  name: "New Name",
    5};
    6setState(newState);

   • 要更新一个数组状态，可以使用map方法或扩散语法来创建一个新的数组：

   复制 1const newList = state.list.map((item) => item * 2);
    2setState({ ...state, list: newList });

通过以上方法，可以在 React 中实践数据不可变状态，提高应用的性能和可预测性，避免意外的副作用，并帮助 React 进行更高效的渲染优化。

983. [React] 在 setState 时发生了什么【热度: 169】【web框架】【出题公司: 小米】

关键词：React setState 过程

在 React 中，当调用setState时，会发生以下一系列事情：

一、触发状态更新

1. 调用 setState 方法：

   • 当在 React 组件中调用setState方法时，React 会将这个状态更新请求排队。这意味着 React 不会立即更新组件的状态，而是将这个更新请求添加到一个队列中，等待合适的时机进行处理。
   • 例如：

   复制 1this.setState({ count: this.state.count + 1 });

   • 在这个例子中，调用setState方法来增加count状态的值。

二、合并状态

1. 状态合并：

   • 如果多次调用setState方法，React 会将这些状态更新请求合并在一起。这意味着 React 不会立即应用每个状态更新请求，而是会将它们合并成一个单一的状态更新。
   • 例如，如果在一个事件处理函数中多次调用setState方法：

   复制 1handleClick() {
    2  this.setState({ count: this.state.count + 1 });
    3  this.setState({ count: this.state.count + 1 });
    4}

   • React 不会立即将count的值增加两次，而是会将这两个状态更新请求合并成一个，最终只将count的值增加一次。

2. 浅合并对象状态：

   • 如果setState方法的参数是一个对象，React 会进行浅合并。这意味着如果状态是一个对象，并且只更新了其中的一部分属性，React 会将新的属性值合并到旧的状态对象中，而不会替换整个状态对象。
   • 例如：

   复制 1this.setState({ user: { name: "New Name" } });

   • 如果原来的状态是{ user: { name: 'Old Name', age: 30 } }，那么调用setState方法后，新的状态将是{ user: { name: 'New Name', age: 30 } }。React 只会更新user对象的name属性，而不会影响age属性。

三、触发重新渲染

1. 协调阶段：

   • 在合适的时机，React 会开始处理状态更新请求队列。React 会进入一个称为协调阶段的过程，在这个阶段，React 会比较组件的当前状态和新的状态，确定哪些组件需要重新渲染。
   • React 会使用一种称为虚拟 DOM 的技术来比较新旧状态，并确定最小化的更新操作，以提高性能。

2. 重新渲染组件：

   • 如果 React 确定某个组件的状态发生了变化，并且需要重新渲染，它会调用该组件的render方法来生成新的虚拟 DOM。然后，React 会将新的虚拟 DOM 与旧的虚拟 DOM 进行比较，确定需要进行哪些实际的 DOM 操作来更新页面。
   • 例如，如果一个组件的状态发生了变化，React 会调用该组件的render方法，生成新的虚拟 DOM，并将其与旧的虚拟 DOM 进行比较。如果有差异，React 会更新实际的 DOM，以反映新的状态。

四、异步执行

1. 异步更新状态：

   • 在 React 中，setState方法通常是异步执行的。这意味着在调用setState方法后，不能立即依赖新的状态值。
   • 例如：

   复制 1this.setState({ count: this.state.count + 1 });
    2console.log(this.state.count);

   • 在这个例子中，console.log语句可能不会输出更新后的count值，因为setState方法是异步执行的，状态更新可能还没有完成。

2. 使用回调函数：

   • 如果需要在状态更新完成后执行一些操作，可以在setState方法中传递一个回调函数作为第二个参数。这个回调函数将在状态更新完成后被调用。
   • 例如：

   复制 1this.setState({ count: this.state.count + 1 }, () => {
    2  console.log(this.state.count);
    3});

   • 在这个例子中，回调函数将在状态更新完成后被调用，此时可以确保count的值已经更新。

在 React 中，调用setState方法会触发一系列的操作，包括排队状态更新请求、合并状态、触发重新渲染等。

984. HTTPS 安全协议主要是啥【热度: 779】【网络】

关键词：安全协议

HTTPS（Hypertext Transfer Protocol Secure）安全协议主要包括以下几个关键方面：

一、加密通信

1. TLS/SSL 加密：

   • HTTPS 使用传输层安全（TLS）或安全套接层（SSL）协议对数据进行加密。这确保了在客户端（如浏览器）和服务器之间传输的数据是经过加密的，防止数据被窃听、篡改或劫持。
   • 加密过程通过使用对称加密算法（如 AES）和非对称加密算法（如 RSA）的组合来实现。在连接建立阶段，使用非对称加密算法交换对称密钥，然后使用对称密钥进行后续的数据加密和解密，以提高效率。

2. 数据完整性保护：

   • HTTPS 还使用消息认证码（MAC）来确保数据的完整性。接收方可以通过验证 MAC 来确定数据在传输过程中是否被篡改。如果 MAC 验证失败，接收方将拒绝接收数据，从而防止恶意篡改的数据被接受。

二、身份验证

1. 服务器身份验证：

   • HTTPS 通过服务器提供的数字证书来验证服务器的身份。数字证书由证书颁发机构（CA）签发，包含服务器的公钥和其他身份信息。
   • 客户端在连接到服务器时，会验证服务器证书的真实性。这包括检查证书的颁发机构是否可信、证书是否在有效期内以及证书中的域名是否与服务器的域名匹配等。如果证书验证失败，客户端可能会显示警告或拒绝连接。

2. 客户端身份验证（可选）：

   • 在某些情况下，HTTPS 也可以用于客户端身份验证。例如，在企业内部网络或金融交易等场景中，服务器可能要求客户端提供数字证书或其他身份验证信息，以确保只有授权的用户可以访问资源。

三、安全连接建立

1. 握手过程：

   • HTTPS 的连接建立过程包括一个称为“握手”的阶段。在握手过程中，客户端和服务器交换信息，协商加密算法、密钥交换方式和其他安全参数。
   • 这个过程确保双方都支持相同的安全协议版本，并能够建立一个安全的连接。握手过程还包括服务器身份验证和密钥交换，为后续的数据传输做好准备。

2. 安全参数协商：

   • 在握手过程中，客户端和服务器协商各种安全参数，如加密算法、密钥长度、MAC 算法等。双方选择最强的安全配置，以确保通信的安全性。
   • 这个协商过程是动态的，可以根据客户端和服务器的能力以及安全需求进行调整。

四、安全优势和应用场景

1. 安全优势：

   • HTTPS 提供了比 HTTP 更高的安全性，保护用户的隐私和数据安全。它可以防止敏感信息（如密码、信用卡号码、个人信息等）在传输过程中被窃取或篡改。
   • 此外，HTTPS 还可以防止中间人攻击，确保客户端和服务器之间的通信是直接的，没有被第三方拦截或篡改。

2. 应用场景：

   • HTTPS 广泛应用于各种场景，包括电子商务、网上银行、社交媒体、企业内部网络等。任何涉及敏感信息传输或需要保护用户隐私的网站或应用都应该使用 HTTPS。
   • 搜索引擎也越来越重视 HTTPS，将其作为一个排名因素，鼓励网站所有者采用更安全的协议。

985. https 加密协议里面: TLS 和 SSL 分别是什么，有何区别【热度: 51】【网络】

关键词：TLS/SSL 概念、TLS/SSL 区别

在 HTTPS 加密协议中，TLS（Transport Layer Security，传输层安全协议）和 SSL（Secure Sockets Layer，安全套接字层）都是为了实现网络通信安全而设计的协议，它们的主要情况如下：

一、SSL

1. 定义与发展：

   • SSL 由网景公司（Netscape）在 20 世纪 90 年代初开发，旨在为网络通信提供加密和安全认证。
   • 它经历了几个版本，如 SSL 2.0 和 SSL 3.0，但后来发现了一些安全漏洞。

2. 主要功能：

   • 数据加密：通过使用对称加密算法（如 DES、3DES、AES 等）对数据进行加密，确保数据在传输过程中不被窃取或篡改。
   • 身份验证：服务器可以使用数字证书向客户端证明自己的身份，客户端可以验证证书的有效性，以确保连接到的是真实的服务器。

二、TLS

1. 定义与发展：

   • TLS 是在 SSL 3.0 的基础上发展而来的，由互联网工程任务组（IETF）进行标准化。
   • 它的目的是提供更安全、更可靠的网络通信安全协议，并修复 SSL 中发现的安全漏洞。
   • TLS 经历了多个版本的演进，如 TLS 1.0、TLS 1.1、TLS 1.2 和 TLS 1.3。

2. 主要功能：

   • 与 SSL 类似，TLS 也提供数据加密和身份验证功能。但在加密算法、密钥交换机制和安全性能方面进行了改进和增强。
   • 支持更先进的加密算法，如 AES-GCM、ChaCha20-Poly1305 等，提供更好的安全性和性能。
   • 改进的密钥交换机制，如 Diffie-Hellman Ephemeral（DHE）和 Elliptic Curve Diffie-Hellman Ephemeral（ECDHE），提供前向保密性。

三、TLS 与 SSL 的区别

1. 安全性：

   • TLS 通常被认为比 SSL 更安全。TLS 在设计上修复了 SSL 中的一些安全漏洞，并引入了新的安全特性。
   • 例如，TLS 1.3 完全移除了对不安全加密算法的支持，提供了更强的加密和认证机制。

2. 性能：

   • TLS 在性能方面也有所改进。它采用了更高效的加密算法和密钥交换机制，减少了连接建立的时间和数据传输的延迟。
   • 例如，TLS 1.3 中的 0-RTT（Zero Round-Trip Time）模式可以在某些情况下实现更快的连接建立。

3. 标准化：

   • SSL 是由网景公司开发的，没有经过正式的标准化过程。而 TLS 是由 IETF 进行标准化的，有明确的规范和标准，确保不同的实现之间具有更好的互操作性。

4. 兼容性：

   • 由于 TLS 是在 SSL 的基础上发展而来的，因此在一定程度上与 SSL 兼容。但是，为了获得更好的安全性和性能，建议使用最新版本的 TLS。
   • 现代的浏览器和服务器通常都支持 TLS，并逐渐淘汰对 SSL 的支持。

TLS 和 SSL 都是为了实现网络通信安全而设计的协议，但 TLS 在安全性、性能和标准化方面都比 SSL 更优。在现代的网络环境中，建议使用 TLS 来确保通信的安全。

986. https 层可以做哪些性能优化【热度: 172】【网络】

关键词：http 性能优化

以下是在 HTTPS 层可以进行的一些性能优化：

一、优化服务器配置

1. 选择合适的加密套件：

   • 服务器可以配置支持的加密套件。优先选择性能较好且安全的加密算法组合，如具有高效加密和认证的椭圆曲线密码（ECC）算法及现代的对称加密算法（如 AES-GCM）。避免使用老旧、性能低下或存在安全风险的加密套件。
   • 例如，可以根据服务器的性能和安全需求，调整 Nginx 或 Apache 服务器的 SSL/TLS 配置，选择合适的加密套件。

2. 启用 HTTP/2 或 HTTP/3：

   • HTTP/2 和 HTTP/3 在 HTTPS 之上提供了更好的性能。HTTP/2 采用多路复用技术，可以在一个连接上同时传输多个请求和响应，减少了连接建立的开销。HTTP/3 则基于 QUIC 协议，进一步提高了连接的可靠性和性能。
   • 确保服务器支持并启用 HTTP/2 或 HTTP/3，可以显著提升 HTTPS 网站的性能。

3. 优化服务器硬件：

   • 使用性能强大的服务器硬件，包括更快的 CPU、更多的内存和高速存储设备，可以提高 HTTPS 服务器的处理能力和响应速度。
   • 考虑使用固态硬盘（SSD）来存储网站数据，以减少磁盘 I/O 延迟。

二、证书管理优化

1. 使用高效的证书颁发机构（CA）：

   • 选择响应速度快、可靠的 CA 来颁发证书。一些知名的 CA 可以提供快速的证书签发和更新服务，减少证书获取的时间。
   • 例如，Let’s Encrypt 是一个免费、自动化的 CA，提供快速的证书签发服务，适用于小型网站和个人项目。

2. 优化证书链长度：

   • 减少证书链的长度可以降低证书验证的时间开销。确保服务器配置的证书链只包含必要的中间证书，避免过长的证书链。
   • 可以通过检查证书链中的证书数量和层级，以及与 CA 沟通来优化证书链的长度。

3. 证书缓存和预取：

   • 客户端和服务器可以利用证书缓存来减少证书验证的次数。浏览器通常会缓存证书一段时间，以避免在后续访问同一网站时重复验证证书。
   • 服务器也可以采取一些措施，如预取证书更新，以确保在证书即将过期时能够及时更新，避免因证书过期导致的连接中断。

三、TLS 会话复用

1. 会话票证（Session Tickets）：

   • 服务器可以使用会话票证来实现 TLS 会话复用。会话票证是一个加密的令牌，包含了之前建立的 TLS 会话的信息。当客户端再次连接时，它可以提交会话票证，服务器可以使用票证中的信息快速恢复之前的会话，而无需进行完整的 TLS 握手。
   • 配置服务器以支持会话票证，并确保会话票证的安全性和有效性。

2. 会话 ID 复用：

   • 类似地，服务器可以使用会话 ID 来实现会话复用。在首次 TLS 握手时，服务器生成一个会话 ID，并将其发送给客户端。客户端在后续连接时可以提交会话 ID，服务器如果识别到该 ID，可以快速恢复之前的会话。
   • 确保服务器正确配置会话 ID 的生成和存储，以实现高效的会话复用。

四、内容压缩和缓存

1. 启用压缩：

   • 在 HTTPS 层启用内容压缩可以减少传输的数据量，提高传输速度。服务器可以配置支持的压缩算法，如 Gzip 或 Brotli。
   • 确保客户端和服务器都支持所选的压缩算法，并正确配置服务器以对响应内容进行压缩。

2. 合理设置缓存策略：

   • 利用浏览器缓存和中间缓存服务器可以减少重复请求，提高性能。设置合适的缓存头，如Cache-Control和Expires，指示客户端和中间缓存服务器如何缓存资源。
   • 对于静态资源，可以设置较长的缓存时间，以减少对服务器的请求次数。

五、监控和优化

1. 性能监控：

   • 使用性能监控工具来监测 HTTPS 网站的性能指标，如连接建立时间、数据传输速度、证书验证时间等。常见的性能监控工具包括 WebPageTest、Pingdom 等。
   • 根据监控数据，分析性能瓶颈，并采取相应的优化措施。

2. 持续优化：

   • HTTPS 性能优化是一个持续的过程。随着技术的发展和安全需求的变化，不断评估和调整优化策略，以确保网站始终保持良好的性能。
   • 关注安全漏洞和新的性能优化技术，及时更新服务器配置和软件版本。

988. [React]在应用中如何排查性能问题【热度: 255】【web框架】【出题公司: TOP100互联网】

关键词：React 性能排查

在 React 应用中，可以通过以下方法来排查性能问题：

一、使用 Chrome 开发者工具

1. 性能分析（Performance）：

   • 打开 Chrome 浏览器，进入开发者工具。选择“Performance”选项卡。
   • 点击“Record”按钮开始录制页面的交互过程。进行一些典型的操作，如加载页面、点击按钮、滚动页面等。
   • 停止录制后，开发者工具会生成一个性能分析报告。这个报告显示了页面在录制期间的各种性能指标，包括 CPU 使用率、内存使用情况、网络请求等。
   • 分析报告中的“Main”线程，可以查看在录制期间哪些操作占用了大量的 CPU 时间。常见的性能瓶颈包括长时间的 JavaScript 执行、频繁的重渲染等。
   • 例如，如果发现某个函数的执行时间很长，可以点击该函数查看详细的调用栈，以确定问题的根源。

2. React 开发者工具（React Developer Tools）：

   • 安装 React 开发者工具插件。在 Chrome 浏览器中，打开需要排查性能问题的 React 应用页面。
   • 打开开发者工具，选择“React”选项卡。
   • 在 React 开发者工具中，可以查看组件的层次结构、Props 和 State。这有助于确定哪些组件的状态变化频繁，或者哪些组件的渲染时间较长。
   • 特别关注那些在不必要的时候触发重新渲染的组件。可以通过检查组件的shouldComponentUpdate方法或使用React.memo、PureComponent等优化手段来减少不必要的重新渲染。

二、使用 React Profiler

1. 开启 Profiler：

   • 在 React 应用中，可以使用React.Profiler组件来进行性能分析。在需要分析性能的组件树的根节点处包裹React.Profiler。
   • 例如：

   复制 1import React from "react";
    2import ReactDOM from "react-dom";
    3import { Profiler } from "react";
    4
    5const App = () => (
    6  <Profiler
    7    id="MyApp"
    8    onRender={(id, phase, actualDuration) => {
    9      console.log(`Component ${id} rendered in phase ${phase} with duration ${actualDuration} ms.`);
   10    }}
   11  >
   12    {/* 你的应用组件 */}
   13  </Profiler>
   14);
   15
   16ReactDOM.render(<App />, document.getElementById("root"));

2. 分析结果：

   • 在应用运行过程中，React.Profiler会记录组件的渲染时间和其他性能指标。可以在控制台中查看输出的日志，了解每个组件的渲染时间和触发渲染的原因。
   • 根据日志信息，可以确定哪些组件的渲染时间较长，以及哪些操作导致了频繁的重新渲染。这有助于针对性地进行性能优化。

三、检查代码中的潜在问题

1. 避免不必要的重新渲染：

   • 确保组件的shouldComponentUpdate方法正确实现，或者使用React.memo和PureComponent来避免不必要的重新渲染。检查组件的依赖项是否正确设置，避免因为不必要的状态变化而触发重新渲染。
   • 例如，如果一个组件的渲染结果只依赖于某个特定的 prop，而不是所有的 props，可以使用React.memo并指定一个自定义的比较函数来进行更精确的比较。

2. 优化大型列表渲染：

   • 对于大型列表的渲染，考虑使用React.memo和key属性来优化性能。确保为每个列表项设置一个唯一的key属性，这有助于 React 更高效地识别列表项的变化。
   • 避免在列表渲染中使用索引作为key属性，因为这可能会导致性能问题。如果列表项的顺序可能发生变化，使用一个稳定的唯一标识符作为key。

3. 减少不必要的计算和副作用：

   • 检查代码中是否存在不必要的计算或副作用。例如，避免在render方法中进行复杂的计算或发起网络请求。将这些操作移到生命周期方法或使用useEffect钩子中，并确保副作用的依赖项正确设置，以避免不必要的执行。
   • 对于频繁执行的计算，可以考虑使用 memoization（记忆化）技术来缓存结果，避免重复计算。

4. 优化网络请求：

   • 检查应用中的网络请求是否高效。避免频繁的重复请求，使用缓存策略来减少请求次数。确保网络请求的响应时间合理，可以使用工具来监测网络请求的性能，并考虑优化服务器端的响应时间。

通过以上方法，可以系统地排查 React 应用中的性能问题，并采取相应的优化措施来提高应用的性能和响应速度。

989. 有哪些前端性能分析工具【热度: 400】【web应用场景】【出题公司: TOP100互联网】

关键词：前端性能分析

以下是一些常用的前端性能分析工具：

一、浏览器开发者工具

1. Chrome DevTools：

   • 功能强大，提供了丰富的性能分析选项。
   • 在“Performance”（性能）面板中，可以录制页面的交互过程，分析 CPU 使用率、内存占用、网络请求等，找出性能瓶颈。
   • “Network”（网络）面板可以查看请求的加载时间、大小等信息，帮助优化网络请求。
   • “Lighthouse”功能可以对页面进行全面的性能、可访问性、最佳实践等方面的审计。

2. Firefox Developer Tools：

   • 类似 Chrome DevTools，具有性能分析、网络监测等功能。
   • “Performance”工具可以分析页面加载和交互过程中的性能问题。

二、性能监测平台

1. WebPageTest：

   • 在线工具，可以从多个地点对网页进行性能测试。
   • 提供详细的性能指标，如首次内容绘制（FCP）、最大内容绘制（LCP）、首次输入延迟（FID）等。
   • 生成可视化的报告，帮助分析页面的加载过程和性能瓶颈。

2. Pingdom Tools：

   • 用于测试网站的性能和可用性。
   • 提供页面加载时间、文件大小等信息，并给出优化建议。

三、前端性能监控工具

1. Google Analytics：

   • 虽然主要用于网站分析，但也可以提供一些性能相关的数据。
   • 如页面加载时间、用户行为等，可以帮助了解用户体验和性能趋势。

2. New Relic Browser：

   • 提供全面的前端性能监控和分析。
   • 可以实时监测页面性能，跟踪用户交互，提供详细的报告和警报。

四、代码分析工具

1. Lighthouse CI：

   • 可以集成到持续集成（CI）流程中，对代码进行自动化的性能审计。
   • 确保代码在提交和部署前符合一定的性能标准。

2. PageSpeed Insights API：

   • 可以通过 API 方式获取页面的性能分析结果。
   • 方便集成到自定义的工具或流程中，进行大规模的性能监测和优化。

991. 部署一个 node 应用要考虑哪些因素【热度: 98】【Nodejs、工程化】【出题公司: 腾讯】

关键词：node 应用部署

一、选择服务器和环境

1. 服务器选择：

   • 可以选择云服务器提供商（如阿里云、腾讯云、AWS 等）的虚拟服务器或容器服务。根据应用的需求和预算，确定服务器的配置（CPU、内存、存储等）。
   • 考虑服务器的地理位置和网络连接质量，以确保用户能够快速访问应用。

2. 操作系统：

   • 常见的选择是 Linux 发行版，如 Ubuntu、CentOS 等。Linux 系统具有稳定性、安全性和资源效率高的特点，适合部署服务器应用。

二、代码准备和优化

1. 代码审查和测试：

   • 在部署之前，确保代码经过严格的审查和测试。包括单元测试、集成测试和端到端测试，以确保应用的功能和性能符合要求。
   • 检查代码中的潜在安全漏洞，如 SQL 注入、跨站脚本攻击（XSS）等，并采取相应的防范措施。

2. 性能优化：

   • 对 Node.js 应用进行性能优化，以提高在生产环境中的响应速度和吞吐量。可以采用以下优化措施：
     • 优化数据库查询，避免不必要的查询和复杂的连接。
     • 使用缓存技术，如内存缓存或分布式缓存，减少重复计算和数据库访问。
     • 压缩和优化静态资源，如 CSS、JavaScript 和图片，减少网络传输时间。
     • 配置适当的日志级别，避免过多的日志输出影响性能。

三、部署方式

1. 手动部署：

   • 直接将代码上传到服务器，并手动安装和配置所需的依赖项和运行环境。这种方式适用于小型项目或临时部署，但不够自动化和可重复。
   • 步骤如下：
     • 使用 SSH 连接到服务器。
     • 将代码上传到服务器，可以使用 FTP、SCP 或 Git 等方式。
     • 在服务器上安装 Node.js 和所需的依赖项（使用npm install或yarn install）。
     • 配置应用的环境变量，如数据库连接字符串、端口号等。
     • 启动应用（使用node app.js或通过 PM2 等进程管理工具）。

2. 持续集成/持续部署（CI/CD）：

   • 使用 CI/CD 工具实现自动化的部署流程。这种方式可以提高部署的效率和可靠性，减少人为错误。
   • 常见的 CI/CD 工具包括 Jenkins、Travis CI、CircleCI 等。以下是一般的部署流程：
     • 将代码托管在版本控制系统（如 Git）中。
     • 配置 CI/CD 工具，设置构建和部署的触发器（如代码提交、定时任务等）。
     • 在 CI/CD 管道中，进行代码构建、测试和打包。
     • 将打包后的应用部署到服务器，可以使用 SSH、Docker 等方式。
     • 进行自动化的测试和验证，确保应用在部署后正常运行。

四、运行和监控

1. 进程管理：

   • 使用进程管理工具来确保 Node.js 应用在服务器上持续运行。常见的进程管理工具包括 PM2、Forever 等。
   • 这些工具可以监控应用的运行状态，自动重启应用在崩溃或出现错误时，并提供日志管理和性能监控功能。

2. 监控和日志记录：

   • 配置应用的日志记录，以便在生产环境中跟踪应用的运行状态和错误。可以使用日志管理工具，如 Logstash、ELK Stack 等，集中收集和分析日志。
   • 同时，使用监控工具来实时监测应用的性能指标，如 CPU 使用率、内存占用、响应时间等。常见的监控工具包括 New Relic、Datadog、Prometheus 等。

3. 安全措施：

   • 采取必要的安全措施来保护生产环境中的 Node.js 应用。包括：
     • 配置防火墙，限制对服务器的访问。
     • 使用 HTTPS 加密通信，保护用户数据的安全。
     • 定期更新服务器和应用的软件包，以修复安全漏洞。
     • 实施访问控制，限制对敏感资源的访问。

995. http3 有哪些核心的新特性【热度: 313】【网络】

关键词：http3 新特性

HTTP/3 带来了以下一些核心新特性：

一、基于 QUIC 协议

1. 多路复用无队头阻塞：

   • HTTP/3 基于 QUIC（Quick UDP Internet Connections）协议，它继承了 QUIC 的多路复用特性。在 HTTP/2 中，虽然也有多路复用，但由于底层使用 TCP 协议，可能会出现队头阻塞问题。而 QUIC 的多路复用在一个连接上可以同时处理多个独立的流，并且各个流之间不会相互影响，即使某个流出现丢包，也不会阻塞其他流的传输。
   • 例如，当同时加载一个网页的多个资源时，如果其中一个资源的数据包丢失，在 HTTP/2 中可能会导致整个连接的传输受阻，直到丢失的数据包被重传成功。而在 HTTP/3 中，其他资源的传输不受影响，大大提高了传输效率。

2. 快速连接建立：

   • QUIC 协议在连接建立方面比传统的 TCP 和 TLS 握手更快。它将 TLS 加密层整合到 QUIC 协议内部，减少了连接建立的往返次数。在首次连接时，虽然也需要一些时间进行密钥交换等操作，但后续连接可以利用之前的连接状态进行快速恢复，实现 0-RTT（Round-Trip Time）或 1-RTT 的连接建立时间。
   • 例如，在移动网络环境下，用户频繁切换网络或重新打开应用时，HTTP/3 可以更快地建立连接，减少用户等待时间，提供更流畅的体验。

二、改进的拥塞控制

1. 可插拔的拥塞控制算法：

   • HTTP/3 允许使用不同的拥塞控制算法，并且可以根据网络环境动态切换。这使得它能够更好地适应各种网络条件，如高延迟、高丢包率的网络环境。
   • 例如，在无线网络环境下，可以选择更适合这种环境的拥塞控制算法，提高数据传输的效率和稳定性。

2. 更精准的拥塞控制：

   • QUIC 协议的拥塞控制机制比 TCP 更加精细。它可以更好地感知网络的拥塞状态，及时调整发送速率，避免网络拥塞的发生。同时，它还可以对不同的流进行独立的拥塞控制，提高整体的网络利用率。
   • 例如，当网络出现拥塞时，HTTP/3 可以更快地降低发送速率，避免拥塞进一步恶化。而在网络状况好转时，又能迅速提高发送速率，充分利用网络带宽。

三、增强的安全性

1. 内置加密：

   • QUIC 协议在设计上就内置了加密功能，从一开始就对数据进行加密传输，提供了更好的安全性。这避免了像 TCP 那样在连接建立后再进行加密协商的过程，减少了安全风险。
   • 例如，在网络中传输的数据更难被窃听或篡改，保护用户的隐私和数据安全。

2. 前向安全：

   • HTTP/3 继承了 QUIC 的前向安全特性。即使一个密钥被泄露，也不会影响之前的通信安全。这意味着攻击者无法通过破解当前的密钥来获取之前的通信内容。
   • 例如，如果一个服务器的密钥在某个时间点被泄露，之前通过 HTTP/3 传输的通信内容仍然是安全的，不会被攻击者窃取。