前端面试题二

虚拟列表怎么实现?

虚拟列表（Virtual List）是一种优化大量数据展示的前端技术，它通过动态渲染可见区域的数据，而不是一次性渲染整个列表，从而提高性能和用户体验。

实现虚拟列表的一般步骤如下：

1. 确定可视区域和数据项大小：首先确定可视区域的大小（高度或宽度），以及每个数据项的大小（高度或宽度），这些信息是实现虚拟列表的基础。
2. 计算可见数据范围：根据可视区域的大小和数据项的大小，计算出当前可见的数据项的范围，即确定需要渲染的数据项的起始索引和结束索引。
3. 渲染可见数据项：根据计算得到的可见数据项的范围，只渲染这些数据项到页面中，其他不可见的数据项暂时不渲染或占位。
4. 监听滚动事件：为可视区域添加滚动事件监听，当滚动发生时，触发更新可见数据范围和重新渲染可见数据项的操作。
5. 优化滚动性能：针对滚动事件的频繁触发，可以进行性能优化，例如使用节流（throttle）或防抖（debounce）来限制事件的触发频率，避免过多的渲染操作。

实现虚拟列表的关键在于动态计算可见数据范围和只渲染可见数据项，通过这种方式，即使数据非常庞大，也能保持页面的响应性能和流畅度。

具体实现虚拟列表的方法和技术可以根据具体的前端框架或库来选择，例如在Vue中可以使用vue-virtual-scroll-list、react中可以使用react-virtualized等现有的虚拟列表插件或组件库来简化实现过程。这些插件或组件库通常已经实现了虚拟列表的核心逻辑，并提供了配置和扩展选项，方便开发者使用和定制。

常用的hook都有哪些?

在React中，常用的Hooks包括：

1. useState：用于在函数组件中使用状态（state），通过定义一个状态变量和对应的更新函数来管理组件的状态。
2. useEffect：用于在函数组件中处理副作用，例如订阅数据、网络请求、DOM操作等，可以在组件的生命周期中执行指定的副作用逻辑。
3. useContext：用于在函数组件中访问React的Context，可以获取全局的状态或其他共享数据。
4. useReducer：用于在函数组件中管理复杂的状态逻辑，通过定义一个reducer函数和初始状态来更新和获取状态。
5. useCallback：用于在函数组件中缓存回调函数，避免不必要的重新创建和传递，优化性能。
6. useMemo：用于在函数组件中缓存计算结果，只有在依赖项发生变化时才重新计算，优化性能。
7. useRef：用于在函数组件中创建可变的引用，可以存储和访问组件的实例变量或其他需要在渲染之间保持稳定的值。
8. useLayoutEffect：类似于useEffect，但在DOM更新之后同步触发，用于处理需要依赖DOM布局的副作用。
9. useImperativeHandle：用于自定义向父组件暴露的实例值或方法，在父组件中通过ref引用子组件并调用子组件的方法。

这些Hooks提供了一种函数式的方式来管理组件状态、副作用和共享数据，并且可以在函数组件中使用。它们的使用可以简化组件的逻辑、提高可维护性，并且更好地支持代码复用和组件的拆分。

Node是怎么部署的? pm2守护进程的原理?

Node.js应用的部署可以通过以下步骤进行：

1. 安装Node.js环境：在目标服务器上安装适当版本的Node.js运行时环境。
2. 打包应用代码：将Node.js应用的源代码和依赖项打包成一个可执行的包，通常使用npm或者yarn进行依赖管理和打包。
3. 上传代码至服务器：将打包好的应用代码上传到目标服务器，可以通过FTP、SCP或其他文件传输方式将文件复制到服务器上。
4. 安装依赖项：在服务器上执行相应的命令，如npm install或yarn install，安装应用程序所需的依赖项。
5. 配置服务器：根据需要进行服务器的配置，如配置端口号、域名绑定、SSL证书等。
6. 启动应用：在服务器上执行启动命令，如node app.js，启动Node.js应用。

以上是一种基本的Node.js应用部署过程，具体细节可能因实际情况而有所不同，例如使用Docker容器化部署、使用Nginx作为反向代理等。

关于PM2守护进程的原理，PM2是一个流行的Node.js应用进程管理器，可以用于在生产环境中运行和管理Node.js应用。它的原理主要包括以下几个方面：

1. 进程守护：PM2会监控Node.js应用的运行状态，并在应用异常退出或崩溃时自动重启应用，确保应用的稳定性和可用性。
2. 日志管理：PM2会收集和管理Node.js应用的日志信息，可以将日志输出到文件或终端，并支持日志的轮转和切割。
3. 集群模式：PM2支持将Node.js应用以集群的方式运行，即在多个进程之间进行负载均衡，提高应用的并发处理能力。
4. 性能监控：PM2提供了监控功能，可以实时查看Node.js应用的CPU、内存、网络等性能指标，并提供报警和告警功能。
5. 部署工具：PM2提供了一些工具和命令，可以方便地部署Node.js应用、进行应用版本管理、应用迁移等操作。

PM2通过监听操作系统的进程事件、利用Node.js的cluster模块实现进程管理和负载均衡，以及通过一些插件和中间件来提供额外的功能和扩展性。它的设计目标是简化Node.js应用的管理和部署，并提供高可用性和性能监控的功能。

