前端

服务端

计算机基础

在Web应用中，服务器向客户端主动推送数据是一个常见需求，可以实现如实时通知、即时聊天等功能。以下是一些实现服务器到客户端推送的技术：

1. **轮询(Polling)**
   轮询是最简单的一种方式，客户端通过定时发送HTTP请求到服务器查询是否有新数据。这种方式的缺点是效率较低，并且会产生很多无用的网络流量，因为即使没有数据更新，客户端也会定时发起请求。

2. **长轮询(Long Polling)**
   长轮询是对传统轮询的改进。客户端发送请求给服务器后，服务器会持有这个请求，直到有新数据可以发送或者达到某个时间限制。这种方式比传统轮询效率更高，但仍有延迟，并且会占用服务器资源。

3. **服务器发送事件(Server-Sent Events, SSE)**
   SSE允许服务器通过HTTP连接向客户端推送事件。与轮询不同，这里的连接是单向的：服务器到客户端。SSE支持自动重连，并且可以只发送更新的数据。但SSE只支持文本数据，并且不是所有浏览器都支持。

4. **Websocket**
   Websocket提供了一个全双工的通信通道，允许服务器和客户端之间进行双向通信。连接一旦建立，服务器就可以在任何时候发送数据给客户端，同样客户端也可以随时发送数据给服务器。Websocket适合需要高频实时交互的应用，如在线游戏、交易平台等。

例子：一个即时消息应用可能会使用Websocket来推送消息。当一个用户发送消息时，服务器接收这个消息并通过已经打开的Websocket连接将它推送给其他在线用户。由于Websocket允许低延迟的双向通信，用户体验接近即时通信。

5. **Web Push Notifications**
   这种技术允许服务器向注册了推送服务的客户端发送通知，即使Web应用没有在前台运行，用户也能够收到通知。Web推送通知通常用于向用户发送即时信息，比如电子邮件到达、社交媒体的新动态等。

6. **Message Queues（如RabbitMQ）和Push Services（如Google Firebase）**
   一些服务器并不直接发送数据给客户端，而是利用消息队列和第三方推送服务。消息队列可以缓存消息，然后基于某些条件（如客户端在线）进行分发。第三方推送服务则提供了一套完整的解决方案来管理消息的推送。

在设计一个系统时，选择哪种技术取决于应用的具体需求，比如是否需要低延迟、高吞吐量，以及客户端支持的技术等。通常，实时性要求较高的应用会选择Websocket，而对实时性要求较低的应用可以选择SSE或长轮询。对于移动应用，Web Push Notifications是一个不错的选择，因为它们可以推动用户重新参与使用应用。

在 Web 应用中，从服务器主动推送Data到客户端有那些方式？

在JavaScript中实现自定义事件主要有以下几个步骤：

1. **创建自定义事件**：您可以使用`Event`构造器或者更专门化的构造器如`CustomEvent`来创建一个事件。`CustomEvent`构造器还允许您传递附加的信息（称为“详情”或`detail`属性）。

2. **触发自定义事件**：使用`dispatchEvent`方法可以在特定的元素上触发自定义事件。调用此方法时，您需要传递您创建的事件对象。

3. **监听自定义事件**：使用`addEventListener`方法可以在一个元素上添加一个事件监听器，当特定的事件类型被触发时执行回调函数。

以下是一个简单的例子：

```javascript
// 第一步：创建一个自定义事件
// 这里我们创建一个名为 "userLogin" 的事件，并携带一些用户信息
var loginEvent = new CustomEvent("userLogin", {
  detail: {
    username: "JohnDoe"
  }
});

// 第二步：监听这个自定义事件
// 假设我们希望在文档的某个元素上监听这个事件
document.addEventListener("userLogin", function(e) {
  console.log("用户登录事件被触发，登录用户名为：" + e.detail.username);
});

// 第三步：触发自定义事件
// 当需要的时候，我们可以在任何时候触发这个自定义事件
document.dispatchEvent(loginEvent);
```

