前端

服务端

计算机基础

JSONP（JSON with Padding）是一种利用`<script>`标签不受同源策略限制的特性来实现跨源请求的技术。因为`<script>`标签的初衷是加载静态的JavaScript文件，所以`<script>`标签仅支持GET方法来请求资源，它并不支持POST方法。这就是为什么JSONP不支持POST方法的根本原因。

当使用JSONP进行通信时，您会将请求参数包含在URL中，并通过动态创建`<script>`标签的方式将其发出。服务器接收到GET请求后，将数据包裹在一个函数调用中，并将其作为响应返回。客户端定义好回调函数后，这段包裹着JSON数据的JavaScript被执行，回调函数便会被调用并处理返回的数据。

例如，假设您的页面需要从`http://example.com`获取一些用户数据，您可能会发送如下的JSONP请求：

```html
<script type="text/javascript">
  // 定义回调函数
  function handleResponse(data) {
    console.log('Received data:', data);
  }
</script>
<script type="text/javascript" src="http://example.com/data?callback=handleResponse"></script>
```

服务器端需要接收到callback参数后，把数据包装在该函数调用中：

```javascript
// 服务器端响应
handleResponse({ "user": "Alice", "age": 25 });
```

如上所述，JSONP请求的本质是一个GET请求，它是通过`<script>`标签的src属性来发起的。因此，它不能使用POST方法，后者通常用于传输大量数据或者发送需要安全传输的数据。如果您需要进行跨域的POST请求，可以考虑使用更现代的技术，如CORS（跨源资源共享），它允许在各种HTTP方法中使用跨源请求，同时提供了更好的安全性。

jsonp 为什么不支持 post 方法？

### Ajax 处理请求跨域问题

Ajax（Asynchronous JavaScript and XML）本身是不支持跨源请求的，这是因为浏览器出于安全考虑实施的同源策略（Same-Origin Policy）。同源策略限制了来自不同源的文档或脚本对当前文档读取或设置某些属性的能力。

不过，有几种方法可以绕过这个限制来实现跨源请求：

1. **JSONP（JSON with Padding）**：这是一种老的技巧，它利用 `<script>`标签不受同源策略限制的特点来进行跨域请求。服务器返回的响应拼接一个函数调用作为JavaScript代码。这种方法的缺点是它只能用于GET请求，并且存在一定的安全隐患。
2. **CORS（Cross-Origin Resource Sharing）**：这是现在推荐的方法，它允许服务器显式地指定哪些源可以访问该服务器上的资源。CORS是一个 W3C 标准，它通过在服务器上设置特定的HTTP头来工作。
3. **代理服务器**：使用一个服务器充当中间人的角色，接受来自客户端的跨源请求，然后转发请求到目标服务器。代理服务器接收到响应后，再将数据返回给客户端。这种方法需要额外的服务器端配置。
4. **WebSockets**: WebSockets提供了一个全双工的通信渠道，可以在浏览器和服务器之间建立持久连接。虽然WebSocket协议与HTTP不同，但它可以绕过同源策略，从而实现跨域通信。

### CORS 设置

当你控制服务器时，可以通过设置HTTP响应头来启用CORS。这些头部主要包括：

1. **Access-Control-Allow-Origin**: 指定了哪些网站可以参与跨域资源共享。例如，设置为 `*`代表允许所有域进行跨域请求，但出于安全考虑通常会指定明确的域名。
2. **Access-Control-Allow-Methods**: 指定了允许的HTTP请求方法，如 `GET, POST, PUT, DELETE, OPTIONS`等。
3. **Access-Control-Allow-Headers**: 在实际请求中允许自定义的HTTP头部字段列表。
4. **Access-Control-Allow-Credentials**: 表示是否允许发送Cookie。如果服务器端设置了这个值为 `true`，那么前端请求的时候也必须将 `withCredentials`属性设置为 `true`。
5. **Access-Control-Expose-Headers**: 允许客户端访问的服务器白名单头部字段。
6. **Access-Control-Max-Age**: 表明在多少秒内，不需要再发送预检验请求（对于某一资源的预检请求结果的有效期）。

下面是一个简单的例子，展示了如何在Node.js的Express框架中设置CORS响应头：

