前端

服务端

计算机基础

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。



### 代理原理：

Proxy，也称为代理服务器，其基本原理是作为客户端和服务器之间的中介角色。当客户端请求网页或其他网络服务时，代理服务器会接收这个请求，然后代表客户端向真正的服务器发送请求。代理服务器收到服务器的响应后，再将数据转发给客户端。这个过程实现了数据的中转，可以用于多种用途，如内容缓存、过滤请求、负载均衡、隐私保护等。

### 使用Proxy的方式：

Proxy 的使用可以根据不同的需求和场景分为几种方式：

1. **客户端配置**：在客户端（如浏览器、操作系统）中设置代理服务器的地址和端口，使得所有通过客户端发出的请求都经过代理服务器。
   - 例如，在浏览器的网络设置中，可以填入代理服务器的IP地址和端口，之后浏览器发出的所有请求都会通过这个代理服务器。

2. **系统级别的代理**：在操作系统中设置代理，那么所有的网络请求都可以被代理。
   - 在Windows系统中，可以通过“Internet选项”设置全局代理。
   - 在UNIX-like系统中，可以设置环境变量`http_proxy`和`https_proxy`。

3. **应用级别的代理**：某些应用程序允许用户配置代理，仅该应用程序的数据流量会通过代理服务器。
   - 例如，可以在Telegram客户端中单独设置代理。

4. **透明代理**：客户端不需要做特别配置，所有的网络流量都会自动通过代理服务器，通常是由网络管理员在网络的出口处设置。
   - 这通常用在企业或学校网络中，用于监控和过滤流量。

5. **反向代理**：对于服务端而言，反向代理服务器接收来自客户端的请求，然后转发到内部服务器，并将服务器的响应返回给客户端。
   - 反向代理常用于负载均衡、SSL终结和缓存静态内容。例如，Nginx和Apache都可以配置为反向代理。

6. **编程中使用Proxy**：在编写软件时，可以使用编程语言提供的库通过代理发送请求。
   - 例如，在Python中，可以使用`requests`库并配置`proxies`参数来发送请求。

### 示例：

假设我们有一台位于美国的代理服务器，其IP地址是`12.34.56.78`，端口是`8080`。如果我们在中国，并希望通过这台美国的代理服务器来访问一个通常在中国无法访问的网站，我们可以这样做：

1. 在浏览器设置中，我们输入代理服务器的IP地址和端口。
2. 我们尝试访问目标网站，如`https://www.example.com`.
3. 浏览器不会直接连接到`example.com`，而是将请求发送到代理服务器`12.34.56.78`的`8080`端口。
4. 代理服务器接收到请求后，将其代理到`example.com`.
5. `example.com`将响应发送回代理服务器。
6. 代理服务器再将这些信息转发回我们的浏览器。

通过这种方式，我们就可以访问原本无法访问的网站，同时也隐藏了我们的真实IP地址。

Proxy 的代理原理，以及 Proxy 是如何使用的？

`<script>` 标签的位置确实会影响网站首屏的显示时间。

当浏览器解析到 HTML 文档中的 `<script>` 标签时，它会暂停文档的解析，去加载和执行脚本。这意味着，如果 `<script>` 标签放置在文档的 `head` 部分，浏览器必须先加载并执行完这些脚本，才能继续解析 HTML 文档的剩余部分。如果脚本很大或者需要从慢速服务器加载，这将延迟页面内容的渲染，从而增加首屏显示的时间。

例如，假设我们有一个简单的 HTML 页面，其中在 `head` 部分包含了一个大型的外部 JavaScript 文件：

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <script src="big-external-script.js"></script>
</head>
<body>
    
</body>
</html>
```

在上述情况中，用户必须等待 `big-external-script.js` 完全加载并执行后，才能看到页面内容，即首屏的显示会受到影响。

作为对比，如果我们将 `<script>` 标签放在 HTML 文档的 `body` 部分的最后：

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    

    <script src="big-external-script.js"></script>
</body>
</html>
```

在这种结构中，浏览器会先渲染页面内容，用户可以更快地看到首屏，而脚本将在页面内容加载之后异步加载和执行，从而不会阻塞首屏的显示。

为了进一步提高性能，还可以使用 `async` 或 `defer` 属性，这两者都允许浏览器异步加载脚本：

- 使用 `async` 时，脚本会在加载完成后尽快执行，但不保证执行顺序；
- 使用 `defer` 时，脚本会在整个文档解析完成后，但在 `DOMContentLoaded` 事件之前按照它们在文档中出现的顺序执行。

