Note 2

CDN（内容分发网络）工作原理详解

CDN（内容分发网络）指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。CDN 可以提供快速服务，较少受高流量影响。

CDN 被广泛用于传输样式表和 JavaScript 文件（例如 Bootstrap、jQuery 库等）的静态资源。对这些库文件使用 CDN 技术，有以下几点好处：

• 通过 CDN 向用户分发传输相关库的静态资源文件，可以降低我们自身服务器的请求压力。
• 大多数 CDN 在全球都有服务器，所以 CDN 上的服务器在地理位置上可能比你自己的服务器更接近你的用户。地理距离会按比例影响延迟。
• CDN 已经配置了恰当的缓存设置。使用 CDN 节省了在你的服务器中对静态资源文件的配置。

CDN（内容分发网络，Content Delivery Network）是一种通过分布式节点技术优化内容传输的网络架构，其核心原理是将网站或应用的资源（如静态文件、视频、动态内容等）缓存至全球各地的边缘服务器，使用户能够从距离最近的节点快速获取数据，从而减少延迟、提升访问速度并降低源服务器负载。以下是 CDN 工作原理的详细解析：

一、CDN的核心原理

1. 分布式缓存与就近访问
   CDN 通过在全球部署边缘服务器（节点），将源站内容缓存到离用户最近的节点上。当用户请求资源时，CDN 通过智能 DNS 解析或 HTTP 重定向技术，将用户引导至最优节点。若节点已缓存所需内容，则直接返回；若未缓存，则从源站拉取内容并缓存至节点，供后续用户使用。

2. DNS智能解析与路由选择

• 用户发起请求时，DNS 系统通过 CNAME 记录将域名解析权交给 CDN 的智能 DNS 服务器。
• CDN 的智能 DNS 服务器根据用户 IP 地址、地理位置、网络状况及节点负载情况，选择最优边缘节点 IP 返回给用户，实现智能路由。

3. 负载均衡与冗余机制
   CDN 通过全局负载均衡（GSLB）和区域负载均衡（SLB）动态分配流量，避免单一节点过载。当某节点故障时，请求会自动切换至其他可用节点，确保服务连续性。

4. 动态内容加速
   针对动态内容（如实时数据、交互式页面），CDN 采用动态加速技术，如 TCP 链路优化、BGP 路由优化等，缩短用户与源站之间的传输路径，降低延迟。

二、CDN的关键技术

1. 缓存机制

   静态资源（图片、CSS、JS等）被缓存在边缘节点，通过 TTL（生存时间）控制缓存更新频率。首次请求需回源，后续请求直接从缓存响应，显著减少源站压力。

   备注

   TTL（Time to Live）缓存时间是指数据在缓存中存储的有效时长，用于控制缓存数据的过期和更新机制。

2. 内容预取与预热
   CDN 支持预取策略，主动将热门内容提前分发至节点，或在源站更新后主动刷新缓存，避免用户访问时因回源造成延迟。

3. 安全防护
   CDN 集成 DDoS 防护、Web应用防火墙（WAF）、HTTPS 加密等安全功能，通过流量清洗和恶意请求过滤保护源站安全。

4. 数据传输优化
   采用压缩（如Gzip）、分块传输、HTTP/2 协议优化等技术，减少传输数据量，提升加载速度。

三、CDN的典型工作流程

1. 用户请求：用户访问网站域名，发起资源请求。
2. DNS解析：本地 DNS 通过配置 CNAME 将请求转发至 CDN 的智能 DNS 服务器，获取最优节点 IP。
3. 节点响应：用户连接至边缘节点，若资源已缓存则直接返回；否则节点回源拉取数据并缓存。
4. 内容交付：用户从边缘节点快速获取内容，完成访问。

四、CDN的优势

• 加速访问：减少跨地域、跨运营商传输延迟，提升页面加载速度。
• 降低负载：分担源站流量，避免服务器过载。
• 高可用性：冗余节点和故障切换机制保障服务稳定性。
• 成本优化：减少带宽消耗，降低服务器运维成本。
• 安全增强：抵御 DDoS 攻击，提升数据安全性。

五、适用场景

• 静态资源加速：如图片、视频、文档等。
• 动态内容优化：如 API 接口、实时交互页面。
• 大文件下载与流媒体：如软件包、直播/点播视频。
• 全球化业务：覆盖多地区用户，解决跨国访问延迟问题。

总结

