前端学习笔记-内容交付网络 Content delivery networks (CDNs)

文章主体来自 https://web.dev/content-delivery-networks/ 的节选及翻译

文章目录

资源交付 Resource delivery
缓存 Caching
- 向缓存添加资源
- 从缓存删除资源
- - cache eviction
  - Purging
性能特点 Performance features
- 图像优化
- Minification
- 数据压缩
- HTTP/2 和 HTTP/3
- TLS 1.3
结论

CDN通过使用分布式服务器网络向用户交付资源来提高站点性能。
因为 CDN 减少了服务器负载，所以它们降低了服务器成本并且非常适合处理流量高峰。
CDN 的性能优势源于几个原则：

CDN 服务器比源服务器更靠近用户，因此具有更短的往返时间 (RTT)延迟；
与从源服务器“直接”加载内容相比，网络优化允许 CDN 更快地交付内容；
CDN 缓存消除了将请求传送到源服务器的需要。

源服务器是指 CDN 从中检索内容的服务器。

资源交付 Resource delivery

当使用 CDN 从源头交付资源时，会在客户端和附近的 CDN 服务器之间建立新连接。
旅程的其余部分（CDN 服务器和源服务器之间的数据传输）发生在 CDN 的网络上——这通常包括与源的现有持久连接。
这样做的好处是双重的：在尽可能靠近用户的地方终止新连接，消除了不必要的连接设置成本（建立新连接很昂贵，需要多次往返）；使用预热连接允许以最大可能的吞吐量立即传输数据。

一些CDN在此基础上进一步改进，将流量通过分布在互联网上的多个CDN服务器路由到源服务器。
CDN服务器之间的连接是通过可靠和高度优化的路由进行的，而不是由边界网关协议（BGP）决定的路线。虽然BGP是互联网事实上的路由协议，但它的路由决定并不总是以性能为导向。因此，BGP确定的路由可能比CDN服务器之间的精细调整的路由性能要差。

缓存 Caching

在CDN的服务器上缓存资源，就不需要为了获得服务而让请求一直跑到源服务器。因此，资源的交付速度更快；这也减少了源服务器的负载。

向缓存添加资源

最常用的填充CDN缓存的方法是让CDN在需要时 "拉 "出资源–这被称为 “原点拉(origin pull)”。
第一次从缓存中请求特定的资源时，CDN将从原点服务器请求该资源，并对响应进行缓存。
通过这种方式，随着时间的推移，缓存的内容会随着更多未缓存的资源被请求而建立起来。

从缓存删除资源

CDN使用缓存驱逐(cache eviction)来定期从缓存中删除不那么有用的资源。此外，网站所有者可以使用Purging明确地删除某些资源。

cache eviction

缓存有一个有限的存储容量。当缓存接近其容量时，它会通过移除最近没有被访问过的资源或占用大量空间的资源来为新资源腾出空间。这个过程被称为缓存驱逐。一个资源从一个缓存中被驱逐，并不一定意味着它已经从CDN网络的所有缓存中被驱逐。

Purging

Purging清除（也被称为 “cache invalidation”）是一种从CDN的缓存中删除资源的机制，而不必等待它过期或被驱逐。它通常通过API执行。在需要撤回内容的情况下，清除是至关重要的（例如，纠正错别字、定价错误或错误的新闻文章）。除此之外，它还可以在网站的缓存策略中发挥关键作用。

如果CDN支持近乎即时的Purging，清除可以作为管理动态内容缓存的机制：使用一个长的TTL来缓存动态内容，然后在资源更新时清除。通过这种方式，可以最大限度地延长动态资源的缓存时间，尽管事先不知道该资源何时会改变。这种技术有时被称为 “保持到被告知的缓存”。

当清理被大规模使用时，它通常与一个被称为 "缓存标签 "或 "代理缓存键 "(“cache tags” or “surrogate cache keys”)的概念一起使用。这种机制允许网站所有者将一个或多个额外的标识符（有时被称为 “标签tags”）与缓存资源联系起来。然后，这些标签可以用来进行高度细化的Purging。例如，你可以给所有包含网站页脚的资源（例如，/about，/blog）添加一个 "页脚 "标签。当页脚需要被更新时，指示你的CDN去清除所有与 "页脚 "标签相关的资源。

