2025面试大全（12）1. 前端路由 a -> b -> c这样前进，也可以返回 c -> b -> a，用什么数据结

1. 前端路由 `a -> b -> c`这样前进，也可以返回 `c -> b -> a`，用什么数据结构来存比较高效

在前端路由中，为了实现类似浏览器历史记录的功能，即可以前进也可以后退，通常使用的数据结构是栈（Stack）。栈是一种后进先出（LIFO, Last In First Out）的数据结构，非常适合用来管理路由历史。以下是使用栈来管理路由历史的基本思路：

前进操作：
- 当从路由 a 到 b，再从 b 到 c 时，每次前进都将新路由压入栈中。
- 栈的状态变化：[a] -> [a, b] -> [a, b, c]
后退操作：
- 当从路由 c 返回到 b，再从 b 返回到 a 时，每次后退都将栈顶元素弹出。
- 栈的状态变化：[a, b, c] -> [a, b] -> [a] 使用栈的优势在于：

高效性：压入（push）和弹出（pop）操作的时间复杂度都是 O(1)，非常高效。
简洁性：逻辑简单，容易实现和管理。在实际的前端框架中，如React的React Router或Vue的Vue Router，它们内部也是采用类似栈的结构来管理路由历史的。当然，它们可能会在此基础上增加更多的功能，比如路由懒加载、动态路由匹配等。以下是一个简单的JavaScript示例，展示如何使用数组模拟栈来管理路由历史：

class RouterHistory {
  constructor() {
    this.historyStack = [];
  }
  // 前进到新路由
  push(route) {
    this.historyStack.push(route);
  }
  // 后退到上一路由
  pop() {
    if (this.historyStack.length > 1) {
      this.historyStack.pop();
    }
    return this.current();
  }
  // 获取当前路由
  current() {
    return this.historyStack[this.historyStack.length - 1];
  }
}
// 使用示例
const routerHistory = new RouterHistory();
routerHistory.push('a');
routerHistory.push('b');
routerHistory.push('c');
console.log(routerHistory.current()); // 输出：c
routerHistory.pop();
console.log(routerHistory.current()); // 输出：b
routerHistory.pop();
console.log(routerHistory.current()); // 输出：a

在这个示例中，RouterHistory 类使用一个数组 historyStack 来模拟栈的行为，实现了路由的前进和后退功能。

2. 如果要实现一个类似“谷歌图片”的系统，你会有哪些方面的考虑？

实现一个类似“谷歌图片”的系统是一个复杂的工程项目，涉及多个方面的考虑。以下是一些关键方面：

1. 系统架构

分布式系统：为了处理大规模的数据和请求，需要设计一个分布式系统。
微服务架构：将不同的功能模块（如搜索、存储、用户管理）拆分为独立的微服务，以提高可扩展性和维护性。

2. 数据存储

数据库选择：使用适合存储大量图片和元数据的数据库，如NoSQL数据库（MongoDB, Cassandra）或专门的对象存储服务。
索引机制：建立高效的数据索引机制，以快速检索图片。

3. 图片处理

上传与转换：实现图片的上传、压缩、格式转换等功能。
图像识别：集成图像识别技术，以实现基于内容的图片搜索。

4. 搜索引擎

全文搜索：实现全文搜索功能，包括图片标题、描述、标签等。
排序与过滤：提供按相关性、时间、流行度等排序功能，以及高级过滤选项。

5. 用户界面

响应式设计：设计适应不同设备的响应式用户界面。
用户体验：优化用户体验，包括快速加载、无限滚动、直观的导航等。

6. 性能优化

缓存策略：实施有效的缓存策略，如使用CDN、本地缓存等。
负载均衡：使用负载均衡器分配请求，以避免单点过载。

7. 安全性

数据安全：确保用户数据的安全，包括加密存储、访问控制等。
防止滥用：实施措施防止系统被滥用，如图片盗链、DDoS攻击等。

8. 可扩展性

水平扩展：设计系统以支持水平扩展，以应对增长的数据量和用户量。
自动化部署：实现自动化部署和扩展，以快速响应需求变化。

9. 法律与合规

版权管理：确保图片的版权得到妥善管理，提供版权声明和报告侵权机制。
隐私政策：遵守相关的数据隐私法规，如GDPR。

10. 人工智能与机器学习

推荐系统：利用机器学习实现个性化的图片推荐。
自动标签：使用AI自动为图片生成标签，提高搜索准确性。

11. 国际化

多语言支持：支持多种语言，以服务全球用户。
区域特定内容：根据用户地理位置提供特定区域的内容。

12. 监控与日志

系统监控：实时监控系统性能，及时发现并解决问题。
日志管理：记录和分析系统日志，以优化性能和追踪问题。

13. 用户反馈与社区

反馈机制：建立用户反馈机制，持续改进产品。
社区互动：鼓励用户社区互动，如评论、点赞、分享等。

14. 商业模式

广告收入：考虑通过广告获取收入。
付费服务：提供高级功能或内容的付费服务。在实现这样的系统时，还需要考虑团队组成、项目管理、预算控制等多个方面的因素。这是一个跨学科的工程项目，需要前端、后端、数据库、人工智能、用户体验设计等多个领域的专业知识和技能。

3. 前端的页面截图怎么实现？

在前端实现页面截图可以通过多种方法，以下是几种常见的技术实现：

1. 使用 HTML5 的 `canvas` 元素

function takeScreenshot() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  ctx.drawImage(document.body, 0, 0, canvas.width, canvas.height);
  const dataURL = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = dataURL;
  link.click();
}

2. 使用 `html2canvas` 库

首先，你需要引入 html2canvas 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

然后，可以使用以下代码进行截图：

function takeScreenshot() {
  html2canvas(document.body).then(canvas => {
    const dataURL = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = dataURL;
    link.click();
  });
}

3. 使用 Chrome 的 `chrome.runtime` API（仅限 Chrome 扩展程序）

如果你是在开发 Chrome 扩展程序，可以使用以下代码：

chrome.tabs.captureVisibleTab(null, {}, function(imageUrl) {
  const link = document.createElement('a');
  link.download = 'screenshot.png';
  link.href = imageUrl;
  link.click();
});

4. 使用 Electron 的 `desktopCapturer` API（仅限 Electron 应用）

在 Electron 应用中，可以使用以下代码：

const { desktopCapturer } = require('electron');
desktopCapturer.getSources({ types: ['window', 'screen'] }, (error, sources) => {
  if (error) throw error;
  for (const source of sources) {
    if (source.name === 'Electron') {
      navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'desktop',
            chromeMediaSourceId: source.id,
            minWidth: 1280,
            maxWidth: 1280,
            minHeight: 720,
            maxHeight: 720
          }
        }
      }).then(stream => {
        handleStream(stream);
      }).catch(e => {
        handleError(e);
      });
      return;
    }
  }
});
function handleStream(stream) {
  const video = document.createElement('video');
  video.srcObject = stream;
  video.onloadedmetadata = () => {
    video.play();
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const dataURL = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'screenshot.png';
    link.href = dataURL;
    link.click();
    stream.getTracks().forEach(track => track.stop());
  };
}
function handleError(e) {
  console.error(e);
}

注意事项：

跨域问题：在使用 canvas 时，如果绘制的图片来自不同的域，可能会遇到跨域问题。需要确保服务器配置了正确的 CORS 头。
性能问题：截图大页面或复杂页面时，可能会遇到性能问题。
浏览器兼容性：不同的方法在不同的浏览器上可能有不同的兼容性。选择哪种方法取决于你的具体需求和环境。例如，如果你是在开发一个 Web 应用，html2canvas 是一个很好的选择。如果你是在开发一个 Chrome 扩展程序或 Electron 应用，那么可以使用相应的 API。

4. 链表中，环的入口节点

在链表中检测环并找到环的入口节点是一个经典的问题。以下是解决这个问题的步骤：

1. 检测链表中是否存在环

使用快慢指针（Floyd's Tortoise and Hare algorithm）来检测链表中是否存在环：

