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

这篇具有很好参考价值的文章主要介绍了活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

 文章来源地址https://www.toymoban.com/news/detail-409349.html

上两篇中我们分享了如何利用数据库主键表格设置默认不加载数据来提升应用系统访问的性能。在本篇中一起来看看如何在活字格中利用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提升含页面的访问速度


在浏览器中就可以看到如下所示的内容:
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

为了更方便的操作,请这样设置一下
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

这样,就可以进行全屏展示了。
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

接下来找到所有请求的详细信息,按照从大到小进行排序
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

为了让访问更加高效,挑选其中几个比较大的文件做CDN。如下图所示,挑选前4个文件。
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

通过右键【另存为】将文件存储下来。
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

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

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

 

 

注册完了之后需要先进行实名认证,可以根据需要选择【申请个人认证】或【申请企业认证】,审核通过之后就可以正式使用了。
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

进入【对象存储】
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

点击【新建存储空间】,起一个名字比如,test。
 活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

进入后点击【内容管理】
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

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

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

 

 

上传之后的效果如下:
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

点击【复制外链】,并将这些外链保存起来。
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

获取到的外链如下:

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

 

 

至此 ,就完成七牛云的设置以及相关文件的保存。
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提升含页面的访问速度

为了避免异常,可提前将该文件进行备份。
用记事本打开index.html文件,将上述提到的4个文件搜索出来,并使用七牛云的链接进行替换。
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

并使用七牛云的连接替换掉
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

确认修改完之后,保存文件,并在windows系统服务内重启活字格服务。
活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度

 

 

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

更多参考:

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

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

 

到了这里,关于活字格性能优化技巧(3):如何巧用CDN提升含页面的访问速度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【建议收藏】新到手的电脑Windows10/11系统优化、使用规范和技巧及软件推荐,提升范电脑性能和体验

    目录 一、了解电脑 1. 查看电脑和系统的基本信息  2. 电脑测评 二 、Windows10/11系统优化及设置 1. 控制面板、回收站等桌面图标显示设置 2. 任务栏管理 3. 桌面图标排列 4. 卸载程序 5. 关闭P2P分享(传递优化) 6. 电设置脑为高性能 7.  删除存储中的临时文件 8. 磁盘清理 9.

    2024年02月12日
    浏览(66)
  • Elasticsearch 8.X DSL 如何优化更有助于提升检索性能?

    根据我的实战和咨询经验,我发现如下几个问题。 当然,这是在和球友交流确认问题之后总结出来的。 2.1 问题1:bool 组合嵌套过深。 官方实际是有参数来约束的,indices.query.bool.max_nested_depth——bool 最大支持的嵌套层数是 20 ,并且过大的嵌套层数会导致“堆栈溢出”异常问

    2024年02月16日
    浏览(49)
  • 游戏性能优化指南:如何最大程度提升Unity游戏的帧率和流畅度

    FPS (Frames per Second):显示当前游戏帧率。帧率越高,游戏画面越流畅。为提高帧率,可减少游戏对象数量、优化渲染方式等。 Draw Calls :显示当前帧需要渲染的次数。过多的Draw Calls会导致游戏运行缓慢。降低此指标可通过优化场景、材质或使用批处理技术等方式。 Tris :显

    2024年02月06日
    浏览(88)
  • 理解React页面渲染原理,如何优化React性能?

    当使用React编写应用程序时,可以使用JSX语法来描述用户界面的结构。JSX是一种类似于HTML的语法,但实际上它是一种JavaScript的扩展,用于定义React元素。React元素描述了我们想要在界面上看到的内容和结构。 在运行React应用程序时,JSX会被转换成真实的DOM元素,这个过程主要

    2024年02月08日
    浏览(45)
  • uniapp小程序如何通过虚拟列表配合节流,完成上拉刷新下拉加载,避免页面卡顿,提升性能呢?

    本文将介绍uniapp小程序中如何使用虚拟列表和节流两种技术实现上拉刷新下拉加载功能,同时避免因渲染大量数据导致的页面卡顿问题。 一、虚拟列表 在uniapp小程序开发中,当我们需要渲染大量列表数据时,很容易出现页面卡顿现象。这时候,我们可以使用虚拟列表技术来

    2024年02月11日
    浏览(47)
  • 前端项目中CDN的一些问题【性能优化篇】

    CDN(Content Delivery NetWork, 内容分发网络 ),是指 利用最靠近每位用户的服务区 ,更快的将资源发送给用户。 提高用户的访问速度 减轻服务器压力 提高网站的稳定性和安全性 CDN一般用来托管Web资源(文本、图片和视频等),可供下载的资源,应用程序。使用CDN来加速这些

    2024年02月03日
    浏览(49)
  • 【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积

    CDN (Content Delivery Network)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术。CDN加速的原理是,当用户请求访问某个资源时, CDN会根据用户的地理位置和网络状况,自动选择离用户最近的服务器来响应请求 。如果该服务器上已经缓存了

    2024年02月03日
    浏览(55)
  • 前端面试:【性能优化】前端缓存、CDN、懒加载和预加载

    亲爱的前端开发者,Web性能对用户体验至关重要。如果你想让你的网站更快、更具吸引力,就需要关注前端性能优化。在这篇文章中,我们将深入探讨四个关键的性能优化策略:前端缓存、CDN(内容分发网络)、懒加载和预加载,以助你构建高性能的Web应用。 1. 前端缓存:优

    2024年02月11日
    浏览(53)
  • 矩阵分析技巧:提升人工智能性能

    随着人工智能(AI)技术的不断发展,数据量的增长和复杂性也随之增加。为了更有效地处理这些大规模的数据,矩阵分析技巧在人工智能领域的应用越来越广泛。矩阵分析是一种数学方法,它可以帮助我们更好地理解和处理大规模的数据集。在这篇文章中,我们将讨论矩阵分析

    2024年02月20日
    浏览(88)
  • vite+vue3+ts搭建项目八(打包性能优化三:使用CDN)

    使用vite-plugin-cdn-import 下载npm包 官方github:https://github.com/MMF-FE/vite-plugin-cdn-import 开发环境使用本地的npm包,cdn是打包时候才生效 在vite.config.ts中通过importToCDN引入 注意事项 :网上很多教程,还需要在 build 的 rollupOptions 添加对应的 external ,如上注释所示,其实是不需要的,

    2024年02月02日
    浏览(102)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包