CDN 通过分布式缓存、智能路由、负载均衡等核心技术，构建了高效、稳定、安全的内容分发网络。其核心目标是通过缩短用户与资源的物理距离和优化传输路径，实现快速响应与高可用性，已成为现代互联网基础设施的重要组成部分。对于需要提升用户体验、应对高并发场景的企业，CDN 是必不可少的解决方案。

CNAME（Canonical Name，规范名称）

在 DNS（域名系统） 中，CNAME 是一种别名记录，用于将一个域名指向另一个域名（而非直接指向 IP 地址）。在 CDN 的 DNS 解析流程中，CNAME 记录起到路由控制的关键作用，帮助实现用户请求的智能分发。以下是其核心机制和流程：

1. CNAME 的核心作用

• 别名映射：CNAME 记录允许将一个域名（如 cdn.example.com）设置为另一个域名（如 example.cdnprovider.com）的别名。
• 解析权转移：通过 CNAME，域名解析权从原始 DNS 服务器转移到 CDN 提供商的 DNS 系统，使 CDN 能够动态选择最优节点。

2. 在 CDN 中的应用场景

当用户访问使用 CDN 加速的网站（如 www.example.com）时，CDN 的工作流程如下：

1. 用户发起请求 用户输入 www.example.com，向本地 DNS 服务器发起解析请求。

2. 触发 CNAME 解析

• 原域名 www.example.com 的 DNS 记录中配置了 CNAME，指向 CDN 服务商提供的域名（如 example.cdnprovider.net）。
• 本地 DNS 服务器发现 CNAME 记录后，转而向 CDN 服务商的 DNS 系统发起解析请求。

3. CDN 智能 DNS 决策

CDN 的 智能 DNS 服务器 根据以下因素选择最优边缘节点：

• 用户的地理位置（通过 IP 定位）
• 网络运营商（如电信、联通）
• 边缘节点的实时负载和健康状况

4. 返回最优节点 IP

CDN 的 DNS 服务器将最优节点的 IP 地址（如 1.2.3.4）返回给用户，用户直接访问该边缘节点获取内容。

3. 配置示例

假设你的网站 www.example.com 使用某 CDN 服务，配置步骤如下：

1. 在 CDN 服务商处添加域名

将 www.example.com 添加到 CDN 控制台，CDN 会生成一个专属 CNAME 域名（如 example-1234.cdnprovider.com）。

2. 在 DNS 服务商处设置 CNAME 记录

记录类型: CNAME  
主机记录: www  
记录值: example-1234.cdnprovider.com  
TTL: 600（秒）

此配置将 www.example.com 的解析权交给 CDN 服务商。

4. CNAME 的优势与注意事项

优势

• 灵活性：CDN 服务商可动态调整节点分配策略，无需用户手动修改 DNS 记录。
• 集中管理：通过 CNAME 解耦域名与 IP，CDN 服务商可统一优化节点网络。
• 无缝切换：当 CDN 节点故障时，DNS 可快速切换至备用节点，用户无感知。

注意事项

• TTL 依赖：DNS 记录的 TTL（缓存时间）会影响 CNAME 更新的生效速度。
• 解析延迟：多级 DNS 查询（本地 DNS → CDN DNS）可能略微增加解析时间。
• CNAME 限制：一个域名只能有一条 CNAME 记录，且不能与其他记录（如 MX、TXT）共存。

5. 其他相关 DNS 记录

• A 记录：直接映射域名到 IP，适用于固定 IP 的场景（无 CDN）。
• AAAA 记录：类似 A 记录，但指向 IPv6 地址。
• NS 记录：指定域名由哪台 DNS 服务器解析（通常用于域名托管）。

总结

在 CDN 中，CNAME 记录是连接用户与 CDN 网络的核心桥梁。通过将域名解析权转移至 CDN 服务商的智能 DNS 系统，结合地理位置、网络状态等实时数据，最终实现用户请求的最优分发，显著提升访问速度和稳定性。

---

全局负载均衡（GSLB）与区域负载均衡（SLB）

全局负载均衡（GSLB，Global Server Load Balancing）和区域负载均衡（SLB，Server Load Balancing）是分层流量管理的核心技术，分别解决广域网和局域网范围内的资源分配问题。

核心区别

维度	全局负载均衡（GSLB）	区域负载均衡（SLB）
作用范围	跨地域、跨数据中心（广域网）	同一数据中心或区域内部（局域网）
决策依据	地理位置、网络延迟、节点健康状态、运营商	服务器负载、连接数、CPU/内存利用率
技术实现	基于 DNS 或 Anycast 路由的智能调度	基于硬件/软件（如 F5、Nginx、HAProxy）
目标	优化用户访问路径，选择最优数据中心	优化服务器资源利用率，避免单点过载