定义两个指针，慢指针 slow 和快指针 fast。
慢指针每次移动一步，快指针每次移动两步。
如果链表中存在环，快慢指针最终会相遇。

2. 找到环的入口节点

一旦确定链表中存在环，可以使用以下步骤找到环的入口节点：

当快慢指针相遇时，将其中一个指针移回链表头部。
然后，两个指针都以相同的速度（每次移动一步）移动。
当两个指针再次相遇时，相遇的节点就是环的入口节点。

代码实现（以 Python 为例）

class ListNode:
    def __init__(self, x):
        self.val = x
        self.next = None
def detectCycle(head):
    if not head or not head.next:
        return None
    slow = fast = head
    # 检测环
    while fast and fast.next:
        slow = slow.next
        fast = fast.next.next
        if slow == fast:
            # 环存在，找到入口
            break
    else:
        # 无环
        return None
    # 找到环的入口
    slow = head
    while slow != fast:
        slow = slow.next
        fast = fast.next
    return slow
# 示例
# 创建链表: 1 -> 2 -> 3 -> 4 -> 5
#                     ^         |
#                     |_________|
head = ListNode(1)
head.next = ListNode(2)
head.next.next = ListNode(3)
head.next.next.next = ListNode(4)
head.next.next.next.next = ListNode(5)
head.next.next.next.next.next = head.next.next  # 创建环
entry = detectCycle(head)
if entry:
    print(f"环的入口节点值: {entry.val}")
else:
    print("链表中无环")

解释

检测环：快慢指针相遇即表示链表中存在环。
找到入口：当快慢指针相遇后，将其中一个指针移回链表头部，然后两个指针以相同速度移动，它们再次相遇的节点就是环的入口。这个算法的时间复杂度是 O(n)，空间复杂度是 O(1)，因为它只使用了两个额外的指针变量。

5. 实现一个请求函数：fetchWithRetry，要求会最多自动重试 3 次，任意一次成功就直接返回

要实现一个名为 fetchWithRetry 的函数，该函数会自动重试最多 3 次，并在任意一次成功时直接返回结果，我们可以使用 JavaScript 来实现。以下是一个简单的实现示例：

/**
 * 模拟的 fetch 函数，可能会失败
 * @param {string} url - 请求的 URL
 * @returns {Promise<any>} - 返回一个 Promise，可能 resolve 或 reject
 */
function mockFetch(url) {
  return new Promise((resolve, reject) => {
    // 假设有一定概率失败
    const shouldFail = Math.random() < 0.5;
    if (shouldFail) {
      reject(new Error('Request failed'));
    } else {
      resolve({ data: 'Success!' });
    }
  });
}
/**
 * 带有重试机制的请求函数
 * @param {string} url - 请求的 URL
 * @param {number} retries - 重试次数，默认为 3
 * @returns {Promise<any>} - 返回一个 Promise，成功时 resolve，所有重试失败后 reject
 */
function fetchWithRetry(url, retries = 3) {
  return new Promise((resolve, reject) => {
    const attempt = (n) => {
      mockFetch(url)
        .then(resolve)
        .catch((error) => {
          if (n === 1) {
            reject(error);
          } else {
            console.log(`Retrying... (${n - 1} retries left)`);
            attempt(n - 1);
          }
        });
    };
    attempt(retries);
  });
}
// 使用示例
fetchWithRetry('https://example.com/api/data')
  .then((response) => {
    console.log('Success:', response);
  })
  .catch((error) => {
    console.log('Failed after retries:', error);
  });

解释

mockFetch 函数：这是一个模拟的 fetch 函数，用于演示。它有一定概率会失败，以模拟网络请求的不确定性。
fetchWithRetry 函数：
- 接受一个 URL 和重试次数（默认为 3）作为参数。
- 返回一个 Promise，如果请求成功，则 resolve 结果；如果所有重试都失败，则 reject。
- 使用递归函数 attempt 来实现重试逻辑。每次失败后，如果还有剩余重试次数，就会再次尝试。
使用示例：展示了如何调用 fetchWithRetry 函数，并处理成功和失败的情况。这个实现简单明了，适用于演示目的。在实际应用中，你可能需要根据具体的 fetch 实现和错误处理需求进行调整。例如，你可能需要处理特定的 HTTP 状态码，或者设置重试之间的延迟。

6. 使用 js 实现有序数组原地去重

在 JavaScript 中，实现一个有序数组原地去重可以通过多种方法来完成。下面是一个简单且高效的方法，利用了数组有序的特性：

function removeDuplicates(nums) {
  if (nums.length === 0) return 0;
  let i = 0;
  for (let j = 1; j < nums.length; j++) {
    if (nums[j] !== nums[i]) {
      i++;
      nums[i] = nums[j];
    }
  }
  return i + 1;
}
// 示例
const nums = [1, 1, 2, 2, 3, 4, 4, 4, 5];
const newLength = removeDuplicates(nums);
console.log(nums.slice(0, newLength)); // [1, 2, 3, 4, 5]

解释

函数定义：removeDuplicates 函数接受一个有序数组 nums 作为参数。
边界条件：如果数组为空，直接返回 0。
双指针技术：
- 使用两个指针 i 和 j，其中 i 是慢指针，j 是快指针。
- 快指针 j 遍历数组，慢指针 i 用于指向去重后的数组的最后一个元素。
去重逻辑：
- 如果 nums[j] 不等于 nums[i]，说明发现了一个新的不同元素，将 i 向前移动一位，并将 nums[j] 的值赋给 nums[i]。
- 如果 nums[j] 等于 nums[i]，说明是重复元素，j 继续向前移动。
返回值：函数返回去重后数组的长度，即 i + 1。
示例：在示例中，我们调用 removeDuplicates 函数并打印去重后的数组。这种方法的时间复杂度是 O(n)，空间复杂度是 O(1)，因为它不需要额外的存储空间，而是在原数组上操作。这种方法利用了数组已经排序的特性，如果数组未排序，则需要先对数组进行排序，或者使用其他方法来去重。

7. CSS3 中 transition 和 animation 的属性分别有哪些？

在 CSS3 中，transition 和 animation 是两个用于实现动画效果的重要属性，但它们的功能和属性有所不同。

Transition 属性

transition 用于定义元素在状态变化时的过渡效果。它的属性包括：

transition-property：
- 指定要应用过渡效果的 CSS 属性。
- 默认值是 all，表示所有属性都应用过渡效果。
transition-duration：
- 定义过渡效果的持续时间。
- 必须指定，否则过渡不会发生。
transition-timing-function：
- 指定过渡效果的时间函数，即过渡的速度曲线。
- 常见值包括 ease、linear、ease-in、ease-out、ease-in-out 等。
transition-delay：
- 定义过渡效果开始前的延迟时间。 transition 还有一个简写属性，可以同时设置上述四个属性：

transition: <property> <duration> <timing-function> <delay>;

Animation 属性

animation 用于定义复杂的动画序列。它的属性包括：

animation-name：
- 指定关键帧动画的名称。
- 必须与 @keyframes 规则中的名称相匹配。
animation-duration：
- 定义动画的持续时间。
- 必须指定，否则动画不会运行。
animation-timing-function：
- 指定动画的时间函数，即动画的速度曲线。
- 与 transition-timing-function 类似。
animation-delay：
- 定义动画开始前的延迟时间。
animation-iteration-count：
- 指定动画的播放次数。
- 常见值包括 infinite（无限次）和具体的数字。
animation-direction：
- 指定动画的播放方向。
- 常见值包括 normal、reverse、alternate、alternate-reverse。
animation-fill-mode：
- 指定动画在执行之前和之后如何应用样式。
- 常见值包括 none、forwards、backwards、both。
animation-play-state：
- 指定动画的播放状态。
- 常见值包括 running（播放）和 paused（暂停）。 animation 也有一个简写属性，可以同时设置上述所有属性：

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

示例

/* Transition 示例 */
.box {
  transition: background-color 0.5s ease-in-out 0.2s;
}
/* Animation 示例 */
@keyframes example {
  from { background-color: red; }
  to { background-color: blue; }
}
.animated-box {
  animation: example 2s linear infinite alternate;
}

