2025面试大全（20）1. 你知道哪些应用层协议？应用层协议是计算机网络协议栈中的最高层，它为应用程序提供了网络服务

1. 你知道哪些应用层协议？

应用层协议是计算机网络协议栈中的最高层，它为应用程序提供了网络服务。以下是一些常见的应用层协议：

HTTP（超文本传输协议）：用于从网络服务器传输超文本到本地浏览器。它是万维网的基础。
HTTPS（安全的超文本传输协议）：是HTTP的安全版本，使用SSL/TLS协议加密数据。
FTP（文件传输协议）：用于在网络上进行文件传输。
SMTP（简单邮件传输协议）：用于发送电子邮件。
POP3（邮局协议版本3）：用于接收电子邮件。
IMAP（互联网邮件访问协议）：也是一种用于接收电子邮件的协议，比POP3更高级，支持邮件在服务器上的管理。
DNS（域名系统）：用于将域名解析为IP地址。
Telnet：用于远程登录到网络上的其他计算机。
SSH（安全外壳协议）：用于安全地远程登录到其他计算机，是Telnet的安全替代品。
SNMP（简单网络管理协议）：用于网络管理。
RTSP（实时流传输协议）：用于控制音视频流的传输。
SIP（会话初始化协议）：用于多媒体通信 sessions 的建立、修改和终止。
XMPP（可扩展消息处理现场协议）：用于即时消息和联机状态通知。
SOAP（简单对象访问协议）：用于Web服务的通信。
REST（代表性状态传输）：一种设计风格，常用于Web服务的API设计。
WebSocket：用于在单个TCP连接上进行全双工通信。
NTP（网络时间协议）：用于计算机时间同步。
LDAP（轻量级目录访问协议）：用于访问和维护分布式目录信息。这些协议在不同的应用场景中发挥着重要作用，它们使得网络通信更加高效、安全、多样化。随着技术的发展，还会不断有新的应用层协议被设计和使用。

2. 为何CSS不支持父选择器？

CSS（层叠样式表）不支持父选择器（即选择一个元素的父元素）的主要原因是由于CSS的设计原则和选择器的解析方式。以下是几个关键的原因：

单向选择原则：CSS选择器的设计是基于从上到下、从外到内的单向选择原则。这意味着样式是通过选择器应用于特定的元素，而不是从元素向上选择其父元素。这种设计使得样式表的解析和渲染更加高效。
性能考虑：如果CSS支持父选择器，那么浏览器在解析CSS时需要对DOM树进行向上的遍历，这会增加计算的复杂度和性能开销。当前的选择器模型允许浏览器在解析时进行快速的向下遍历。
简化模型：CSS的简化模型使得开发者可以更容易地理解和应用样式。引入父选择器会增加这种复杂性，可能导致样式表更难以管理和维护。
替代方案：虽然CSS本身不支持父选择器，但开发者可以使用其他方法来实现类似的功能，例如使用JavaScript来动态添加类或样式，或者利用CSS的一些特性（如伪类选择器）来间接实现。
规范和兼容性：CSS的规范由W3C制定，为了保证广泛的兼容性和一致性，引入新的选择器类型需要经过严格的审查和测试。父选择器的引入可能会打破现有的兼容性，影响广泛的网页和应用程序。尽管CSS不支持父选择器，但开发者可以通过合理的设计和利用现有的CSS特性来达到所需的样式效果。随着CSS的不断发展，未来可能会有新的特性和方法来解决这类问题。

3. 写一个返回数据类型的函数，要求自定义的类实例化的对象返回定义的类名

在JavaScript中，你可以通过访问对象的 constructor 属性来实现类似的功能。以下是一个示例函数，它返回任何给定对象的类型名称，对于自定义类的实例，它返回类的名称：

function dataType(obj) {
    if (obj && obj.constructor && obj.constructor.name) {
        return obj.constructor.name;
    }
    return typeof obj;
}
// 示例用法
class CustomClass {
}
const customObj = new CustomClass();
console.log(dataType(customObj)); // 输出: CustomClass
console.log(dataType(123)); // 输出: number
console.log(dataType("Hello")); // 输出: string

这个 dataType 函数首先检查对象是否有 constructor 属性和 constructor.name，这是自定义类实例通常具有的。如果这些属性存在，它返回构造函数的名称，即类的名称。如果对象不是自定义类的实例，它将回退到使用 typeof 操作符，这是检测基本数据类型（如数字、字符串等）的常用方法。请注意，这种方法在大多数现代JavaScript环境中有效，但在某些旧版浏览器或环境中，constructor.name 可能不可用。在这种情况下，你可能需要使用其他方法来获取类名。

4. 说下Vite的原理

Vite（发音为 /ˈviːt/），是一种基于浏览器的前端构建工具，旨在提高现代Web开发的效率和体验。它基于Rollup构建工具，并利用ES Module（ECMAScript 模块）语法，使得开发过程中的模块热替换（Hot Module Replacement）更加快速。以下是Vite的一些核心原理：

依赖预构建：Vite在启动时预先构建应用的依赖关系图，这样在模块热替换时可以快速定位到确切的模块，而无需重新构建整个应用。
模块热替换：Vite支持在开发过程中，只重新构建改变了的模块，而不是整个应用。这意味着当编辑一个模块时，只有那个模块会重新构建，从而大大减少了构建时间。
ES Module支持：Vite使用ES Module语法，使得模块的导入和导出更加规范和易于管理。
插件系统：Vite有一个强大的插件系统，可以通过插件API轻松集成各种功能，如代码压缩、代码分割等。
开发服务器：Vite内置了一个开发服务器，可以实时预览应用，提供实时的反馈循环。
生产优化：在生产环境中，Vite可以优化输出，以提供更快、更小的生产构建。 Vite的这些原理结合在一起，提供了一个非常快速和高效的前端开发体验，特别适合现代Web应用的开发。

5. e.target 和 e.currentTarget 有什么区别？

在JavaScript中，e.target 和 e.currentTarget 是事件处理函数中的两个常用属性，它们都指向事件处理过程中的某个元素，但含义和用途有所不同：

e.target

含义：e.target 指向触发事件的原始元素，即事件发生的实际目标。
用途：用于确定事件最初是由哪个元素触发的，特别是在事件冒泡或捕获过程中，可以找到事件的实际来源。
例子：如果在一个父元素上设置了点击事件监听，而实际点击的是其子元素，那么 e.target 将指向这个子元素。

e.currentTarget

含义：e.currentTarget 指向当前处理事件的元素，即绑定事件处理函数的元素。
用途：用于确定当前执行的事件处理函数是绑定在哪个元素上的，这在事件冒泡或捕获过程中尤其有用，因为事件可能会在多个元素上触发相同的事件处理函数。
例子：在上述例子中，如果父元素和子元素都绑定了点击事件监听，那么在父元素的事件处理函数中，e.currentTarget 将指向父元素本身，而在子元素的事件处理函数中，e.currentTarget 将指向子元素本身。

