阿里云创新上云策略：高效网站静态资源访问加速方案详解

时间：11-18 名人轶事提交错误

大家好，感谢邀请，今天来为大家分享一下阿里云创新上云策略：高效网站静态资源访问加速方案详解的问题，以及和的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

网站静态资源访问加速解决方案1.jpg

二、网站性能的影响

不同地区的用户访问网站时，部分用户会因为地理位置的距离而导致访问速度较慢。以未进行性能加速的网站为例，64.6%的网站加载时间超过1秒，平均完全加载时间为3.3秒。

网站静态资源访问加速解决方案2.png 各种研究表明，用户对网站性能非常敏感，如下：

跳出率：根据谷歌研究，如果一个网站的加载时间从1秒增加到3秒，其跳出率将增加32%；如果加载时间从1秒增加到5秒，其跳出率将增加90%。转化率：根据Akamai的研究，47%的用户期望网站在2秒内加载，40%的用户会在3秒内放弃网站，1秒的延迟可能会导致转化率下降7% 。销售额：根据亚马逊研究，加载时间每增加100 毫秒，销售额就会减少1%。

这些数据表明，网站性能对用户体验有着深远的影响，包括用户跳出率、转化率、销量等指标，因此提高网站性能尤为关键。

三、如何提升网站性能

如果不使用阿里云CDN+OSS技术方案来提升网站性能，则需要对网站本身进行优化，选择合适的托管方案，并使用一些网络技术来提升。这些解决方案可以提高的性能还取决于用户的地理位置。分布、网站现状等因素。对于用户的跨区域访问，如果不配置CDN加速，将需要花费大量的时间和成本来为用户提供服务。通过对比各种方案，我们建议您使用阿里云CDN+OSS技术方案来提升网站性能。

传统方案VS阿里云CDN直连云服务；完全依赖运营商网络和路由；缺乏网络优化方案；高成本支撑全球用户访问效率和成本。通过边缘云骨干网络进一步优化中间一公里的传输效率和应用的安全访问；基于CDN的边缘计算服务使算力下移、就近计算，进一步缩短延迟、提高并发、减轻中心云压力。

四、推荐方案

通过阿里云CDN+OSS技术方案提升网站性能，将网站静态资源（JS文件、CSS文件、图片、音视频文件等）存储在OSS上，CDN会缓存OSS的文件源站提前到CDN全局加速节点，当用户请求访问或下载资源时，可以就近获取CDN节点上缓存的资源，从而实现资源访问加速。整体解决方案架构如下图所示。

网站静态资源访问加速方案3.jpg

五、性能优势

以2MB测试文件为例，未加CDN加速与加CDN加速的网站性能对比如下：

网站静态资源访问加速方案4.png 未设置CDN加速时，各时间段页面加载时间占比如下：

8s：12.5% 5s - 8s：12.5% 3s - 5s：17.7% 1s - 3s：21.9% 1s：35.4% 其中，64.6%的站点加载时间超过1s，平均加载时间时间3.3秒。通过CDN加速后，平均加载时间为833.05ms，增长74.7%。

六、成本优势

在高并发场景下，可以通过CDN将静态资源缓存在各个节点上，减少对源站的直接请求。这样不仅降低了带宽成本，也降低了源站的流量成本。以访问中等复杂度页面需要1MB流量为例，购买表中不同规格的下游流量包，并使用CDN加速静态资源。当忽略回源成本时，相比直接使用OSS下行流量，成本至少会降低75.5%。对应支持的日用户访问量请参见表格。请根据网站具体访问情况选择合适的资源包。对应价格请以官方信息为准。

网站静态资源访问加速解决方案5.jpg

网站静态资源访问加速部署教程

方案概览

在当今互联网飞速发展的时代，网站已经成为企业与用户沟通的重要桥梁。不同地区的用户访问网站时，部分用户会因为地理距离的原因，访问速度较慢，影响用户体验。同时，随着网站流量的不断增加，网站的响应速度也会下降。其中，网站的静态资源，如JS文件、CSS文件、图片、大文件或音视频等，这些内容的加载速度直接决定了用户浏览网站的整体体验。

为了保证不同地区的用户能够顺利访问网站，可以使用阿里云CDN产品将文件分发到OSS上，这样不仅可以减轻源站的负载压力，还可以提高网站的访问性能。同时，在高并发场景下，静态资源可以通过CDN缓存在各个节点上，减少对源站的直接请求，不仅降低了带宽成本，也降低了源站的流量成本。以购买1个月、6个月有效期的100GB下行流量套餐为例。使用CDN加速静态资源，在忽略回源成本的情况下，相比直接使用OSS下行流量分别降低了75.5%和97.5%的成本。 %。详情请参考官方资源包价格。

方式资源包类型资源包流量/有效期费用支持访问次数/天使用CDN 降低成本直接使用OSS 下行流量100GB/1 个月49 元3413 次/天75.50% CDN + OSS 下行流量100GB/1 个月12 元3413次/天75.50% 直接使用OSS 下行流量500GB/1 个月247 元17067 次/天76.90% CDN+OSS 下行流量500GB/1 个月57 元17067 次/天76.90% 直接使用OSS 下行流量1TB/1 505 元/天月34952 次/天78.60% CDN+OSS 下行流量1TB/108 元每月34952 次/天78.60%

方案架构

网站静态资源（JS 文件、CSS 文件、图片、音视频文件等）当存储在OSS上时，CDN会将OSS源站的文件提前缓存到CDN全局加速节点。当用户请求访问或下载资源时，可以就近获取CDN节点上缓存的资源，从而实现资源访问加速。整体解决方案架构如下图所示。

网站静态资源访问加速解决方案6.png 该方案的技术架构包括以下基础设施和云服务：

