首页 > 其他分享 >活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

时间:2023-04-18 14:03:17浏览次数:63  
标签:5.0 文件 活字 CDN 访问速度 访问 七牛云 巧用

本文由葡萄城技术团队于原创并首发
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

 

上两篇中我们分享了如何利用数据库主键表格设置默认不加载数据来提升应用系统访问的性能。在本篇中一起来看看如何在活字格中利用CDN技术来提升页面的访问速度。在此之前,先看看CDN是什么、它产生的背景以及主要用来解决的问题。

CDN是Content Delivery Network的缩写,即内容网络分发。其基本的原理是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需内容的原则,提高用户访问网站的响应速度。基于以上原理,CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题,提高用户访问网站的响应速度。(更多关于CDN的加速原理可以参考一文看懂CDN加速原理_xiangzhihong8的博客-CSDN博客_cdn原理图)

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

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

 

那么利用企业级低代码开发平台——活字格开发应用系统的时候,能不能使用CDN的技术?答案是肯定的。在此就借助七牛云来展示一下,如何巧用CDN技术来提升系统页面访问效率。

很多人会发现使用活字格做的应用系统在第一次打开一个页面的时候,会稍微慢一点,以后就会快很多?主要原因是因为JS文件在第一次访问时会需要将资源下载下来。如果资源所在的服务器性能不好,那么就需要比较多的时间来下载这些文件。如果希望下载快一些,就需要把类似的文件使用CDN技术放到离访问站点更近的服务器上。下面以七牛云为例来说明如何使用:

1. 选取的原则是什么?

以活字格的Demo应用系统为例,详见下图:

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_外链

 

 

在网页上打开这个应用,然后按一下键盘的F12

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_官网_02

在浏览器中就可以看到如下所示的内容:

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_官网_03

 

 

为了更方便的操作,请这样设置一下

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_官网_04

 

 

这样,就可以进行全屏展示了。

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_七牛_05

 

 

接下来找到所有请求的详细信息,按照从大到小进行排序

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_外链_06

 

 

为了让访问更加高效,挑选其中几个比较大的文件做CDN。如下图所示,挑选前4个文件。

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_官网_07

 

 

通过右键【另存为】将文件存储下来。

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_外链_08

 

 

至此,已经将需要做CDN的文件下载下来啦。
2.创建七牛云的存储账号,并申请空间
先到七牛云官网:https://www.qiniu.com/注册账号,如下图所示:

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_七牛_09

 

 

注册完了之后需要先进行实名认证,可以根据需要选择【申请个人认证】或【申请企业认证】,审核通过之后就可以正式使用了。

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_七牛_10

 

 

进入【对象存储】

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_七牛_11

 

 

点击【新建存储空间】,起一个名字比如,test。

 

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_官网_12

 

 

进入后点击【内容管理】

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_外链_13

 

 

应用【上传文件】,将步骤1中选择到的文件上传上去。

 

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_七牛_14

 

 

上传之后的效果如下:

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_外链_15

 

 

点击【复制外链】,并将这些外链保存起来。

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_七牛_16

 

 

获取到的外链如下:

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_七牛_17

 

 

至此 ,就完成七牛云的设置以及相关文件的保存。
3.修改发布后活字格应用的index.html文件
活字格V5.0,发布后index.html文件存储在:
C:\Program Files (x86)\ForguncyServer\Website\Resources
注意:

1. 不同版本的这个文件的路径不同,如果您是5.0.5.0,将下面路径中的5.0.3.0换成5.0.5.0即可

 

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_外链_18

为了避免异常,可提前将该文件进行备份。

用记事本打开index.html文件,将上述提到的4个文件搜索出来,并使用七牛云的链接进行替换。

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_外链_19

 

 

并使用七牛云的连接替换掉

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_外链_20

 

 

确认修改完之后,保存文件,并在windows系统服务内重启活字格服务。

活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度_七牛_21

 

 

重新打开应用之后,会发现系统访问的速度比之前快很多。当然除了文中提到的这些图片,您也可以根据您的需要再选择部分资源进行CDN加速。