区别总结

指向的元素不同：e.target 指向事件的实际触发者，而 e.currentTarget 指向事件处理函数的绑定者。
用途不同：e.target 用于查找事件来源，e.currentTarget 用于确定事件处理函数的绑定位置。
在事件冒泡或捕获中的表现不同：在事件冒泡或捕获过程中，e.target 始终指向事件的实际触发者，而 e.currentTarget 会随着事件的传递而改变，始终指向当前处理事件的元素。理解这两个属性的区别对于正确处理JavaScript中的事件非常重要，尤其是在处理复杂的事件传递和事件委托时。

6. TCP是怎么判断丢包的？

TCP（传输控制协议）是一种可靠的传输协议，它通过多种机制来确保数据包的可靠传输。当TCP发送数据时，它会使用以下方法来判断是否发生了丢包：

序列号和确认应答（ACK）：
- TCP为每个发送的数据段分配一个序列号。
- 接收方在收到数据段后，会发送一个确认应答（ACK），其中包含下一个期望接收的序列号。
- 如果发送方没有收到确认应答，或者收到的确认应答中的序列号不是预期的，那么发送方会认为可能发生了丢包。
超时重传（RTO）：
- TCP维护一个超时重传定时器（RTO，Retransmission Timeout），当发送一个数据段时，定时器开始计时。
- 如果在定时器到期之前没有收到对应的确认应答，TCP会认为该数据段可能已经丢失，并会重新发送该数据段。
- RTO的值是根据网络的往返时间（RTT）动态计算的，并且会根据网络的实际情况进行调整。
快速重传（Fast Retransmit）：
- 当接收方发现数据段丢失时，它会连续发送多个重复的确认应答（duplicate ACKs），而不是等待超时。
- 发送方在收到一定数量的重复确认应答后（通常 là是3个），会立即重传丢失的数据段，而不必等待超时定时器到期。
选择确认（SACK）：
- SACK（Selective Acknowledgment）是一种扩展的TCP确认机制，允许接收方明确指出哪些数据段已经收到，哪些数据段丢失。
- 发送方可以根据SACK信息只重传丢失的数据段，而不是重传整个窗口的数据，从而提高效率。
拥塞窗口和慢启动：
- TCP通过拥塞窗口（cwnd）来控制发送速率，以避免网络拥塞。
- 当检测到丢包时，TCP会认为网络可能出现了拥塞，会减少拥塞窗口的大小，并可能触发慢启动机制，逐渐增加发送速率。通过这些机制，TCP能够有效地检测和处理丢包情况，确保数据的可靠传输。需要注意的是，这些机制并不是完全独立的，它们通常会结合使用，以提供更健壮的丢包检测和恢复策略。

7. 说说你对计算机网络模型的理解

计算机网络模型是一种抽象的概念，用于描述计算机网络的结构、功能和工作原理。它将复杂的网络通信过程分解为多个层次，每个层次负责特定的任务，并为上层提供服务。以下是我对计算机网络模型的理解：

1. 分层结构

计算机网络模型通常采用分层结构，其中最著名的是OSI（开放系统互联）七层模型和TCP/IP四层模型。分层有助于简化网络设计，使得不同层次可以独立开发、升级和替换。 OSI七层模型：

物理层：负责传输比特流，涉及电缆、光纤、无线电频率等。
数据链路层：在相邻节点之间提供可靠的数据传输，涉及MAC地址、帧等。
网络层：负责数据包从源到目的地的路由和转发，涉及IP地址、路由协议等。
传输层：提供端到端的可靠传输服务，涉及TCP、UDP等协议。
会话层：管理会话的建立、维护和终止。
表示层：确保数据在网络中传输前后的表示格式一致，涉及加密、压缩、数据转换等。
应用层：为应用程序提供网络服务，如HTTP、FTP、DNS等。 TCP/IP四层模型：
网络接口层：相当于OSI的物理层和数据链路层。
网络层：负责数据包的传输和路由，主要协议是IP。
传输层：提供端到端的传输服务，主要协议是TCP和UDP。
应用层：包含所有高级协议，如HTTP、FTP、DNS等。

2. 各层功能

每个层次都有特定的功能和服务：

下层为上层提供服务：例如，数据链路层为网络层提供帧的传输服务。
层次间的接口：定义了层次间如何交互，上层通过接口使用下层的服务。
数据封装：数据在发送时从上层向下层传递，每层添加自己的头部信息，形成数据包；在接收时，数据从下层向上层传递，每层解析并去除对应的头部信息。

3. 协议和标准

每个层次都有相应的协议和标准来规范数据的传输和交互：

协议：定义了数据格式、传输方式、错误处理等规则。
标准：确保不同厂商的设备和软件能够互操作。

4. 网络通信过程

网络通信过程可以概括为：

发送方：数据从应用层开始，逐层向下传递，每层添加相应的头部信息，最后通过物理层传输到网络。
接收方：数据从物理层开始，逐层向上传递，每层解析并去除相应的头部信息，最后到达应用层。

5. 模型的优势

模块化：便于理解和设计。
灵活性：不同层次可以独立更新和替换。
互操作性：通过标准协议确保不同系统的兼容性。

6. 模型的局限性

复杂性：分层可能导致额外的开销和复杂性。
效率问题：某些情况下，严格的分层可能不是最高效的。总的来说，计算机网络模型是一种强大的工具，用于理解、设计和实现复杂的网络系统。它提供了结构化的方法来处理网络通信的各个方面，并为网络技术的发展奠定了基础。

8. 脱离文档流有哪些方法？

在网页布局中，脱离文档流（或称为正常文档流）意味着元素不再按照其在HTML中的位置排列，而是可以根据特定的规则进行定位。以下是几种常见的方法使元素脱离文档流：

1. 绝对定位（Absolute Positioning）

使用CSS的position: absolute;属性可以将元素从正常文档流中移除，并相对于其最近的已定位祖先元素（即设置了position: relative;、position: absolute;或position: fixed;的祖先元素）进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}

2. 固定定位（Fixed Positioning）

使用CSS的position: fixed;属性也可以使元素脱离文档流，但与绝对定位不同，固定定位的元素相对于浏览器窗口进行定位，即使页面滚动，元素的位置也保持不变。

.element {
  position: fixed;
  top: 10px;
  right: 20px;
}

3. 浮动定位（Float Positioning）

使用CSS的float属性可以使元素脱离正常文档流，并向左或向右浮动，直到其外边缘碰到包含框或另一个浮动元素的外边缘。浮动元素不再影响后续元素的布局，但会影响其父元素的布局（如高度计算）。

.element {
  float: left; /* 或 right */
}