对象存储OSS：存储网站静态资源文件。内容分发网络CDN：加速对对象存储OSS中存储资源的访问。

部署准备

1.如果您还没有阿里云账号，请访问阿里云账号注册页面，按照页面提示完成注册和个人实名认证。阿里云账号是您使用云资源的支付实体，是部署解决方案的必要前提。

2. 为您的阿里云账户充值。为了节省成本，该方案默认选择使用按量付费的资源。使用按量付费资源，需要保证账户余额不低于100元。完成该方案的部署和体验，预计成本约为5元。

3.您已经拥有至少一个域名，并且该域名已被注册。如果尚未备案，您可以登录阿里云ICP备案管理系统完成备案。

4. 激活对象存储OSS和内容分发网络CDN。

一键部署

基于阿里云资源编排服务ROS（Resource Orchestration Service）实现一键部署。 ROS模板已定义脚本，可以自动完成云资源的创建和配置，提高资源创建和部署的效率。 ROS模板完成的内容包括：

操作步骤您可以通过下面提供的ROS一键部署链接自动创建和配置这些资源：

创建对象存储OSS Bucket。绑定自定义域名。配置CDN加速服务。添加1 条CNAME 记录。 1.一键部署资源。

单击“一键部署”，选择地域。在配置页面，修改资源栈名称，配置加速区域、加速域名、存储空间名称，单击“下一步”，然后单击“创建”开始一键配置。加速域名不能设置为顶级域名。当资源栈信息页面的状态显示创建成功时，表示一键配置完成。 2.开启CDN缓存自动刷新。

登录OSS管理控制台。进入目标Bucket后，选择Bucket配置域名管理。在目标域名中，单击OSS域名绑定栏下的“解除绑定”，在弹出的面板中输入域名信息，然后单击“提交”。在目标域名的“CDN 缓存自动刷新”列中，选择所有支持的操作，然后单击“确定”。当您修改OSS中的文件后，可以触发CDN缓存的自动刷新。

完成及清理

图片及音视频文件方案验证**

图片和音视频文件主要通过OSS存储，通过CDN实现资源加速。您可以通过OSS控制台或阿里云SDK将文件上传到OSS Bucket，然后通过浏览器访问对应的CDN资源地址，验证缓存策略和加速效果。

1. 访问该文件查看静态资源缓存策略。

以访问图像文件为例。在浏览器中访问对应的URL时，可以得到如下响应信息，说明该文件是从CDN节点下载的，并且缓存时间也按照预期设置为30天。

网站静态资源访问加速解决方案7.png2.访问一个包含图片的网站，验证静态资源加速效果。

利用阿里云应用实时监控服务ARMS的实时拨测功能，监控点覆盖全国主要城市。测试文件大小为2MB，用于验证有无CDN加速时的图片访问性能。当静态资源最初没有缓存到CDN加速节点时，访问性能会比较慢。当静态资源缓存到CDN加速节点时，加速节点会直接响应。设置CDN加速后访问性能会更好。详情请参阅下面的数据。

网站静态资源访问加速方案8.png 图中左侧为未加CDN加速时的访问性能，右侧为设置CDN加速后的访问性能。从这个测试数据我们可以看到，设置CDN加速后，完全加载时间增加了约74.7%。

清理资源在本计划中，您创建1个OSS Bucket和1个CDN加速。测试完方案后，您可以参考以下规则处理对应产品的资源，避免继续产生费用。

一键删除OSS Bucket和CDN加速。

登录ROS控制台。在左侧导航栏中，选择“资源栈”。在资源栈页面顶部，选择已部署的资源栈所在区域，找到该资源栈，然后单击右侧操作栏中的“删除”。在“删除资源栈”对话框中，选择删除方式为“释放资源”，然后单击“确定”，按照提示完成资源释放。

JS、CSS文件方案验证

JS、CSS文件会根据业务实际情况进行更新，这与图片、音视频等不经常更新的静态文件不同。您可以通过以下操作完成文件版本控制、文件上传和文件访问。

1.文件版本控制。

JS和CSS文件可以使用文件路径中的版本号（例如js/0.0.1/app.js）或查询参数（app.js?v=0.0.1）来确保用户可以获得当前版本文件的。在实际开发过程中，更常见的是采用非覆盖发布。文件路径中的版本号可以有效控制缓存并进行版本跟踪，同时方便回滚操作。

在OSS中，您可以通过创建相应版本号的目录来存储相应版本的文件来完成文件版本控制。

2. 将文件上传到OSS。

文件版本更新后，您可以根据具体场景选择使用OSS控制台、阿里云SDK、ossutil、ossbrowser或API将最新版本的文件上传到OSS Bucket。本文以命令行工具ossutil为例，介绍如何将文件夹中的文件上传到OSS Bucket中。

ossutil cp -r localfolder/oss:///

3、更新应用代码中JS、CSS文件的版本号，使其指向OSS上最新版本的文件路径。

4. 访问文件。

命中CDN节点缓存

通过开发者工具查看，多次访问0.0.1版本的JS文件时，X-Cache字段的返回值以HIT开头，说明源站的资源已经缓存在了CDN 节点。网站静态资源访问加速解决方案9.png漏掉CDN节点缓存

JS文件版本更新为0.1.0后，首次访问新版本JS文件时，X-Cache字段返回值以MISS开头，说明首次访问未命中CDN节点缓存。网站静态资源访问加速方案10.png清理资源在该方案中，您创建1个OSS Bucket和1个CDN加速。测试完方案后，您可以参考以下规则处理对应产品的资源，避免继续产生费用。

一键删除OSS Bucket和CDN加速。

OK，关于阿里云创新上云策略：高效网站静态资源访问加速方案详解和的内容到此结束了，希望对大家有所帮助。