在这个例子中，我们定义了一个名为"userLogin"的自定义事件，它在用户登录时被触发。当这个事件被触发时，我们添加了一个监听器来处理这个事件，并输出了用户的名字。这样，我们就可以在应用程序的任何部分触发"用户登录"事件，并且相关的处理逻辑会被执行。

这种机制非常有用，特别是在需要在不相关的组件之间传递信息或者在特定的行为之后触发一系列的行为时。使用自定义事件可以使我们的应用程序更加模块化，事件的生产者与消费者可以松耦合地交互。

JavaScript 如何实现自定义事件吗？

柯里化（Currying）是一种在函数式编程中常见的技巧。它是指将一个多参数的函数转换成多个单参数（或较少参数）函数的序列。这样做的主要目的是参数复用、提前确认和延迟执行等。

### 定义
以 JavaScript 为例，柯里化的一个基本定义可以是这样的：

```javascript
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      }
    }
  };
}
```

这个 `curry` 函数接收一个函数 `fn` 作为参数，并返回一个新的函数 `curried`。新函数检查接收的参数数量，如果足够执行原函数，则直接执行；如果不够，则返回一个新的函数，等待接收更多的参数。

### 使用场景

1. **参数复用**：
   当你有一个函数需要多次调用，但是某些参数在这些调用中是不变的时候，可以通过柯里化创建特定的函数，只传入剩下的参数。例如，如果你有一个 `add` 函数，可以创建一个 `addFive` 函数，它将一个数与5相加。

   ```javascript
   function add(a, b) {
     return a + b;
   }
   const addFive = curry(add)(5);
   addFive(10); // 返回 15
   ```

2. **延迟计算/执行**：
   柯里化允许你将多个参数的获取分散到多个步骤中。只有当所有需要的参数都被提供后，函数才会被执行。这在需要等待某些数据才能执行操作的情况下非常有用。例如，如果一个函数需要从几个不同的数据源获取数据，可以将每个数据源的结果逐一传入柯里化函数中。

3. **动态生成函数**：
   可以动态地生成需要的函数。在处理事件监听或者回调函数的时候，如果某些参数是已知的，可以通过柯里化生成一个新的函数，而无需重新定义函数体。

   ```javascript
   const on = curry(function(eventType, element, callback) {
     element.addEventListener(eventType, callback);
   });
   const onClick = on('click');
   onClick(document.getElementById('myButton'), () => console.log('Button clicked!'));
   ```

4. **函数组合**：
   在函数式编程中，柯里化可以帮助实现函数组合。通过柯里化，可以轻松地将一个函数的输出作为另一个函数的输入。这在创建数据流和中间件等链式操作时非常有用。

   ```javascript
   const compose = (f, g) => (a) => f(g(a));
   const multiplyBy2 = (n) => n * 2;
   const addTen = (n) => n + 10;
   const multiplyBy2AndAddTen = compose(addTen, multiplyBy2);
   multiplyBy2AndAddTen(5); // 返回 20
   ```

总之，柯里化是一种强大的函数式编程技术，它在 JavaScript 中可以用于创建更灵活和可重用的代码。通过柯里化，可以更容易地实现参数复用、延迟执行和高阶函数构建等高级编程模式。

什么是柯里化函数？JavaScript 中有哪些使用场景？

JavaScript 中的 `bind` 方法用于创建一个新函数，该函数在被调用时会将其 `this` 关键字设置为提供的值，同时还可以接受一系列的参数。

要实现一个自定义的 `bind` 函数，我们需要了解几个关键点：

1. 返回一个函数。
2. 确定 `this` 的值。
3. 参数的传递。

下面是一个简单的实现例子：

```javascript
Function.prototype.myBind = function(context, ...args) {
  // this 指向调用 myBind 的函数
  var fn = this;

  // 返回一个新的函数
  return function(...newArgs) {
    // 使用 apply 方法调用函数，设定 this 的值，并传递参数
    // 这里将预置的参数和新传入的参数拼接在一起
    return fn.apply(context, args.concat(newArgs));
  };
};
```