需要注意的是，虽然浮动元素脱离了正常文档流，但它们仍然属于文档流的一部分，因为它们会影响父元素的高度和布局。

4. 使用CSS变形（Transforms）

虽然CSS变形（如旋转、缩放、平移等）本身不会使元素脱离文档流，但结合使用position: absolute;或position: fixed;可以创建出类似脱离文档流的效果。例如，可以使用transform: translate();来移动元素，而不影响其周围元素的布局。

.element {
  position: absolute;
  transform: translateX(50px) translateY(100px);
}

5. 使用CSS网格布局（Grid）或弹性布局（Flexbox）

这些现代布局方法提供了更多的控制，可以创建复杂的布局而不需要脱离文档流。然而，在某些特定情况下，例如需要覆盖其他元素或实现固定位置时，可能仍然需要结合使用绝对定位或固定定位。

注意事项

脱离文档流后，元素可能不再占据其在正常文档流中的空间，这可能导致其他元素重新排列或填充空出的空间。
脱离文档流的元素可能会覆盖其他元素，因此需要小心管理堆叠顺序（使用z-index属性）。
过度使用脱离文档流的方法可能导致布局复杂化和可维护性降低。在实际开发中，应根据具体需求和布局目标选择合适的方法来控制元素的定位和布局。

9. Map 和 Set 的用法以及区别

Map 和 Set 是 JavaScript 的两种数据结构，它们在 ES6 中被引入，用于存储和操作数据。下面分别介绍它们的用法和区别：

Map 的用法

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值)都可以作为一个键或一个值。

// 创建一个 Map
const myMap = new Map();
// 设置键值对
myMap.set('a', 1);
myMap.set('b', 2);
myMap.set('c', 3);
// 获取值
console.log(myMap.get('a')); // 输出 1
// 检查 Map 中是否包含某个键
console.log(myMap.has('b')); // 输出 true
// 获取 Map 的长度
console.log(myMap.size); // 输出 3
// 遍历 Map
for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}
// 删除键值对
myMap.delete('c');
// 清空 Map
myMap.clear();

Set 的用法

Set 对象允许你存储唯一的值，无论是原始值还是对象引用。

// 创建一个 Set
const mySet = new Set();
// 添加值
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(3); // 重复的值不会被添加
// 检查 Set 中是否包含某个值
console.log(mySet.has(2)); // 输出 true
// 获取 Set 的长度
console.log(mySet.size); // 输出 3
// 遍历 Set
for (const value of mySet) {
  console.log(value);
}
// 删除值
mySet.delete(2);
// 清空 Set
mySet.clear();

Map 和 Set 的区别

存储方式：
- Map 存储键值对，而 Set 只存储唯一的值。
键的类型：
- Map 的键可以是任何类型，包括对象、函数和任何原始类型。
- Set 的元素只能是唯一的值，没有键的概念。
迭代：
- Map 可以通过键值对进行迭代，而 Set 只能通过值进行迭代。
用途：
- Map 适用于需要根据键快速检索值的情况。
- Set 适用于需要存储唯一值并快速检查某个值是否存在的情况。
性能：
- Map 在频繁添加和删除键值对时通常具有更好的性能。
- Set 在处理大量唯一值时效率较高，尤其是在检查值是否存在时。
顺序：
- Map 和 Set 都会保留插入顺序，这意味着它们在迭代时都会按照插入的顺序返回元素。
初始化：
- Map 可以通过一个数组迭代器初始化，其中每个数组项是一个键值对。
- Set 可以通过一个可迭代对象初始化，其中每个元素都会被添加到集合中。

// Map 初始化
const mapInit = new Map([['a', 1], ['b', 2]]);
// Set 初始化
const setInit = new Set([1, 2, 3]);

在选择使用 Map 还是 Set 时，应根据具体的需求和数据操作方式来决定。如果需要存储键值对并频繁通过键访问值，应选择 Map。如果只需要存储唯一值并检查值的存在性，应选择 Set。

10. const声明了数组，还能push元素吗，为什么？

是的，使用 const 声明的数组可以添加元素，例如使用 push() 方法。这是因为 const 保证的是变量指向的内存地址所保存的值不会改变，而不是保证变量指向的内存地址不会改变。对于基本数据类型（如数字、字符串等），值是直接保存在变量指向的内存地址中的，因此使用 const 声明后不能修改这些值。但对于数组（以及对象）这样的复杂数据类型，变量指向的内存地址中保存的是对数组的引用，而不是数组本身的内容。因此，使用 const 声明数组后，不能改变这个引用指向另一个数组，但可以修改这个引用所指向的数组的内容，例如添加、删除或修改数组中的元素。下面是一个示例：

const arr = [1, 2, 3];
arr.push(4); // 可以正常工作，arr 现在是 [1, 2, 3, 4]
// 但以下操作是不允许的：
// arr = [4, 5, 6]; // 报错，因为尝试改变 arr 的引用

在这个示例中，arr.push(4) 修改了 arr 所指向的数组的内容，但没有改变 arr 本身所指向的内存地址，因此是允许的。而尝试将 arr 重新赋值为另一个数组则会报错，因为这会改变 arr 的引用。总之，const 声明的数组可以修改其内容，但不能改变其引用。这是 const 在处理复杂数据类型时的一个重要特性。

11. 如何区分数组和对象？

在JavaScript中，数组和对象都是复杂数据类型，它们都可以存储多个值，但它们之间存在一些关键区别。以下是一些区分数组和对象的方法：

构造函数检查：

数组是由 Array 构造函数创建的，而对象通常是由 Object 构造函数或对象字面量创建的。
可以使用 instanceof 操作符来检查一个变量是否是数组或对象。

let arr = [];
let obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Object); // true
console.log(arr instanceof Object); // also true, because Array is a subclass of Object

使用 Array.isArray()：

Array.isArray() 是一个静态方法，可以用来确定一个变量是否是数组。

let arr = [];
let obj = {};
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

通过对象属性：

数组有一个特殊的 length 属性，表示数组中元素的数量。
对象的属性通常是键值对，没有 length 属性（除非手动添加）。

let arr = [1, 2, 3];
let obj = {a: 1, b: 2};
console.log(arr.length); // 3
console.log(obj.length); // undefined, unless 'length' property is explicitly defined

使用 Object.prototype.toString.call()：

这个方法可以返回一个表示对象类型的字符串。

let arr = [];
let obj = {};
console.log(Object.prototype.toString.call(arr)); // "[object Array]"
console.log(Object.prototype.toString.call(obj)); // "[object Object]"

通过键的类型：

数组的键（索引）通常是数字，而对象的键通常是字符串（尽管也可以是符号或其他类型）。

let arr = [1, 2, 3];
let obj = {a: 1, b: 2};
console.log(typeof arr[0]); // "number"
console.log(typeof obj['a']); // "number", but the key is a string