性能特点 Performance features

数据压缩(Gzip, Brotli)、TLS 1.3 、HTTP/2 和 HTTP/3 、图像优化、Minification (Terser)

图像优化

CDN 图像优化服务通常专注于可以自动应用的图像优化，以减少图像传输大小。例如：剥离EXIF数据、应用无损压缩以及将图像转换为更新的文件格式（例如，WebP）。图像占中间网页传输字节的约 50%，因此优化图像可以显着减小页面大小。

Minification

CLI工具：Terser ；Webpack插件：TerserWebpackPlugin
Minification从 JavaScript、CSS 和 HTML 中删除不必要的字符。最好在源服务器而不是 CDN 上进行压缩。
站点所有者对要压缩的代码有更多的上下文，因此通常可以使用比 CDN 使用的技术更积极的压缩技术。但是，如果不能选择在源代Minification代码，那么 CDN 的Minification也是一个不错的选择。

数据压缩

Node中间件：compression, shrink-ray；Webpack插件：CompressionPlugin, BrotliWebpackPlugin
所有基于文本的响应都应该用gzip或Brotli进行压缩。如果可以选，请选择Brotli而不是gzip。
Brotli是一种较新的压缩算法，与gzip相比，它可以实现更高的压缩率。
有两种类型的CDN支持Brotli压缩。"源服务器Brotli "和 “自动Brotli压缩”。
压缩的最佳实践
想要最大限度地提高性能的网站应该在其原生服务器和CDN上应用Brotli压缩。
在原点的Brotli压缩可以最大限度地减少不能从缓存中提供的资源的传输大小。
为了防止服务请求的延迟，原点应该使用相当保守的压缩级别来压缩动态资源–例如，Brotli-4；静态资源可以使用Brotli-11进行压缩。如果一个原点不支持Brotli，可以使用gzip-6来压缩动态资源；gzip-9可以用来压缩静态资源。

HTTP/2 和 HTTP/3

HTTP/2 提供了优于 HTTP/1 的多项性能优势，并得到所有主要浏览器的支持。HTTP/2 的性能特点包括：多路复用(Multiplexing)、流优先级(Stream Prioritization)、服务器推送和首部压缩。

多路复用支持多个并发流；流优先级提供了一个接口，用于传达每个流的相对优先级。这有助于服务器首先发送最重要的资源(即使它们没有先被请求)。

https://hpbn.co/http2/

性能，是 HTTP/3 相对于 HTTP/2 的主要优势。具体来说，HTTP/3 消除了连接级别的队头阻塞并减少了连接建立时间。

HTTP/2 引入多路复用，允许使用单个连接同时传输多个数据流。但是对于 HTTP/2，单个丢弃的数据包会阻塞连接上的所有流（这种现象称为队头阻塞）。使用 HTTP/3，丢弃的数据包只会阻塞单个流。
这种改进主要是 HTTP/3 使用UDP（HTTP/3 通过QUIC使用 UDP ）而不是TCP 的结果。这使得 HTTP/3 对于通过拥塞或有损网络传输数据特别有用。

此外，HTTP/3 使用 TLS 1.3，因此共享其性能优势：建立新连接只需要一次往返，恢复现有连接不需要任何往返。

TLS 1.3

TLS 的1.3 版本将 TLS 握手从两次往返缩短为一次。对于使用 HTTP/1 或 HTTP/2 的连接，将 TLS 握手缩短为一次往返可有效减少 33% 的连接建立时间。

结论

使用CDN： CDN快速交付资源，减少源站负载，有助于应对流量高峰。
尽可能积极地缓存内容：静态和动态内容都可以而且应该缓存 - 尽管持续时间不同。定期审核您的网站以确保您以最佳方式缓存内容。
启用 CDN 性能特性： Brotli、TLS 1.3、HTTP/2 和 HTTP/3 等特性进一步提高了性能。