在这个例子中，`myBind` 函数接受了两个参数：`context` 指定了 `this` 的上下文，`args` 是一个由预置参数组成的数组。返回的函数在被调用时，会通过 `apply` 方法将 `this` 绑定到 `context` 对象，并将预置参数与新参数合并传递给原函数。

让我们通过一个具体的例子来演示这个 `myBind` 方法的使用：

```javascript
function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

var person = {
  name: 'John'
};

// 使用原生的 bind 方法
var greetJohn = greet.bind(person, 'Hello');
greetJohn('!');  // 输出: Hello, John!

// 使用我们自定义的 myBind 方法
var greetJohnCustom = greet.myBind(person, 'Hi');
greetJohnCustom('?');  // 输出: Hi, John?
```

这里，我们定义了一个 `greet` 函数，它接受两个参数 `greeting` 和 `punctuation`，然后打印出问候语。我们使用 `bind` 方法（和我们的 `myBind` 方法）创建了一个新的函数 `greetJohn`（和 `greetJohnCustom`），它的 `this` 被绑定到 `person` 对象上，并且预置了“Hello”（和 "Hi"）作为 `greeting` 参数。

通过上面的例子，我们演示了如何实现和使用一个自定义的 `bind` 函数，它模仿了原生 `bind` 方法的行为。

如何实现 javascript 的 bind 方法

> 什么是伪类和伪元素

**伪类**

伪类（Pseudo-classes）是用来选择 DOM 树之外的信息，或者是无法被常规 CSS 选择器选择的信息。这些可能是元素的特殊状态，或者是根据元素的结构信息（例如：第一个子元素）而选择的元素。伪类使用冒号 `:`来表达，例如：`:hover`, `:first-child`, `:nth-child(3)`等。

一些常见的伪类包括：

- `:hover`：鼠标悬停在元素上的状态
- `:active`：元素被激活的状态，如被鼠标按下
- `:focus`：元素获得焦点的状态
- `:first-child`：选中父元素的第一个子元素
- `:last-child`：选中父元素的最后一个子元素
- `:nth-child(n)`：选中父元素的第 n 个子元素

**伪元素**

伪元素（Pseudo-elements）允许你选择并样式化元素的一部分。它们允许你向元素添加特殊效果，或者插入内容到文档中的某个位置。伪元素使用两个冒号 `::`来表达，例如：`::after`, `::before`, `::first-letter`等。

一些常见的伪元素包括：

- `::before`：在元素内容的前面插入内容
- `::after`：在元素内容的后面插入内容
- `::first-letter`：选中块级元素的第一行的第一个字母
- `::first-line`：选中块级元素的第一行
- `::selection`：选中用户选中的元素部分

> 伪类和伪元素的区别

1. **定义方面**：伪类是对元素的特定状态进行选取，而伪元素则是创建出DOM树中不存在的元素。
2. **使用规则方面**：伪类使用一个冒号 `:`，而伪元素使用两个冒号 `::`。
3. **作用对象方面**：伪类通常作用在原有元素上，而伪元素是创建新的虚拟元素插入DOM树。
4. **数量限制方面**：在一个选择器中可以使用多个伪类，而伪元素则限制为一个。

> 总结

伪类和伪元素都是特殊的选择器，它们的作用是选取那些不能通过普通 CSS 选择器选取到的元素或元素的某個狀態。

伪类主要是用来基于元素的状态或根据结构来选择元素，而伪元素则是用来选取元素的某个特定部分。


什么是伪类和伪元素？以及详细介绍两者之间的区别

JavaScript内存泄露是指在应用程序中不再需要使用的内存由于某些原因没有被释放或回收，导致可用内存逐渐减少，最终可能会导致应用程序或系统性能下降，甚至崩溃。 

### 如何检测JS内存泄露？

检测JavaScript内存泄露通常可以通过以下途径进行：