Node开启子进程的方法有哪些?

在Node.js中，可以通过以下几种方法开启子进程：

1. child_process.spawn() ：这是一个异步函数，用于启动一个新的进程，并通过提供的命令和参数来执行外部命令。它返回一个ChildProcess对象，可以通过监听事件和使用stdin、stdout和stderr来与子进程进行通信。
2. child_process.exec() ：这也是一个异步函数，用于执行外部命令。与spawn() 不同的是，它将整个命令行作为字符串传递，而不是将命令行拆分为命令和参数。它也返回一个ChildProcess对象，可用于与子进程进行交互。
3. child_process.execFile() ：类似于exec() ，但需要提供可执行文件的路径和参数数组，而不是命令行字符串。
4. child_process.fork() ：这个方法是通过使用spawn() 衍生新的Node.js进程，通常用于创建子进程来运行Node.js脚本文件。子进程会自动具有与父进程相同的环境变量，并且通过IPC（Inter-Process Communication）通道进行通信。

这些方法都属于Node.js内置的child_process模块，并提供了不同的方式来开启子进程。具体选择哪种方法取决于需要执行的操作和与子进程之间的通信需求。

进程间如何通信?

在进程间进行通信有多种方式，以下是一些常见的通信机制：

1. 管道（Pipes） ：管道是一种半双工的通信方式，用于在相关的进程之间进行通信。一个进程可以将数据写入管道，另一个进程可以从管道读取数据。管道可以是匿名的（无名管道）或有名的（命名管道）。
2. 信号（Signals） ：信号是一种异步通信机制，用于在进程之间传递简单的消息。通过发送特定的信号，一个进程可以通知另一个进程发生了某个事件。常见的信号包括SIGINT（中断信号）和SIGTERM（终止信号）等。
3. 共享内存（Shared Memory） ：共享内存是一种高效的通信方式，通过在多个进程之间创建共享的内存区域来实现数据共享。多个进程可以直接读写共享内存，避免了数据复制的开销。
4. 消息队列（Message Queues） ：消息队列是一种间接通信方式，通过在系统中创建一个队列来存储消息。一个进程可以将消息发送到队列，另一个进程可以从队列中接收消息。消息队列提供了异步、解耦和可靠的通信方式。
5. 套接字（Sockets） ：套接字是一种网络编程中常用的通信机制，它可以用于在不同的主机之间进行进程间通信。套接字提供了一种可靠的、面向连接的通信方式，支持基于TCP和UDP的通信。
6. 远程过程调用（Remote Procedure Call，RPC） ：RPC是一种允许进程在不同的地址空间中调用远程服务的机制。通过RPC，一个进程可以像调用本地函数一样调用远程进程的函数，封装了进程间通信的细节。

这些通信机制各有优劣，选择合适的通信方式取决于应用的需求、性能要求和可靠性要求。在实际应用中，常常会结合多种通信方式来实现不同场景下的进程间通信。

写一个不定长二维数组的全排列函数。

例如：输入 [['A', 'B', ...], [1, 2], ['a', 'b'], ...]， 输出 ['A1a', 'A1b', ....]

下面是一个递归实现的全排列函数，可以处理不定长二维数组的情况：

 
function permuteArrays(arrays) {
  if (arrays.length === 0) {
    return [];
  }

  if (arrays.length === 1) {
    return arrays[0];
  }

  const result = [];
  const rest = permuteArrays(arrays.slice(1)); // 递归获取剩余数组的全排列

  for (const val of arrays[0]) {
    for (const combination of rest) {
      result.push(val + combination); // 将当前数组的元素与剩余数组的全排列进行组合
    }
  }

  return result;
}

使用示例：

const arrays = [['A', 'B'], [1, 2], ['a', 'b']];
const result = permuteArrays(arrays);
console.log(result);

输出结果：

  ['A1a', 'A1b', 'A2a', 'A2b', 'B1a', 'B1b', 'B2a', 'B2b']

这个函数通过递归的方式，从数组的第一个元素开始，将当前元素与剩余数组的全排列进行组合，最终得到所有可能的排列组合。

写个函数两个字符串对比, 得出结论都做了什么操作。

比如插入或者删除等。例如： pre = 'abcde123' now = '1abc123' a前面插入了1, c后面删除了de

下面是一个函数，可以对比两个字符串的差异，并输出操作的描述：

function compareStrings(pre, now) {
  const diff = [];
  let i = 0;
  let j = 0;

  while (i < pre.length && j < now.length) {
    if (pre[i] === now[j]) {
      i++;
      j++;
    } else {
      if (pre[i + 1] === now[j]) {
        diff.push(`删除了${pre[i]}`);
        i++;
      } else if (pre[i] === now[j + 1]) {
        diff.push(`插入了${now[j]}`);
        j++;
      } else {
        diff.push(`替换了${pre[i]}为${now[j]}`);
        i++;
        j++;
      }
    }
  }

  while (i < pre.length) {
    diff.push(`删除了${pre[i]}`);
    i++;
  }

  while (j < now.length) {
    diff.push(`插入了${now[j]}`);
    j++;
  }

  return diff;
}