```html
<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <script src="external-script.js" defer></script>
</head>
<body>
    
</body>
</html>
```

在实际开发中，为了优化首屏显示时间，开发者通常会将非必须的脚本移动到文档底部，或者使用 `async` 或 `defer` 属性，以确保关键渲染路径（Critical Rendering Path）不会因脚本加载和执行而受阻。

HTML 中 script 标签的位置是否会影响网站首屏的显示时间？

事件循环 (Event Loop) 是浏览器用于处理非同步事件的一种机制。它确保了 JavaScript 的执行能够同步进行，即使 JavaScript 是单线程运行的。下面是事件循环的工作流程：

1. **执行栈（Call Stack）**: 当一段JavaScript代码开始执行时，它首先会进入到执行栈中。如果这段代码是一个函数，那么这个函数就会被放到栈的顶部。
2. **Web APIs**: 当遇到非同步操作（如：`setTimeout`, `XMLHttpRequest` 等）时，该操作会被浏览器的Web APIs接管，执行栈会继续执行下一行代码，不会停下等待异步操作的结果。
3. **任务队列（Task Queue）**: 一旦异步操作完成了（比如说 `setTimeout` 中指定的时间已过），回调函数就会被放入任务队列中。任务队列就是一个等待执行栈清空后执行的回调函数的列表。
4. **事件循环**: 事件循环的职责是监控执行栈和任务队列。如果执行栈为空，它就会检查任务队列。如果任务队列中有待执行的回调函数，事件循环就会将其从队列中取出，放到执行栈中去执行。
5. **渲染队列（Render Queue）**: 当浏览器准备进行渲染时（通常是每16.7毫秒，对应于60fps），它会有自己的渲染队列来处理重绘和回流事件。如果执行栈和任务队列都是空的，事件循环会从渲染队列取出任务执行，以确保用户界面能够及时更新。
6. **微任务队列（Microtask Queue）**: 除了常规的任务队列，还有一种叫作微任务（Microtask）的任务，比如Promise的回调。微任务队列的特点是在当前执行栈清空后，就会立即执行微任务队列中的所有任务，即使任务队列中有等待的任务。只有当微任务队列为空时，事件循环才会查看任务队列。

### 例子

假如我们有以下代码片段：

```javascript
console.log('脚本开始');

setTimeout(function() {
    console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
    console.log('promise1');
}).then(function() {
    console.log('promise2');
});

console.log('脚本结束');
```

执行顺序将会是这样的：

1. `'脚本开始'` 被打印到控制台，因为它是第一行同步代码。
2. `setTimeout` 的回调被 Web APIs 接管，执行栈继续往下执行。
3. `Promise.resolve()` 创建了一个Promise，它的回调被放入了微任务队列。
4. `'脚本结束'` 被打印到控制台，因为它是同步代码。
5. 当前的同步代码已经执行结束，执行栈被清空。
6. 事件循环首先检查微任务队列，发现有Promise的回调。
7. `'promise1'` 和 `'promise2'` 依次被打印到控制台。
8. 微任务队列清空，事件循环现在检查任务队列。
9. `setTimeout` 的回调现在被事件循环从任务队列移到执行栈，打印 `'setTimeout'`。


浏览器中的事件循环的工作流程

浏览器的缓存机制主要是为了提高网页的加载速度，减少服务器的负载，并优化用户的浏览体验。浏览器缓存可以分为以下几种类型： 

1. **强缓存（HTTP Cache Control）**
   强缓存不会向服务器发送请求，直接从缓存中读取资源。这是通过设置HTTP响应头中的 `Cache-Control`和 `Expires`实现的。

   - `Cache-Control`: 这个响应头可以设置多个值，比如：
     - `max-age=xxx`：表示资源在xxx秒后过期。
     - `no-store`：不允许缓存，每次都要向服务器请求。
     - `no-cache`：资源不会被缓存，每次都会发请求到服务器验证资源是否有更新。
   - `Expires`: 这是一个绝对时间，表示资源的过期时间。
2. **协商缓存（Validation Cache）**
   当强缓存失效后，浏览器会向服务器发送请求，询问资源是否有更新。这是通过 `Last-Modified/If-Modified-Since`和 `ETag/If-None-Match`这两对HTTP头实现的。

   - `Last-Modified/If-Modified-Since`: 服务器响应时通过 `Last-Modified`标识资源最后修改时间，浏览器下次请求时带上 `If-Modified-Since`，服务器比较后如果没有变化则返回304状态码，浏览器继续使用缓存。
   - `ETag/If-None-Match`: `ETag`是资源的一个唯一标识，类似于指纹。浏览器在请求时带上 `If-None-Match`，服务器对比ETag，如果没有变化则返回304状态码，浏览器继续使用缓存。