在上述示例中，.box 类定义了一个过渡效果，当背景颜色变化时，会有 0.5 秒的过渡，过渡速度曲线为 ease-in-out，并且有 0.2 秒的延迟。.animated-box 类定义了一个动画，名为 example，持续时间为 2 秒，速度曲线为 linear，无限次播放，并且交替方向播放。 transition 适用于简单的状态变化过渡，而 animation 适用于复杂的动画序列。两者可以结合使用，以实现更丰富的动画效果。

8. useMemo 和 useCallback 有什么区别？

useMemo 和 useCallback 都是 React hooks，用于优化组件性能，但它们的功能和用途有所不同。

useMemo

useMemo 用于缓存计算结果。当你有一个计算成本较高的函数，并且希望只在特定依赖改变时重新计算结果时，可以使用 useMemo。 语法：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

特点：

useMemo 接受一个函数和一个依赖数组。
只有当依赖数组中的元素发生变化时，才会重新执行函数并计算结果。
返回的是函数的执行结果。 用途：
缓存复杂计算的结果，避免在每次渲染时重复计算。
避免在渲染过程中创建新的对象或数组，以减少子组件的重新渲染。

useCallback

useCallback 用于缓存函数。当你有一个回调函数，并且希望将其传递给子组件时，可以使用 useCallback 来避免不必要的重新渲染。 语法：

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

特点：

useCallback 接受一个函数和一个依赖数组。
只有当依赖数组中的元素发生变化时，才会返回一个新的函数。
返回的是函数本身。 用途：
缓存回调函数，避免在每次渲染时创建新的函数实例。
当将回调函数作为props传递给子组件时，使用 useCallback 可以避免子组件因为接收到新的函数实例而重新渲染。

区别

返回值不同：
- useMemo 返回的是函数的执行结果。
- useCallback 返回的是函数本身。
用途不同：
- useMemo 用于缓存计算结果。
- useCallback 用于缓存函数。
性能优化场景不同：
- useMemo 适用于优化计算成本较高的操作。
- useCallback 适用于优化回调函数的传递，避免子组件不必要的重新渲染。

示例

import React, { useState, useMemo, useCallback } from 'react';
function expensiveCalculation(num) {
  console.log('Calculating...');
  for (let i = 0; i < 1000000000; i++) {} // 模拟复杂计算
  return num * 2;
}
function App() {
  const [number, setNumber] = useState(0);
  const [isGreen, setIsGreen] = useState(true);
  const doubleNumber = useMemo(() => {
    return expensiveCalculation(number);
  }, [number]);
  const changeColor = useCallback(() => {
    setIsGreen(!isGreen);
  }, [isGreen]);
  return (
    <>
      <h1 style={{ color: isGreen ? 'green' : 'red' }}>{doubleNumber}</h1>
      <button onClick={() => setNumber(number + 1)}>Add</button>
      <button onClick={changeColor}>Change Color</button>
    </>
  );
}
export default App;

在上述示例中，useMemo 用于缓存 expensiveCalculation 函数的结果，只有当 number 变化时才会重新计算。useCallback 用于缓存 changeColor 函数，只有当 isGreen 变化时才会返回一个新的函数实例，从而避免不必要的重新渲染。总结来说，useMemo 和 useCallback 都是用于性能优化的工具，但它们针对的场景和返回值不同。正确使用它们可以有效地提高React组件的性能。

9. 说下 websocket 的连接原理

WebSocket是一种网络通信协议，提供了一个在单个长连接上进行全双工、双向交互的通道。它主要用于在用户浏览器和服务器之间建立一个持久的连接，使得服务器可以主动推送数据到客户端，而不需要客户端不断轮询服务器。

WebSocket连接原理

握手阶段（Handshake）：
- WebSocket连接开始于一个HTTP请求，称为“握手”。
- 客户端发送一个特殊的HTTP请求到服务器，请求方法为GET，请求头中包含Upgrade: websocket和Connection: Upgrade，表示请求升级到WebSocket协议。
- 请求头中还包含一个Sec-WebSocket-Key，这是一个由客户端生成的随机字符串，用于服务器生成响应头的Sec-WebSocket-Accept。
服务器响应：
- 服务器收到客户端的握手请求后，如果支持WebSocket，会返回一个特殊的HTTP响应。
- 响应状态码为101 Switching Protocols，表示协议升级成功。
- 响应头包含Upgrade: websocket和Connection: Upgrade，与请求头对应。
- 服务器还会计算Sec-WebSocket-Key与一个固定字符串（258EAFA5-E914-47DA-95CA-C5AB0DC85B11）的SHA-1哈希值，然后进行Base64编码，作为Sec-WebSocket-Accept返回。
连接建立：
- 客户端收到服务器的响应后，验证Sec-WebSocket-Accept是否正确。
- 如果验证成功，客户端和服务器之间的WebSocket连接就建立了，之后双方可以通过这个连接进行双向数据传输。
数据传输：
- WebSocket连接建立后，客户端和服务器可以随时发送消息。
- WebSocket消息分为两种类型：文本消息和二进制消息。
- 每个消息都包含一个或多个帧（frame），帧是WebSocket传输数据的基本单位。
- 帧包含帧头（用于描述消息类型、长度等信息）和帧体（实际的数据内容）。
连接关闭：
- 任一端可以发送一个关闭帧来关闭WebSocket连接。
- 关闭帧包含一个状态码和可选的关闭原因。
- 另一端收到关闭帧后，会发送一个确认关闭帧，然后关闭TCP连接。

WebSocket的特点

全双工通信：允许数据在两个方向上同时传输，客户端和服务器都可以主动发送消息。
持久连接：一旦建立连接，就可以持续传输数据，不需要频繁建立和断开连接。
低延迟：相比HTTP轮询，WebSocket减少了不必要的网络开销，实现了低延迟通信。
轻量级：WebSocket协议头较小，减少了数据传输的负担。

应用场景

实时聊天应用
在线游戏
实时股票交易
实时数据监控
协同编辑 WebSocket的连接原理基于HTTP协议的升级机制，通过握手阶段协商升级到WebSocket协议，从而实现全双工、低延迟的通信。这种机制使得WebSocket成为构建实时Web应用的理想选择。

10. 请实现一个函数，要求能在页面请求很多时，尽可能快地按照顺序输出返回的结果。

为了实现一个函数，在页面请求很多时能够尽可能快地按照顺序输出返回的结果，我们可以采用以下策略：

使用Promise来管理异步操作：Promise可以帮助我们控制异步操作的执行顺序。
利用数组来存储请求结果：通过数组索引来保证结果的顺序。
使用异步函数（async/await）：简化异步代码的编写，使代码更易于理解和维护。以下是一个示例实现：

// 假设我们有一个模拟的异步请求函数
function mockAjaxRequest(url) {
  return new Promise((resolve) => {
    // 模拟网络延迟
    setTimeout(() => {
      resolve(`Response from ${url}`);
    }, Math.random() * 2000); // 随机延迟时间
  });
}
// 主函数，用于处理多个请求并按顺序输出结果
async function processRequestsInOrder(urls) {
  const results = new Array(urls.length);
  const promises = urls.map((url, index) =>
    mockAjaxRequest(url).then((response) => {
      results[index] = response; // 按顺序存储结果
    })
  );
  // 等待所有请求完成
  await Promise.all(promises);
  // 按顺序输出结果
  results.forEach((result) => {
    console.log(result);
  });
}
// 示例使用
const urls = [
  'http://example.com/api1',
  'http://example.com/api2',
  'http://example.com/api3',
  // ...更多URL
];
processRequestsInOrder(urls);

解释：

mockAjaxRequest函数：模拟一个异步的HTTP请求，返回一个Promise，该Promise在随机延迟后解析为请求结果。
processRequestsInOrder函数：接收一个URL数组，为每个URL创建一个Promise，并在Promise解析后将其结果存储在对应索引的位置。使用Promise.all等待所有Promise完成，然后按顺序输出结果。

关键点：

