龙空技术网

CDN如何通过减少延迟来提高性能

秋叶Motivation 98

前言:

此时同学们对“cdn加载速度优化”大概比较关心,各位老铁们都需要了解一些“cdn加载速度优化”的相关内容。那么小编同时在网上收集了一些关于“cdn加载速度优化””的相关资讯,希望兄弟们能喜欢,兄弟们一起来学习一下吧!

对象存储解决方案概述

假设我们有一个应用程序将上传的文件存储在世界某个地方。对于本示例,它是来自 Akamai 云计算服务的对象存储存储桶,我已将其部署到该us-southeast-1区域。

您可能使用不同的提供商和不同的区域,但以下几点仍然适用。

因此,当我上传 Nugget 打哈欠的可爱照片时,我可以通过某个 URL(如 austins-bucket.us-southeast-1.linodeobjects点com/files/nugget点jpg)访问它

Nugget 是一只超级可爱的狗。自然,很多人都想看到这一点。不幸的是,由于这张照片是在该us-southeast-1地区托管的,因此居住在远离该地区的任何人都必须等待更长的时间才能亲眼目睹这只野兽。

延迟很糟糕。

这就是 CDN 存在的原因。

(更|多优质内|容:java567 点 c0m)

什么是CDN?

CDN 代表“内容分发网络”。它是一个由分布在全球的计算机组成的连接网络,可以存储相同文件的副本,以便当用户请求特定文件时,可以从最近的计算机向用户提供该文件。

通过使用 CDN,可以缩短请求必须传输的距离。这有助于更快地解决请求,无论用户位于何处。

这是针对那张 Nugget 照片的webpagetest点org 测试结果。该请求是从他们位于日本的服务器发出的,请求完成需要 1.1 秒。

我可以在应用程序前面设置一个 CDN 以在世界各地缓存照片,而不是直接从对象存储桶提供文件。

因此,东京的用户将获得相同的照片,但从最近的 CDN 位置(可能在东京)提供服务,多伦多的用户将获得相同的文件,但从最近的 CDN 位置(可能在多伦多)提供服务。

这可能会对性能产生重大影响。

让我们看一下相同的请求,但在 CDN 后面提供服务。pagetest点org结果仍然显示了同一张 Nugget 的照片,请求仍然来自东京,但这次只花了 0.2 秒——时间的一小部分!

当对该图像发出请求时,CDN 可以检查它是否已有缓存版本。如果有,它可以立即做出响应。如果没有,它可以从对象存储中获取原始文件,然后保存缓存版本以供将来的请求使用。

注意:上面报告的数字来自单次测试。它们可能会根据网络条件而有所不同。

CDN 的复合回报

上面的示例侧重于提高上传文件的传输速度。在这种情况下,我只处理上传到对象存储桶的单个图像。它显示了响应时间几乎整整一秒的改进,这很棒,但当您考虑其他类型的资产时,情况会变得更好。

CDN 非常适合任何静态资产(CSS、JavaScript、字体、图像、图标等)。通过将其放在我的应用程序前面,所有其他静态文件也可以自动缓存。这包括 Nuxt.js 在构建过程中生成的文件,以及托管在应用程序服务器上的文件。

当您考虑“关键渲染路径”和渲染阻塞资源(例如 CSS、JavaScript 或字体)时,这一点尤其重要。

当网页加载时,当浏览器遇到渲染阻塞资源时,它将暂停解析并在继续之前下载资源(因此称为“渲染阻塞”)。因此,影响单个资产的任何延迟也可能影响网络级联中其他资产的性能。

这意味着 CDN 的性能改进正在复合化。好的!

那么,这是为了更快地向更多人展示我的狗的可爱照片,还是为了帮助您使应用程序运行得更快?是的!

无论出于何种动机构建更快的网站,如果您计划为多个地区的客户提供服务,将 CDN 作为应用程序基础架构的一部分都是至关重要的一步。

如何将 Akamai CDN 连接到对象存储

现在我想进行一些附带任务并分享我如何使用对象存储设置 Akamai。我没有找到有关该主题的太多信息,我想帮助处于这种特定情况的任何人。如果它不适用于您的用例,请随意跳过本节。

Akamai 是全球最大的 CDN 提供商,在 4,000 个地点拥有约 300,000 台服务器。它被世界上一些最大的公司使用,但很难找到与 Akamai 相关的内容,因为大多数大公司不喜欢共享有关其基础设施的不必要的信息。

但我不是大多数公司:)

(注意:您需要一个 Akamai 帐户并有权访问您的 DNS 编辑器)

在Akamai Control Center中,我使用Ion Standard 产品创建了一个新属性,该产品非常适合通用 CDN 交付。

单击“创建属性”后,系统将提示您选择是否使用设置向导来指导您创建属性,或者您可以直接进入新属性的属性管理器设置。我选择了后者。

在“属性管理器”中,我必须在“属性主机名”部分中添加新的主机名。我为我的应用程序添加了主机名。这是用户可以找到您的应用程序的 URL。就我而言,它是 uploader.austinil点com。

此过程的一部分还需要为主机名设置 SSL 证书。我保留了增强 TLS 的默认值。

完成所有设置后,Akamai 将向我显示以下属性主机名和 Edge 主机名。稍后当需要进行 DNS 更改时,我们会再次讨论这些内容。

属性主机名: uploader.austinil点comEdge 主机名: uploader.austingil.com-v2.edgekey点net

接下来,我必须设置实际属性的行为,这意味着编辑属性配置设置下的默认规则。具体来说,我必须将源服务器主机名指向源服务器所在的域。

在我的 DNS 中,我创建了一条新的 A 记录,将 origin-uploader.austingil点com 指向我的源服务器的 IP 地址,然后添加了一条 CNAME 记录,将 uploader.austingil点com 指向 Akamai 提供的边缘主机名。

A: origin-uploader.austinil点com -> 源站IPCNAME: uploader.austingil点com -> uploader.austingil.com-v2.edgekey点net

这让我可以构建 CDN 配置并根据需要进行测试,仅在准备好时才通过 CDN 发送流量。

最后,为了通过 Akamai 提供对象存储实例中的文件,我基于空白规则模板创建了一条新规则。我设置了适用于所有前往/files/*子路由的请求的规则标准。

规则行为设置为重写请求的源服务器主机名并将其更改为我的对象存储位置:npm.us-southeast-1.linodeobjects点com。

这样,任何发送到uploader.austingil点com/files/nugget点jpeg的请求都将通过CDN 提供服务,但文件源自对象存储位置。当您加载应用程序时,Nuxt 生成的所有静态资源也由 CDN 提供。所有其他请求都通过 Akamai 传递并转发到指向原始服务器的 origin-uploader.austingil点com。

这就是我将 Akamai CDN 配置为位于我的应用程序前面的方式。希望这一切都有道理,但如果您有疑问,请随时问我。

总结

今天,我们了解了 CDN 是什么、它在减少网络延迟方面发挥的作用,以及如何使用对象存储设置 Akamai CDN。

但这只是冰山一角。为了获得更高的性能,需要对 CDN 配置进行大量调整。

除了静态文件缓存之外,CDN 还可以提供许多其他性能和安全功能:Web 应用程序防火墙、更快的网络路径解析、DDoS 保护、机器人缓解、边缘计算、自动图像和视频优化、恶意软件扫描、请求安全标题等等。

(更|多优质内|容:java567 点 c0m)

标签: #cdn加载速度优化