```javascript
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
  res.header('Access-Control-Allow-Credentials', true);
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Max-Age', '86400');
    return res.status(200).send();
  }
  next();
});

// 你的其他路由和逻辑

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


Ajax 如何处理请求跨域问题？CORS 如何设置？

Base64编码通常不是直接用来提升性能的，而是用来确保二进制数据可以通过仅支持文本格式的传输层安全地传输。Base64将二进制数据编码为ASCII字符串，这使得它可以在不支持二进制数据的系统（如电子邮件）中传输。虽然Base64编码的数据比原始二进制数据大约增加了33%，但在某些情况下，它可以间接地提升性能：

1. **减少HTTP请求**：在Web开发中，Base64编码通常用于将小的图片或其他文件直接嵌入到HTML或CSS中。这样做的好处是可以减少浏览器发起的HTTP请求的数量，因为所有的资源都包含在了主文档中。少了额外的请求，网页加载时间就会缩短，间接提高了用户体验和性能。

   举个例子，如果一个网页中有多个小图标，通常的做法可能是每个图标一个HTTP请求来获取图像文件。如果将这些图标的图片用Base64编码后嵌入到CSS中，就可以将多个HTTP请求合并为一个请求，从而减少了服务器的请求负载和网络延迟，提高了页面的加载速度。

2. **数据URI方案**：Base64编码可以使用数据URI方案在Web页面中直接嵌入图像数据，这样可以避免服务器配置对小文件的较慢响应时间。服务器对小文件的处理往往不如大文件高效，因为涉及到磁盘I/O等开销。通过避免这些小文件请求，可以在服务器端节省资源，从而提升性能。

3. **安全和兼容性**：有些系统不支持二进制数据的传输，或者在传输过程中可能会因为某些字符（如NUL byte）的存在而出现问题。在这种情况下，Base64编码提供了一种可靠的方法来处理和传输数据，避免了潜在的数据损坏和传输错误，从而确保系统的顺畅运行和性能。

总之，Base64编码本身增加了数据量，理论上会降低传输效率，但通过减少HTTP请求的数量、充分利用缓存、避免小文件请求开销以及提高数据的安全性和兼容性，它可以在特定场景下间接提升系统的整体性能。

base64 为什么能提升性能？

如果我们要在JavaScript中去除URL中的 `#` 号以及后面的部分，我们可以使用 `window.location` 对象，具体是 `window.location.href` 属性，再结合 `String` 对象的 `split` 方法。请看以下例子：  

```javascript
// 假设当前URL为： https://www.example.com/page.html#section1

// 使用 JavaScript 获取当前URL并去除 # 及之后的部分
function removeHashFromUrl() {
  var currentUrl = window.location.href;
  var urlWithoutHash = currentUrl.split('#')[0];
  window.location.href = urlWithoutHash;  // 如果需要导航到去除hash的URL
  return urlWithoutHash; // 如果只是需要获取新的URL而不导航
}

var newUrl = removeHashFromUrl();
console.log(newUrl); // 输出：https://www.example.com/page.html
```

如果我们是在后端处理URL字符串，比如在Node.js环境或者其他不涉及浏览器的上下文中，我们可以简单地使用字符串处理方法。这里是用Node.js中的JavaScript例子：

```javascript
// 假设有一个URL字符串
var url = "https://www.example.com/page.html#section1";

// 去除URL中的 # 及之后的部分
function removeHashFromUrl(url) {
  return url.split('#')[0];
}

var newUrl = removeHashFromUrl(url);
console.log(newUrl); // 输出：https://www.example.com/page.html
```

在Python中处理URL也很简单，我们可以使用内置的 `urlparse`库，这样可以更加优雅地处理复杂的URL。这是一个Python例子：

```python
from urllib.parse import urlparse

# 假设有一个URL字符串
url = "https://www.example.com/page.html#section1"

# 去除URL中的 # 及之后的部分
parsed_url = urlparse(url)
new_url = parsed_url.scheme + "://" + parsed_url.netloc + parsed_url.path
print(new_url) # 输出：https://www.example.com/page.html
```

以上提供了去除URL中 `#` 号的几种方法，具体使用哪种取决于具体的应用场景以及开发环境。在前端JavaScript开发中，我们通常可能会涉及到浏览器的 `window.location` 对象，而在服务器端或者其他一些脚本处理中，则可能会使用字符串处理函数或者URL解析库。


如何去除 url 中的#号？

Promise、async/await 和 Callback 都是在 JavaScript 中处理异步操作的机制。每种技术都有其特点和适用场景。

### Callback