数组索引：通过数组索引来保证结果的顺序，即使异步操作完成的时间不同。
Promise.all：确保所有异步操作都完成后才进行结果输出，这样可以最大化并发执行，同时保证输出顺序。这个实现确保了在多个页面请求时，能够尽可能快地按照顺序输出返回的结果，同时利用了JavaScript的异步特性来提高效率。

11. 浏览器有哪几种缓存，各种缓存的优先级是什么样的？

浏览器中的缓存机制主要用于提高页面加载速度和减少网络请求，从而提升用户体验。浏览器缓存主要分为以下几种：

内存缓存（Memory Cache）
磁盘缓存（Disk Cache）
Service Worker缓存
HTTP缓存
浏览器缓存（如AppCache，已不推荐使用）

各种缓存的优先级：

Service Worker缓存：
- 优先级最高，因为Service Worker可以完全控制网络请求，即使网络请求已经到达服务器，也可以被Service Worker拦截并返回缓存内容。
HTTP缓存：
- 次高优先级，根据HTTP头部的缓存控制策略（如Cache-Control、Expires、ETag等）来决定是否使用缓存。
内存缓存（Memory Cache）：
- 优先级较高，用于存储最近使用的资源，如当前页面中使用的脚本、样式表和图片等。内存缓存的速度比磁盘缓存快，但容量有限。
磁盘缓存（Disk Cache）：
- 优先级较低，用于存储不在内存缓存中的资源。磁盘缓存容量较大，但速度较慢。
浏览器缓存（如AppCache）：
- 优先级最低，AppCache已被认为是过时的技术，不推荐使用。

缓存机制的工作流程：

请求发起：浏览器发起一个资源请求。
Service Worker检查：如果Service Worker被注册并且有效，它会首先拦截请求，检查是否有匹配的缓存资源。
HTTP缓存检查：如果Service Worker没有返回资源，浏览器会检查HTTP缓存，根据缓存控制策略决定是否使用缓存。
内存缓存检查：如果HTTP缓存没有命中，浏览器会检查内存缓存。
磁盘缓存检查：如果内存缓存没有命中，浏览器会检查磁盘缓存。
网络请求：如果所有缓存都没有命中，浏览器会发起网络请求获取资源。

注意事项：

缓存控制：开发者可以通过设置HTTP头部来控制资源的缓存策略，如Cache-Control: no-cache可以禁止缓存。
缓存失效：缓存可能会因为各种原因失效，如缓存过期、手动清除缓存等。
缓存一致性：确保缓存的内容与服务器上的内容一致是非常重要的，可以通过设置合理的缓存过期时间和使用验证令牌（如ETag）来实现。了解这些缓存机制和它们的优先级有助于开发者更好地优化网站性能和用户体验。

12. 讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理

PNG8、PNG24、PNG32的区别

颜色深度：
- PNG8：支持256种颜色，每个像素占用1个字节（8位）。
- PNG24：通常被称为PNG16，但实际上它支持超过16位颜色。PNG24支持1600万种颜色，每个像素占用3个字节（24位），分别为红色、绿色和蓝色各占用1个字节。
- PNG32：支持超过16位颜色，并且包含一个额外的alpha通道（用于表示透明度）。每个像素占用4个字节（32位），分别为红色、绿色、蓝色和alpha通道各占用1个字节。
透明度：
- PNG8：可以支持1位透明度，即像素要么完全透明，要么完全不透明。
- PNG24：不支持透明度，但可以通过其他方式（如使用PNG32）实现。
- PNG32：支持完整的256级透明度（alpha通道），可以表示从完全透明到完全不透明的渐变。
文件大小：
- PNG8：由于颜色深度较低，文件大小通常较小。
- PNG24和PNG32：由于颜色深度较高，文件大小通常较大。PNG32由于额外包含了alpha通道，所以文件大小通常比PNG24更大。
适用场景：
- PNG8：适用于颜色数量较少的图像，如图标、徽标等。
- PNG24：适用于需要高质量颜色表现的图像，如照片、复杂的图形等。
- PNG32：适用于需要透明度效果的图像，如带有渐变透明背景的图像。 PNG的压缩原理 PNG使用了一种称为“Deflate”的压缩算法，该算法结合了LZ77算法和哈夫曼编码。以下是PNG压缩的基本原理：
LZ77算法：
- LZ77是一种无损压缩算法，它通过查找数据中的重复字符串来压缩数据。当一个重复的字符串被找到时，它会被一个较短的引用所替代，这个引用指向之前出现过的相同字符串。
哈夫曼编码：
- 哈夫曼编码是一种基于符号出现频率的编码方式。出现频率较高的符号会被分配较短的编码，而出现频率较低的符号会被分配较长的编码。这样可以使整体编码长度变短，从而实现压缩。
过滤：
- 在压缩之前，PNG会对图像数据进行过滤，以减少数据中的冗余。PNG定义了多种过滤方法，如None、Sub、Up、Average和Paeth。这些过滤方法可以减少相邻像素之间的差异，从而提高压缩效率。
压缩：
- 经过过滤后的数据会被送入Deflate压缩器进行压缩。Deflate压缩器会首先使用LZ77算法查找和替换重复的字符串，然后使用哈夫曼编码对数据进行进一步的压缩。
存储：
- 压缩后的数据会被存储在PNG文件中。PNG文件还包含其他元数据，如图像尺寸、颜色类型、压缩方法等。 PNG的压缩是无损的，这意味着在压缩和解压缩过程中不会丢失任何图像数据。这使得PNG特别适合用于需要高质量图像的场景。然而，由于PNG的压缩算法相对复杂，其压缩速度可能比其他一些简单的压缩算法（如GZIP）慢。

13. 如果在 useEffect 的第一个参数中 return 了一个函数，那么第二个参数分别传空数组和传依赖数组，该函数分别是在什么时候执行？

在 React 的 useEffect Hook 中，如果第一个参数中返回了一个函数，那么这个返回的函数通常被称为清理函数或副作用清理函数。它用于在组件卸载或依赖项改变之前执行清理操作，如取消订阅、清除定时器、移除事件监听器等。

第二个参数传空数组（`[]`）

当 useEffect 的第二个参数传空数组时，表示这个副作用只在组件挂载时执行一次，并且返回的清理函数只在组件卸载时执行一次。

useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数
  };
}, []);

执行时机：

副作用函数：在组件首次渲染完成后执行。
清理函数：在组件卸载时执行。

第二个参数传依赖数组（非空数组）

当 useEffect 的第二个参数传依赖数组时，副作用函数会在组件首次渲染和依赖项改变时执行。返回的清理函数会在每次副作用函数执行之前执行，也就是在组件卸载或依赖项改变之前执行。

useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数
  };
}, [dependency1, dependency2]);

执行时机：

副作用函数：在组件首次渲染完成后和依赖项（dependency1、dependency2）改变时执行。
清理函数：在组件卸载时以及每次依赖项改变后、新的副作用函数执行之前执行。

总结

空数组（[]）：副作用函数在组件挂载时执行一次，清理函数在组件卸载时执行一次。
依赖数组：副作用函数在组件挂载和依赖项改变时执行，清理函数在组件卸载和依赖项改变之前执行。理解这些执行时机对于正确管理副作用和避免潜在的问题（如内存泄漏）非常重要。

14. useEffect 的第二个参数, 传空数组和传依赖数组有什么区别？

useEffect 的第二个参数用于控制副作用函数的执行时机。传空数组和非空依赖数组的主要区别在于它们如何影响副作用函数的执行频率。

传空数组（`[]`）

当 useEffect 的第二个参数是空数组时，表示副作用函数只会在组件的挂载阶段执行一次，并且在组件卸载时执行清理函数（如果提供了的话）。

useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数（可选）
  };
}, []);

特点：

执行一次：副作用函数只在组件首次渲染后执行一次。
性能优化：由于不依赖于任何状态或属性，不会在组件更新时重新执行，有助于性能优化。
常见场景：用于执行仅需要在组件挂载时执行的操作，如获取数据、设置事件监听器等。

传依赖数组（非空数组）