使用示例：

const pre = 'abcde123';
const now = '1abc123';
const result = compareStrings(pre, now);
console.log(result);

输出结果：

['插入了1', '删除了d', '删除了e']

这个函数会逐个比较两个字符串的字符，并根据差异进行操作的描述。如果一个字符在pre中存在但在now中不存在，就说明进行了删除操作；如果一个字符在now中存在但在pre中不存在，就说明进行了插入操作；如果两个字符不相等，则说明进行了替换操作。最后，如果还有剩余字符，就根据剩余字符进行删除或插入操作的描述。

场景设计题，大数据列表如何设计平滑滚动和加载，下滑再上滑的操作，上下两个buffer区间如何变化和加载数据。

设计一个平滑滚动和加载大数据列表的方案可以考虑以下几个方面：

1. 虚拟化列表： 使用虚拟化技术，只渲染可见区域内的列表项，而不是渲染整个大数据列表。这可以提高性能和渲染效率。常见的虚拟化技术包括基于视口的渲染和基于可滚动容器的渲染。
2. 滚动缓冲区： 在列表的上下两个边界之外，维护一个滚动缓冲区，用于提前加载列表项数据。当用户滚动到边界时，可以通过缓冲区内的数据快速响应并平滑滚动，避免等待数据加载的延迟。
3. 滚动事件处理： 监听滚动事件，根据滚动的位置和方向进行数据加载。当用户滚动到列表底部时，可以异步加载更多数据，并将新加载的数据添加到列表的底部。当用户滚动到列表顶部时，可以异步加载之前的数据，并将新加载的数据插入到列表的顶部。
4. 数据缓存： 针对已经加载过的数据，可以进行缓存，避免重复加载相同的数据项。缓存可以提高数据的访问速度，并减少网络请求。
5. 优化数据加载： 对于大数据列表，可以采用分页加载或增量加载的方式，根据用户滚动的位置和需求，按需加载数据，而不是一次性加载所有数据。这样可以降低初始加载的负荷，提高响应速度。
6. 加载指示器： 在数据加载过程中，可以提供加载指示器或占位符，显示正在加载的状态，让用户知道数据正在加载，避免用户的不必要等待和困惑。

通过上述设计，可以实现平滑滚动和加载大数据列表的功能。同时，还可以根据具体的业务场景和性能需求进行优化和调整，例如调整滚动缓冲区的大小、数据加载的策略等，以提供更好的用户体验。

线上监控 对于crashed这种怎么监控? 对于内存持续增长，比如用了15分钟之后才会出现问题怎么监控？

对于线上监控中的"crashed"（崩溃）情况和内存持续增长的问题，可以采取以下监控和调试措施：

1. 错误日志监控： 在应用程序中集成错误日志记录，将异常和错误信息记录到日志中，并建立监控系统实时监控日志。当应用程序崩溃时，错误日志会记录相关的堆栈跟踪信息和异常信息，帮助开发人员定位问题所在。
2. 健康检查和自动重启： 使用监控工具或服务监控应用程序的健康状态，例如使用心跳检查机制，定期检查应用程序是否仍在运行。如果应用程序崩溃或不响应，可以自动触发重启操作，以恢复服务。
3. 内存监控和泄漏检测： 使用内存监控工具，例如Heap Profiler和Memory Snapshot，来监控应用程序的内存使用情况。定期检查内存占用情况和垃圾回收情况，如果发现内存持续增长或存在内存泄漏的迹象，可以进一步进行调查和排查。
4. 性能监控和性能剖析： 使用性能监控工具和性能剖析器，例如Chrome开发者工具和Node.js的性能分析工具，来监控应用程序的性能指标。通过分析CPU使用率、响应时间、请求处理时间等指标，可以发现潜在的性能瓶颈和问题。
5. 监控报警和阈值设置： 设置监控指标的阈值和报警规则，当应用程序出现崩溃或内存持续增长等异常情况时，触发报警通知开发团队。这可以帮助快速响应和解决问题。

对于内存持续增长的问题，由于问题出现的时间延迟，可以使用一些持续监控和历史数据分析的方法：

1. 长期监控和数据采集： 持续收集和监控应用程序的性能数据和资源使用情况，包括内存占用、CPU使用率、请求处理时间等指标。建立历史数据集，用于分析和对比。
2. 数据分析和趋势监测： 对历史数据进行分析，观察内存增长的趋势和模式。使用数据可视化工具，绘制内存使用的趋势图，观察是否存在周期性的波动或逐渐增长的模式。
3. 阈值报警和自动化分析： 设置内存占用的阈值，当超过预设的阈值时触发报警。结合自动化分析工具，对内存增长异常的情况进行自动检测和分析。可以使用机器学习或规则引擎等技术来识别异常模式，并触发相应的警报通知。
4. 定时检查和资源释放： 针对长时间运行的应用程序，可以定期进行内存检查和资源释放。通过合理的缓存管理、对象池复用等手段，释放不再需要的内存资源，减少内存占用。
5. 压力测试和负载测试： 运行压力测试和负载测试，模拟高并发和大数据量的场景，观察应用程序在此类情况下的内存使用情况。这有助于发现内存泄漏、资源瓶颈等问题，并进行针对性的优化和调整。
6. 代码审查和优化： 对应用程序的代码进行审查和优化，特别关注内存管理方面的问题。减少不必要的内存分配和释放操作，优化数据结构和算法，以降低内存占用和内存泄漏的风险。