使用 $.isArray()（如果使用jQuery）：
- 如果你的项目中使用了jQuery，可以使用 $.isArray() 方法来检查一个变量是否是数组。
```
let arr = [];
let obj = {};
console.log($.isArray(arr)); // true
console.log($.isArray(obj)); // false
```

在实际开发中，Array.isArray() 是最直接和常用的方法来区分数组和其他对象。其他方法可以根据具体的需求和场景来选择使用。

12. 删除排序链表中的重复元素

删除排序链表中的重复元素是一个常见的算法问题。由于链表是排序的，所以所有重复的元素都会连续出现。我们可以通过遍历链表，比较当前节点和下一个节点来删除重复元素。以下是一个用JavaScript实现的示例：首先，定义链表节点的构造函数：

function ListNode(val, next) {
  this.val = val === undefined ? 0 : val;
  this.next = next === undefined ? null : next;
}

然后，实现删除排序链表中的重复元素的功能：

function deleteDuplicates(head) {
  let current = head;
  while (current && current.next) {
    if (current.val === current.next.val) {
      // 如果当前节点和下一个节点的值相同，则跳过下一个节点
      current.next = current.next.next;
    } else {
      // 否则，移动到下一个节点
      current = current.next;
    }
  }
  return head;
}

这个函数从链表的头节点开始遍历，如果发现当前节点和下一个节点的值相同，就将当前节点的 next 指针指向下一个节点的下一个节点，从而删除重复的节点。如果值不同，就继续移动到下一个节点。

示例

假设我们有以下链表：

1 -> 1 -> 2 -> 3 -> 3

调用 deleteDuplicates(head) 后，链表将变为：

1 -> 2 -> 3

复杂度分析

时间复杂度：O(n)，其中 n 是链表的长度。我们只需要遍历一次链表。
空间复杂度：O(1)，我们只需要常数空间来存储几个变量。这个算法是非常高效的，因为它只需要一次遍历就能删除所有的重复元素。

13. vue 中 $route 和$ router 有什么区别？

在Vue.js中，$route和$router都是与Vue Router相关的对象，但它们的功能和用途是不同的：

$router：
- $router是Vue Router的实例，它是一个全局对象，用于控制路由的行为。
- 你可以使用$router来编程式地导航，例如使用$router.push()、$router.replace()、$router.go()等方法。
- $router还包含了一些其他方法，如addRoutes()、addRoute()等，用于动态添加路由。
- 它还提供了钩子函数，如beforeEach、afterEach等，用于在路由导航过程中执行一些操作。
$route：
- $route是对当前激活的路由信息的响应式引用，它包含了当前路由的路径、参数、查询、哈希等详细信息。
- $route对象是不可变的，每当路由发生变化时，Vue Router都会创建一个新的$route对象。
- 你可以使用$route来访问当前路由的参数，例如$route.params、$route.query等。
- $route还提供了matched数组，包含了当前路由匹配的所有路由记录。简单来说，$router是用于控制路由的全局对象，而$route是用于获取当前路由信息的对象。示例：

// 使用$router进行编程式导航
this.$router.push('/home');
// 访问当前路由的参数
const userId = this.$route.params.userId;

在实际开发中，你通常会在组件内部使用$route来获取当前路由的信息，而使用$router来执行路由跳转或其他路由相关的操作。

14. async、await 实现原理

async和await是ES2017引入的异步编程语法糖，它们基于Promise和生成器（Generator）实现，旨在简化异步代码的书写和理解。下面是它们的实现原理：

async函数

async函数返回一个Promise对象。当函数返回一个值时，这个值会被Promise的resolve函数解析；当函数抛出错误时，这个错误会被Promise的reject函数拒绝。

async function asyncFunc() {
  return 'value';
}
// 等同于
function asyncFunc() {
  return Promise.resolve('value');
}

await表达式

await表达式用于等待一个Promise对象。它只能在async函数内部使用。await会暂停async函数的执行，直到Promise解决（resolved）或拒绝（rejected）。

如果Promise被解决，await表达式的值就是Promise解决时的值。
如果Promise被拒绝，await表达式的值就是Promise拒绝时的错误对象，并且会抛出这个错误。

async function asyncFunc() {
  let result = await promise;
  // 等同于
  // promise.then(value => {
  //   result = value;
  // }).catch(error => {
  //   throw error;
  // });
}

实现原理

async和await的实现原理基于Promise和生成器（Generator），但它们在内部进行了封装，使得语法更加简洁。以下是它们的基本实现思路：

转换器（Transformer）：当编译器遇到async函数时，它会使用一个转换器将async函数转换成一个返回Promise的函数。
迭代器（Iterator）：在转换后的函数中，await表达式会被转换成yield表达式，这样函数就变成了一个生成器函数。生成器函数可以产生一系列的值，这些值通过迭代器进行管理。
执行器（Executor）：执行器负责执行生成器函数，并在遇到yield表达式时暂停执行，等待Promise解决。一旦Promise解决，执行器会恢复生成器函数的执行，并将Promise的解决值作为yield表达式的结果。
错误处理：如果Promise被拒绝，执行器会捕获错误并将其抛出，这样就可以在async函数中使用try...catch来处理异步错误。

示例

以下是一个简单的async/await示例及其可能的内部实现：