当 useEffect 的第二个参数是一个包含一个或多个依赖项的数组时，副作用函数会在组件首次渲染后执行，并且每当数组中的任何一个依赖项发生变化时，副作用函数都会重新执行。同时，在副作用函数重新执行之前，会先执行上一次副作用函数返回的清理函数。

useEffect(() => {
  // 副作用代码
  return () => {
    // 清理函数（可选）
  };
}, [dependency1, dependency2]);

特点：

依赖项变化时执行：副作用函数在组件首次渲染后执行，并在依赖项变化时重新执行。
清理函数：在副作用函数重新执行之前，会执行清理函数以进行必要的清理操作。
常见场景：用于执行依赖于特定状态或属性变化的操作，如订阅数据、根据状态变化更新 DOM 等。

区别总结

执行频率：空数组导致副作用函数只执行一次，而依赖数组导致副作用函数在依赖项变化时多次执行。
性能考虑：空数组有助于避免不必要的重新执行，从而优化性能；依赖数组则允许副作用根据实际需要更新。
使用场景：空数组适用于不依赖于组件状态或属性的操作；依赖数组适用于需要根据状态或属性变化执行的操作。正确使用 useEffect 的第二个参数是管理组件副作用和避免潜在问题的关键。

15. Web Worker 是什么？

Web Worker 是一种在网页后台运行脚本的技术，允许开发者在后台线程中执行JavaScript代码，而不会影响主线程（即用户界面线程）的执行。Web Worker的引入是为了解决JavaScript在浏览器中的单线程限制，使得可以并行处理复杂或耗时的任务，从而提高网页的响应性和性能。

Web Worker的类型

专用线程（Dedicated Worker）：
- 只能被创建它的脚本所使用。
- 不能在多个窗口或标签页之间共享。
- 通过new Worker()创建。
共享线程（Shared Worker）：
- 可以在多个窗口或标签页之间共享。
- 允许多个脚本共同使用同一个Worker实例。
- 通过new SharedWorker()创建。
服务线程（Service Worker）：
- 主要用于实现离线缓存、消息推送和后台同步等功能。
- 运行在浏览器后台，与网页的生命周期独立。
- 通过navigator.serviceWorker.register()注册。

Web Worker的特点

后台运行：在后台线程中执行，不会阻塞用户界面。
异步性：通过消息传递与主线程进行通信，实现异步操作。
隔离环境：Worker线程运行在独立的全局上下文中，不共享主线程的JSGlobal对象。
资源限制：无法直接访问DOM（但可以通过消息传递间接操作DOM），有限制的访问Web API。

使用场景

复杂计算：执行复杂的数学运算或数据处理，如图像处理、大数据分析等。
密集型任务：处理大量数据或进行密集型计算，如排序、搜索等。
实时处理：实现实时数据更新或处理，如股票行情、实时聊天等。
后台同步：在后台执行数据同步或更新任务，如上传文件、同步数据库等。

示例代码

以下是一个简单的专用线程（Dedicated Worker）的示例： 主线程代码：

// 创建一个新的Worker
const myWorker = new Worker('worker.js');
// 向Worker发送消息
myWorker.postMessage({ type: 'start', data: [1, 2, 3, 4, 5] });
// 监听来自Worker的消息
myWorker.onmessage = function(event) {
  console.log('Received from worker:', event.data);
};
// 监听Worker的错误
myWorker.onerror = function(error) {
  console.error('Worker error:', error);
};

Worker线程代码（worker.js）：

// 监听来自主线程的消息
onmessage = function(event) {
  const { type, data } = event.data;
  if (type === 'start') {
    // 执行复杂计算，例如求和
    const sum = data.reduce((acc, curr) => acc + curr, 0);
    // 向主线程发送结果
    postMessage({ type: 'result', data: sum });
  }
};
// 监听错误
onerror = function(error) {
  console.error('Worker error:', error);
};

在这个示例中，主线程创建了一个Worker，并向其发送了一个数组。Worker接收到消息后，计算数组的和，并将结果发送回主线程。这样，即使计算很复杂，也不会阻塞用户界面。

16. 说说你对 webpack5 模块联邦的了解？

**Webpack 5 模块联邦（Module Federation）**是一种新的代码共享和动态加载模块的方式，它允许在多个独立的构建之间共享代码，这些构建可以运行在同一个页面上，也可以运行在不同的页面上。模块联邦是Webpack 5中引入的一项重大特性，它为前端架构带来了更多的灵活性和可扩展性。

核心概念

容器（Container）：
- 每个参与模块联邦的构建都是一个容器，它可以导出模块或导入其他容器的模块。
远程模块（Remote Modules）：
- 被其他容器导入的模块称为远程模块。
本地模块（Local Modules）：
- 容器自身导出的模块称为本地模块。
主机（Host）：
- 在一个页面中，负责加载和运行其他容器的容器被称为主机。
远程入口（Remote Entry）：
- 每个容器都有一个远程入口，它是一个JavaScript文件，包含了容器的所有导出信息，以及其他容器如何加载这些模块的说明。

工作原理

配置：
- 在Webpack配置文件中，通过module federation插件配置容器的名称、远程入口的URL以及要导出或导入的模块。
构建：
- Webpack在构建时会生成远程入口文件，并在主文件中注入加载远程模块的代码。
运行时：
- 在运行时，主机通过远程入口加载其他容器的模块，并可以在自己的代码中直接使用这些模块。

使用场景

微前端架构：不同的团队可以独立开发、测试和部署自己的应用，同时在一个页面上共享和组合这些应用。
代码共享：在不同的应用之间共享UI组件、工具函数或业务逻辑，减少重复代码。
动态加载：按需加载功能模块，提高应用的启动速度和性能。
跨应用通信：通过模块联邦，不同的应用可以直接调用彼此的模块，实现跨应用的通信和交互。

示例配置

以下是一个简单的模块联邦配置示例： 主机应用（host-app）的Webpack配置：

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'host_app',
      remotes: {
        remote_app: 'remote_app@http://localhost:3001/remoteEntry.js',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
  // ...
};

远程应用（remote-app）的Webpack配置：

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote_app',
      filename: 'remoteEntry.js',
      exposes: {
        './MyComponent': './src/MyComponent',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
  // ...
};

在这个示例中，host_app是主机应用，它通过remotes配置项指定了要加载的远程应用remote_app的远程入口URL。remote_app是远程应用，它通过exposes配置项导出了自己的MyComponent模块。

注意事项

兼容性：模块联邦需要Webpack 5及以上版本支持。
性能：虽然模块联邦提供了强大的功能，但也会增加运行时的复杂性和加载时间，需要合理使用。
版本管理：共享模块的版本管理需要特别注意，以避免版本冲突。模块联邦为前端架构设计提供了新的可能性，使得前端应用可以更加模块化、可组合和可扩展。然而，它也带来了一些新的挑战，需要开发者在实践中不断探索和优化。

17. Promise 的 finally 怎么实现的？

Promise 的 finally 方法用于指定在 Promise 执行完毕后（无论结果是 resolve 还是 reject）都要执行的回调函数。finally 方法的实现原理主要是利用了 Promise 的链式调用和状态不可逆的特性。下面是一个简单的 finally 方法的实现示例：

Promise.prototype.myFinally = function(callback) {
  return this.then(
    value => Promise.resolve(callback()).then(() => value),
    reason => Promise.resolve(callback()).then(() => { throw reason; })
  );
};

实现解释：

链式调用：
- finally 方法返回一个新的 Promise，这个新的 Promise 是在原 Promise 的基础上通过 then 方法链式调用的结果。
处理回调：
- callback 是 finally 方法中传入的回调函数，无论原 Promise 是resolve还是reject，这个回调函数都会被执行。
保持原 Promise 的状态：
- 如果原 Promise 是resolve状态，执行完 callback 后，需要返回原 Promise 的值，以保证 finally 方法不会改变原 Promise 的resolve值。
- 如果原 Promise 是reject状态，执行完 callback 后，需要重新抛出原 Promise 的错误，以保证 finally 方法不会改变原 Promise 的reject原因。
使用 Promise.resolve 包装回调：
- callback 可能是一个同步函数或返回一个 Promise 的函数。使用 Promise.resolve 可以确保 callback 的执行结果是一个 Promise，从而可以继续链式调用。
错误处理：
- 在 reject 的处理中，使用 throw reason 来确保错误能够被后续的 catch 捕获。