通过以上监控和调试策略，可以及时发现应用程序的崩溃情况和内存持续增长的问题，并采取相应的措施进行处理和优化。同时，与业务方协调好技术细节包括确定监控指标、设置报警规则、及时反馈问题等方面，以保证监控系统的准确性和实用性。

vue的keep-alive原理以及生命周期

Vue 的 keep-alive 组件是用来缓存和复用组件的，它能够在组件切换时将组件实例保留在内存中，以避免重复创建和销毁。这样可以提高组件的性能和响应速度。

Keep-alive 组件的工作原理如下：

1. 首次渲染：当包裹在 keep-alive 组件内的组件首次被渲染时，会将组件的实例缓存起来。
2. 缓存组件：当组件不再处于活动状态（例如组件被切换出去或被销毁）时，组件的实例仍然被保留在内存中，而不会被销毁。
3. 激活组件：当组件再次被激活（例如组件被切换回来）时，会从缓存中取出组件的实例，而不是重新创建新的实例。

通过使用 keep-alive 组件，可以有效地提高组件的渲染性能，并减少不必要的资源消耗。

keep-alive 组件有以下生命周期钩子函数：

1. activated：当组件被激活时调用，即组件从缓存中取出并重新渲染。
2. deactivated：当组件被停用时调用，即组件被缓存起来并停止渲染。

这些钩子函数可以在 keep-alive 包裹的组件中定义，用于处理组件激活和停用时的逻辑。在组件激活时，可以执行一些数据的初始化或网络请求等操作；在组件停用时，可以执行一些清理工作或取消网络请求等操作。

需要注意的是，被 keep-alive 缓存的组件在激活和停用时，并不会触发常规的创建和销毁钩子函数（如 created 和 destroyed）。因此，如果需要在组件每次激活或停用时都执行特定的逻辑，可以使用 activated 和 deactivated 钩子函数来代替。

浏览器从输入url开始发生了什么？

当在浏览器地址栏中输入 URL 时，浏览器开始进行以下操作：

1. URL 解析：浏览器解析 URL，确定要访问的协议（HTTP 或 HTTPS）、主机名、端口号、路径等信息。
2. DNS 解析：浏览器根据主机名查找对应的 IP 地址。如果缓存中存在该域名的 IP 地址，则直接使用缓存中的 IP 地址，否则通过 DNS 解析获取 IP 地址。
3. 建立 TCP 连接：浏览器通过 TCP 协议向服务器发送连接请求，服务器响应该请求并建立连接。
4. 发送 HTTP 请求：浏览器向服务器发送 HTTP 请求，请求中包括请求方法、请求 URL、请求头等信息。
5. 接收 HTTP 响应：服务器接收到请求并根据请求内容生成响应，响应中包括响应状态码、响应头、响应正文等信息。
6. 渲染页面：浏览器根据响应正文中的 HTML、CSS 和 JavaScript 代码，构建 DOM 树、CSSOM 树和 JavaScript 引擎环境，最终渲染出页面。

在这个过程中，浏览器还会进行一些其他的操作，如重定向、缓存、HTTPS 协议握手等。以上是一个简单的描述，具体的细节和操作可能会因浏览器和网站的不同而有所差异。

使用Promise实现一个异步流量控制的函数, 比如一共10个请求, 每个请求的快慢不同, 最多同时3个请求发出, 快的一个请求返回后, 就从剩下的7个请求里再找一个放进请求池里, 如此循环。写个函数。

下面是使用 Promise 实现异步流量控制的函数：

function asyncFlowControl(requests = [] , maxConcurrency = 3){
    const results = []; // 存储请求结果
    let pendingCount = 0; // 当前并发请求数
    const reqLength = requests.length;  
    return new Promise((resolve,reject)=>{
        handleRequest();
        function handleRequest(){
            while(pendingCount < maxConcurrency && requests.length){ 
              pendingCount++;
              let request = requests.shift();
              request().then(result => {
                results.push(result);
              }).finally(()=>{
                pendingCount--;// 当前请求完成，减少并发请求数
                handleRequest();
              })
            }
            if(results.length === reqLength) {  
                resolve(results);
            }
        }
    })
}

使用示例：

 
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// 模拟异步请求
const requestA = () => delay(1000).then(() => 'A');
const requestB = () => delay(2000).then(() => 'B');
const requestC = () => delay(1500).then(() => 'C');
const requestD = () => delay(800).then(() => 'D');
const requestE = () => delay(1200).then(() => 'E');
const requestF = () => delay(1700).then(() => 'F');
const requestG = () => delay(900).then(() => 'G');
const requestH = () => delay(1100).then(() => 'H');
const requestI = () => delay(1400).then(() => 'I');
const requestJ = () => delay(1800).then(() => 'J');

const requests = [requestA, requestB, requestC, requestD, requestE, requestF, requestG, requestH, requestI, requestJ];