Callback 是一种较老的异步编程技术，它是将一个函数作为参数传递给另一个函数，并在那个函数执行完毕后调用。它最常见的用途是在进行文件操作或者请求网络资源时。

**优点：**

- 简单易懂，易于实现。

**缺点：**

- 容易导致 "回调地狱"（Callback Hell），即多个嵌套的回调函数使代码难以阅读和维护。
- 错误处理不方便，需要在每个回调中处理错误。

**例子：**

```javascript
fs.readFile('example.txt', 'utf8', function(err, data) {
    if (err) {
        return console.error(err);
    }
    console.log(data);
});
```

### Promise

Promise 是异步编程的一种解决方案，比传统的解决方案 —— 回调函数和事件 —— 更合理和更强大。它表示一个尚未完成但预期将来会完成的操作的结果。

**优点：**

- 提供了更好的错误处理机制，通过 `.then()` 和 `.catch()` 方法链。
- 避免了回调地狱，代码更加清晰和易于维护。
- 支持并行执行异步操作。

**缺点：**

- 代码仍然有些冗长。
- 可能不够直观，特别是对于新手。

**例子：**

```javascript
const promise = new Promise((resolve, reject) => {
    fs.readFile('example.txt', 'utf8', (err, data) => {
        if (err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
});

promise.then(data => {
    console.log(data);
}).catch(err => {
    console.error(err);
});
```

### async/await

`async/await` 是建立在 Promise 上的语法糖，它允许我们以更同步的方式写异步代码。

**优点：**

- 代码更加简洁、直观。
- 更容易理解，特别是对于习惯了同步代码的开发者。
- 方便的错误处理，可以用传统的 `try/catch` 块。

**缺点：**

- 可能会导致性能问题，因为 `await` 会暂停函数的执行，直到 Promise 解决。
- 在某些情况下不够灵活，例如并行处理多个异步任务。

**例子：**

```javascript
async function readFileAsync() {
    try {
        const data = await fs.promises.readFile('example.txt', 'utf8');
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

readFileAsync();
```

总结来说，Callback 是最基本的异步处理形式，Promise 提供了更强大的控制能力和错误处理机制，而 async/await 是在 Promise 基础上提高代码可读性和减少样板代码的语法糖。


Promise 和 async/await 和 Callback 有什么区别？

在JavaScript中，暂时性死区（Temporal Dead Zone，简称TDZ）是一个术语，用来描述在代码块中使用`let`或`const`声明变量后，和这些变量实际可以被访问之前的区域。在这个区域内访问这些变量会导致一个`ReferenceError`。

暂时性死区的存在是因为`let`和`const`声明的变量不会像使用`var`声明的变量那样在代码执行前进行提升。变量提升（hoisting）是一个过程，其中变量和函数声明被移动到它们所在作用域的顶部。但对于`let`和`const`声明的变量，它们会被绑定到它们所在的块级作用域中，并且不会在声明之前存在于该作用域中。

这里有一个例子来说明暂时性死区：

```javascript
console.log(a); // 这会抛出 ReferenceError，因为变量a还处于TDZ中
let a = 3;
console.log(a); // 这时不会有错误，因为变量a已经声明且初始化完毕
```

在上面的代码中，在声明变量`a`之前就尝试打印它，这会导致一个`ReferenceError`，因为在那个点上变量`a`还在TDZ中。只有在`let a = 3;`这行代码执行后，变量`a`才会离开TDZ，从那时起它就可以被安全地访问了。

TDZ的设计主要是为了捕获编程中的错误，如在变量声明之前就使用它们的情况，这有助于开发者发现潜在的问题，并使代码更加可靠。

JavaScript 中什么是暂时性死区？

在JavaScript中，`==` 和 `===` 都用于比较运算符，但它们在比较值时使用不同的方式。

`===` 称为严格等于或恒等运算符，它比较两个值的类型和值是否完全相同。如果比较的两边数据类型不同，则直接返回false，不会进行类型转换。只有当数据类型及值都相同时，`===` 才返回true。

例子：
```javascript
3 === 3   // true，因为类型和值都相同
3 === '3' // false，因为一个是数字类型，另一个是字符串类型
```

`==` 称为宽松等于或等于运算符，它在比较时会进行类型转换，如果两个值类型不同，它会尝试将它们转换为相同类型，然后再进行值的比较。

