美文网首页
内容分发网络 CDN 是如何提高网页加载时间的?

内容分发网络 CDN 是如何提高网页加载时间的?

作者: _扫地僧_ | 来源:发表于2021-10-13 10:46 被阅读0次

    几乎 Internet 上的每个人都体验过内容分发网络 (CDN) 的好处。大多数科技公司,包括谷歌、苹果和微软等公司,都使用 CDN 来减少加载网页内容的延迟。

    CDN 通常会将服务器放置在不同网络之间的交换点。这些互联网交换点 (IXP) 是不同互联网提供商相互链接的主要位置,以便相互访问其不同网络上的资源。除了 IXP 之外,CDN 还将在全球高流量区域和战略位置的数据中心放置服务器,以便能够尽快移动流量。

    CDN 的主要好处是它能够快速有效地交付内容。 CDN 性能优化可以分为三类:

    (1) 距离减少——减少客户端和请求数据之间的物理距离
    (2) 硬件/软件优化——提高服务器端基础设施的性能,例如通过使用固态硬盘和高效的负载平衡
    (3) 减少数据传输——采用技术来减少文件大小,以便快速加载初始页面

    为了理解使用 CDN 的好处,让我们探索一下没有 CDN 的正常客户端/服务器数据传输是什么样的。

    假设纽约的某个人需要访问托管在新加坡服务器上的网站。 这些位置之间的物理间隔很大,物理距离约为 9,520 英里。

    如果托管网站内容的服务器(源服务器)位于新加坡,则对每个网页资产的每个请求都必须从纽约传输到新加坡,然后再返回。 就像乘坐沿途有许多连接的国际航班一样,每个请求都必须沿着从 A 点到 B 点的远距离旅行通过一系列路由器。

    如果您想查看计算机从当前位置到达特定 Web 服务需要多少个不同连接(跃点)的真实示例,请使用台式计算机探索 traceroute 实用程序。

    由于从纽约到新加坡的请求需要经过沿途的每个路由器位置,因此总距离和每个路由器处理请求所需的时间都会增加时间(延迟)。 一旦源服务器处理了请求并响应了发出请求的客户端,它就会在返回纽约之前通过类似的路由器序列将信息发回。 这种总往返行程的测量在电信中称为“往返时间”的 RTT。 暂时忽略可用带宽和潜在的网络拥塞,让我们看一下延迟因素的示例。

    为了说明起见,让我们说:

    (1) 一个请求从纽约到新加坡需要 250 毫秒。

    (2) 建立 TCP/IP 连接将增加 3 个 250 毫秒延迟的实例。

    (3) 网页需要 5 个独特的资产,包括图像、JavaScript 文件和网页本身。

    让我们看看加载这个网页需要多长时间:

    750ms:TCP/IP 连接在纽约的客户端和新加坡的源服务器之间建立。
    250 毫秒:网页的 HTTP 请求从纽约传输到新加坡。
    250 毫秒:纽约的请求者收到来自新加坡的原始服务器的响应,其中包含 200 状态代码和包含所有所需附加资产的网页。
    250 毫秒:纽约的客户请求了 5 个资产中的每一个。
    1500ms:5个资产从新加坡的源站异步交付给客户端。

    在这个简单的例子中,这个网页加载的总传输时间约为 3000 毫秒。

    如您所见,每次发出请求并发送响应时,都会遍历纽约客户端和新加坡源之间的整个路径。 随着网站变得越来越大并且需要更多的资产,A 点和 B 点之间的延迟不断增加。

    让我们重新审视一下在新加坡托管的内容提供给纽约 Web 客户端的示例,但现在新加坡站点使用 CDN 和亚特兰大的服务器,其中包含静态网站的缓存副本:

    (1) 一个请求从纽约到亚特兰大需要 50 毫秒。
    (2) 建立 TCP/IP 连接会增加 3 个 50ms 延迟的实例
    (3) 网页需要 5 个独特的资产,包括图像、JavaScript 文件和网页本身。

    让我们大致看看使用 CDN 加载此网页需要多长时间:

    150ms:在纽约的客户端和亚特兰大的边缘服务器之间建立 TCP/IP 连接。
    50ms:网页的 HTTP GET 请求从客户端传输到边缘服务器。
    50 毫秒:客户端收到来自边缘服务器缓存的响应,其中包含包含仍需要的所有附加资产列表的网页。
    50 毫秒:客户端请求 5 个资产中的每一个。
    800ms:5个资产从边缘服务器异步交付给客户端。
    此网页加载的总传输时间约为 1100 毫秒。

    在此示例中,客户端与内容之间距离的缩短使静态内容的延迟缩短了 1900 毫秒,这意味着加载时间缩短了近 2 秒。


    通过减少所有必要流量需要穿越的总距离,网站的每个用户都节省了大量的加载时间。 因为随着等待时间的增加,用户开始非常快地离开网站(反弹),这种改进代表了更好的用户体验和更多的用户在页面上的时间。

    How does a CDN load content? What is caching?

    如前所述,通常当客户端从源服务器请求文件时,该请求需要往返于该服务器并再次返回。 CDN 通过在称为缓存的过程中将静态内容文件从源服务器拉入分布式 CDN 网络来改善延迟。 一些 CDN 将具有允许选择性缓存动态内容的高级功能。 缓存数据后,CDN 会将内容从最近的 CDN 数据中心提供给客户端。

    在进行 TCP 握手后,客户端计算机向 CDN 的网络发出 HTTP 请求。 如果内容尚未缓存,CDN 将首先通过在源服务器和 CDN 的边缘服务器之间发出额外请求来从源下载内容。

    以下是典型 CDN 缓存过程中的 4 个步骤:

    (1) 当用户请求一个网页时,用户的请求会被路由到 CDN 最近的边缘服务器。
    (2) 然后边缘服务器就用户请求的内容向源服务器发出请求。
    (3) 源响应边缘服务器的请求。
    (4) 最后边缘服务器响应客户端。

    CDN 与客户端的接近度值发生在向源服务器发出初始请求之后。 一旦数据从源服务器缓存到 CDN 的网络上,来自客户端的每个后续请求只需要到达最近的边缘服务器。 这意味着如果最近的边缘服务器比源服务器更近,则可以减少延迟并且可以更快地提供内容。


    重要的是要记住,下载资产以及处理请求和响应所需的时间目前不包括在内; 到目前为止,只计算了在这两个地点之间传输信息所需的运输时间。 我们将探索的其他重要延迟因素包括数据减少、硬盘速度和网络拥塞。

    How does a CDN reduce file sizes to increase speeds?

    为了缩短页面加载时间,CDN 减少了 CDN 缓存服务器和客户端之间的总体数据传输量。 当传输的数据总量下降时,延迟和所需带宽都会减少。 结果是更快的页面加载和更低的带宽成本。 这些减少有两个关键组成部分:

    Minification:缩小 - 缩小是通过删除所有有助于人们理解正在发生的事情的组件来减小代码块大小的过程。 虽然工程师需要将想法分成合理的变量名称、空格和注释,以使代码块可读和可维护,但计算机可以成功地运行代码,删除这些字符。

    这是缩小前后的相同代码块:

    缩小前:八行代码


    缩小之后,一行代码:


    现在代码片段已经从八行减少到一行,整体文件大小也减少了。 这意味着传输文件所需的时间更少,从而减少了延迟并有助于更快地加载内容。

    文件压缩 - 文件压缩是减少通过 Internet 传输数据时所需的延迟和带宽消耗的一个组成部分。 GZip 是一种常用的压缩方法,被认为是传输网页时使用的最佳实践。 许多 CDN 提供商默认启用 GZip。 GZip 压缩的节省有多大? 通常压缩文件将减少初始文件大小的 50% 到 70%。

    What hardware can a CDN use to improve speeds?

    就 CDN 硬件优化而言,与传统硬盘驱动器 (HDD) 相比,固态硬盘驱动器 (SSD) 的使用带来了实质性好处;固态驱动器打开文件的速度比传统硬盘驱动器快 30%,并且更具弹性和可靠性。

    类似于电唱机,传统的硬盘驱动器由一个旋转的圆形金属盘组成,带有用于存储数据的磁性涂层。当磁盘在其下方旋转时,手臂上的读/写头会访问信息。这个过程是机械的,并且受光盘旋转速度的影响。随着固态驱动器的出现,旧型号的硬盘驱动器已变得不常用,尽管它们今天仍在生产并在许多计算机系统中广泛流通。

    固态硬盘 (SSD) 也是一种永久性存储,但其功能更类似于 USB 拇指驱动器或数码相机等设备中常见的存储卡;没有移动部件。如果普通硬盘在旋转并且系统被推挤,则 HDD 可能会跳过,从而导致读/写错误和潜在的停机时间。 SSD 的另一个重要优势是可以访问碎片化文件。文件碎片是指文件的各个部分位于整个磁盘的不同位置,从而导致 HDD 驱动器访问速度变慢的情况。由于 SSD 可以有效地访问不连续的内存位置,因此碎片不会对性能构成威胁。

    在第一个 CDN 中,数据存储在硬盘驱动器上。现在有了一些 CDN 服务,所有的边缘缓存都可以发生在固态驱动器上。 SSD 的缺点是费用高。 SSD 的价格最高可达传统媒体的 5 倍。因此,一些 CDN 服务通常会避免使用 SSD,而是选择较旧的技术。

    更多Jerry的原创文章,尽在:"汪子熙":


    相关文章

      网友评论

          本文标题:内容分发网络 CDN 是如何提高网页加载时间的?

          本文链接:https://www.haomeiwen.com/subject/mcaailtx.html