asyncFlowControl(requests, 3)
  .then((results) => {
    console.log(results); // 打印请求结果
  })
  .catch((error) => {
    console.error(error); // 处理错误
  });

在上述示例中，asyncFlowControl 函数接受两个参数：requests 表示所有的异步请求函数，maxConcurrency 表示最大并发请求数。根据 maxConcurrency 控制同时发起的请求数量，等待请求完成后再继续发起新的请求，直到所有请求完成。最终返回一个包含所有请求结果的 Promise。

node.js如何调试？

在 Node.js 中，你可以使用以下几种方式进行调试：

1. 使用 console.log() ：在代码中插入 console.log() 语句输出变量、对象、调试信息等。这是最简单的调试方法，适用于快速检查代码执行流程和变量的值。
2. 使用 Node.js 内置的调试器：Node.js 提供了一个内置的调试器模块 debugger，可以通过在代码中插入 debugger 语句来触发断点。启动 Node.js 程序时加上 --inspect 参数，然后通过 Chrome 浏览器的开发者工具连接到调试器界面，可以进行断点调试、查看变量值、执行表达式等操作。例如，可以使用以下命令启动调试器：

node --inspect script.js

然后在 Chrome 浏览器中访问 chrome://inspect，找到对应的 Node.js 实例，点击 "inspect" 进入调试界面。

3. 使用第三方调试工具：除了内置的调试器，还有一些第三方调试工具可以帮助你进行 Node.js 调试，例如：

• • Visual Studio Code：提供了强大的 Node.js 调试功能，支持断点调试、变量查看、表达式求值等功能。
  • WebStorm：是一款强大的集成开发环境（IDE），内置了 Node.js 调试功能，支持断点调试、变量查看、表达式求值等。
  • ndb：是一个基于 Chrome DevTools 的 Node.js 调试工具，提供了直观的调试界面和丰富的调试功能。

这些调试方法可以根据个人偏好和调试需求进行选择。使用调试工具可以更方便地进行断点调试、变量查看、堆栈追踪等操作，提高调试效率。

charles map local/map remote？

Charles 是一款功能强大的代理工具，它提供了许多调试和测试网络通信的功能。其中包括 "Map Local" 和 "Map Remote" 两个重要的功能。

1. Map Local（本地映射）：通过 "Map Local" 功能，你可以将服务器上的某个 URL 映射到本地的一个文件，从而模拟服务器返回的响应。这对于前端开发人员来说非常有用，可以在不修改服务器端代码的情况下，模拟不同的响应情况，例如返回指定的 JSON 数据、HTML 页面或其他资源文件。使用步骤：

• • 打开 Charles，确保代理已启动。
  • 在 Charles 左侧的 "Structure" 面板中选择一个请求。
  • 在右侧的 "Map Local" 选项卡中，点击 "+ Add" 按钮，添加一个映射规则。
  • 在映射规则中指定远程 URL 和本地文件的路径。
  • 确认映射规则后，再次发送请求时，Charles 将返回本地文件的内容作为响应。

2. Map Remote（远程映射）："Map Remote" 功能与 "Map Local" 相反，它允许你将本地的某个 URL 映射到远程服务器上的资源。这对于测试和调试目的很有用，可以将本地开发的文件或测试环境的文件映射到实际的服务器上，以便进行实时的调试和测试。使用步骤：

• • 打开 Charles，确保代理已启动。
  • 在 Charles 左侧的 "Structure" 面板中选择一个请求。
  • 在右侧的 "Map Remote" 选项卡中，点击 "+ Add" 按钮，添加一个映射规则。
  • 在映射规则中指定本地 URL 和远程服务器的 URL。
  • 确认映射规则后，再次发送请求时，Charles 将会将本地 URL 转发到远程服务器，并将远程服务器的响应返回给你。

通过 "Map Local" 和 "Map Remote" 这两个功能，你可以在调试和测试过程中，方便地控制请求和响应的映射，从而模拟不同的场景和环境，加快开发和排查问题的速度。

chrome devtool 如何查看内存情况？

在 Chrome DevTools 中，你可以通过以下步骤来查看内存情况：

1. 打开开发者工具：在 Chrome 浏览器中，点击右上角的菜单按钮，选择 "更多工具"，然后点击 "开发者工具"。或者你可以使用快捷键 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）来快速打开开发者工具。
2. 切换到 "Memory" 面板：在开发者工具中，可以看到一系列选项卡，例如 "Elements"、"Console"、"Sources" 等。点击选项卡栏中的 "Memory" 选项卡，切换到 "Memory" 面板。
3. 记录内存快照：在 "Memory" 面板上，你会看到一个红色的圆形按钮，上面有个相机图标，点击该按钮将会记录当前的内存快照。你也可以使用快捷键 Ctrl + Shift + M（Windows/Linux）或 Cmd + Shift + M（Mac）来记录内存快照。
4. 查看内存情况：在 "Memory" 面板上，你会看到一个名为 "Summary" 的选项卡。在这个选项卡下，你可以查看内存使用情况的概览信息，包括 JavaScript 堆大小、DOM 节点数、事件侦听器数量等。
5. 进一步分析内存：除了 "Summary" 选项卡外，你还可以在 "Memory" 面板上找到其他选项卡，例如 "Heap"、"Allocation"、"Comparison" 等。这些选项卡提供了更详细的内存分析工具，可以帮助你查找内存泄漏、分析对象的生命周期、检查堆快照等。