3. **Web Storage（本地存储）**
   包括 `localStorage`和 `sessionStorage`，它们提供了在客户端存储键值对数据的能力。`localStorage`数据在浏览器关闭后依然存在，而 `sessionStorage`的数据在页面会话结束时被清除。
4. **IndexedDB**
   是一种在浏览器中保存大量结构化数据的方式，可以创建、读取、遍历和搜索数据库中的记录。IndexedDB操作基于事件响应，与Web Storage相比，它可以提供更复杂的数据操作功能。
5. **Service Workers**
   Service workers可以拦截请求，并可以使用缓存API来管理请求的响应。开发者可以编写自己的缓存策略，例如，当网络不可用时，可以从缓存中提供备份内容。

举个例子，假设用户第一次访问一个网页，浏览器会下载所有资源，并按照HTTP头信息决定哪些资源应当被缓存。当用户再次访问这个网页时，如果相关资源具备有效的强缓存设置，浏览器会直接从缓存中加载资源，不经过服务器请求，这样可以极大提高页面加载速度。如果强缓存过期，浏览器会使用协商缓存机制与服务器通信，确认资源是否更新，从而决定是重新下载资源，还是继续使用缓存版本。


详细说明浏览器的缓存机制

在浏览器和Node.js中，事件循环是实现非阻塞I/O操作的核心机制，尽管它们在高层面上非常相似，但具体实现上有几个主要区别。以下是我将回顾的几点关键差异及其例子：

### 1. 任务源和处理方式

**浏览器：**
浏览器的事件循环主要处理来自Web API的任务，这些可以是DOM事件、Ajax回调、setTimeout等。它使用了宏任务（macro tasks）和微任务（micro tasks）的概念。宏任务包括script（整体代码）、setTimeout、setInterval和I/O，而微任务主要包括Promise.then、MutationObserver。在一个事件循环中，每次只会从宏任务队列中取出一个任务执行，然后执行所有可用的微任务。

**Node.js：**
Node.js的事件循环由libuv库实现，包括了多个阶段，如timers、I/O callbacks、poll、check、close callbacks等。Node.js中处理任务更为复杂，各个阶段几乎都有自己的队列。timers阶段处理setTimeout和setInterval回调，poll阶段负责I/O事件回调，而setImmediate的回调会在check阶段执行。

**例子：**
在浏览器中，`Promise.resolve().then()`会在当前宏任务完成后立即执行，因为微任务总是在宏任务之后清空。
在Node.js中，由于事件循环的阶段性，可能会在执行微任务时插入其他类型的任务，例如，如果在I/O操作完成后添加了一个setImmediate，邑可能在当前阶段的微任务和下一阶段的微任务之间执行。

### 2. 定时器的精度

**浏览器：**
浏览器的定时器（如setTimeout和setInterval）的精度相对较低，早期定时器至少有4ms的延迟（根据HTML5标准规定），而现代浏览器偶尔会有更高的延迟，以帮助减少后台标签页的能耗。

**Node.js：**
Node.js定时器的精度通常更高，因为服务器端的环境对实时性和性能有更高的要求。Node.js的事件循环可以精确到毫秒。

**例子：**
在浏览器中设置 `setTimeout(fn, 1)`可能实际上在4ms后才执行回调，而在Node.js中，相同的设置会尽量接近1ms执行回调。

### 3. 默认行为和扩展性

**浏览器：**
浏览器的事件循环通常是不可见和不可控制的，由浏览器内核管理。

**Node.js：**
Node.js的事件循环可以通过C++插件和核心模块进行扩展，给开发者提供了更多控制。例如，使用libuv库，开发者能够接触到底层的事件循环机制。

**例子：**
Node.js的开发者可以编写本地插件，通过直接与libuv交互来修改或增强事件循环的行为，而这在浏览器端是做不到的。

### 4. 性能和优化

**浏览器：**
浏览器的事件循环是为了优化用户界面和用户互动设计的，因此，许多优化都是围绕用户体验和界面响应性进行的。

**Node.js：**
Node.js的事件循环是针对I/O密集型操作进行优化的，特别是网络和文件系统操作。