浏览器从输入url都发生了什么？

简单总结：HTML 解析 -> 样式计算 -> 布局 -> 分层 -> 绘制 -> 分块 -> 光栅化 -> 显示

1. 根据网址进行 DNS 解析，如果配置了 CNAME，DNS 系统通过 CNAME 记录将域名解析权交给 CDN 的智能 DNS 服务器。CDN 的智能 DNS 服务器根据用户 IP 地址、地理位置、网络状况及节点负载情况，选择最优边缘节点 IP 返回。
2. 客户端根据 IP 地址找到对应的服务器，通过 TCP 三次握手，与服务器建立连接
3. 客户端发起 HTTP 请求，请求对应资源，这个请求通常是一个 html 文件
4. 服务器响应并返回相应数据，HTTP 报文（如：HTML文件）
5. 解析 HTML：浏览器通过网络接收数据，解析 HTML 并构造 DOM树
6. 解析 CSS：主线程解析到 <link> 位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。这一步会解析 CSS 并构建 CSSOM树（CSS对象模型树）。
7. 主线程解析到 <script> 位置时，会停止解析 HTML，转而等待 JS 文件下载，并将全局代码解析执行完成后，才会继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

解析完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。

8. 样式计算：主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。在这一过程中，很多预设值会变成绝对值，比如red会变成rgb(255,0,0)；相对单位会变成绝对单位，比如 em 会变成 px

9. 将解析创建的 DOM树 和 CSSOM树 合成一个渲染树（ Rendering Tree）

10. 根据渲染树计算每个可见元素的布局，然后将其绘制到屏幕上（在某些情况下，可以将内容提升到它们自己的层并进行合成，通过在 GPU 而不是 CPU 上绘制屏幕的一部分来提高性能，从而释放主线程。） 布局是确定渲染树中所有节点的尺寸和位置，以及确定页面上每个对象的大小和位置的过程。

11. 分层：主线程使用一套复杂的策略对整个布局树进行分层。浏览器中的 Layers 可以查看每个页面的分层效果。

12. 绘制：在每个层进行绘制过程，主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。

    合成线程会对每个图层进行分块，将其划分为更多的小区域；分块完成后，进入光栅化阶段，合成线程会将块信息交给 GPU 进程，以极高的速度完成光栅化。GPU 进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。

13. 合成：在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。

14. 显示在用户浏览器页面

15. 最后，客户端与服务器进行 TCP 四次挥手断开连接，也可能复用连接

不会被显示的元素，如 <head> 元素及其子元素，以及任何带有 display: none 的节点，如用户代理样式表中的 script { display: none; }，都不会包含在渲染树中，因为它们不会出现在渲染输出中。应用了 visibility: hidden 的节点会包含在渲染树中，因为它们会占用空间。

关键渲染路径

关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了 文档对象模型(DOM)，CSS 对象模型 (CSSOM)，渲染树和布局。

Web 性能包含了服务器请求和响应、加载、执行脚本、渲染、布局和绘制每个像素到屏幕上。

网页请求从 HTML 文件请求开始。服务器返回 HTML——响应头和数据。然后浏览器开始解析 HTML，转换收到的数据为 DOM 树。浏览器每次发现外部资源就初始化请求，无论是样式、脚本或者嵌入的图片引用。有时请求会阻塞，这意味着解析剩下的 HTML 会被终止直到重要的资源被处理。浏览器接着解析 HTML，发请求和构造 DOM 直到文件结尾，这时开始构造 CSS 对象模型。等到 DOM 和 CSSOM 完成之后，浏览器构造渲染树，计算所有可见内容的样式。一旦渲染树完成布局开始，定义所有渲染树元素的位置和大小。完成之后，页面被渲染完成，或者说是绘制到屏幕上。

用户看到页面分为两个阶段：

• 页面内容加载完成。对应DOMContentLoaded
• 页面资源完成。对应Load

整个关键渲染路径包括以下几个步骤：

1. 解析HTML，生成DOM树（DOM）
2. 解析CSS，生成CSSOM树（CSSOM）
3. 将DOM树和CSSOM树 合成渲染树（Rendering Tree）
4. 根据渲染树，计算每个可见元素的布局（Layout）
5. 将各个元素绘制到屏幕上（Paint）