通过使用 Chrome DevTools 的 "Memory" 面板，你可以监测和分析网页的内存使用情况，帮助你发现潜在的内存问题，并优化你的代码和资源管理。

koa洋葱模型？

Koa 框架使用了洋葱模型（Onion Model）来处理中间件（Middleware）。洋葱模型的设计思想是通过一种层层嵌套的方式，使每个中间件在请求的进入和响应的返回时都有机会执行逻辑。

在 Koa 的洋葱模型中，请求从外部中间件一层层地向内部中间件传递，然后再从内部中间件一层层地向外部中间件返回响应。在请求进入时，依次执行中间件的前半部分逻辑；在响应返回时，依次执行中间件的后半部分逻辑。

具体的执行过程如下：

1. 请求进入：当一个请求到达 Koa 应用时，请求会从外部中间件开始依次进入。
2. 前半部分逻辑执行：每个中间件在请求进入时执行前半部分逻辑，可以进行一些预处理、验证等操作。同时，每个中间件可以选择将请求传递给下一个中间件，也可以选择提前结束请求的处理。
3. 内部中间件执行：在经过外部中间件的处理后，请求进入内部中间件，执行内部中间件的前半部分逻辑。
4. 后半部分逻辑执行：当请求从内部中间件返回时，每个中间件按相反的顺序执行后半部分逻辑，进行一些清理、收尾等操作。同时，每个中间件也可以选择将响应返回给上一个中间件，或者提前结束响应的处理。
5. 响应返回：当响应从内部中间件返回到外部中间件时，最终响应会返回给客户端。

洋葱模型的设计使得中间件可以在请求进入和响应返回的不同阶段进行处理，方便实现各种功能，例如身份验证、错误处理、日志记录等。同时，中间件之间可以通过 next 参数传递请求和响应，形成了一种链式调用的结构。

Koa 的洋葱模型提供了更灵活、可扩展的中间件处理方式，使开发者可以更好地组织和管理应用的逻辑。

中间件的异常处理是怎么做的？

在 Koa 中，中间件的异常处理可以通过以下方式实现：

1. Try/Catch：在中间件函数内部使用 try/catch 块来捕获可能抛出的异常，并在 catch 块中处理异常情况。例如：

app.use(async (ctx, next) => {
  try {
    // 执行中间件逻辑
    await next();
  } catch (error) {
    // 处理异常
    ctx.status = error.status || 500;
    ctx.body = error.message;
  }
});

1. 错误中间件：创建一个专门处理错误的中间件，在应用的最后添加该中间件。该中间件会捕获之前中间件抛出的异常，并进行相应的处理。例如：

app.use(async (ctx, next) => {
  // 执行中间件逻辑
  await next();

  // 如果响应状态码为404，表示资源未找到，抛出一个404错误
  if (ctx.status === 404) {
    const error = new Error('Not Found');
    error.status = 404;
    throw error;
  }
});

app.use(async (ctx, next) => {
  // 执行中间件逻辑
  await next();

  // 如果需要抛出异常，可以通过条件判断抛出错误
  if (/* 某些条件 */) {
    const error = new Error('Something went wrong');
    error.status = 500;
    throw error;
  }
});

app.use(async (ctx, next) => {
  // 执行中间件逻辑
  await next();
});

// 错误处理中间件
app.use(async (ctx, next) => {
  try {
    await next();
  } catch (error) {
    // 处理异常
    ctx.status = error.status || 500;
    ctx.body = error.message;
  }
});

通过这种方式，错误中间件会捕获前面中间件抛出的异常，并根据需要进行适当的处理和响应。

注意：在 Koa 中，如果一个中间件内部抛出了一个异常而没有被捕获，Koa 默认会将异常当作 500 Internal Server Error 处理，返回给客户端。因此，在编写中间件时应当注意捕获和处理异常，以保证应用的稳定性和可靠性。

在没有async await 的时候, koa是怎么实现的洋葱模型?

在没有 async/await 的时候，Koa 仍然可以实现洋葱模型。Koa 1.x 版本使用的是基于生成器函数（Generator Function）的方式来实现洋葱模型。

在 Koa 1.x 中，中间件函数可以是一个生成器函数，它使用 yield 关键字来暂停和恢复执行。通过生成器函数，可以将中间件函数分为前半部分和后半部分，并通过 yield 将控制权传递给下一个中间件。

下面是一个简化的示例代码，展示了 Koa 1.x 版本中的洋葱模型的实现方式：

const koa = require('koa');
const app = koa();

app.use(function* (next) {
  // 前半部分逻辑
  console.log('First half before next()');

  // 执行下一个中间件
  yield next;

  // 后半部分逻辑
  console.log('First half after next()');
});

app.use(function* (next) {
  // 前半部分逻辑
  console.log('Second half before next()');

  // 执行下一个中间件
  yield next;

  // 后半部分逻辑
  console.log('Second half after next()');
});

app.use(function* () {
  // 中间件的逻辑
  console.log('Final middleware');
});

