前端杂学录（七）
1.响应式布局方案
1. 媒体查询
特点
媒体查询是 CSS 的一部分，可以根据设备的特性（如宽度、高度、分辨率等）应用不同的样式。
示例
body {
font-size: 16px;
}
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
@media (max-width: 480px) {
body {
font-size: 12px;
}
}
2. 弹性布局（Flexbox）
特点
Flexbox 是一种一维布局模型，适用于需要在单个方向上（行或列）对齐元素的场景。
示例
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 200px; /* 可增长、可缩小，基础宽度 200px */
}
3. 网格布局（CSS Grid）
特点
CSS Grid 是一种二维布局模型，非常适合复杂的布局需求，可以在行和列中轻松对齐元素。
示例
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px; /* 网格间距 */
}
.item {
background-color: #3498db;
padding: 20px;
}
4. 百分比和视口单位
特点
使用百分比或视口单位（vw、vh）可以创建灵活的布局，适应不同屏幕尺寸。
示例
.container {
width: 80%; /* 宽度为视口的 80% */
height: 50vh; /* 高度为视口高度的 50% */
}
5. 响应式框架
特点
使用响应式 CSS 框架（如 Bootstrap、Foundation 或 Bulma）可以快速构建响应式布局，这些框架内置了响应式的网格系统和组件。
示例（Bootstrap）
左侧内容
右侧内容
2.box-shadow
基本语法
box-shadow: [inset] offset-x offset-y color blur-radius spread-radius;- inset: 可选，指定阴影是内部阴影（在框内部）。
- offset-x: 必需，水平偏移量，正值阴影向右，负值阴影向左。
- offset-y: 必需，垂直偏移量，正值阴影向下，负值阴影向上。
- color: 必需，阴影的颜色。
- blur-radius: 可选，模糊半径，数值越大阴影越模糊。
- spread-radius: 可选，展开半径，用于指定阴影的尺寸，正值使阴影扩大，负值使阴影缩小。
3.flex-wrap
基本语法
flex-wrap: nowrap | wrap | wrap-reverse;- nowrap: 默认值。不换行，所有子元素都在一行显示，即使容器内的空间不足以容纳它们。
- wrap: 子元素换行，并从新的一行的开始处继续显示。
- wrap-reverse: 子元素换行，但是新行的子元素以相反的顺序显示。
4.flex
CSS 的 flex 属性是 Flexbox 布局中的一个重要属性，它提供了一种简写方式来设置子元素（flex items）的多个属性。flex 属性包括三个部分：
- flex-grow: 定义项目的放大比例，即当容器空间有剩余时，项目能够占据的空间比例。
- flex-shrink: 定义项目的缩小比例，即当容器空间不足时，项目能够缩小的空间比例。
- flex-basis: 定义项目在分配多余空间之前的默认大小。
基本语法
flex: flex-grow flex-shrink flex-basis;- flex-grow: 可选，一个无单位数字，默认为
0。表示项目在分配多余空间时的增长能力。 - flex-shrink: 可选，一个无单位数字，默认为
1。表示当空间不足时项目的缩小比例。 - flex-basis: 可选，一个长度值或百分比，默认为
auto。表示项目在分配多余空间前的默认大小。
5.手写图片瀑布流效果
Grid实现
瀑布流效果
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px; /* 网格间距 */
padding: 10px;
}
.grid-item {
background-color: white;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.grid-item img {
width: 100%;
display: block;
}解释
-
HTML 结构：
- 使用一个包含多个
.grid-item的.grid-container容器来放置图片。
- 使用一个包含多个
-
CSS 样式：
- 使用
display: grid;创建一个网格布局。 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));使列数根据屏幕宽度自动调整，最小宽度为 200px。gap: 10px;设置网格项之间的间距。.grid-item的样式包括背景色、边框圆角和阴影，使其看起来更美观。
- 使用
Flex实现
瀑布流效果 - Flexbox
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.flex-container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: flex-start; /* 左对齐 */
gap: 10px; /* 间距 */
padding: 10px;
}
.flex-item {
background-color: white;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
flex: 0 1 calc(33.333% - 10px); /* 设置每个项的宽度 (3列布局) */
}
.flex-item img {
width: 100%;
display: block;
}解释
-
HTML 结构：
- 使用一个包含多个
.flex-item的.flex-container容器来放置图片。
- 使用一个包含多个
-
CSS 样式：
display: flex;创建一个 Flexbox 容器。flex-wrap: wrap;允许子元素换行以适应容器宽度。justify-content: flex-start;使元素左对齐。gap: 10px;设置子元素之间的间距。.flex-item使用flex: 0 1 calc(33.333% - 10px);设置每个项的宽度（3 列布局），并留出间距。
6.conic-gradient
conic-gradient 是 CSS 中用于创建圆锥渐变效果的属性。它根据角度渐变颜色，从一个中心点开始，沿着外圆锥表面展开，形成一个环绕的色带效果。这个属性常用于创建圆形的渐变背景，比如加载动画、进度条或任何需要圆形渐变效果的场合。
基本语法
background-image: conic-gradient(color1, color2, ..., colorN);- color1, color2, ..., colorN: 指定的颜色值，从一个中心点开始，按顺序沿圆锥渐变。
7.使用CSS绘制几何图形（圆形、三角形、扇形、菱形等）
1. 圆形
示例
2. 三角形
示例
3. 扇形
示例
4. 菱形
示例
整合示例
以下是一个整合所有几何图形的完整示例：
CSS 几何图形
解释
- 圆形：通过设置
border-radius: 50%来实现。 - 三角形：使用透明边框和有色边框的组合。
- 扇形：使用
conic-gradient创建渐变扇形。 - 菱形：通过旋转正方形实现。
8.使用纯CSS实现曲线运动（贝塞尔曲线）
HTML 结构
曲线运动示例
CSS 样式
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
position: relative;
width: 300px;
height: 300px;
border: 2px dashed #3498db;
}
.moving-box {
position: absolute;
width: 50px;
height: 50px;
background-color: #e74c3c;
animation: move 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* 贝塞尔曲线 */
}
@keyframes move {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(150px, 100px); /* 曲线的最高点 */
}
100% {
transform: translate(300px, 0); /* 结束点 */
}
}
解释
-
HTML 结构：
- 创建一个容器
.container和一个要移动的盒子.moving-box。
- 创建一个容器
-
CSS 样式：
- 使用
position: relative;在容器上设置相对定位，以便在其内部定位移动的盒子。 - 使用
@keyframes定义动画，设置盒子的起始点、最高点和结束点。 - 使用
cubic-bezier(0.68, -0.55, 0.27, 1.55)来控制动画的加速和减速，形成曲线运动效果。
- 使用
9.base64
1. Base64 的基本概念
Base64 编码通过将每 3 个字节的二进制数据转换为 4 个可打印字符，来实现数据的表示。具体来说，Base64 使用 64 个字符来表示数据，包括：
- 大写字母：
A-Z（26个） - 小写字母：
a-z（26个） - 数字：
0-9（10个） - 特殊字符：
+和/（2个）
这样总共 64 个字符。Base64 编码还使用 = 字符来填充，以确保编码后的字符串长度是 4 的倍数。
2. 编码原理
2.1 数据分组
Base64 编码的基本步骤如下：
- 数据分组：将输入的二进制数据分为 3 字节（24 位）的组。
- 转化为 4 个 6 位的组：每组 3 字节（24 位）被分解为 4 个 6 位的组。24 位数据将被拆分为 4 个 6 位的数据：
- 3 字节 = 24 位
- 24 位 = 4 × 6 位
2.2 映射到 Base64 字符
- 映射到字符：使用 Base64 字符集将每个 6 位的组转换为相应的 Base64 字符。例如，对于 6 位的二进制数
000000到111111，对应的字符从A到/。
2.3 填充
- 处理填充：如果输入数据的字节数不是 3 的倍数，Base64 会在编码结果的末尾添加
=字符进行填充，以确保输出长度为 4 的倍数：- 如果有 1 个字节，则填充 2 个
=。 - 如果有 2 个字节，则填充 1 个
=。
- 如果有 1 个字节，则填充 2 个
10.几种进制的相互转换计算方法，在JavaScript中如何表示和转换
1. 常见进制
- 二进制：使用 0 和 1 表示。
- 八进制：使用 0-7 表示。
- 十进制：使用 0-9 表示。
- 十六进制：使用 0-9 和 A-F 表示（A=10, B=11, C=12, D=13, E=14, F=15）。
2. 进制转换方法
2.1 二进制 ↔ 十进制
- 二进制转十进制：将每位的值乘以 2 的对应幂次。
- 十进制转二进制：反复除以 2，记录余数，直到商为 0。
2.2 八进制 ↔ 十进制
- 八进制转十进制：将每位的值乘以 8 的对应幂次。
- 十进制转八进制：反复除以 8，记录余数，直到商为 0。
2.3 十六进制 ↔ 十进制
- 十六进制转十进制：将每位的值乘以 16 的对应幂次。
- 十进制转十六进制：反复除以 16，记录余数，直到商为 0。
3. JavaScript 中的表示和转换
3.1 二进制、八进制和十六进制的表示
在 JavaScript 中，可以使用不同的前缀表示不同进制的数字：
- 二进制：使用
0b前缀，例如0b1010表示二进制的 10。 - 八进制：使用
0o前缀，例如0o12表示八进制的 10。 - 十六进制：使用
0x前缀，例如0xA表示十六进制的 10。 - 十进制：直接表示，例如
10。
3.2 进制转换示例
// 十进制转二进制
let decimal = 10;
let binary = decimal.toString(2); // "1010"
// 十进制转八进制
let octal = decimal.toString(8); // "12"
// 十进制转十六进制
let hexadecimal = decimal.toString(16); // "a"
// 二进制转十进制
let binaryStr = "1010";
let decimalFromBinary = parseInt(binaryStr, 2); // 10
// 八进制转十进制
let octalStr = "12";
let decimalFromOctal = parseInt(octalStr, 8); // 10
// 十六进制转十进制
let hexadecimalStr = "a";
let decimalFromHexadecimal = parseInt(hexadecimalStr, 16); // 10
console.log(`Decimal: ${decimal}`);
console.log(`Binary: ${binary}`);
console.log(`Octal: ${octal}`);
console.log(`Hexadecimal: ${hexadecimal}`);
console.log(`Decimal from Binary: ${decimalFromBinary}`);
console.log(`Decimal from Octal: ${decimalFromOctal}`);
console.log(`Decimal from Hexadecimal: ${decimalFromHexadecimal}`);
3.3 转换函数示例
你可以创建一些简单的函数来处理进制转换：
function decimalToBinary(decimal) {
return decimal.toString(2);
}
function decimalToOctal(decimal) {
return decimal.toString(8);
}
function decimalToHex(decimal) {
return decimal.toString(16);
}
function binaryToDecimal(binaryStr) {
return parseInt(binaryStr, 2);
}
function octalToDecimal(octalStr) {
return parseInt(octalStr, 8);
}
function hexadecimalToDecimal(hexStr) {
return parseInt(hexStr, 16);
}
// 示例
console.log(decimalToBinary(10)); // "1010"
console.log(decimalToOctal(10)); // "12"
console.log(decimalToHex(10)); // "a"
console.log(binaryToDecimal("1010")); // 10
console.log(octalToDecimal("12")); // 10
console.log(hexadecimalToDecimal("a")); // 1011.理解什么是协议，了解TCP/IP网络协议族的构成，每层协议在应用程序中发挥的作用
1. 什么是协议
协议是指在计算机网络中，通信双方为实现信息交换而约定的规则和约束。这些规则定义了数据格式、传输方式、错误处理、数据压缩等内容。网络协议确保不同设备和系统可以在网络中有效地通信。
2. TCP/IP 网络协议族的构成
TCP/IP（传输控制协议/互联网协议）是一组网络协议的集合，广泛用于互联网和其他计算机网络。TCP/IP 模型通常被分为四层，分别是：
- 应用层（Application Layer）
- 传输层（Transport Layer）
- 网络层（Network Layer）
- 链路层（Link Layer）
2.1 应用层
- 定义：应用层是 TCP/IP 模型的最高层，负责与用户的应用程序直接交互。
- 常见协议：
- HTTP/HTTPS：用于网页传输。
- FTP：用于文件传输。
- SMTP/POP3/IMAP：用于电子邮件传输。
- 作用：提供用户接口和数据交换的服务，负责数据的格式化、表示和处理。
2.2 传输层
- 定义：传输层负责在两台主机之间提供可靠或不可靠的数据传输服务。
- 常见协议：
- TCP（传输控制协议）：提供可靠的、面向连接的传输服务，确保数据完整性和顺序。
- UDP（用户数据报协议）：提供不可靠的、无连接的传输服务，适用于对速度要求高而对可靠性要求低的应用（如视频流）。
- 作用：负责数据的分段、重组、流量控制和错误检测。
2.3 网络层
- 定义：网络层负责数据包在网络中的传输，处理路由选择和转发。
- 常见协议：
- IP（互联网协议）：负责为每个设备分配唯一的地址，并根据地址转发数据包。
- ICMP（互联网控制消息协议）：用于发送错误消息和网络诊断（如 ping）。
- 作用：负责数据包的寻址、路由选择和转发，实现不同网络之间的互联。
2.4 链路层
- 定义：链路层负责在物理网络上进行数据传输，处理物理地址和链路控制。
- 常见协议：
- Ethernet：用于局域网的数据传输。
- Wi-Fi：无线网络的传输协议。
- 作用：负责数据帧的封装和传输，并处理物理地址（如 MAC 地址），确保数据在同一局域网内的有效传输。
3. 各层协议在应用程序中的作用
- 应用层：直接与用户和应用程序交互，提供所需的网络服务和协议，处理特定应用的数据格式。
- 传输层：为应用层提供端到端的通信服务，确保数据的可靠传输和顺序控制，帮助应用程序处理数据的完整性。
- 网络层：为传输层提供逻辑寻址和路由服务，使数据包能够在不同网络间传输，帮助应用程序进行跨网络通信。
- 链路层：确保在物理网络上可靠传输数据帧，处理数据在局域网内的有效传递，帮助应用程序实现局域网内的互联。
12.三次握手和四次挥手详细原理，为什么要使用这种机制
1. 三次握手（TCP Connection Establishment）
原理
三次握手用于建立 TCP 连接，确保客户端和服务器之间可以可靠地通信。其过程如下：
-
第一次握手：
- 客户端发送一个 SYN（同步）报文段到服务器，表示请求建立连接，并随机生成一个初始序列号
seq = x。 - 状态：客户端进入 SYN_SEND 状态。
- 客户端发送一个 SYN（同步）报文段到服务器，表示请求建立连接，并随机生成一个初始序列号
-
第二次握手：
- 服务器收到 SYN 报文后，回复一个 SYN-ACK（同步-确认）报文段，表示同意建立连接，并随机生成一个序列号
seq = y，同时将客户端的序列号x作为确认号ack = x + 1。 - 状态：服务器进入 SYN_RCVD 状态。
- 服务器收到 SYN 报文后，回复一个 SYN-ACK（同步-确认）报文段，表示同意建立连接，并随机生成一个序列号
-
第三次握手：
- 客户端收到 SYN-ACK 后，发送一个 ACK（确认）报文段回服务器，确认号
ack = y + 1。 - 状态：客户端进入 ESTABLISHED 状态，服务器收到 ACK 后也进入 ESTABLISHED 状态。
- 客户端收到 SYN-ACK 后，发送一个 ACK（确认）报文段回服务器，确认号
状态转换图
客户端状态 服务器状态
SYN_SEND --SYN--> SYN_RCVD
ESTABLISHED <---ACK---
为什么要使用三次握手
- 确保可靠性：通过三次握手，确保双方都能够发送和接收数据。
- 同步初始序列号：双方通过握手过程确认初始序列号，防止数据包混淆。
- 预防半开连接：避免出现一方已经关闭连接而另一方仍在发送数据的情况。
2. 四次挥手（TCP Connection Termination）
原理
四次挥手用于终止 TCP 连接，确保双方都能正常关闭连接。其过程如下：
-
第一次挥手：
- 客户端发送一个 FIN（结束）报文段，表示希望关闭连接。
- 状态：客户端进入 FIN_WAIT_1 状态。
-
第二次挥手：
- 服务器收到 FIN 报文后，确认并发送一个 ACK 报文段，表示同意关闭连接，同时生成一个新的序列号。
- 状态：服务器进入 CLOSE_WAIT 状态，客户端进入 FIN_WAIT_2 状态。
-
第三次挥手：
- 服务器发送一个 FIN 报文段，表示服务器也希望关闭连接。
- 状态：服务器进入 LAST_ACK 状态。
-
第四次挥手：
- 客户端收到 FIN 报文后，发送一个 ACK 报文段，确认关闭连接，客户端进入 TIME_WAIT 状态，等待可能的重传。
- 状态：服务器进入 CLOSED 状态，客户端在经过一段时间后向 CLOSED 状态转变。
状态转换图
客户端状态 服务器状态
FIN_WAIT_1 --FIN--> CLOSE_WAIT
FIN_WAIT_2 <---ACK---
TIME_WAIT <---FIN---
CLOSED <---ACK---
为什么要使用四次挥手
- 确保可靠关闭：四次挥手确保双方都能正常完成数据传输后再关闭连接。
- 单向关闭：允许一方在关闭连接的同时继续发送数据，确保数据的完整性。
- 防止数据丢失：通过 TIME_WAIT 状态，确保在关闭连接后一定时间内不接受新的连接，防止遗留的数据包影响新连接。
13.有哪些协议是可靠，TCP有哪些手段保证可靠交付
1. 可靠协议与不可靠协议
1.1 可靠协议
可靠协议能够确保数据在传输过程中不丢失，并按照正确的顺序到达目标。常见的可靠协议包括：
- TCP（传输控制协议）：面向连接的协议，确保数据可靠传输。
- SCTP（流控制传输协议）：用于传输多个数据流，确保可靠交付。
- RTP（实时传输协议）：虽然其本身不保证可靠性，但通常与 RTCP（实时控制协议）一起使用，提供一些可靠性支持。
1.2 不可靠协议
不可靠协议不保证数据的可靠传输，可能会丢失、重复或乱序。常见的不可靠协议包括：
- UDP（用户数据报协议）：无连接的协议，不保证数据的到达和顺序。
- ICMP（互联网控制消息协议）：用于错误消息和网络诊断，不保证数据的可靠传输。
2. TCP 确保可靠交付的手段
TCP 通过多种机制确保数据的可靠交付，主要包括：
2.1 数据包确认（Acknowledgment）
- TCP 使用确认机制来确保数据包已经被接收。发送方在发送数据后会等待接收方的确认报文（ACK），如果在规定时间内未收到确认，发送方将重传数据。
2.2 重传机制
- 当发送方没有收到确认时，它会重传未被确认的数据包。这可以处理丢失的数据包，确保数据最终能够到达接收方。
2.3 序列号
- TCP 为每个发送的数据包分配一个序列号，以确保接收方能够按正确的顺序重组数据。即使数据包乱序到达，接收方也可以根据序列号进行排序。
2.4 流量控制
- TCP 使用流量控制机制（如滑动窗口）来管理发送方与接收方之间的数据流，防止因发送速度过快而导致接收方缓冲区溢出。
2.5 拥塞控制
- TCP 还实现了拥塞控制机制（如慢启动、拥塞避免、快速重传和快速恢复），以防止网络拥塞，从而确保数据传输的稳定性。
2.6 校验和
- TCP 在每个数据包中都包含一个校验和字段，以确保数据在传输过程中未被篡改。如果接收方发现校验和不匹配，说明数据包损坏，它会丢弃该数据包并请求重传。
14.DNS的作用、DNS解析的详细过程，DNS优化原理
1. DNS 的作用
- 域名解析：将域名转换为 IP 地址，使用户能够通过域名访问网站，而无需记住复杂的数字地址。
- 负载均衡：通过将多个 IP 地址与同一域名关联，DNS 可以帮助分散流量，提高网站的可用性和性能。
- 邮件路由：DNS 还用于邮件交换（MX 记录），帮助确定邮件的发送和接收服务器。
- 服务发现：通过 SRV 记录，DNS 可以帮助客户端发现特定服务的提供者。
2. DNS 解析的详细过程
DNS 解析是将域名转换为 IP 地址的过程，通常包括以下步骤：
2.1 用户请求
- 用户输入域名：用户在浏览器中输入域名（如
www.example.com）。
2.2 缓存查找
- 本地缓存查找：
- 浏览器首先检查本地 DNS 缓存，查看是否已经保存了该域名的 IP 地址。如果缓存中存在，则直接使用该地址进行连接。
2.3 DNS 服务器查找
-
递归 DNS 服务器：
- 如果本地缓存没有找到，浏览器会向配置的递归 DNS 服务器发送查询请求。
-
根 DNS 服务器：
- 递归 DNS 服务器首先向根 DNS 服务器查询。根服务器不提供具体的 IP 地址，而是返回对应顶级域（如
.com或.org）的权威 DNS 服务器的地址。
- 递归 DNS 服务器首先向根 DNS 服务器查询。根服务器不提供具体的 IP 地址，而是返回对应顶级域（如
-
顶级域 DNS 服务器：
- 递归 DNS 服务器接着向顶级域 DNS 服务器查询（如
.com）。顶级域 DNS 服务器返回该域名的权威 DNS 服务器地址。
- 递归 DNS 服务器接着向顶级域 DNS 服务器查询（如
-
权威 DNS 服务器：
- 最后，递归 DNS 服务器向域名的权威 DNS 服务器发送查询请求，获取最终的 IP 地址。
2.4 返回结果
-
返回 IP 地址：
- 权威 DNS 服务器返回 IP 地址给递归 DNS 服务器，递归服务器再将结果返回给用户的浏览器。
-
建立连接：
- 浏览器使用获取的 IP 地址与目标服务器建立连接，访问所请求的资源。
2.5 缓存结果
- 缓存结果：
- 为了提高后续请求的效率，浏览器和递归 DNS 服务器会将查询结果缓存一段时间（TTL，生存时间）。
3. DNS 优化原理
DNS 优化的目的是提高域名解析的速度和效率，常见的优化方法包括：
3.1 DNS 缓存
- 本地缓存：浏览器和操作系统会缓存 DNS 查询结果，减少对 DNS 服务器的重复请求。
- DNS 服务器缓存：递归 DNS 服务器也会缓存查询结果，以加快后续请求的响应时间。
3.2 负载均衡
- 多 IP 地址：将同一域名解析到多个 IP 地址，通过负载均衡分散用户请求，提高服务的可用性和响应速度。
3.3 使用 CDN
- 内容分发网络（CDN）：CDN 服务商会在多个地理位置部署服务器，通过 DNS 将用户请求引导到离用户最近的服务器，减少延迟。
3.4 限制 TTL
- 合理设置 TTL：通过设置合适的 TTL 值，优化 DNS 缓存的有效期，使得用户能够更快地获得更新的 IP 地址。
3.5 DNS 预解析
- 预解析：浏览器可以在页面加载时预解析其可能需要访问的域名，从而减少用户首次访问时的延迟。
3.6 使用 Anycast
- Anycast 技术：通过 Anycast，将多个 DNS 服务器配置为同一 IP 地址，用户请求会自动路由到最近的服务器，提高解析速度和冗余性。
15.CDN的作用和原理
1. CDN 的作用
1.1 提高内容加载速度
- 地理位置优化：CDN 将内容存储在离用户更近的服务器上，减少数据传输的延迟，从而提高加载速度。
1.2 减少带宽消耗
- 缓存机制：CDN 可以缓存静态内容（如图片、视频、CSS 和 JavaScript 文件），减少源服务器的负担，从而降低带宽使用。
1.3 提高网站稳定性和可用性
- 负载均衡：CDN 可以将流量分配到多个服务器，避免单点故障，提高用户访问的稳定性。
- 故障转移：如果某个节点出现故障，CDN 可以自动将请求重定向到其他可用节点，确保服务的持续可用性。
1.4 提升安全性
- DDoS 防护：CDN 可以抵御分布式拒绝服务（DDoS）攻击，通过分散流量减轻源服务器的压力。
- Web 应用防火墙：许多 CDN 提供安全功能，如 Web 应用防火墙（WAF），帮助抵御常见的安全威胁。
1.5 改善用户体验
- 快速响应：通过减少内容加载时间，CDN 提供更好的用户体验，尤其在视频流、游戏和实时应用中尤为重要。
2. CDN 的原理
CDN 的运作原理可以分为以下几个关键部分：
2.1 内容缓存
- 边缘服务器：CDN 在全球多个数据中心部署边缘服务器。这些服务器缓存来自源服务器的内容，当用户请求内容时，CDN 会从离用户最近的边缘服务器提供数据。
- 缓存策略：CDN 根据配置的缓存策略决定哪些内容可以缓存、缓存多少时间以及何时更新缓存。
2.2 DNS 解析
- 智能 DNS 路由：当用户请求某个网站时，DNS 查询会被发送到 CDN 的 DNS 服务器，CDN 根据用户的地理位置返回最优的边缘服务器地址，从而缩短加载时间。
2.3 内容传输
- HTTP/HTTPS 传输：用户通过浏览器向 CDN 请求内容，CDN 边缘服务器返回缓存的内容。如果内容未缓存，边缘服务器会向源服务器请求数据，并将其缓存以备后用。
2.4 动态内容处理
- 动态内容加速：对于动态内容（如数据库查询结果），CDN 可以通过优化数据传输路径和减少延迟来加速响应，尽管这些内容不容易缓存。
2.5 安全机制
- SSL/TLS 加密：CDN 通常支持 HTTPS，加密用户与边缘服务器之间的通信，确保数据安全。
- 访问控制：CDN 可以实施访问控制和身份验证，保护敏感数据。