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

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

时间:2023-04-10 09:45:00浏览次数:49  
标签: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应用系统为例,详见下图:

 

 

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


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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

进入【对象存储】

 

 

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

 

 

进入后点击【内容管理】

 

 

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

 

 

 

上传之后的效果如下:

 

 

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

 

 

获取到的外链如下:

 

 

至此 ,就完成七牛云的设置以及相关文件的保存。
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即可

 

为了避免异常,可提前将该文件进行备份。
用记事本打开index.html文件,将上述提到的4个文件搜索出来,并使用七牛云的链接进行替换。

 

 

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

 

 

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

 

 

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

更多参考:

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

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

 

标签:5.0,文件,活字,CDN,访问速度,七牛云,页面,巧用
From: https://www.cnblogs.com/powertoolsteam/p/17301826.html

相关文章

  • 实现智能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(缓存)层,将网站的内容发布到最接近用户的网络”边缘“的节点,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大......
  • Hive 如何巧用分布函数percent_rank()剔除极值求均值
    场景描述前期写过一篇关于剔除订单极值求订单均值的案例,之前使用的是 dense_rank 函数对订单金额进行排序后,过滤掉最大值最小值后进行处理,最近工作刚好使用到分布函数percent_rank,想起来应该也可以用到这个场景;percent_rank()简介percent_rank()函数为分布函数,用于返回某个......
  • 巧用spt_values解决SQL中的连续日期问题
    spt_values是什么spt_values是SQLServer系统数据库master下中的一个表,表里面都是一些枚举数据。我们可以通过如下查询语句来查看里面的数据select*frommaster..spt_values spt_values连续记录但是通常我们使用的是Type='P'的数据记录,这些记录是一组从0开始,2047为止的......
  • 巧用ChatGPT编写万字长文的论文,纯干货实操
    文/ 韩彬 用ChatGPT写文章属于它的基本操作了,现在我们看看如何使用ChatGPT编写论文级的文章。 论文的编写步骤通常有这四步: 1、定主题 2、写提纲 3、填内容 4、改标题(可选项) 这几点其实可以运用于我们对ChatGPT的操作。 这里面有个小技巧,建议你先用英文......
  • 巧用rpmbuild的expand宏实现模板功能
    需求:构建生成的二进制包的个数不确定,由某些条件决定。比如,我们想为系统中的所有内核版本构建某个外来模块,如果系统中有2个内核版本,就生成两个2个二进制包,分别对应相应的版本,如果系统中有3个内核版本,就生成3个二进制包。我们的需求是实现动态个数的%package。很多人在讨论spec是......
  • cdn详细知识
    CDN技术详解“第一公里”是指万维网流量向用户传送的第一个出口,是网站服务器接入互联网的链路所能提供的带宽。这个带宽决定了一个网站能为用户提供的访问速度和并发访问量......