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

活字,性能,优化,技巧,如何,巧用,cdn,提升,页面,访问速度 · 浏览次数 : 138

小编点评

## 优化活字格应用系统的 CDN 配置 本文介绍如何利用 CDN 技术提升活字格应用系统的访问速度。 **什么是 CDN?** CDN 是内容网络分发,它是通过在现有的互联网中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需内容的原则,提高用户访问网站的响应速度。 **CDN 的主要好处:** * 快速有效地交付内容 * 降低网络带宽使用量 * 提高用户访问速度 * 减少服务器端基础设施的负载 **如何利用 CDN 对活字格应用系统的影响?** 1. **选择原则:** - 选择离用户的网络边缘的服务器作为 CDN 的存储节点。 - 选择用户访问频率高且资源大小比较小的文件做 CDN。 2. **创建七牛云存储账号:** - 注册并进行实名认证 - 选择“申请个人认证”或“申请企业认证” - 上传文件到七牛云存储空间 3. **修改应用代码:** - 更改 index.html 文件,将特定资源的 CDN 外链替换为七牛云的链接。 - 在 Windows 系统服务中重启活字格服务 4. **验证 CDN 配置:** - 重新打开应用,检查用户访问速度是否明显提升 5. **根据需要,进一步优化 CDN 配置:** - 通过调整 CDN 的服务器设置和文件大小,优化其性能 **七牛云 CDN 配置指南:** * 获取七牛云存储空间的账号信息 * 创建存储空间 * 上传文件 * 设置 CDN 配置 * 测试 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原理图

 

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

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

本文由葡萄城技术团队于博客园原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 上两篇中我们分享了如何利用数据库主键和表格设置默认不加载数据来提升应用系统访问的性能。在本篇中一起来看看如何在活字格中利用CDN技术来提升页面的访问速度。在此之前,先看看

活字格性能优化技巧(1)——如何利用数据库主键提升访问性能

本文由葡萄城技术团队于博客园原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 大家都知道,活字格作为企业级低代码开发平台,拥有6大引擎,3大能力,能够高效落地企业级应用。在每年的应用大赛中也能看到很多格友利用活字格做了很多复杂的应用,例如2021年

活字格性能优化技巧(2)-如何在大规模数据量的场景下提升数据访问效率

本文由葡萄城技术团队于博客园原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 在上节内容中我们介绍了如何利用数据库主键提升访问性能,本节内容我们继续为大家介绍如何在大规模数据量的场景下提升数据访问效率。 在开始之前先做个小小的实验: 1. 准备一张

不只是负载均衡,活字格智能集群的架构与搭建方案

还在单机服务器,时刻面临宕机风险吗? 优化程度不够,响应速度缓慢,系统工作响应像老汉拉车吗? 为了帮助大家具备企业级应用的部署能力,轻松应对核心业务系统的部署要求,我们准备了《活字格智能集群的架构与搭建方案》高级教程。 作为一款优秀的企业级低代码开发平台,活字格除了本身开发集成的强大功能之外,负载均

万物皆可集成系列:低代码对接Web Service接口

我们知道活字格支持不写代码实现双向API绑定,那么没那么主流的Web Service接口(SOAP协议+XML交互格式)呢?其实对接的思路没有那么复杂,得用C#编码来对接的。 作为一款企业级低代码开发平台,活字格可以和许多第三方软硬件进行集成,灵活、高效使它不可忽视的优势。在之前的内容中我们已经介绍

远离勒索病毒,如何在Linux上安装活字格低代码服务管理器?

本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 活字格低代码开发平台由可视化设计器和服务管理器构成,开发者使用设计器构建Web应用,测试无误后即可将应用进行打包,并发布到服务管理器上。服务管理器会加载设计器发布的应用

ChatGPT赋能低代码开发:打造智能应用的双重引擎

摘要:本文摘自葡萄城低代码产品活字格的资深用户(格友超哥)所撰写的文章:《惊叹表现!活字格+ChatGPT:低代码开发智能应用的巨大潜力》。 ChatGPT的functions函数使用方 自从OPENAI发布了最新的GPT引擎gpt-3.5-turbo-0613之后,我就对它的functions参数

万物皆可集成系列:低代码对接阿里物流API实现快递跟踪

随着各大电商网购平台的发展,快递业已形成一个规模庞大的产业,据统计,全球快递企业已超过千家,而快递查询对于电商平台而言是最基础的功能之一,通过输入快递单号,不用区分具体是哪家快递公司,即可查询到快递的实时状态。目前的主流方法都是调用第三方快递查询接口,下面就介绍一下在活字格中如何调用API接口来进行

集群部署看过来,低代码@AWS智能集群的架构与搭建方案

为了帮助充分利用AWS的托管服务快速构建起一套集群环境,彻底去掉“单一故障点”,实现最高的可用性,我们准备了**《低代码智能集群@AWS的架构与搭建方案》**看完本文,带你掌握“基于nginx配置服务器集群”。 应用场景 如果你需要解决如下的问题,可以考虑搭建一套活字格@AWS智能集群: 保障系统高

[转帖]3.3.6. 活跃会话历史报告SYS_KSH

https://help.kingbase.com.cn/v8/perfor/performance-optimization/performance-optimization-6.html#sys-ksh sys_stat_activity 里记录的等待事件是瞬时信息,没有对等待事件的时间进行累计