前端

服务端

计算机基础

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



Promise 实现链式调用主要依赖于其返回一个新的 Promise 对象的特性。

在 JavaScript 中，Promise 是一个处理异步操作的对象，可以在原调用位置以同步方式处理异步操作结果。

下面是 Promise 的链式调用的基本实现：

1. Promise 构造函数接收一个执行函数，执行函数接收两个参数：resolve 和 reject，分别用于异步操作成功与失败的情况。
2. 调用 Promise 对象的 `.then` 方法提供链式调用。`.then` 方法接收两个参数（都是可选的）：`onFulfilled` 和 `onRejected`，分别在 Promise 成功或失败时调用。`.then` 方法也返回一个 Promise 对象，以便进行链式调用。
3. 如果 `onFulfilled` 或 `onRejected` 返回一个值 x，运行 Promise 解决过程：[[Promise Resolution Procedure]](https://promisesaplus.com/#the-promise-resolution-procedure)。
4. 如果 `onFulfilled` 或 `onRejected` 抛出一个异常 e，`Promise.then` 的返回的 Promise 对象会被 reject 掉。
5. 如果 `onFulfilled` 不是函数且 promise1(前一个 promise) 成功执行，promise2(下一个 promise)成功处理 promise1 的 final state。
6. 如果 `onRejected` 不是函数且 promise1 失败，promise2 会拒绝 promise1 的原因。



以下是一个示例：

```javascript
new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000); // 第一步：创建一个 Promise 并执行一个异步操作
}).then(function(result) { // 第二步：注册一个 onFulfilled 回调
  console.log(result); // 打印：1
  return result + 2;
}).then(function(result) { // 第三步：链式调用
  console.log(result); // 打印：3
  return result + 2;
}).then(function(result) {
  console.log(result); // 打印：5
  return result + 2;
});
```

在这个例子中，每个 `.then` 调用后都返回一个新的 Promise 对象，这个新的 Promise 对象会立即执行，并在执行完毕后调用下一个 `.then` 注册的回调。通过这种方式，我们可以以同步的方式处理异步的结果，而这就是 Promise 链式调用的本质。


Promise 是如何实现链式调用的？

混合应用（Hybrid App）是一种移动应用程序，它结合了原生应用以及网页应用的特点。它们通常是通过Web技术（如HTML5, CSS和JavaScript）来开发，并通过一个原生容器在移动设备上运行。下面是混合应用的几个关键特点：

1. **跨平台兼容性**：混合应用的一个主要优势是能够使用一套代码基础适用于不同的操作系统，例如iOS和Android。这意味着开发者可以编写一次代码，然后通过桥接技术使其在不同的移动平台上运行。

2. **开发成本和时间**：与分别为各个平台开发原生应用相比，混合应用可以显著降低开发成本和时间，因为它们共享一套代码库。

3. **易于更新**：由于混合应用的内容可以像网页一样从服务器端获取，因此它们可以更频繁地更新而无需经过应用商店的审核。

4. **性能问题**：混合应用通常比原生应用性能稍逊，因为它们需要通过Web视图（如WebView）来运行，这可能会导致比直接在原生平台上开发的应用更慢的性能。

5. **设备特性访问**：虽然混合应用可以通过插件访问设备的原生特性，如摄像头、GPS等，但通常访问这些特性的效率比原生应用要低。

举一个例子，假设我们开发了一款健身应用，该应用需要能够在iOS和Android设备上运行。通过选择混合应用开发模式，我们可以使用例如Cordova或Ionic这样的框架来开发应用，这样我们就能够编写一次代码，并将其部署到不同平台的应用商店。这样做省去了为每个平台单独开发应用的需要，节约了资源和时间。

总之，混合应用是一种平衡方案，它结合了原生应用的高性能和设备特性访问能力以及Web应用的跨平台兼容性和开发效率。根据项目的需求和资源，混合应用可以是一个非常有吸引力的选择。

什么是混合应用 hybrid app?

在Web应用中，当JavaScript线程崩溃导致页面无法正常工作时，确实需要一种机制来通知用户或者开发者。在这种情况下，由于主JavaScript线程已经崩溃，传统的错误捕获如 `try-catch`或者 `window.onerror`事件监听可能都不起作用。但是，我们仍然可以采用以下几种策略：

### 1. 使用Web Workers

Web Workers运行在与主JavaScript线程分离的后台线程中。即使主线程崩溃，Web Workers可能仍然保持运行状态。因此，可以在页面加载时，启动一个监控Worker，用来检测主线程的心跳。如果主线程心跳停止（例如，可以通过设置定时消息来实现心跳），Worker可以尝试通知服务器或者更新UI来告诉用户发生了错误。

### 2. 利用 `window.onunload`和 `window.onbeforeunload`事件

可以在 `window.onunload`或 `window.onbeforeunload`事件中进行错误上报。如果浏览器支持 `navigator.sendBeacon`方法，即使在页面卸载的情况下也可以向服务器发送数据。虽然这两个事件不是为错误处理设计的，但它们可以用于在页面关闭时发送一些信息，可能包括崩溃通知。

### 3. 使用Service Workers

Service Workers作为一种在浏览器后台运行的脚本，可以用来拦截和缓存网络请求，推送通知等。如果设置了Service Worker，并且页面发生崩溃的情况下，它仍然能够接收到fetch请求或者推送事件，从而可以实现一定程度上的错误处理或状态报告。

### 4. 外部心跳系统

通过外部系统定时检测Web应用的状态，例如可以通过服务器定时发送请求到客户端，检测页面的响应。如果在预定时间内没有收到响应，或者收到错误响应，服务器则可以记录这类事件并采取相应的措施。

### 5. 自动化监控和错误上报工具

使用像Sentry、LogRocket这样的第三方错误监控服务，它们可以帮助在JavaScript出现未捕获异常时自动上报错误。虽然在某些崩溃情况下这些工具也可能失效，但它们仍然是一种有效的自动监控手段。

### 6. 客户端存储

在客户端使用如localStorage或sessionStorage，可以在检测到问题时写入状态标志。然后在页面重载或重新打开时检查这些标志，如果发现有异常状态，可以采取相应的通知措施。

### 7. 使用全局异常处理器

在可能的情况下，可以注册全局异常处理器 `window.addEventListener('error', function() {...})`，尽管在某些崩溃情况下可能不会被调用，但它提供了一个捕获异常并尝试通知的机会。

### 示例 

举一个使用Web Workers进行心跳检测的简单示例：

假设我们在主线程中有一个定期运行的函数，模拟心跳：

```javascript
function sendHeartbeat() {
    if (worker) {
        worker.postMessage('heartbeat');
    }
}

// 定期发送心跳到Worker
setInterval(sendHeartbeat, 5000);
```


页面意外崩溃，这时候 JS 线程都已经崩溃了，如何传递通知呢？

### MVVM 模式介绍

MVVM 是 Model-View-ViewModel 的缩写，是一种设计模式，专门用于简化用户界面的事件驱动编程。它将用户界面（UI）的表示和业务逻辑分离开来，以达到更好的关注点分离（Separation of Concerns），从而使得开发和维护变得更加容易。

### MVVM 的组成部分

- **Model（模型）**：代表的是数据和业务逻辑层。这是应用程序的核心，包含了数据的状态以及对数据的处理方法。
- **View（视图）**：是用户界面层，显示数据并捕获用户行为。视图的任务是向用户展示信息，并接收用户的输入。
- **ViewModel（视图模型）**：是视图的抽象，它负责处理视图的逻辑。它会监听模型的变化并更新视图，反之亦然，它也会处理视图的用户输入并可能影响模型。

### MVVM 解决的问题

1. **UI与业务逻辑分离**：MVVM 通过引入 ViewModel，实现了界面逻辑与业务逻辑的分离。开发人员可以专注于业务逻辑，而设计师可以专注于界面设计，两者可以独立进行。
   
2. **双向数据绑定**：ViewModel 通常实现了双向数据绑定，即当数据发生变化时，UI自动更新；用户界面变化（如用户输入），数据也会同步更新。这极大地简化了状态同步的复杂性。

3. **更易于测试**：由于 ViewModel 不依赖于视图层的具体实现，因此可以在不涉及用户界面的情况下进行测试。

4. **提高代码的可维护性**：将视图逻辑（如状态的显示和转换）移动到 ViewModel 可以减少视图代码的复杂性，使其变得更加整洁和可维护。

5. **提高可复用性**：ViewModel 可以从视图中抽象出来，因此可以在不同的视图中复用。

### 实例应用

假设我们的应用中有一个用户表单界面，用户需要输入他们的信息。在不使用 MVVM 的情况下，视图代码可能会变得非常复杂，因为它需要处理数据的加载、显示、编辑、验证和保存等逻辑。

在 MVVM 模式下，这些逻辑将会从视图中分离出来：

- **Model**：包含用户信息的数据结构。它可能还包含与数据存储和业务规则相关的逻辑。
- **View**：显示一个表单，用户可以在其中输入他们的信息。它不包含逻辑，只是简单的显示和收集用户输入。
- **ViewModel**：处理表单的显示逻辑，例如当用户点击保存时验证输入并更新模型。

通过这种方式，视图不需要知道数据是如何被处理和验证的，而 ViewModel 中的逻辑可以被独立测试，不需要考虑用户界面的具体实现。

什么是 MVVM 模式？是为了解决什么问题？

使用 `setTimeout` 模拟实现 `setInterval` 的基本思路是：在 `setTimeout` 的回调函数中再次调用 `setTimeout`，这样可以不断地延迟执行相同的操作，形成类似 `setInterval` 的效果。

不过，值得注意的是，使用这种方法可以更精确地控制下一次执行的时间，因为你可以在当前任务结束后再设置下一次执行，这样就不会受到之前任务执行时间的影响。

下面是一个模拟 `setInterval` 的示例函数 `simulateSetInterval`：

```javascript
function simulateSetInterval(callback, interval) {
    // 用来清除定时器的函数，在simulateSetInterval返回的对象上调用clear方法即可停止。
    let timer = {
        clear: function() {
            clearTimeout(this.timeoutId);
        }
    };

    // 这是一个递归函数，用于模拟重复间隔执行
    const repeat = function() {
        callback();
        timer.timeoutId = setTimeout(repeat, interval);
    };

    // 开始执行
    timer.timeoutId = setTimeout(repeat, interval);

    // 返回一个控制对象，可以用来停止间隔执行
    return timer;
}

// 使用 simulateSetInterval 的例子
let counter = 0;
const exampleTimer = simulateSetInterval(() => {
    console.log('Hello World!');
    counter++;
    if (counter >= 5) {
        exampleTimer.clear();
        console.log('Timer stopped after 5 iterations.');
    }
}, 1000);
```

在这个例子中，`simulateSetInterval` 函数接受一个回调函数 `callback` 和一个间隔时间 `interval`。函数内部定义了一个递归的 `repeat` 函数，它首先执行传入的 `callback`，然后使用 `setTimeout` 来延迟下一次执行 `repeat` 函数本身，从而达到周期执行的效果。返回的 `timer` 对象包含一个 `clear` 方法，可以用来清除定时器，停止进一步的执行。

这种模拟实现方式的好处是，它更加灵活，可以根据任务的实际执行时间动态调整间隔，而 `setInterval` 在一些情况下可能会导致任务之间的间隔不准确，尤其是在某些任务执行时间较长时。使用 `simulateSetInterval`，下一次任务的开始时刻总是在当前任务完成后按照设定的间隔进行计时。


JavaScript 如何使用 setTimeout 模拟实现 setInterval？

删除一个cookie的值可以通过多种方式实现，具体取决于您使用的编程语言和环境。以下是一些通用的方法和例子：

### 在JavaScript中删除一个Cookie：

要在客户端JavaScript中删除一个cookie，您可以将cookie的过期时间设置为过去的一个时间点。这样做会告诉浏览器此cookie已经过期，于是浏览器会删除它。

```javascript
function deleteCookie(name) {
    document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
```

使用这个函数，您只需要传入您希望删除的cookie的名称即可。

### 在HTTP响应中删除一个Cookie：

如果您是在服务器端工作，比如使用Node.js的Express框架，您可以通过设置响应头来告诉浏览器删除一个cookie。

```javascript
res.clearCookie('cookieName');
```

这行代码会设置一个响应头来清除名称为 `cookieName`的cookie。

### 在PHP中删除一个Cookie：

在PHP中，您可以通过设置一个负的过期时间来删除一个cookie。

```php
setcookie("cookieName", "", time() - 3600);
```

上面的代码将 `cookieName`的过期时间设置为一个小时前，这会导致它被删除。

### 在Python的Flask框架中删除一个Cookie：

如果您在使用Flask框架，可以利用响应对象来删除cookie。

```python
from flask import make_response

@app.route('/delete-cookie')
def delete_cookie():
    response = make_response('Cookie has been deleted')
    response.set_cookie('cookieName', '', expires=0)
    return response
```

这段代码创建了一个响应对象，并使用 `set_cookie`方法将 `cookieName`的值设置为空字符串，并且将过期时间设置为0，这样浏览器会删除这个cookie。

### 总结：

通常删除cookie的方法是将其过期时间设置为过去的某个时间点，这样浏览器就会认为cookie已经过期，自动将其删除。不同的编程语言和框架有各自的函数或方法来实现这一点。重要的是要确保您发送正确的HTTP头信息，以便浏览器知道要删除的cookie。


如何删除一个cookie值？

在React项目中，内存泄露主要是指应用程序持续占用不再需要使用的内存。这会导致应用性能下降，甚至崩溃。以下是一些典型的内存泄露场景：

### 1. 组件卸载后的挂载状态更新

例子：
```javascript
class MyComponent extends React.Component {
  state = { data: null };

  componentDidMount() {
    someAsyncCall().then(data => {
      if (!this.isUnmounted) {
        this.setState({ data });
      }
    });
  }

  componentWillUnmount() {
    this.isUnmounted = true;
  }
}
```
在上面的例子中，`someAsyncCall`是一个异步操作，如果在异步操作完成前组件被卸载，而异步操作的回调仍试图执行`this.setState`，这可能会导致内存泄露。通过设置一个标志`isUnmounted`并在`componentWillUnmount`中标记组件已卸载，可以避免这种情况。

### 2. 没有清理的定时器和数据订阅

例子：
```javascript
class MyComponent extends React.Component {
  componentDidMount() {
    this.intervalId = setInterval(this.fetchData, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  fetchData = () => {
    // Fetch data from API
  }
}
```
如果在组件卸载后，没有清理定时器，定时器依然会运行，这会阻止JavaScript引擎回收相关内存，导致内存泄露。在`componentWillUnmount`中清除定时器可以解决这个问题。

### 3. 外部库的事件监听器未正确移除

例子：
```javascript
class MyComponent extends React.Component {
  componentDidMount() {
    ExternalLibrary.on('data', this.handleData);
  }

  componentWillUnmount() {
    ExternalLibrary.off('data', this.handleData);
  }

  handleData = (data) => {
    // Handle the event
  }
}
```
如果忘记移除事件监听器，那么即使组件卸载了，事件监听器仍然存在，导致内存泄露。应该在`componentWillUnmount`中移除监听器。

### 4. 闭包引用导致的内存泄露

例子：
```javascript
function setup() {
  let largeData = new Array(1000).fill(new Array(1000).fill('data'));

  document.getElementById('button').addEventListener('click', function handleClick() {
    console.log('Button clicked');
  });
}
```
在上面的例子中，即使按钮点击事件的处理函数`handleClick`并不需要使用`largeData`，但由于闭包的作用，`largeData`会被保留在内存中，除非`handleClick`被移除或者`largeData`变量被显式设置为`null`。

### 5. 长时间运行的WebSocket连接

如果组件与一个WebSocket服务建立了连接，并且在组件卸载时没有关闭连接，那么这个连接可能会持续存在并保持对组件的引用，从而导致内存泄露。

### 防止内存泄露的一般建议：

- 当组件卸载时，确保取消所有订阅和异步操作。
- 使用`useEffect`的清理函数来处理功能性组件的副作用和相关的清理操作。
- 对于外部事件监听器和定时器，确保在组件卸载时移除或清理它们。
- 考虑使用`WeakMap`或`WeakSet`来缓存大对象，它们不会阻止垃圾回收。
- 避免在组件状态中保存大量的数据，特别是如果这些数据在组件的生命周期内不再需要。
- 使用工具（如Chrome开发者工具的Memory选项卡）定期对应用的内存使用进行分析和调试。

React 项目中有哪些内存泄露的场景？

同源政策（Same-origin policy）是一种重要的安全措施，它被设计为Web浏览器中的一个关键安全特性。它的目的是为了保护用户的在线安全，防止恶意网站访问或操纵另一个网站的敏感数据。同源限制确保了一个源（origin）中加载的文档或脚本只能与同一源的资源进行交互，而不能与其他源的资源进行交互。这里的源是指协议，端口和主机名的组合。

以下是同源政策的必要性以及它如何提高网络安全的几个方面：

1. **防止跨站点请求伪造（CSRF）**：
   跨站点请求伪造是一种网络攻击，攻击者通过伪装成受信任用户的请求来利用用户已经认证的身份。如果没有同源限制，攻击者可以轻易地从自己的网站发起请求到另一个网站，并潜在地进行未经授权的操作。

   例如，用户登录到他们的银行网站，并在另一个标签页中访问了一个恶意网站。如果没有同源政策，恶意网站可以发起请求到银行网站，并可能执行一些不良操作，例如转账，而这些操作是在用户的权限下进行的。
2. **保护用户隐私**：
   同源政策防止了一个网站的脚本访问另一个网站的数据，这样可以保护用户个人信息不被未授权的第三方获取。例如，如果你访问了一个电子邮件提供商的网页，同源政策将防止其他网站的脚本读取你的邮件内容。
3. **阻止DOM操作**：
   如果没有同源限制，恶意脚本可以操纵其他网站的DOM（文档对象模型），从而可能篡改页面内容、捕获敏感信息或者在不知情的情况下在用户界面上执行操作。
4. **限制网络攻击范围**：
   通过限制脚本只能与同一源的资源交互，同源政策有助于减少网络攻击面，因为攻击者不能简单地通过自己控制的网站操纵其他网站的资源。
5. **隔离潜在恶意文件**：
   当网站加载第三方插件或广告时，同源政策防止这些第三方资源访问宿主网站的数据，因此即使这些资源被恶意利用，它们也不能直接访问宿主网站的敏感信息。
6. **控制Web API和资源的访问**：
   一些现代Web API，如Web Storage、IndexedDB等，受同源政策的保护，只有在同源环境下才能被访问。这样可以确保只有在合适的安全上下文中才能访问和操作用户数据。
7. **促进安全的跨源通信**：
   同源政策实施了严格的限制，但同时，Web也提供了如CORS（跨源资源共享）这样的机制来安全地允许跨源访问，其中需要明确服务器端的许可和合适的客户端处理。


浏览器为什么要有同源限制？

在谷歌Chrome浏览器中，当您打开一个新的网页时，Chrome通常会启动几个进程。这是因为Chrome采用了多进程架构来提升性能和安全性。具体需要启动的进程数量可能会根据您的浏览器设置、扩展插件、打开的标签页数量以及Chrome的版本不同而有所变化。以下是Chrome打开一个新页面时可能会启动的主要进程类型：

1. **浏览器进程（Browser Process）**：这是主要的控制进程，管理Chrome用户界面的所有方面，包括地址栏、书签、前进和后退按钮等。它也负责文件的下载和安全策略。

2. **渲染进程（Renderer Process）**：每个标签页通常有自己的渲染进程（在默认情况下）。渲染进程负责一个网页的渲染，包括HTML、CSS、JavaScript的执行等。这种隔离机制可以确保如果一个网页崩溃，它不会影响到其他标签页。

3. **插件进程（Plugin Process）**：如果页面使用了插件（如Adobe Flash Player，虽然现在已经逐渐弃用），每个插件可能有其自己的进程。

4. **GPU进程（GPU Process）**：Chrome有一个专门的GPU进程，用来处理GPU加速的任务，例如3D CSS效果、WebGL内容等。

5. **扩展进程（Extension Process）**：如果您安装了Chrome扩展，每一个活动的扩展通常都会有自己的进程。

例如，假设您打开了一个新的Chrome窗口，并在其中打开了一个包含多媒体内容且有多个扩展活动的复杂网页，那么您可能至少会看到如下的几个进程：
- 一个浏览器进程
- 一个渲染进程
- 多个扩展进程（根据活动的扩展数量）
- 一个GPU进程

所以在这个假设中，打开这个页面至少需要4种类型的进程，具体进程数取决于活动扩展的数量。

此外，从Chrome 67版本开始，Chrome推出了一种名为“Site Isolation”的安全特性，这会导致更多的进程生成，因为它会为来自不同站点的渲染器分别创建不同的进程，以加强站点之间的隔离。这意味着即使是单个标签页也可能因为加载了来自不同域的iframe而产生多个渲染进程。

Chrome 打开一个页面需要启动多少进程？分别有哪些进程？

在React中，`useRef`是一个非常有用的Hook，它主要被用来访问DOM元素和保存跨渲染周期持久的可变数据。`useRef`返回一个可变的ref对象，其 `.current`属性被初始化为传递给 `useRef`的参数（initialValue）。返回的对象在组件的整个生命周期内保持不变。  

### 使用方式

首先，我们需要在组件内部导入 `useRef`：

```jsx
import React, { useRef } from 'react';
```

然后可以使用 `useRef`来创建一个ref对象：

```jsx
const myRef = useRef(initialValue);
```

其中 `initialValue`是ref对象 `.current`属性的初始值。使用 `myRef.current`可以访问或者修改这个值。

### 使用场景

有几种常见的场景适合使用 `useRef`：

#### 1. 访问DOM元素

当你需要直接操作DOM节点时，比如获取输入框的值或者设置焦点，可以使用 `useRef`。

```jsx
function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // 直接访问DOM元素来设置焦点
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Set focus</button>
    </>
  );
}
```

#### 2. 保存任意可变值

另一个使用场景是当你想要保存一个在组件的整个生命周期中都保持不变的值，这个值不会触发组件的重新渲染。

```jsx
function Timer() {
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {
      // 执行一些操作
    }, 1000);
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  // ...

}
```

在这个例子中，`intervalRef`被用来保存一个间隔定时器的ID，虽然这个ID会在不同的渲染周期间发生变化，但我们不希望这种变化触发组件的重新渲染。

#### 3. 跟踪上一个值

`useRef`也可以被用来跟踪组件中的变量或状态的旧值。

```jsx
function Counter() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current; // 在渲染时获取旧的值

  // ...
}
```

这里 `prevCountRef`用于存储每次渲染后的 `count`值，可以在任何时候访问前一个状态的值，而不会触发组件的重新渲染。


前端面试题手册