[Event Loop] 浏览器和nodejs事件循环有什么区别？

TCP（传输控制协议）建立连接的过程通常被称为三次握手（Three-way handshake）。这个过程确保客户端和服务器之间建立一个可靠的会话。三次握手的基本步骤如下：

1. **SYN（同步）步骤：**
   客户端开始连接过程，向服务器发送一个带有SYN（同步序列编号）标志的TCP段，说明客户端愿意建立连接，并且提供了自己的初始序列号（ISN），用来同步序列号。
2. **SYN-ACK（同步确认）步骤：**
   服务器收到客户端的SYN请求后，若同意建立连接，将发送一个TCP段给客户端，这个TCP段同时设置了SYN和ACK（确认）标志。ACK标志确认了客户端的初始序列号，而服务器的SYN标志则提供了服务器的初始序列号。
3. **ACK（确认）步骤：**
   客户端收到服务器的SYN-ACK响应后，再次发送一个TCP段给服务器，这次的TCP段只设置了ACK标志，确认了服务器的初始序列号。这样，三次握手就完成了，双方都确认了对方的初始序列号，可以开始数据传输。

让我用一个简单的例子来说明这个过程：

假设Alice想要通过TCP与Bob的服务器建立连接：

1. **Alice -> Bob:** Alice发送一个TCP段，其中SYN标志被置为1，初始序列号设为100（假设的值）。
2. **Bob -> Alice:** Bob收到了Alice的请求后，发送一个TCP段作为回应，这个段中SYN和ACK标志都被置为1，确认号设为Alice的初始序列号+1，即101，同时Bob提供自己的初始序列号，设为300。
3. **Alice -> Bob:** Alice收到Bob的响应后，发送一个TCP段，其中ACK标志被置为1，确认号设为Bob的初始序列号+1，即301。

完成上述步骤后，Alice和Bob之间的TCP连接就正式建立了，他们可以开始安全可靠的数据交换。这个三次握手的机制是TCP可靠性的核心，确保了双方都准备好接收和发送数据，并且可以处理序列号，以追踪数据包的传输顺序和确认。


TCP 建立连接的详细过程

XML（Extensible Markup Language）和JSON（JavaScript Object Notation）都是用于存储和传输数据的格式，但它们有一些关键的区别：

### 语法
- **XML**
  - XML是一种标记语言，非常类似于HTML。
  - 它使用开始和结束标签来定义数据。
  - 例如:

    ```xml
    <user>
      <name>张三</name>
      <email>zhangsan@example.com</email>
    </user>
    ```

- **JSON**
  - JSON是一种轻量级的数据交换格式。
  - 它使用易于阅读的键值对。
  - 例如:

    ```json
    {
      "user": {
        "name": "张三",
        "email": "zhangsan@example.com"
      }
    }
    ```

### 可读性
- **XML**
  - 因为XML更像是HTML，所以人类可以相对容易地阅读。
  - 然而，它的冗长特性可能使得阅读和理解大型文档变得复杂。

- **JSON**
  - JSON的格式更简洁，通常更容易被人阅读。
  - 它的数据格式也让解析变得更简单。

### 数据类型
- **XML**
  - XML不支持数据类型。所有的数据都是字符串。
  - 开发者需要在应用层面转换和验证数据类型。

- **JSON**
  - JSON支持多种数据类型，包括字符串、数字、布尔值、数组、对象等。
  - 这使得数据可以更直接地映射到程序语言的数据结构。

### 元数据
- **XML**
  - XML天然支持元数据，因为它可以包含属性，并且标签本身可以提供信息。
  - 例如，可以通过命名空间和属性来扩展XML元素。

- **JSON**
  - JSON不包含元数据的概念。
  - 所有的数据都是明确的键值对，不支持属性或命名空间。

### 解析
- **XML**
  - 解析XML需要使用DOM（文档对象模型）或SAX（简单API用于XML）这样的解析器。
  - 这些解析器通常比JSON的解析器更复杂和耗时。

- **JSON**
  - JSON可以通过各种语言内置的解析器进行解析，例如JavaScript的`JSON.parse()`方法。
  - 解析通常更快且效率更高。

### 互操作性
- **XML**
  - XML广泛用于多种不同的系统中，并且在Web服务（如SOAP）中使用得非常普遍。
  - 它的灵活性在需要严格的文档验证和命名空间支持时非常有用。