app.listen(3000);

在这个例子中，每个中间件都是一个生成器函数。通过 yield next，控制权会传递给下一个中间件的前半部分逻辑，然后再从后半部分逻辑回到上一个中间件的后半部分逻辑。这样就实现了洋葱模型的效果。

需要注意的是，Koa 2.x 引入了 async/await 语法来替代生成器函数的使用，因为 async/await 更直观和易于理解。所以在新版本的 Koa 中，推荐使用 async/await 来实现洋葱模型。

如果浏览器端用post接口上传图片和一些其他字段, header里会有什么? koa里如果不用body-parser，应该怎么解析?

---

当浏览器端使用 POST 接口上传图片和其他字段时，请求的 Header 部分会包含以下信息：

• Content-Type: 指定请求体的数据类型。对于上传图片和其他字段的组合，通常是 multipart/form-data 类型。

如果在 Koa 中不使用 body-parser 中间件，可以使用其他相关的中间件或库来解析请求体。一个常用的选择是 koa-body，它可以处理各种类型的请求体，包括 JSON、URL-encoded 和 multipart/form-data。

以下是一个使用 koa-body 解析请求体的示例：

const Koa = require('koa');
const koaBody = require('koa-body');

const app = new Koa();

// 使用 koa-body 中间件
app.use(koaBody());

// 处理 POST 请求
app.post('/api/upload', async (ctx) => {
  const { files, fields } = ctx.request.body;

  // 处理上传的文件和其他字段
  // ...

  ctx.body = 'Upload successful';
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在这个例子中，使用了 koa-body 中间件来处理请求体。koa-body 默认会根据请求的 Content-Type 自动解析请求体，将解析后的数据放在 ctx.request.body 对象中。

对于包含上传文件的请求，ctx.request.body 中会有一个 files 字段，它包含了上传的文件的信息。其他字段可以通过 ctx.request.body 直接访问。

使用 koa-body 简化了请求体的解析过程，可以方便地处理上传图片和其他字段的情况。

webscoket的连接原理

WebSocket 是一种基于 TCP 的协议，它提供了全双工的通信通道，允许客户端和服务器之间进行实时的双向数据传输。与传统的 HTTP 请求不同，WebSocket 建立一次连接后，可以保持长时间的通信会话，实现实时数据的推送和接收。

下面是 WebSocket 连接的基本原理：

1. 客户端发送 WebSocket 握手请求：客户端通过发送一个特定的 HTTP 请求，称为 WebSocket 握手请求，向服务器发起连接请求。这个请求会携带一些特定的头部信息，包括 Upgrade 和 Connection 字段，以及一个唯一的握手密钥。
2. 服务器返回 WebSocket 握手响应：服务器接收到握手请求后，会验证请求的合法性，并返回一个特定的响应，称为 WebSocket 握手响应。这个响应也包含一些特定的头部信息，包括 Upgrade 和 Connection 字段，以及一个与客户端握手密钥相关的响应头部。
3. 建立 WebSocket 连接：一旦客户端接收到服务器的握手响应，就表示 WebSocket 连接成功建立。此时，客户端和服务器之间的连接是持久的，并且可以通过该连接进行双向的实时数据传输。
4. 数据传输：建立连接后，客户端和服务器可以使用 WebSocket 提供的 API，通过发送和接收消息来进行数据传输。WebSocket 使用了自定义的协议格式，将数据封装为帧（frame）进行传输。每个帧都包含了数据的有效载荷，以及一些控制信息，如数据类型、消息分片等。

WebSocket 的连接原理基于上述步骤，它与传统的 HTTP 请求不同，能够提供实时、双向的通信能力，适用于实时聊天、推送通知等需要高实时性的场景。

https是如何保证安全的? 是如何保证不被中间人攻击的?

HTTPS（HTTP Secure）通过使用 SSL（Secure Sockets Layer）或 TLS（Transport Layer Security）协议来保证通信的安全性。以下是 HTTPS 如何保证安全性并防止中间人攻击的主要机制：

1. 加密通信：HTTPS 使用公钥加密和私钥解密的方式来加密通信内容。客户端和服务器之间的通信会使用公钥加密数据，只有服务器拥有相应的私钥可以解密这些数据。这样可以防止第三方窃听者获取敏感信息。
2. 数字证书验证：HTTPS 使用数字证书来验证服务器的身份。数字证书由可信的第三方机构颁发，称为证书颁发机构（Certificate Authority，CA）。客户端会验证服务器的证书是否由受信任的 CA 签发，并且检查证书中的域名信息与服务器的实际域名是否匹配。这样可以确保客户端与服务器之间建立的是可信的连接。
3. 防止篡改：HTTPS 使用消息摘要算法（如 SHA-256）来生成消息摘要，用于校验数据在传输过程中是否被篡改。客户端在接收到服务器发送的数据后会进行校验，如果摘要不匹配，则表示数据可能被篡改，并会中止连接。
4. 防止中间人攻击：HTTPS 的核心机制是公钥加密和数字证书验证。当客户端与服务器建立连接时，服务器会将自己的公钥发送给客户端。如果存在中间人攻击，中间人无法获得服务器的私钥，因此无法伪造有效的数字证书。如果客户端发现服务器的证书不可信，连接会被中止。

总之，HTTPS 通过加密通信、数字证书验证和防篡改机制来保证通信的安全性。这些机制有效地防止了中间人攻击，并确保客户端与服务器之间的连接是加密和可信的。

写一个函数，给一个字符串, 找到第一个不重复的字符。例如：ababcbdsa和abcdefg。函数的时间复杂度是多少?除了给的两个用例, 还能想到什么用例来测试一下?

可以使用哈希表（HashMap）来解决这个问题。遍历字符串，统计每个字符出现的次数，然后再遍历字符串找到第一个出现次数为1的字符。

以下是使用 JavaScript 实现的代码：

 
function findFirstUniqueChar(str) {
  const charCount = new Map();

  // 统计字符出现的次数
  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    charCount.set(char, charCount.get(char) + 1 || 1);
  }

  // 找到第一个出现次数为1的字符
  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    if (charCount.get(char) === 1) {
      return char;
    }
  }

  // 如果没有不重复的字符，则返回空字符串或特定标识
  return '';
}