使用示例：

new Promise((resolve, reject) => {
  // some asynchronous operation
  resolve('Success');
}).myFinally(() => {
  console.log('This will run regardless of the result');
}).then(value => {
  console.log(value); // 'Success'
}).catch(error => {
  console.error(error);
});

在这个示例中，无论原 Promise 是resolve还是reject，myFinally 中的回调函数都会被执行，且不会改变原 Promise 的结果。

注意事项：

finally 方法中的回调函数不接受任何参数，即无法获取原 Promise 的结果或错误信息。
finally 方法返回的新 Promise 的状态和值与原 Promise 保持一致。
如果 finally 方法中的回调函数抛出错误，那么返回的新 Promise 将会被reject。这个实现是一个简化的版本，实际的 Promise 实现可能会更加复杂，包括对各种边缘情况的处理。但是，这个示例展示了 finally 方法的基本实现原理。

18. Promise then 第二个参数和catch的区别是什么？

Promise 的 then 方法的第二个参数和 catch 方法都是用来处理拒绝（reject）情况的，但它们之间有一些细微的区别：

`then` 方法的第二个参数：

promise.then(successCallback, failureCallback);

用途：then 方法的第二个参数是一个回调函数，用于处理 Promise 被拒绝的情况。
错误捕获：如果 successCallback 中抛出错误，failureCallback 不会捕获这个错误。错误会直接传递到下一个 catch 方法或者 then 的第二个参数。
返回值：failureCallback 可以返回一个值或者一个新的 Promise。如果返回一个值，这个值会成为下一个 then 方法的成功回调的参数。如果返回一个新的 Promise，后续的链式调用会等待这个新的 Promise 解决（resolve）或拒绝（reject）。
链式调用：then 方法总是返回一个新的 Promise，无论其处理函数是否抛出错误。

`catch` 方法：

promise.catch(failureCallback);

用途：catch 方法是 then(null, failureCallback) 的语法糖，专门用于处理 Promise 被拒绝的情况。
错误捕获：catch 方法会捕获 Promise 链中任何位置的拒绝（reject）或错误（error）。这意味着如果 Promise 链中的任何 then 方法的成功回调抛出错误，catch 方法都会捕获它。
返回值：与 then 的第二个参数类似，catch 中的 failureCallback 可以返回一个值或者一个新的 Promise，影响后续的链式调用。
链式调用：catch 方法也返回一个新的 Promise，允许继续链式调用。

区别总结：

语法和意图：
- then 的第二个参数是 then 方法的一部分，用于指定成功和失败时的处理函数。
- catch 是一个单独的方法，专门用于处理错误，语法上更清晰，意图更明确。
错误捕获范围：
- then 的第二个参数只能捕获它前面 Promise 的拒绝。
- catch 可以捕获 Promise 链中任何位置的拒绝或错误。
链式调用的清晰度：
- 使用 catch 方法可以让错误处理代码与正常流程的代码分离，提高代码的可读性和维护性。

示例：

// 使用 then 的第二个参数
promise.then(
  value => console.log('Resolved:', value),
  error => console.error('Rejected:', error)
);
// 使用 catch 方法
promise.then(value => console.log('Resolved:', value)).catch(
  error => console.error('Rejected:', error)
);

在大多数情况下，推荐使用 catch 方法来处理错误，因为它的意图更明确，且能够捕获 Promise 链中任何位置的错误。then 的第二个参数更适用于那些需要同时处理成功和失败情况，且不希望使用额外 catch 的场景。

19. 删除链表的一个节点

在计算机科学中，链表是一种常见的数据结构，它由一系列节点组成，每个节点包含数据和指向下一个节点的指针。删除链表中的某个节点通常需要考虑以下几种情况：

删除头节点：需要将头指针指向第二个节点。
删除中间节点：需要将前一个节点的指针指向目标节点的下一个节点。
删除尾节点：需要将倒数第二个节点的指针设置为 null。
链表为空或节点不存在：不需要进行任何操作。以下是一个用 JavaScript 实现的示例，假设我们有一个单链表，并且我们要删除一个特定的节点：

function ListNode(val, next) {
  this.val = val === undefined ? 0 : val;
  this.next = next === undefined ? null : next;
}
function deleteNode(head, val) {
  // 如果链表为空，直接返回 null
  if (!head) return null;
  // 如果要删除的是头节点
  if (head.val === val) {
    return head.next;
  }
  // 初始化当前节点
  let current = head;
  // 遍历链表，找到要删除的节点的前一个节点
  while (current.next && current.next.val !== val) {
    current = current.next;
  }
  // 如果找到了要删除的节点，将其前一个节点的 next 指向要删除节点的 next
  if (current.next) {
    current.next = current.next.next;
  }
  // 返回头节点
  return head;
}
// 示例使用
let node1 = new ListNode(1);
let node2 = new ListNode(2);
let node3 = new ListNode(3);
node1.next = node2;
node2.next = node3;
// 删除值为 2 的节点
let newHead = deleteNode(node1, 2);
// 打印结果
let current = newHead;
while (current) {
  console.log(current.val);
  current = current.next;
}

在这个示例中，我们定义了一个 ListNode 类来表示链表的节点，并实现了一个 deleteNode 函数来删除具有特定值的节点。我们通过遍历链表来找到要删除的节点的前一个节点，然后修改其 next 指针来删除目标节点。请注意，这个实现假设我们有权访问链表的头节点，并且我们知道要删除的节点的值。如果我们要删除的节点是给定的节点本身（而不是通过值来识别），并且我们无法访问头节点，那么情况会变得更加复杂，因为我们需要找到给定节点的前一个节点来重新链接链表。在这种情况下，一个常见的技巧是复制下一个节点的值到当前节点，然后删除下一个节点，这样就可以在不知道前一个节点的情况下“删除”当前节点。但这种技巧在删除尾节点时无效，因为尾节点没有下一个节点。

20. 实现一个函数, 可以间隔输出

如果您想要实现一个函数，该函数可以按照一定的时间间隔输出信息，比如在控制台打印消息，您可以使用 JavaScript 中的 setInterval 方法来完成这个任务。以下是一个简单的示例，展示了如何每两秒打印一次当前时间：

function intervalOutput(message, delay) {
  // 设置一个定时器，按照指定的延迟执行打印操作
  setInterval(() => {
    const currentTime = new Date().toLocaleTimeString();
    console.log(`${currentTime}: ${message}`);
  }, delay);
}
// 调用函数，每两秒打印一次消息
intervalOutput("Hello, World!", 2000);

在这个示例中，intervalOutput 函数接受两个参数：要打印的消息和延迟的时间（以毫秒为单位）。使用 setInterval 方法设置一个定时器，该定时器会按照指定的延迟时间间隔执行一个回调函数，该回调函数会打印当前时间和消息。当您运行此代码时，它将每两秒在控制台输出一次消息，以及当时的时间。例如：

15:30:00: Hello, World!
15:30:02: Hello, World!
15:30:04: Hello, World!
...

请注意，setInterval 会持续运行，直到您明确地使用 clearInterval 来停止它。如果您想要在特定条件下停止定时器，您可以保存 setInterval 返回的定时器 ID，并在适当的时候使用 clearInterval 来停止定时器：

// 保存定时器 ID
const timerId = intervalOutput("Hello, World!", 2000);
// 在某个时刻停止定时器
clearInterval(timerId);

这样，您就可以控制函数的间隔输出，并在需要时停止它。

21. 为什么小程序里拿不到dom相关的api？

小程序里拿不到DOM相关的API，主要原因如下：