例子：
```javascript
3 == 3   // true，类型和值都相同
3 == '3' // true，尽管类型不同（一个是数字，一个是字符串），
         // 但'3'会在比较之前转换为数字3，然后进行比较
```

通常在编码中建议使用`===`来避免由于类型转换导致的意外结果，这也是代码质量工具和最佳实践的推荐。然而，有些情况下，如果你确切知道类型转换的机制，并且想利用这个特性来简化代码，可以使用`==`。比如：

```javascript
// 这里我们知道x的值可能是数值0或者"0"，且两者我们视为等同的情况
function checkZero(x) {
  return x == 0;
}

checkZero(0);   // true
checkZero("0"); // true，因为"0"会被转换为数字0然后比较
```

在上述代码中，使用`==`可以接受字符串'0'和数字0，并认为他们是等价的。如果使用`===`，就需要写更多的代码来处理类型检查和转换。不过，除非有非常清晰的理由，一般还是推荐使用`===`，因为它能让代码的行为更加可预测和清晰。

== 和 === 的区别是什么？什么情况下用 == 相等？

JavaScript的异步编程解决方案从早期的回调函数（Callbacks）开始发展，随后引入了Promises，再到现在的Async/Await。

以下是每种解决方案的发展历程以及它们的优缺点： 

#### 回调函数（Callbacks）

**发展历程：**
最初，JavaScript中的异步编程依靠的是回调函数。这是一种将函数作为参数传递给另一个函数，并在后者完成异步操作后调用的技术。

**优点：**

- 简单直观：对于简单的异步操作，回调提供了一种直接的解决方案。
- 广泛支持：所有的JavaScript环境都支持回调。

**缺点：**

- 回调地狱（Callback Hell）：在复杂的应用中，回调可能嵌套得非常深，导致代码难以读懂和维护。
- 难以处理错误：错误处理需要在每个回调中单独处理，不能很好地进行错误传递。

**例子：**

```javascript
fs.readFile('example.txt', function(err, data) {
  if (err) {
    console.error('Error reading file');
    return;
  }
  console.log(`File content: ${data}`);
});
```

#### Promises

**发展历程：**
为了解决回调地狱的问题，Promises被提出并在ES6中成为标准。Promise是一个代表着异步操作最终完成或失败的对象。

**优点：**

- 链式调用：能够通过 `.then()`和 `.catch()`进行链式调用，使得异步流程更加直观。
- 错误处理：通过 `.catch()`方法可以集中处理错误。
- 更好的控制：提供了更丰富的控制异步操作的方法，如 `Promise.all()`。

**缺点：**

- 代码可能还是有些冗长，特别是在多个异步操作依赖同一条件时。
- 仍需要一定的学习曲线，特别是对于初学者。

**例子：**

```javascript
new Promise((resolve, reject) => {
  fs.readFile('example.txt', (err, data) => {
    if (err) {
      reject('Error reading file');
    } else {
      resolve(data);
    }
  });
})
.then(data => console.log(`File content: ${data}`))
.catch(error => console.error(error));
```

#### Async/Await

**发展历程：**
Async/Await是建立在Promises之上的，被引入在ES2017中。它们让异步代码看起来和同步代码更为相似。

**优点：**

- 代码可读性强：看起来就像是阻塞式的同步代码，虽然它是非阻塞的。
- 易于理解和维护：使用 `try/catch`可以用同步代码的方式处理错误。
- 简化了错误处理和条件语句。

**缺点：**

- 需要理解Promises，并且Babel转译对老JavaScript环境的支持可能有限。
- 需要注意不要在非异步函数中使用 `await`，否则会导致编译错误。

**例子：**

```javascript
async function readFileAsync() {
  try {
    const data = await fs.promises.readFile('example.txt');
    console.log(`File content: ${data}`);
  } catch (error) {
    console.error('Error reading file');
  }
}

readFileAsync();
```

每一种异步解决方案都有其用武之地，随着JavaScript的发展，我们可以根据具体场景和个人偏好选择合适的方式来编写异步代码。


JavaScript 异步解决方案的发展历程以及优缺点

事件代理是一种常用于处理事件监听的技术，通过这种技术，我们可以将事件的监听器（Event Listener）绑定到一个父级元素上，而不是直接绑定到实际的目标元素上。这样，当子元素的事件冒泡到父级元素时，就可以在父级元素上处理这些事件。

**优点：**