// async/await语法
async function asyncFunc() {
  try {
    let result = await promise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}
// 可能的内部实现
function asyncFunc() {
  return new Promise((resolve, reject) => {
    const generator = function* () {
      try {
        let result = yield promise;
        console.log(result);
      } catch (error) {
        console.error(error);
      }
    }();
    function handleResult(result) {
      if (result.done) {
        return resolve(result.value);
      }
      return result.value.then(
        value => handleResult(generator.next(value)),
        error => handleResult(generator.throw(error))
      );
    }
    try {
      handleResult(generator.next());
    } catch (error) {
      reject(error);
    }
  });
}

在这个示例中，asyncFunc函数被转换成了一个返回Promise的函数，内部使用生成器函数和执行器来处理await表达式和错误。总的来说，async和await通过封装Promise和生成器的复杂性，提供了一种更接近同步编程的异步编程方式，使得异步代码更易于书写和理解。

15. 说说DOS及DDOS的原理及防御方式

DOS（Denial of Service，拒绝服务攻击）原理： DOS攻击的基本原理是利用目标系统的漏洞，通过发送大量无效请求，使得目标系统资源被耗尽（如带宽、内存、处理器等），从而导致合法用户无法获得服务。常见的DOS攻击方式包括：

洪水攻击：发送大量数据包，耗尽目标系统的带宽。
** SYN洪水攻击**：利用TCP连接的三次握手过程，发送大量SYN请求但不完成握手，耗尽目标系统的连接表资源。
UDP洪水攻击：发送大量UDP数据包，导致目标系统处理不过来。
LAND攻击：发送源地址和目标地址都为受攻击主机地址的数据包，造成受攻击主机自身循环响应。 DDOS（Distributed Denial of Service，分布式拒绝服务攻击）原理： DDOS攻击是DOS攻击的一种特殊形式，攻击者控制大量的傀儡机（也称为“肉鸡”），同时向目标系统发起攻击。由于攻击源分布广泛，难以定位和防御，因此危害更大。 DDOS攻击的步骤通常包括：
扫描和控制傀儡机：攻击者利用漏洞扫描工具，找到可控制的傀儡机，并植入恶意软件。
命令傀儡机发起攻击：攻击者通过控制服务器，向所有傀儡机发送攻击指令。
大规模攻击目标系统：傀儡机同时向目标系统发送大量无效请求，导致目标系统崩溃。 防御方式：
增加带宽：增加带宽可以提高系统承受攻击的能力，但并非根本解决方案。
过滤异常流量：通过防火墙、入侵检测系统等设备，识别并过滤异常流量。
限制连接数：限制单个IP地址的连接数，防止SYN洪水攻击等。
使用抗DDOS设备：部署专业的抗DDOS设备，如流量清洗设备，可以识别并清洗恶意流量。
云防御：利用云服务提供商的分布式防御能力，将攻击流量分散到多个节点进行处理。
安全策略和更新：定期更新系统补丁，关闭不必要的服务和端口，减少攻击面。
备份和恢复：建立数据备份和恢复机制，确保在遭受攻击后能够快速恢复服务。
法律和合作：与执法机构合作，追踪和打击攻击者；与其他组织共享安全信息，共同防御。总之，DOS和DDOS攻击的防御需要综合运用多种技术和管理手段，才能有效保障系统的安全性和稳定性。

16. TCP和HTTP请求之间有什么关系？

TCP（传输控制协议）和HTTP（超文本传输协议）之间的关系可以从以下几个方面来理解：

协议层次：
- TCP是一种传输层协议，负责在网络中的两个主机之间建立一个可靠的连接，确保数据包正确、完整地从源传输到目的地。
- HTTP是一种应用层协议，定义了客户端与服务器之间请求和响应的格式和规则，主要用于从网络服务器传输超文本到本地浏览器。
依赖关系：
- HTTP依赖于TCP来传输数据。当浏览器发起一个HTTP请求时，它首先需要通过TCP与服务器建立一个连接（通常使用TCP端口80或443）。
连接建立：
- TCP使用三次握手来建立连接。一旦连接建立，HTTP请求就可以通过这个TCP连接发送到服务器。
数据传输：
- HTTP请求和响应是通过TCP连接传输的。TCP将HTTP数据分割成小的数据段，并为每个数据段添加序号，确保数据的顺序和完整性。
持久连接：
- HTTP/1.1引入了持久连接（Keep-Alive），允许通过同一个TCP连接发送和接收多个HTTP请求/响应，而不是每次请求都建立一个新的TCP连接。
- HTTP/2进一步优化了连接的使用，允许在一个TCP连接上同时发送多个请求和响应，提高了传输效率。
安全性：
- HTTPS（HTTP Secure）是HTTP的安全版本，它使用SSL/TLS协议对TCP连接进行加密，以保护数据传输的安全。
关闭连接：
- 当HTTP请求/响应完成后，TCP连接可以关闭，也可以根据HTTP协议的设置（如Connection头字段）保持打开状态，以供后续请求使用。总结来说，TCP为HTTP提供了可靠的数据传输服务，HTTP则定义了如何通过TCP连接请求和传输网页等资源。两者协同工作，实现了网络上的数据交换和通信。

17. 说说对 ES6 中rest参数的理解

**ES6中的rest参数（...）**允许我们将一个不定数量的参数表示为一个数组。这是JavaScript中处理函数参数的一种强大而灵活的方式，特别是在我们不知道函数将会接收多少个参数的情况下。 理解rest参数的几个关键点：

语法：
- 使用三个点（...） followed by a name for the array that will contain the rest of the parameters。
位置：
- rest参数必须是函数的最后一个参数。在rest参数之后不能有其他参数。
收集参数：
- rest参数会收集所有剩余的、未被其他参数捕获的参数，并将它们放入一个数组中。
空数组：
- 如果没有提供多余的参数，rest参数将会是一个空数组。
非数组参数：
- rest参数本身并不是数组，但它是一个包含所有剩余参数的数组-like对象，具有数组的方法和属性。示例：

function sum(...numbers) {
  return numbers.reduce((total, number) => total + number, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 输出：15

在这个例子中，sum函数使用rest参数...numbers来收集所有传递给它的数字，然后使用reduce方法来计算它们的总和。 使用场景：

当我们需要创建一个可以接受任意数量参数的函数时。
当我们想要将一个函数的参数传递给另一个函数，但不关心参数的数量或顺序时。
当我们想要合并多个数组的元素时。注意：
rest参数不能用于对象字面量中定义方法时。
在箭头函数中，rest参数可以正常使用。总的来说，rest参数为JavaScript函数提供了更大的灵活性和可读性，使得处理不定数量的参数变得更加简单和直观。

18. 实现lodash中的get方法

_.get 方法是 Lodash 库中的一个非常有用的函数，它用于安全地访问嵌套对象属性，即使属性路径中的一些属性不存在也不会抛出错误。如果路径不存在，它可以返回一个默认值。下面是一个简单的实现，模拟了 Lodash 的 _.get 方法的基本功能：

function get(obj, path, defaultValue = undefined) {
  // 将路径转换为数组
  const keys = Array.isArray(path) ? path : path.split('.').filter(Boolean);
  // 逐层遍历对象
  return keys.reduce((acc, key) => {
    return acc && acc[key] !== undefined ? acc[key] : defaultValue;
  }, obj);
}
// 示例使用
const object = { 'a': [{ 'b': { 'c': 3 } }] };
console.log(get(object, 'a[0].b.c')); // => 3
console.log(get(object, ['a', '0', 'b', 'c'])); // => 3
console.log(get(object, 'a[0].b.d', 'default')); // => 'default'
console.log(get(object, 'a[0].b.d')); // => undefined

这个实现考虑了以下几点：

路径解析：路径可以是一个数组或者一个点分隔的字符串。如果是字符串，它会先被转换成一个数组。
过滤空字符串：使用 filter(Boolean) 来去除路径中的空字符串，这允许在路径字符串中使用连续的点（如 'a..b'）。
安全访问：使用 reduce 方法遍历路径数组，如果当前访问的属性不存在，则返回默认值。
默认值：如果路径不存在，可以返回一个提供的默认值。请注意，这个实现并没有完全覆盖 Lodash 的 _.get 方法的所有功能，比如它不支持路径中的数组索引以字符串形式出现（如 'a.0.b'），但是它可以处理以数组语法表示的索引（如 'a[0].b'）。如果需要完全兼容 Lodash 的行为，实现将会更加复杂。

19. 第二个子元素的高度是多少

在CSS中，没有直接的选择器来选择“第二个子元素”。但是，你可以使用:nth-child()伪类选择器来选择第二个子元素，并获取其高度。假设你有一个父元素，其类名为.parent，并且你想要获取其第二个子元素的高度，可以使用以下JavaScript代码：

// 获取父元素
const parent = document.querySelector('.parent');
// 获取第二个子元素
const secondChild = parent.querySelector(':nth-child(2)');
// 获取第二个子元素的高度
const secondChildHeight = secondChild.offsetHeight;
console.log(secondChildHeight); // 输出第二个子元素的高度

这里使用了querySelector来选择.parent元素，然后在其上使用querySelector again with :nth-child(2)来选择第二个子元素。offsetHeight属性用于获取元素的高度（包括边框、内边距和滚动条，但不包括外边距）。请确保在DOM完全加载后执行此代码，例如在DOMContentLoaded事件监听器中，或者将脚本放在页面底部，以确保所有元素都已加载。

document.addEventListener('DOMContentLoaded', () => {
  // 上面的代码放在这里
});

如果你想要获取的是特定类型的第二个子元素（例如第二个<div>），你可以这样写：

const secondDiv = parent.querySelector('div:nth-child(2)');
const secondDivHeight = secondDiv.offsetHeight;
console.log(secondDivHeight); // 输出第二个<div>的高度

这样，只有当第二个子元素是<div>时，才会被选中。如果第二个子元素不是<div>，则secondDiv将为null，尝试访问offsetHeight会抛出错误。因此，你可能需要添加一个检查来确保元素存在：

if (secondDiv) {
  console.log(secondDiv.offsetHeight); // 输出第二个<div>的高度
} else {
  console.log('第二个子元素不是<div>或者不存在');
}

请根据你的具体需求和HTML结构调整上述代码。

20. 最大子序和

最大子序和（Maximum Subarray Problem）是一个经典的问题，可以通过Kadane算法高效解决。Kadane算法的基本思想是遍历数组，同时跟踪当前最大子序和以及当前元素之前的最大子序和。以下是使用JavaScript实现Kadane算法的代码：

function maxSubArray(nums) {
  let maxCurrent = nums[0];
  let maxGlobal = nums[0];
  for (let i = 1; i < nums.length; i++) {
    maxCurrent = Math.max(nums[i], maxCurrent + nums[i]);
    maxGlobal = Math.max(maxGlobal, maxCurrent);
  }
  return maxGlobal;
}
// 示例
const nums = [-2, 1, -3, 4, -1, 2, 1, -5, 4];
const maxSum = maxSubArray(nums);
console.log(maxSum); // 输出: 6

在这个例子中，最大子序和是6，对应的子数组是[4, -1, 2, 1]。 Kadane算法的时间复杂度是O(n)，其中n是数组的长度，因为它只需要遍历数组一次。这个算法在处理大型数组时非常高效。

21. 说说 https 的握手过程

HTTPS（HyperText Transfer Protocol Secure）的握手过程是建立一个安全连接的关键步骤，它使用了SSL/TLS（Secure Sockets Layer/Transport Layer Security）协议。以下是HTTPS握手过程的主要步骤：

客户端发起请求：
- 客户端（通常是浏览器）向服务器发送一个HTTPS请求，请求中包含客户端支持的SSL/TLS版本和加密套件（cipher suites）。
服务器响应：
- 服务器收到请求后，会发送其数字证书（包含公钥）给客户端。证书用于证明服务器的身份，并且是由可信的证书颁发机构（CA）签发的。
- 服务器还会发送其选择的SSL/TLS版本和加密套件。
客户端验证服务器证书：
- 客户端验证服务器的证书是否有效，包括检查证书的颁发机构、有效期、域名是否匹配等。
客户端生成预主密钥：
- 客户端生成一个预主密钥（pre-master key），并使用服务器的公钥对其进行加密，然后发送给服务器。
服务器解密预主密钥：
- 服务器使用其私钥解密客户端发送的预主密钥。
生成会话密钥：
- 客户端和服务器分别使用相同的预主密钥、随机数和SSL/TLS版本等信息，通过一定的算法生成会话密钥（session keys）。会话密钥用于后续的数据加密和解密。
客户端发送加密握手确认：
- 客户端使用会话密钥加密一个握手确认消息，发送给服务器。
服务器发送加密握手确认：
- 服务器同样使用会话密钥加密一个握手确认消息，发送给客户端。
完成握手：
- 握手过程完成，客户端和服务器现在可以使用会话密钥进行加密通信。在整个握手过程中，使用了非对称加密（公钥和私钥）来安全地交换预主密钥，然后使用对称加密（会话密钥）来进行高效的数据传输。此外，还可能涉及到SSL/TLS协议中的其他安全特性，如消息认证码（MAC）和加密哈希函数等，以确保数据的完整性和认证。 HTTPS握手过程确保了通信双方的身份认证、数据的机密性、完整性和抗否认性，为网络通信提供了强大的安全保护。

22. HTTP2中，多路复用的原理是什么？

HTTP/2中的多路复用（Multiplexing）是一种机制，它允许在同一TCP连接上同时发送多个请求或响应，而不会互相阻塞。这是HTTP/2相对于HTTP/1.x的一个重大改进。多路复用的原理主要包括以下几个方面：

二进制分帧层：
- HTTP/2引入了一个二进制分帧层，将所有传输的数据分割成小的帧（frame），并且每个帧都有唯一的标识符（stream identifier）。这些帧可以独立地发送和重新组装，使得多个请求和响应可以在同一个连接上交错进行。
流（Streams）：
- 在HTTP/2中，每个请求/响应 pair 都被分配了一个唯一的流标识符。流是可以双向的，即客户端和服务器都可以通过同一个流发送数据。流是独立于其他流的，因此一个流的阻塞不会影响到其他流。
请求/响应复用：
- 由于每个流都是独立的，客户端可以同时发起多个请求，而服务器也可以同时发送多个响应。这些请求和响应在传输过程中可以交错进行，从而实现了多路复用。
头部压缩：
- HTTP/2使用了HPACK算法来压缩请求和响应的头部，减少了数据传输的大小，进一步提高了多路复用的效率。
优先级和流量控制：
- HTTP/2允许客户端设置请求的优先级，服务器可以根据这些优先级来调度资源的发送。同时，HTTP/2还支持流量控制，以避免快速发送方淹没慢速接收方。
避免队头阻塞：
- 在HTTP/1.x中，如果某个请求或响应较大，它会阻塞后续的请求或响应，导致队头阻塞（Head-of-Line Blocking）。HTTP/2的多路复用机制有效地避免了这个问题，因为每个流都是独立的，不会相互阻塞。通过这些机制，HTTP/2的多路复用能够显著提高网络连接的利用率，减少延迟，提升网页加载速度，特别是在高延迟的网络环境下效果更为明显。

23. 岛屿数量

在JavaScript中，计算岛屿数量通常涉及到处理一个二维数组，其中1代表陆地，0代表水。一个常见的算法是使用深度优先搜索（DFS）或广度优先搜索（BFS）来遍历数组，并标记已访问的陆地。以下是一个使用DFS的示例代码，用于计算岛屿的数量：

function numIslands(grid) {
  if (!grid || grid.length === 0) {
    return 0;
  }
  const rows = grid.length;
  const cols = grid[0].length;
  let islandCount = 0;
  function dfs(r, c) {
    // 检查边界条件以及是否为水
    if (r < 0 || c < 0 || r >= rows || c >= cols || grid[r][c] === '0') {
      return;
    }
    // 标记当前单元格为已访问
    grid[r][c] = '0';
    // 向上下左右四个方向进行DFS
    dfs(r - 1, c); // 上
    dfs(r + 1, c); // 下
    dfs(r, c - 1); // 左
    dfs(r, c + 1); // 右
  }
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      if (grid[r][c] === '1') {
        // 发现新的岛屿
        islandCount++;
        // 开始DFS，标记所有连接的陆地
        dfs(r, c);
      }
    }
  }
  return islandCount;
}
// 示例
const grid = [
  ['1', '1', '0', '0', '0'],
  ['1', '1', '0', '0', '0'],
  ['0', '0', '1', '0', '0'],
  ['0', '0', '0', '1', '1']
];
console.log(numIslands(grid)); // 输出: 3

在这个代码中，我们定义了一个numIslands函数，它接受一个二维数组grid作为参数。我们遍历这个数组，每次遇到'1'时，我们就认为发现了一个新的岛屿，并且调用dfs函数来将这个岛屿的所有连接的陆地（即所有相邻的'1'）标记为'0'，表示已经访问过。这样，每次调用dfs都相当于探索了一个岛屿，岛屿数量islandCount相应增加。请注意，这个算法会修改原始的grid数组。如果需要保持原始数组不变，可以创建一个同样大小的访问数组来跟踪已访问的单元格。

24. 翻转二叉树

在JavaScript中，翻转二叉树通常指的是将二叉树的所有节点的左右子节点进行交换。以下是一个简单的示例，展示了如何使用递归函数来实现二叉树的翻转：

function invertTree(root) {
  // Base case: 如果节点为空，直接返回
  if (!root) {
    return;
  }
  // 交换左右子节点
  [root.left, root.right] = [root.right, root.left];
  // 递归翻转左右子树
  invertTree(root.left);
  invertTree(root.right);
}
// 示例：构建一个简单的二叉树
const tree = {
  val: 1,
  left: {
    val: 2,
    left: { val: 4, left: null, right: null },
    right: { val: 3, left: null, right: null }
};
// 调用invertTree函数
invertTree(tree);
// 打印翻转后的树
console.log(tree);

在这个代码中，我们定义了一个invertTree函数，它接受一个二叉树的根节点root作为参数。我们首先检查节点是否为null，如果是，则直接返回。否则，我们交换节点的左右子节点，然后递归地对左右子树进行翻转。请注意，这个算法会直接修改原始的二叉树。如果需要保持原始树不变，可以创建一个新的树结构来存储翻转后的结果。这个示例中，我们构建了一个简单的二叉树，并调用invertTree函数来翻转它。最后，我们使用console.log来打印翻转后的树结构。以上代码和示例提供了一个基本的翻转二叉树的实现。根据实际需求，可以进一步扩展和优化这个函数，例如处理更复杂的树结构或添加错误处理等。

25. js和css是否阻塞DOM树构建和渲染？

JavaScript和CSS都可以阻塞DOM树的构建和渲染，但它们的影响方式和程度不同。

CSS阻塞DOM树构建和渲染：
- 当浏览器解析HTML时，如果遇到一个<link>标签引用了外部CSS文件，浏览器会暂停HTML的解析，直到该CSS文件被下载并解析完毕。这是因为浏览器需要确保在渲染页面之前，已经应用了所有的CSS规则，以避免出现FOUC（Flash of Unstyled Content，无样式内容闪烁）。
- 然而，CSS并不会阻塞DOM树的构建。DOM树可以在CSS文件下载和解析的同时继续构建。但是，由于渲染树（包括DOM树和CSSOM树）需要等待CSSOM树构建完成，所以CSS会间接阻塞渲染。
JavaScript阻塞DOM树构建和渲染：
- 当浏览器解析HTML时，如果遇到一个<script>标签，无论是内联的还是外部的，浏览器都会暂停HTML的解析，直到脚本执行完毕。这是因为脚本可能会修改DOM，所以浏览器需要等待脚本执行完成后再继续解析HTML。
- JavaScript不仅阻塞DOM树的构建，还阻塞渲染。因为浏览器需要等待脚本执行完毕，才能确定最终的DOM状态和样式，然后才能构建渲染树并进行渲染。 优化建议：

对于CSS：
- 尽量减少外部CSS文件的个数和大小。
- 使用媒体查询将非关键CSS文件设置为异步加载。
- 将CSS内联到HTML中，以减少额外的HTTP请求。
对于JavaScript：
- 将<script>标签放在HTML文档的底部，以减少对DOM解析的阻塞。
- 使用async或defer属性来异步加载外部JavaScript文件。
- 避免在脚本中进行大量的DOM操作，以减少对渲染的阻塞。通过以上优化，可以减少CSS和JavaScript对DOM树构建和渲染的阻塞，提高页面的加载速度和性能。

26. CSSOM树和DOM树是同时解析的吗？

CSSOM树和DOM树并不是完全同时解析的，但它们的解析过程是交织进行的。

DOM树的解析：
- 浏览器从上到下解析HTML文档，遇到标签时创建对应的DOM节点，并将它们添加到DOM树中。这个过程是连续的，除非遇到脚本或其他需要暂停解析的情况。
CSSOM树的解析：
- 当浏览器解析HTML时，遇到<link>标签引用的外部CSS文件或<style>标签内的CSS规则时，会开始解析CSS并构建CSSOM树。
- CSSOM树的构建需要等待相关的CSS文件下载完成并解析完毕。 解析过程的交织：

浏览器在解析HTML并构建DOM树的过程中，会同时解析遇到的CSS规则并构建CSSOM树。
如果DOM树中的某个节点需要应用CSS规则，而相关的CSS文件尚未下载或解析完成，浏览器可能会暂停DOM树的解析，直到CSSOM树的相关部分准备就绪。
这种交织解析的方式允许浏览器在等待CSS文件时继续解析HTML，但最终的渲染需要等待两个树都构建完成。 渲染树的构建：
一旦DOM树和CSSOM树都构建完成，浏览器会结合这两个树来构建渲染树。
渲染树只包含需要显示在屏幕上的节点，以及这些节点对应的样式信息。
构建渲染树后，浏览器会进行布局（计算每个节点在屏幕上的位置）和绘制（将节点渲染到屏幕上）。总结：
DOM树和CSSOM树的解析是交织进行的，但它们并不是完全同步的。
CSS的解析可能会阻塞DOM树的解析，特别是当CSS文件较大或下载缓慢时。
最终的渲染需要等待DOM树和CSSOM树都构建完成。

27. 从存储位置看，浏览器缓存分为哪几种？

从存储位置来看，浏览器缓存主要可以分为以下几种类型：

内存缓存（Memory Cache）：
- 存储在浏览器的内存中。
- 速度最快，但容量有限，且在浏览器关闭后会被清空。
- 通常用于存储最近访问的资源，如当前页面的图片、脚本等。
磁盘缓存（Disk Cache）：
- 存储在硬盘上。
- 容量较大，可以在浏览器关闭后保留。
- 用于存储不经常变化或较大的资源，如网站图标（favicon）、CSS文件、JavaScript文件等。
服务端缓存（Server Cache）：
- although not strictly part of the browser cache, it's worth mentioning that some resources can be cached on the server side before even reaching the browser.
- This can include database query results, dynamic page outputs, etc.
浏览器数据库缓存：
- 如IndexedDB、Web SQL（已废弃）等。
- 用于存储结构化数据，可以由网页脚本直接操作。
- 这些数据通常用于离线应用或需要持久化存储的场景。
浏览器插件缓存：
- 某些浏览器插件可能会实现自己的缓存机制。
- 这些缓存通常用于特定插件的功能，如广告拦截、性能优化等。
应用程序缓存（AppCache）：
- although deprecated, Application Cache (AppCache) was used to specify resources that the browser should cache and make available to offline users.
- It was part of the HTML5 specification but has been replaced by Service Workers for more flexible and powerful offline capabilities.
Service Worker缓存：
- Service Workers允许开发者编写脚本控制缓存的行为。
- 可以实现更复杂的缓存策略，如缓存优先、网络优先或自定义策略。
- 特别适用于创建离线体验的PWA（Progressive Web Apps）。这些缓存类型在不同的场景和需求下发挥作用，共同提升浏览器的性能和用户体验。需要注意的是，随着技术的发展，一些旧的缓存机制（如AppCache）可能已经被新的技术（如Service Workers）所取代。

28. Cache-Control 有哪些常见配置值？

Cache-Control 是一个HTTP响应头，用于控制浏览器和其他中间缓存服务器如何缓存响应以及缓存多长时间。以下是一些常见的Cache-Control配置值：

public：
- 表示响应可以被任何中间缓存服务器缓存，即使是通常不可缓存的内容（如带有身份验证的请求）。
private：
- 表示响应只能被用户的浏览器缓存，不能被中间缓存服务器缓存。适用于用户特定的数据。
no-cache：
- 表示在每次请求时都必须验证缓存的有效性，即不直接使用缓存，而是先与服务器进行验证。
no-store：
- 表示不缓存响应，即不存储任何版本的响应以用于后续请求。
must-revalidate：
- 表示一旦缓存过期，在使用前必须向原始服务器验证。
proxy-revalidate：
- 类似于must-revalidate，但仅适用于共享缓存（如代理服务器）。
max-age：
- 后跟一个秒数，表示响应在多长时间内被认为是新鲜的，无需验证即可使用。例如，max-age=31536000表示一年。
s-maxage：
- 类似于max-age，但仅适用于共享缓存（如代理服务器）。后跟一个秒数，表示在共享缓存中的最大新鲜时间。
immutable：
- 表示响应在有效期内不会改变，因此可以安全地缓存，无需担心更新。
stale-while-revalidate：
- 允许缓存服务器在后台更新资源的同时，继续提供已过期的资源。
stale-if-error：
- 在原始服务器返回错误时，允许缓存服务器提供已过期的资源。这些值可以单独使用，也可以组合使用，以实现不同的缓存策略。例如，Cache-Control: public, max-age=31536000表示响应可以被公共缓存，并且缓存有效期为一年。正确配置Cache-Control头对于优化网站性能、减少带宽使用和提供更快的用户体验非常重要。然而，也需要根据内容的变化频率和隐私要求来仔细选择合适的配置值。

29. 说说对TCP/IP协议的了解

TCP/IP协议是Internet的基础协议，也是一种计算机数据打包和寻址的标准方法。以下是关于TCP/IP协议的一些基本了解： 1. 定义：

TCP/IP代表传输控制协议/网际协议（Transmission Control Protocol/Internet Protocol）。
它是一个协议族，包含了许多其他协议，如HTTP、FTP、DNS等。 2. 层次结构： TCP/IP通常被描述为四层模型：
应用层：提供网络服务给应用程序，如HTTP、FTP、SMTP等。
传输层：负责提供端到端的通信服务，主要包括TCP和UDP协议。
网络层：负责数据包从源到目的地的传输和路由，主要协议是IP。
网络接口层：负责数据的实际传输，包括以太网、Wi-Fi等物理层和数据链路层协议。 3. TCP协议：
TCP是一种面向连接的、可靠的、基于字节流的传输层通信协议。
它负责建立和维护网络连接，确保数据包正确、完整地从源传输到目的地。
TCP通过三次握手建立连接，并通过序列号、确认应答、数据重传等机制保证数据的可靠性。 4. IP协议：
IP是一种用于路由数据包的网络层协议。
它负责将数据包从源主机发送到目标主机，但不保证数据包的顺序或完整性。
IP地址用于标识网络中的设备，IPv4和IPv6是两种主要的IP地址格式。 5. 工作原理：
当数据需要传输时，TCP/IP协议会将数据分解成小的数据包。
每个数据包都包含源地址、目标地址和序列号等信息。
数据包通过网络传输到目的地，然后重新组装成原始数据。 6. 特点：
开放性：TCP/IP协议是开放的标准，不受任何厂商控制。
灵活性：可以适应各种网络环境和技术。
可靠性：通过TCP等协议提供可靠的数据传输。
可扩展性：可以支持大量的网络设备和用户。 7. 应用：
TCP/IP协议广泛应用于互联网和各种局域网、广域网中。
它是各种网络应用和服务的基础，如网页浏览、电子邮件、文件传输等。总之，TCP/IP协议是现代网络通信的基础，它定义了数据如何在网络中传输和路由，以及如何确保数据的可靠性和完整性。

2025面试大全（20）