1. **浏览器开发者工具：**
   大多数现代浏览器都提供了内置的开发者工具，可以用来监视内存使用情况。例如，Google Chrome的开发者工具中有"Performance"和"Memory"面板，允许开发者记录和分析网站的运行时性能和内存使用情况。
2. **堆快照（Heap Snapshots）：**
   通过浏览器的开发者工具，可以捕获堆快照，它会展示内存分配的静态视图。通过比较连续的堆快照，可以观察到哪些对象被分配内存后没有被释放。
3. **时间线记录（Timeline Profiling）：**
   这个工具可以帮助我们理解内存是如何随着时间的推移而增加的。我们可以使用浏览器工具的时间线功能记录一个时间段内的内存使用情况，寻找内存使用上升的趋势。
4. **代码审查（Code Review）：**
   定期进行代码审查以查找常见的内存泄露模式，如未取消的事件监听器、闭包的滥用、未清除的定时器等。

### 内存泄露场景

内存泄露可能出现在多种不同的场景中，以下是一些常见的场景：

1. **全局变量：**
   意外地创建全局变量会导致这些变量不被回收，例如，忘记使用 `var`、`let`或 `const`关键字。
2. **事件监听器未移除：**
   如果在DOM元素上添加了事件监听器，但在不需要时没有正确移除，它们会持续占用内存。
3. **闭包：**
   不当使用闭包可能会导致父作用域中的变量无法被释放。
4. **DOM引用：**
   JavaScript中的变量如果引用了已经从DOM中移除的元素，如果引用一直保持，那么这部分内存也不会被回收。
5. **定时器：**
   设置了定时器（如 `setInterval`）而没有清除（`clearInterval`），可能会导致内部回调函数和相关变量长期占用内存。
6. **第三方库：**
   使用的第三方库如果存在内存泄露，同样也会影响到使用它的应用程序。

举个具体的例子：在开发一个单页应用时，我注意到随着页面的使用时间增加，页面的响应速度逐渐变慢。我使用Chrome开发者工具中的Performance面板进行了记录，发现内存使用量呈现持续上升的趋势。通过分析和比较不同时间点的堆快照，我发现存在一个大量DOM元素对应的监听器没有在元素被移除时一并清理。修复这个问题后，应用的性能得到了显著的提升。


 JS内存泄露如何检测？场景有哪些？

二叉树在数据结构与算法中是极其重要的，原因有几个方面：

1. **结构简单明了**：二叉树的结构相对简单，每个节点最多有两个子节点。这种结构易于理解和实现，同时也方便了各种算法在其上的操作，比如遍历、插入、删除等。

2. **效率平衡**：二叉树，在特定情况下如二叉搜索树（BST），可以保持数据的有序性，同时插入、删除、查找操作的平均时间复杂度为O(log n)，这是因为每进行一次操作，搜索范围就缩小一半。对于三叉树或四叉树，虽然可能在某些情况下查找更快，但它们的维护（如重新平衡）成本可能会更高。

3. **便于算法优化**：二叉树的结构特性使得很多算法可以高效运行，比如在二叉搜索树中可以非常快速地进行查找、插入和删除操作。另外，二叉树还可以优化为平衡树（如AVL树）和红黑树，这些结构能够保持树的平衡，进一步确保操作效率。

4. **实用性**：在实际应用中，二叉树已经足够应对大多数情况，例如二叉搜索树、堆（用于实现优先队列）以及Huffman编码树等，都是基于二叉树结构的。这些结构已经广泛地应用在各个领域，比如数据库索引、内存分配策略、压缩算法等。

5. **递归和分治算法**：二叉树的递归特性非常适合采用递归或分治算法来解决问题。二分的思想可以很自然地应用在二叉树上，而三叉或四叉树的分割就不那么直观和简洁。