渲染机制不同：
- 小程序使用的是类似于Web的渲染引擎，但并不是完整的浏览器环境。它采用了自定义的渲染层和逻辑层分离的架构，渲染层负责页面的渲染，逻辑层负责处理业务逻辑。
- 这种架构使得小程序在渲染性能上有所优化，但也意味着它不支持完整的DOM API。
安全性和沙盒环境：
- 小程序运行在一个沙盒环境中，这个环境对小程序的权限进行了严格的限制，以保障用户的安全和隐私。
- 由于DOM操作可能涉及到敏感信息或导致安全风险，因此小程序环境中不提供DOM相关的API。
简化开发：
- 小程序的设计理念之一是简化开发，提供一套更简单、更符合移动端开发习惯的API。
- 通过提供自定义的组件和事件系统，小程序让开发者可以更专注于业务逻辑，而不需要处理复杂的DOM操作。
性能优化：
- 在移动端，性能是非常关键的。DOM操作通常比较耗时，尤其是在复杂的页面结构中。
- 小程序通过限制DOM操作，可以在一定程度上提高页面的渲染性能和响应速度。
跨平台一致性：
- 小程序旨在提供跨平台的一致性体验，不仅在微信中运行，还可能在其他支持小程序的平台中运行。
- 通过抽象出一套与平台无关的API，小程序可以确保在不同平台上的表现一致。在小程序中，开发者通常使用小程序提供的组件和API来构建用户界面和处理用户交互。这些组件和API已经足够满足大多数小程序的开发需求。如果需要在小程序中进行更复杂的界面操作，可以考虑使用小程序提供的自定义组件、页面生命周期函数和数据绑定等机制来实现。

22. 小程序的双线程分别做的什么事情？

小程序的双线程模型是指将渲染层和逻辑层分离，分别运行在不同的线程中。这种设计有助于提高性能和安全性。具体来说，这两个线程分别负责以下任务：

渲染层（View Layer）

渲染界面：渲染层负责将小程序的页面渲染到屏幕上，包括处理布局、绘制和渲染等操作。
处理用户交互：渲染层监听和处理用户的交互事件，如点击、滑动等，并将这些事件传递给逻辑层。
使用WebView：在大多数小程序平台中，渲染层通常基于WebView实现，这使得它可以利用浏览器的能力来渲染HTML和CSS。
安全性：渲染层运行在沙盒环境中，限制了直接访问系统资源的能力，从而提高了安全性。

逻辑层（App Service Layer）

处理业务逻辑：逻辑层负责处理小程序的业务逻辑，包括数据请求、数据处理、事件响应等。
数据管理：逻辑层管理小程序的数据状态，通过数据绑定机制与渲染层同步数据，实现界面更新。
API调用：逻辑层可以调用小程序提供的API，如网络请求、存储、支付等。
运行JavaScript：逻辑层主要运行JavaScript代码，执行开发者编写的小程序逻辑。
安全性：逻辑层也运行在沙盒环境中，并且与渲染层隔离，进一步提高了安全性。

双线程之间的通信

数据绑定：渲染层和逻辑层通过数据绑定机制同步数据，当逻辑层的数据发生变化时，会自动更新渲染层的界面。
事件传递：渲染层将用户交互事件传递给逻辑层，逻辑层处理完成后可以更新数据，从而触发界面的更新。
异步通信：渲染层和逻辑层之间的通信是异步的，这有助于提高性能，避免阻塞UI线程。

advantages

性能优化：通过将渲染和逻辑分离，可以减少相互干扰，提高小程序的响应速度和渲染性能。
安全性提升：沙盒环境和线程隔离有助于提高小程序的安全性，防止恶意代码影响用户数据或系统安全。
开发简化：开发者可以更专注于业务逻辑的开发，而不需要关心底层的渲染细节。小程序的双线程模型是其架构设计的一个重要特点，它为小程序提供了良好的性能、安全性和开发体验。

23. 说说微信小程序的架构?

微信小程序的架构设计采用了轻量级、高效且安全的双线程模型，主要包括渲染层和逻辑层。以下是微信小程序架构的详细解析：

1. 双线程模型

渲染层（View Layer）：

基于WebView实现，负责页面的渲染和展示。
处理用户与界面的交互，如点击、滑动等事件。
运行在沙盒环境中，确保安全性。 逻辑层（App Service Layer）：
运行JavaScript代码，处理业务逻辑。
管理小程序的数据状态，通过数据绑定与渲染层同步。
调用微信提供的API，如网络请求、存储、支付等。
同样运行在沙盒环境中，与渲染层隔离。

2. 数据通信

数据绑定：逻辑层和渲染层通过数据绑定机制同步数据，实现界面与数据的实时更新。
事件系统：渲染层将用户交互事件传递给逻辑层，逻辑层处理后再反馈结果给渲染层。
异步通信：两者之间的通信是异步的，避免阻塞UI线程，提高性能。

3. 组件化

小程序提供了丰富的组件库，如视图容器、基础内容、表单组件等。
组件化开发使得代码更加模块化、可复用，提高开发效率。

4. 页面路由

支持多页面应用，通过页面栈管理页面的打开、关闭和跳转。
提供了灵活的路由机制，方便实现复杂的页面交互逻辑。

5. API丰富

提供了丰富的API接口，涵盖网络、媒体、位置、设备、界面等多个领域。
使得小程序能够轻松实现各种功能，如支付、地图、音频视频等。

6. 安全性

沙盒环境：渲染层和逻辑层都运行在沙盒环境中，限制了直接访问系统资源的能力。
代码加密：小程序的代码包经过加密处理，防止代码被逆向分析。
权限控制：严格限制小程序的权限，如访问用户数据、调用系统功能等，都需要用户授权。

7. 性能优化

按需加载：小程序采用按需加载的方式，只加载当前页面所需的资源，减少加载时间。
缓存机制：利用本地缓存存储静态资源，减少网络请求，提高加载速度。
原生组件：对于一些性能要求高的组件，如地图、视频等，采用原生组件实现，提高渲染性能。

8. 开发工具

提供了官方的开发工具，集成了代码编辑、调试、模拟器、性能分析等功能。
支持真机调试，方便开发者快速开发和测试小程序。微信小程序的架构设计充分考虑了性能、安全性和开发体验，为开发者提供了一个高效、便捷的开发平台。通过双线程模型、组件化、丰富的API和安全的沙盒环境，微信小程序能够实现各种复杂的功能，同时保证了良好的用户体验。

24. Koa 中，如果一个中间件没有调用 await next()，后续的中间件还会执行吗？

在Koa中，中间件的执行流程是基于洋葱模型的，即请求会依次穿过每一层中间件，直到最内层，然后再依次返回到最外层。在这个过程中，await next()函数调用起到了关键作用，它表示当前中间件执行完毕，请求应该传递给下一个中间件。如果一个中间件没有调用await next()，那么后续的中间件不会执行。这是因为没有await next()调用，Koa就不会将控制权传递给下一个中间件，而是直接结束当前中间件的执行，并开始返回响应。以下是一个简单的例子来说明这一点：

const Koa = require('koa');
const app = new Koa();
// 第一个中间件
app.use(async (ctx, next) => {
  ctx.body = 'Hello ';
  // 如果注释掉下面的这行代码，第二个中间件将不会执行
  await next();
});
// 第二个中间件
app.use(async (ctx, next) => {
  ctx.body += 'World!';
});
app.listen(3000);

在这个例子中，如果第一个中间件中没有调用await next()，那么ctx.body将只会包含"Hello "，而不会包含"World!"，因为第二个中间件根本不会被执行。因此，在Koa中，确保中间件正确地调用await next()是非常重要的，除非你有意要阻止后续中间件的执行。

25. 怎么判断一个对象是否是 React 元素？

在React中，并没有一个直接的方法来“判断一个对象是否是React元素”。React元素通常指的是在React应用中通过JSX创建的元素。但是，你可以通过以下几种方式来“判断”一个对象是否可能是React元素：

检查对象类型：React元素通常是React组件的实例，你可以检查对象是否是React.Component的实例。
检查对象属性：React元素通常会有一些特定的属性，如props、state等。
检查对象方法：React组件通常会有一些特定的方法，如render()。
检查对象来源：如果你知道对象的来源，如果它来自React组件的渲染，那么它很可能是React元素。以下是一个简单的例子：