1. **减少内存消耗：** 由于只需要在父元素上绑定单一的事件监听器，而不需要为每个子元素单独绑定，减少了内存使用，提高了性能。
2. **动态内容的事件处理：** 对于动态添加到页面的元素，比如通过Ajax加载的内容，无需重新绑定事件监听器，事件代理可以自动处理这些新元素的事件。
3. **简化事件管理：** 当有大量元素需要相同的事件处理时，事件代理可以大大简化事件管理工作。

**缺点：**

1. **事件冒泡依赖：** 事件代理依赖于事件冒泡机制，如果事件不冒泡或者被中间某个节点的事件处理函数停止冒泡，则事件代理将不会生效。
2. **可能的性能影响：** 如果父元素中有非常多的子元素或者事件处理逻辑较为复杂时，每次事件冒泡到父元素都需要进行事件对象的属性检查，可能会对性能造成影响。
3. **限制了某些事件的使用：** 并不是所有的事件都能冒泡，例如`focus`、`blur`和`load`等，因此并不能利用事件代理处理这些事件。

**主要解决问题：**

事件代理主要解决了以下几个问题：

1. **内存和性能问题：** 如上所述，减少了绑定在多个子元素上的事件监听器数量，从而节省了内存消耗，提高了性能。
2. **动态元素事件监听问题：** 对于后来动态添加到页面的元素，不需要单独为它们添加事件监听器，因为它们会自然地冒泡到已经设置了事件代理的父元素。
3. **事件管理复杂性问题：** 简化了事件处理逻辑，特别是当你有大量需要相似事件处理的元素时，只需要维护一个公共的事件监听器即可。

**例子：**

假设我们有一个任务列表，每个任务项都有一个"删除"按钮，可以删除对应的任务项。如果没有使用事件代理，我们可能需要为每个"删除"按钮绑定一个点击事件监听器。但是，如果使用事件代理，我们可以在任务列表的容器元素上绑定一个点击事件监听器，然后检查点击事件的目标是否是"删除"按钮，如果是，则执行删除操作。这样就无论任务列表如何变化，我们都只需要一个事件监听器。

```javascript
// HTML 结构
<ul id="taskList">
  <li>任务 1 <button class="delete-btn">删除</button></li>
  <li>任务 2 <button class="delete-btn">删除</button></li>
  // 更多任务项...
</ul>

// JavaScript 代码
document.getElementById('taskList').addEventListener('click', function(event) {
  if (event.target.className === 'delete-btn') {
    event.target.parentNode.remove();
  }
});
```

这个例子展示了如何实现一个简单的事件代理来处理动态内容。

介绍事件代理以及优缺点，主要解决什么问题

`addEventListener` 方法是 JavaScript 中常用来为元素添加事件监听器的方法。这个方法可以让开发者指定当某个事件在目标元素上触发时，应该调用的回调函数。

`addEventListener` 方法通常接收三个参数：

1. `type`: 字符串，表示监听事件类型的名称，比如 `click`, `mouseover` 等。
2. `listener`: 函数，事件触发时浏览器调用的函数。
3. `options` or `useCapture`: （可选）布尔值或者是一个对象。这是第三个参数，它指定了事件处理的更多选项。

当第三个参数是布尔值时，它指的是 `useCapture`。如果 `useCapture` 设置为 `true`，则表示在捕获阶段触发事件处理函数；如果设置为 `false` 或者省略，则表示在冒泡阶段触发事件处理函数。在 DOM 事件处理中，事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。默认情况下，事件监听器只在冒泡阶段被调用。

如果第三个参数是一个对象，它可以包含多个属性，如下所示：

- `capture`: 布尔值，和直接提供 `useCapture` 作为布尔值的效果一样。
- `once`: 布尔值，如果为 `true`，监听器会在添加之后第一次触发时自动移除。
- `passive`: 布尔值，如果为 `true`，表明监听器永远不会调用 `preventDefault()`。如果监听器确实调用了这个函数，客户端将会忽略它并且可能给出一个警告。

例如，如果我们想要在用户第一次点击按钮时做出反应，并且希望在捕获阶段而不是冒泡阶段处理事件，我们可以这样写代码：

```javascript
const button = document.querySelector('#myButton');
button.addEventListener('click', (event) => {
    // 处理点击事件
    console.log('Button clicked!');
}, { capture: true, once: true });
```

在这个例子中，`{ capture: true, once: true }` 作为第三个参数传递，确保了监听器在捕获阶段执行，并且只执行一次。

面试题手册