举个例子，比如在二叉搜索树中查找一个元素，我们可以从根节点开始，如果查找的元素小于当前节点的值，就转向左子树进行查找；如果大于当前节点的值，就转向右子树进行查找，这样每次都可以排除掉半边的树，使得查找非常高效。相比之下，在三叉或四叉树中，虽然每次也能排除一部分树，但实际上，由于节点的孩子增多，树的高度减小的速度并不一定能够保持在对数级别，同时节点管理也更加复杂。

综上所述，二叉树因其简单性、效率、以及在实践中的广泛应用，成为了数据结构中的重要组成部分。而三叉树、四叉树虽然在某些方面可能有其优点，但在大多数情况下，它们并不提供足够的性能优势来证明它们比二叉树更有用或更为关键。

为什么二叉树很重要，而不是三叉树四叉树

ES6通过提供一个新的协议，即*迭代器协议*来实现迭代器。迭代器协议定义了一种统一的方式，使得任何对象只要遵循这个协议，都可以被迭代。迭代器协议要求实现两个方法：`next` 和 `Symbol.iterator`。

以下是实现迭代器协议的两个主要方面：

1. **迭代器协议**：该协议要求任何对象的 `next()` 方法都返回一个对象，该对象包含两个属性：`value` 和 `done`。其中，`value` 属性表示下一个迭代的值，`done` 是一个布尔值，如果迭代已经完成，则值为 `true`；如果迭代尚未完成，则值为 `false`。

   例如，实现一个简单的迭代器可以如下所示：

    ```javascript
    function createCounter(start, end) {
        let current = start;
        // 这里返回的对象符合迭代器协议
        return {
            next() {
                if (current <= end) {
                    return { value: current++, done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }

    const counter = createCounter(1, 3);
    console.log(counter.next()); // { value: 1, done: false }
    console.log(counter.next()); // { value: 2, done: false }
    console.log(counter.next()); // { value: 3, done: false }
    console.log(counter.next()); // { done: true }
    ```

2. **可迭代协议**：该协议要求对象具有一个 `Symbol.iterator` 方法。这个方法必须返回一个符合迭代器协议的对象。这意味着这个方法返回一个迭代器，可用于获取对象的连续值。

    当使用像 `for...of` 这样的循环语句时，会自动寻找对象的 `Symbol.iterator` 方法来获取迭代器，然后通过这个迭代器进行迭代。

    下面是一个实现可迭代协议的例子：

    ```javascript
    class RangeIterator {
        constructor(start, end) {
            this.current = start;
            this.end = end;
        }

        [Symbol.iterator]() {
            return this;
        }

        next() {
            if (this.current <= this.end) {
                return { value: this.current++, done: false };
            } else {
                return { done: true };
            }
        }
    }

    for (const num of new RangeIterator(1, 3)) {
        console.log(num); // 依次打印出 1, 2, 3
    }
    ```

在上述的 `RangeIterator` 类中，我们实现了 `Symbol.iterator` 方法并且让它返回 `this`，即它自身是一个迭代器。此外，我们也实现了 `next()` 方法来满足迭代器协议。

通过这样的机制，ES6 不仅让内置对象如数组和字符串成为可迭代对象，也允许开发者自定义迭代行为，这在处理自定义数据结构时非常有用。

ES6是如何实现迭代器的？

在React中，`setState` 函数用于更新组件的状态，并触发重新渲染流程。调和（Reconciliation）阶段是React用来对比新旧虚拟DOM树差异，并决定如何高效更新真实DOM的过程。当你调用 `setState` 时，内部会触发以下动作：

1. **排队状态更新（Enqueuing State Update）**:
   `setState` 调用并不会立即更新组件的状态，而是将状态更新排队。这意味着React可能会累积多个 `setState` 调用，然后批量更新状态以优化性能。

2. **标记组件需要更新（Marking Component for Update）**:
   一旦状态被置入队列，React会将当前组件标记为“脏”（dirty），意味着组件的状态与显示的输出不同步，需要进行更新。

3. **批处理和合并状态（Batching and Merging State）**:
   React会将所有排队的 `setState` 调用进行批处理。如果有多个状态更新，React会将它们合并以减少不必要的渲染和调和操作。