import React from 'react';
const MyComponent = () => {
  return <div>Hello, { /* ... */ }</div>;
};
const element = <MyComponent />;

在这个例子中，你可以通过以下方式判断element是否是React元素：

检查element是否是MyComponent的实例。
检查element是否具有React组件的属性或方法。注意：这些方法并不是100%准确的，因为用户可以创建任何类型的对象，并赋予它们任何属性或方法。但是，在大多数情况下，这些方法应该足够了。 更好的方法：如果你可以访问React的内部属性，如$$typeof，那么你可以更准确地判断一个对象是否是React元素。但是，通常情况下，你不需要这样做。总结：通常情况下，你不需要判断一个对象是否是React元素。如果你需要这样做，你可以使用上述方法，但请记住它们并不是100%准确的。

26. https是如何保证安全的，又是如何保证不被中间人攻击的？

HTTPS通过多种机制保证了网络通信的安全，并有效防止中间人攻击。以下是详细的解释：

HTTPS如何保证安全

数据加密：
- 对称加密：HTTPS使用对称加密来加密通信数据。对称加密是指加密和解密使用相同的密钥，这种方式的优点是加密速度快，适合用于大数据量的传输。
- 非对称加密：HTTPS还使用非对称加密来交换对称密钥。非对称加密使用公钥和私钥，公钥可以公开，私钥由服务器保密。通过非对称加密，可以安全地传输对称密钥，从而确保后续的通信过程安全。
数据完整性：
- HTTPS使用摘要算法（如SHA-256）来确保数据的完整性。通过对数据进行哈希运算，生成一个固定长度的摘要，接收方可以通过对比摘要来验证数据在传输过程中是否被篡改。
身份认证：
- HTTPS通过数字证书和证书认证机构（CA）来验证通信方的身份。服务器向客户端发送数字证书，客户端验证证书的有效性，从而确认服务器的真实身份。这防止了伪装攻击。

HTTPS如何防止中间人攻击

公钥证书的验证：
- HTTPS防止中间人攻击的关键之一是公钥证书的验证。客户端会验证服务器发送的证书是否由可信的CA签发，并且证书中的信息是否有效。这确保了客户端与真实的服务器进行通信，而不是与中间人伪装的服务器。
混合加密机制：
- HTTPS采用混合加密机制，结合对称加密和非对称加密。非对称加密用于安全地传输对称密钥，对称密钥用于高效地加密通信数据。即使中间人拦截到数据，没有私钥也无法解密对称密钥，从而无法窃听或篡改通信内容。
数字签名和摘要算法：
- 数字签名和摘要算法用于确保数据的完整性和身份认证。数字签名由服务器的私钥生成，客户端使用服务器的公钥进行验证。这确保了数据在传输过程中没有被篡改，并且确实来自真实的服务器。
TLS握手过程：
- 在TLS握手过程中，客户端和服务器会协商生成一个唯一的会话密钥，用于加密后续的通信数据。这个过程是安全的，即使中间人也无法获取会话密钥。通过以上多种机制，HTTPS有效地保证了网络通信的安全，并防止了中间人攻击。这些措施共同作用，确保了数据在传输过程中的机密性、完整性和身份认证。

27. websocket 中的 Handshaking 是什么？

WebSocket中的Handshaking（握手）是建立WebSocket连接时客户端和服务器之间进行的一系列步骤，用于协商和确认连接的参数，最终建立一个全双工的通信通道。这个过程基于HTTP协议，但最终会升级到WebSocket协议。握手过程大致如下：

客户端发起握手请求：
- 客户端发送一个特殊的HTTP请求到服务器，请求方法为GET，请求头中包含了一些特定的字段，如Upgrade: websocket和Connection: Upgrade，表明客户端希望将连接升级到WebSocket协议。
- 客户端还会发送一个Sec-WebSocket-Key字段，这个字段包含一个由客户端生成的随机字符串，用于服务器生成响应。
服务器响应握手请求：
- 服务器收到客户端的握手请求后，如果支持WebSocket，会返回一个HTTP状态码为101（切换协议）的响应。
- 响应头中同样包含Upgrade: websocket和Connection: Upgrade字段，确认升级到WebSocket协议。
- 服务器还会在响应头中包含一个Sec-WebSocket-Accept字段，这个字段的值是根据客户端提供的Sec-WebSocket-Key计算得出的，用于验证服务器响应的有效性。
完成握手：
- 客户端收到服务器的响应后，会验证Sec-WebSocket-Accept字段是否正确。如果正确，客户端认为握手成功，可以开始发送WebSocket消息。
- 握手完成后，连接就升级到了WebSocket协议，客户端和服务器之间可以开始全双工通信。 WebSocket的握手过程确保了连接的双方都支持WebSocket协议，并且通过Sec-WebSocket-Key和Sec-WebSocket-Accept机制提供了一定的安全性，防止了某些类型的攻击，如重放攻击。需要注意的是，WebSocket协议的版本（如RFC 6455定义的版本）可能会影响握手的具体细节，但基本流程是相似的。

2025面试大全（12）

1. 前端路由 a -> b -> c这样前进，也可以返回 c -> b -> a，用什么数据结构来存比较高效

2. 如果要实现一个类似“谷歌图片”的系统，你会有哪些方面的考虑？

1. 系统架构

2. 数据存储

3. 图片处理

4. 搜索引擎

5. 用户界面

6. 性能优化

7. 安全性

8. 可扩展性

9. 法律与合规

10. 人工智能与机器学习

11. 国际化

12. 监控与日志

13. 用户反馈与社区

14. 商业模式

3. 前端的页面截图怎么实现？

1. 使用 HTML5 的 canvas 元素

2. 使用 html2canvas 库

3. 使用 Chrome 的 chrome.runtime API（仅限 Chrome 扩展程序）

4. 使用 Electron 的 desktopCapturer API（仅限 Electron 应用）

注意事项：

4. 链表中，环的入口节点

1. 检测链表中是否存在环

2. 找到环的入口节点

代码实现（以 Python 为例）

解释

5. 实现一个请求函数：fetchWithRetry，要求会最多自动重试 3 次，任意一次成功就直接返回

解释

6. 使用 js 实现有序数组原地去重

解释

7. CSS3 中 transition 和 animation 的属性分别有哪些？

Transition 属性

Animation 属性

示例

8. useMemo 和 useCallback 有什么区别？

useMemo

useCallback

区别

示例

9. 说下 websocket 的连接原理

WebSocket连接原理

WebSocket的特点

应用场景

10. 请实现一个函数，要求能在页面请求很多时，尽可能快地按照顺序输出返回的结果。

解释：

关键点：

11. 浏览器有哪几种缓存，各种缓存的优先级是什么样的？

各种缓存的优先级：

缓存机制的工作流程：

注意事项：

12. 讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理

13. 如果在 useEffect 的第一个参数中 return 了一个函数，那么第二个参数分别传空数组和传依赖数组，该函数分别是在什么时候执行？

第二个参数传空数组（[]）

第二个参数传依赖数组（非空数组）

总结

14. useEffect 的第二个参数, 传空数组和传依赖数组有什么区别？

传空数组（[]）

传依赖数组（非空数组）

区别总结

15. Web Worker 是什么？

Web Worker的类型

Web Worker的特点

使用场景

示例代码

16. 说说你对 webpack5 模块联邦的了解？

核心概念

工作原理

使用场景

示例配置

注意事项

17. Promise 的 finally 怎么实现的？

实现解释：

使用示例：

注意事项：

18. Promise then 第二个参数和catch的区别是什么？

then 方法的第二个参数：

catch 方法：

区别总结：

1. 前端路由 `a -> b -> c`这样前进，也可以返回 `c -> b -> a`，用什么数据结构来存比较高效

1. 使用 HTML5 的 `canvas` 元素

2. 使用 `html2canvas` 库

3. 使用 Chrome 的 `chrome.runtime` API（仅限 Chrome 扩展程序）

4. 使用 Electron 的 `desktopCapturer` API（仅限 Electron 应用）

第二个参数传空数组（`[]`）

传空数组（`[]`）

`then` 方法的第二个参数：

`catch` 方法：