该函数的时间复杂度是 O(n)，其中 n 是字符串的长度。遍历字符串的过程是线性的，哈希表的插入和查询操作的时间复杂度是 O(1)。

除了给出的两个用例（"ababcbdsa" 和 "abcdefg"），还可以测试一些其他用例，例如：

1. 空字符串：''，预期结果为 ''。
2. 所有字符都重复的字符串：'abcabc'，预期结果为 ''。
3. 所有字符都出现一次的字符串：'abcdefghijklmnopqrstuvwxyz'，预期结果为 'a'。
4. 只有一个字符的字符串：'x'，预期结果为 'x'。
5. 大写字母和小写字母混合的字符串：'aAbBcCdDeEfFgG'，预期结果为 ''。

这些用例可以覆盖一些边界情况和特殊情况，确保函数的正确性和鲁棒性。

你觉得js里this的设计怎么样? 有没有什么缺点？

JavaScript 中的 this 设计是一种动态绑定机制，它允许在函数被调用时根据调用上下文动态确定 this 的值。这种设计给开发者提供了灵活性和方便性，但也存在一些缺点。

优点：

1. 灵活性：this 的值取决于函数的调用方式，可以根据不同的上下文灵活指向不同的对象。这使得代码可以在不同的环境中重复使用。
2. 上下文传递：this 可以用于在对象之间传递上下文，使方法可以访问和操作所属对象的属性和方法。
3. 构造函数：this 在构造函数中被用来引用正在被实例化的对象，允许在构造函数中初始化新创建的对象。

缺点：

1. 容易造成混淆：由于 this 的值是动态确定的，当代码中存在多层嵌套函数或回调函数时，可能导致 this 的值与预期不符，引发混淆和错误。
2. 函数作为值时的问题：当将函数作为值传递时，this 的指向可能会改变。在回调函数或事件处理程序中，this 的值通常会指向触发事件的对象或全局对象（在非严格模式下）。
3. 难以捕获上下文：在一些特定情况下，特别是在使用箭头函数或通过 bind、call、apply 方法显式绑定 this 时，上下文的捕获和传递可能变得困难和复杂。

为了克服 this 的一些缺点，JavaScript 中也提供了一些辅助方法，如箭头函数、显式绑定 this 的方法（bind、call、apply）以及使用词法作用域来解决上下文问题。此外，ES6 中的类和箭头函数也提供了更清晰和可靠的上下文管理机制。

vue的响应式开发比命令式有什么好处？

Vue 的响应式开发相比于命令式开发具有以下几个优势：

1. 声明式：Vue 的响应式开发采用了声明式的编程风格，通过使用模板语法来描述 UI，使得代码更加清晰和易于理解。开发者只需要关注数据的状态和 UI 的展示，而不必关心具体的 DOM 操作。
2. 自动更新：在 Vue 的响应式系统中，当数据发生变化时，UI 会自动更新以保持与数据的同步。开发者不需要手动更新 UI，而是通过修改数据的状态，系统会自动响应并重新渲染相关的组件。
3. 组件化：Vue 的响应式开发鼓励使用组件化的思想，将 UI 拆分为独立的组件，每个组件负责自己的数据和视图。这种组件化的开发方式使得代码更加模块化、可维护性更高，也方便进行复用和组合。
4. 响应式侦测：Vue 的响应式系统能够自动侦测数据的变化，并在需要的时候更新相应的组件。这意味着开发者不需要手动跟踪和处理数据的变化，系统会自动进行侦测和更新，减少了手动维护状态的工作量。
5. 更好的性能优化：Vue 的响应式系统使用了虚拟 DOM 和 diff 算法来进行高效的渲染，只对需要更新的部分进行重绘，提高了性能。此外，Vue 还提供了一些性能优化的工具和技巧，如异步更新、懒加载等，帮助开发者提升应用程序的性能。

Vue 的响应式开发方式使得前端开发更加高效、简洁和易于维护。它减少了手动处理 DOM 的复杂性，提供了自动更新和组件化的能力，使得开发者能够更专注于业务逻辑和用户界面的交互，提高了开发效率和代码质量。