4. **调用生命周期方法（Lifecycle Methods Invoking）**:
   在实际更新之前，React会调用 `componentWillUpdate`（在旧版本的React中）或 `getDerivedStateFromProps` 和 `shouldComponentUpdate`（在新版本中），这些生命周期方法允许开发者在渲染发生前执行额外的操作。

5. **创建新的虚拟DOM树（Virtual DOM Tree Creation）**:
   有了新的状态，React会创建新的虚拟DOM树，这个树反映了状态更新后的组件结构。

6. **对比新旧虚拟DOM（Diffing Virtual DOM Trees）**:
   接下来，React会使用调和算法对比新旧虚拟DOM树，确定哪些部分需要更新。这个过程产生了所谓的“差异”（diffs）。

7. **生成更新操作（Generating Update Operations）**:
   根据差异，React会生成一系列更新操作，这些操作将被应用到真实的DOM上以实现UI的最终变化。

8. **执行更新操作（Executing Update Operations）**:
   React会按照效率最高的方式批量执行这些更新操作，这可能包括添加、移动、更新或删除DOM节点。

9. **调用生命周期方法（Lifecycle Methods Invoking）**:
   在更新操作完成之后，React会调用 `componentDidUpdate` 生命周期方法，使开发者有机会执行需要DOM更新后才能进行的操作。

例如，假设我们有一个计数器组件，其中包含一个按钮，当点击按钮时，它会通过 `setState` 增加计数值。React将按照上述步骤进行操作，确保界面反映了最新的计数状态，并以最高效的方式更新DOM。

请注意，从React 16开始，引入了Fiber架构，它改变了内部工作原理，特别是更新过程可以被中断和恢复，以便更好地管理UI渲染的性能。但是，以上所述的基本步骤仍然适用。

React 的调和阶段， setState内部做了哪些动作？

在JavaScript中，`Promise` 对象是异步编程的一种解决方案。一个 `Promise` 在创建时处于 `pending`（等待）状态，可以通过其 `resolve` 方法转变为 `fulfilled`（成功）状态，或通过其 `reject` 方法转变为 `rejected`（失败）状态。

要实现 `Promise` 的 `resolve`，通常是在异步操作成功完成时调用。下面是一个简单的例子说明如何使用 `Promise` 的 `resolve` 方法：

```javascript
function asyncOperation() {
  // 创建一个新的Promise对象
  return new Promise((resolve, reject) => {
    // 执行异步操作
    setTimeout(() => {
      const operationWasSuccessful = true; // 假设这是基于异步操作结果的条件
      if (operationWasSuccessful) {
        resolve('Operation successful'); // 如果操作成功，调用resolve并传递结果
      } else {
        reject('Operation failed'); // 如果操作失败，调用reject并传递错误信息
      }
    }, 1000); // 假设这个异步操作需要1秒钟
  });
}

asyncOperation()
  .then(result => {
    console.log(result); // 打印成功结果
  })
  .catch(error => {
    console.error(error); // 打印错误信息
  });
```

在上述代码中，`asyncOperation` 函数返回一个新的 `Promise` 对象。在这个 `Promise` 的构造函数中，有两个参数：`resolve` 和 `reject`。这两个参数也是函数，它们被用来分别处理异步操作的成功和失败情况。在异步操作（这里使用 `setTimeout` 模拟）完成后，根据操作的结果调用 `resolve` 或 `reject`。

如果异步操作成功（在这个例子中，我们假设 `operationWasSuccessful` 为 `true`），则调用 `resolve` 函数并传递结果消息 `'Operation successful'`。这将使得 `Promise` 对象的状态变为 `fulfilled`，并将结果传递给随后的 `.then` 方法的回调函数。

如果异步操作失败，就调用 `reject` 函数并传递错误消息 `'Operation failed'`。这将使得 `Promise` 对象状态变为 `rejected`，并将错误信息传递给随后的 `.catch` 方法的回调函数。

面试题手册