- **JSON**
  - JSON通常用于Web应用中，特别是作为AJAX操作的一部分。
  - 它与JavaScript的自然兼容性使其在Web开发中非常流行。

### 总结
XML和JSON都可以用于数据存储和传输，但JSON更轻量级，解析起来更快，而XML更加灵活，更适合复杂的文档结构。选择哪种格式取决于应用场景和开发者的需求。

例如，在一个需要执行大量网络请求并且对传输数据大小敏感的移动应用中，可能会倾向于使用JSON，因为它的简洁可以减少带宽使用。相反，如果一个企业需要与多个外部系统交换数据，并且这些系统预期使用基于XML的协议（如SOAP），那么XML将是更合适的选择。

XML 和 JSON 的区别是什么？

React 组件的渲染过程大致分为几个步骤：

1. **初始化阶段**：

   - 当组件被引入到React应用中时，首先会进行初始化。初始化的过程包括设置组件的默认属性（`defaultProps`），以及组件的初始状态（`state`）。
2. **挂载阶段**（Mounting）：

   - **constructor**：如果组件是一个类组件，会首先调用构造函数，进行一些如状态的初始化等操作。
   - **getDerivedStateFromProps**（可选）：在组件实例化后和重新渲染之前调用，可以用来根据props来更新state。
   - **render**：该方法是组件渲染的核心。它会对当前组件的 `props`与 `state`进行分析，并返回一个React元素（通常是虚拟DOM节点），这个返回的元素可以是原生DOM的表现、也可以是其它组件的集合。值得注意的是，`render` 方法是纯函数，不应该包含任何会改变组件状态的代码。
   - **componentDidMount**：组件挂载完成后调用。这是执行副作用操作的理想位置，如发起网络请求、设置定时器等操作。
3. **更新阶段**（Updating）：
   组件的props或state发生变化时，组件会重新渲染，其过程如下：

   - **getDerivedStateFromProps**（可选）：如上所述，这个方法用在props发生变化时根据新的props来更新state。
   - **shouldComponentUpdate**（可选）：通过返回值决定组件是否应当进行更新。如果返回false，则不会调用render方法，也不会进行后面的更新过程。
   - **render**：重新执行render函数，与初始化阶段的render相同。
   - **getSnapshotBeforeUpdate**（可选）：在DOM更新前被调用，用于捕获更新前的DOM状态。
   - **componentDidUpdate**：组件更新完成后被调用，可以执行例如更新DOM的操作。
4. **卸载阶段**（Unmounting）：

   - **componentWillUnmount**：组件将要被卸载之前调用，进行必要的清理工作，如清除定时器、取消网络请求等。

在这个过程中，React还会对组件树进行优化，使用虚拟DOM和Diff算法来减少实际DOM操作的次数，从而提高性能。

**例子**：
假设我们有一个简单的计数器组件 `Counter`，它有一个按钮用来增加计数，计数的值保存在状态 `count`中。当用户点击按钮时，组件的state会更新，触发更新流程：

```jsx
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Counter: componentDidMount');
  }

  componentDidUpdate() {
    console.log('Counter: componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('Counter: componentWillUnmount');
  }

  increment = () => {
    this.setState(state => ({ count: state.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
```

在这个例子中：

- 当 `Counter`首次加载进React树时，constructor、render 和 componentDidMount会依次被调用。
- 当用户点击按钮时，`increment`方法通过 `setState`更新组件的state，触发组件的更新流程。
- 因为state发生了变化，shouldComponentUpdate（如果定义了的话）和render方法会被调用，接着如果有必要，getSnapshotBeforeUpdate和componentDidUpdate也会被调用。
- 当组件要被移除时，componentWillUnmount会被调用。


React 组件渲染过程是怎么样的？

懒加载（Lazy Loading）是一种常见的Web性能优化技术，它可以延迟加载页面上的非关键资源，比如图片。当用户滚动页面并接近这些资源时，这些资源才会开始加载。下面是实现图片懒加载的几种方法：   

### 1. 使用原生的 `loading`属性（HTML5）

最新的HTML标准中为 `<img>`标签增加了一个 `loading`属性，可以设置为 `lazy`，这样浏览器会自动懒加载这些图片。

```html
<img src="example.jpg" loading="lazy" alt="描述文本" />
```

这种方式是最简单、最直接的，但它依赖于浏览器的支持，老版本的浏览器可能不支持这个属性。

### 2. 使用JavaScript实现懒加载

可以用JavaScript监听滚动事件，动态地加载图片。实现的基本思路是：