更多参考:

1. 内容分发网络 CDN 是如何提高网页加载时间的?  https://www.jianshu.com/p/6d5847f3c22d

2. 一文看懂CDN加速原理_xiangzhihong8的博客-CSDN博客_cdn原理图

 



本文是由葡萄城技术开发团队发布,转载请注明出处:葡萄城官网




标签:5.0,文件,活字,CDN,访问速度,访问,七牛云,巧用
From: https://blog.51cto.com/powertoolsteam/6203242

相关文章

  • 盘点国内前端npm CDN替代方案,基本上可以替代unpkg、jsdelivr
    收集一波常见的加速NPM包的CDN,发现有些还是挺好用的,用来做博客或者网站加载NPM使用还是可以的。经典老牌的CDN加速unpkg.comcdn.jsdelivr.netfastly.jsdelivr.net使用方法:直接进官网,搜NPM包名使用。缺点:有时候不是很稳定,而且国内有些地方没法访问,jsdelivr曾经被用来结合......
  • 什么是高防CDN,高防CDN的作用有是什么
    高防CDN即内容分流网络流量防御,原理就是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,而不用直接访问网站源服务器。其原理简单的说就是架设多个高防CDN节点,当有CDN节点攻击的时候各个节点共同......
  • UVa 11205 The broken pedometer (枚举好题&巧用二进制)
    11205-ThebrokenpedometerTimelimit:3.000secondshttp://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=107&page=show_problem&problem=2146TheProblemAmarathonrunnerusesapedometerwithwhichheishavingpro......
  • 巧用Nginx配置解决跨域问题
    页面nginx配置1,前端页面放在域名根目录,比如,http://www.xuecheng.com/,对应的nginx配置:#门户location/{aliasD:/Z_lhy/SpringCloud/xuecheng_online/www/xc-ui-pc-static-portal/;indexindex.html;}页面目录:接口nginx配......
  • 活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度
    本文由葡萄城技术团队于博客园原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 上两篇中我们分享了如何利用数据库主键和表格设置默认不加载数据来提升应用系统访问的性能。在本篇中一起来看看如何在活字格中利用CDN技术来......
  • 实现智能CDN 的DNS服务
    注意acl规则一定是在options前面的有了view,就不能再单独使用zone修改主配置文件vim/etc/named.conf#acl规则一定是在options前面的aclbeijinacl{ 192.168.3.0/24; #根据ip地址不同,分成不同的规则};aclshanghaiacl{ 192.168.2.0/24;};aclotheracl{ any......
  • k8s前端js、css等资源文件CDN加速
     序言:用户访问网站,网站的加载速度直接影响着用户体验问题;前端js、css等文件资源需要加速访问处理;  方案一:js、css、png等资源打包到文件服务器,文件服务器抛出连接,工程项目打包的时候publicpath使用文件服务器访问链接;如图:需要购买文件服务器,把资源文件推送到文件服务......
  • vue里cdn引入改为本地js文件引用
     问题vue项目cdn引用会出现网络加载不了问题 vue项目cdn引用  改为本地public/index.html引入首先把cdn的链接复制在浏览器里打开或直接下载下来把js文件放到public文件夹下面  在index.html里引入,注意生产环境才加载出来 ......
  • [!] CDN: trunk URL couldn‘t be downloaded: https://cdn.jsdelivr.net/cocoa/
    热烈欢迎,请直接点击!!!进入博主AppStore主页,下载使用各个作品!!!注:博主将坚持每月上线一个新app!!!清华CocoaPods镜像源:CocoaPods镜像使用帮助CocoaPods是一个Cocoa和CocoaTouch框架的依赖管理器,具体原理和Homebrew有点类似,都是从GitHub下载索引,然后根据索引下载依赖的源......
  • 计算机网络——CDN加速技术原理
    摘要CDN的全称是(ContentDeliveryNetwork),即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层,将网站的内容发布到最接近用户的网络”边缘“的节点,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大......