- 将图片的 `src`属性替换为 `data-src`，初次加载时不加载实际图片。
- 监听页面的滚动事件。
- 当图片进入可视区域时，将 `data-src`的值赋给 `src`，加载图片。

示例代码如下：

```html
<img data-src="example.jpg" alt="描述文本" />
```

```javascript
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));

  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.removeAttribute("data-src");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});
```

### 3. 使用Intersection Observer API

这是一个现代的API，它提供了一种异步检测目标元素与其祖先元素或顶级文档 `viewport`的交叉状态的方法。

```javascript
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));
  const imageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        const image = entry.target;
        image.src = image.dataset.src;
        imageObserver.unobserve(image);
      }
    });
  });

  lazyImages.forEach(function(image) {
    imageObserver.observe(image);
  });
});
```

这种方式不需要监听滚动事件，性能更好，但需要浏览器支持 `Intersection Observer`。

### 4. 使用第三方库

还有一些现成的第三方库可以帮助实现图片懒加载，如 `lozad.js`、`lazysizes`等。这些库通常提供了更多的功能和更好的兼容性。

```html
<script src="path_to_lazysizes.js" async=""></script>


<img data-src="example.jpg" class="lazyload" alt="描述文本" />
```

在使用第三方库时，通常只需要引入相应的JavaScript文件，并在图片标签中做一些简单的修改即可。

如何实现web图片懒加载功能

React 组件抽离公共逻辑主要有以下几种方式：

### 1. 高阶组件（Higher-Order Components，HOCs）
高阶组件是一个接收组件并返回新组件的函数。它可以用于重用组件逻辑。

**例子：**
```jsx
function withUserData(WrappedComponent) {
  return class extends React.Component {
    state = {
      user: null
    };

    componentDidMount() {
      // 假设 getUserData() 方法从某个服务获取用户数据
      getUserData().then(user => this.setState({ user }));
    }

    render() {
      return <WrappedComponent {...this.props} user={this.state.user} />;
    }
  };
}

// 使用高阶组件
const EnhancedComponent = withUserData(MyComponent);
```

### 2. Render Props
Render Props 是指以函数为子组件的这种模式，它允许我们的组件告诉其子组件需要渲染的内容。

**例子：**
```jsx
class UserData extends React.Component {
  state = {
    user: null
  };

  componentDidMount() {
    // 同样假设 getUserData() 方法从某个服务获取用户数据
    getUserData().then(user => this.setState({ user }));
  }

  render() {
    return this.props.render(this.state.user);
  }
}

// 使用 Render Props
<UserData render={user => user ? <MyComponent user={user} /> : <LoadingSpinner />} />
```

### 3. 自定义 Hooks
自定义 Hooks 允许你将组件逻辑提取到可重用的函数中。

**例子：**
```jsx
function useUserData() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUserData().then(userData => setUser(userData));
  }, []);

  return user;
}

// 使用自定义 Hook
function MyComponent() {
  const user = useUserData();
  
  if (!user) {
    return <LoadingSpinner />;
  }

  return <Profile user={user} />;
}
```

### 4. Context API
Context API 允许你在组件树中直接传递数据，而不必在每个层级手动传递 props。

**例子：**
```jsx
const UserContext = React.createContext();

// Context 提供者
class UserProvider extends React.Component {
  state = {
    user: null,
  };

  componentDidMount() {
    getUserData().then(user => this.setState({ user }));
  }

  render() {
    return (
      <UserContext.Provider value={this.state.user}>
        {this.props.children}
      </UserContext.Provider>
    );
  }
}

// Context 消费者
function MyComponent() {
  return (
    <UserContext.Consumer>
      {user => user ? <Profile user={user} /> : <LoadingSpinner />}
    </UserContext.Consumer>
  );
}

// 应用 Context
<UserProvider>
  <MyComponent />
</UserProvider>
```

### 5. 组件组合（Component Composition）
组件组合是 React 中一种基本的模式，它允许你将子组件传递给父组件，并在父组件中渲染。

**例子：**
```jsx
function UserProfile({ user, children }) {
  return (
    <div>
      <Profile user={user} />
      {children}
    </div>
  );
}

function MyComponent() {
  const user = useUserData();
  
  return (
    <UserProfile user={user}>
      {/* 其他定制的子组件 */}
    </UserProfile>
  );
}
```

这些方法各有优劣，你可以根据具体场景和需求来选择最合适的方式来抽离和复用组件的逻辑。

前端面试题手册