请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Eric.Liang 讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2019-6-25 15:16  /   查看:6109  /  回复:0
本帖最后由 Eric.Liang 于 2019-6-25 15:28 编辑

很多朋友在说我们的在页面打开的时候要加载很多活字格内置的JS和CSS,有可能会遇到的性能问题,前两节课有讲过可以通过CDN加速将这些资源快速的加载,但是在实际情况中,如果是移动端,网络很慢,无论是否做CDN,都会影响活字格页面的加载速度,这里我在此使用几个小实验跟大家做一个整理总结。

活字格实验室开课了~~~
首先,我们做一下小实验:
1.使用活字格设计器随便创建一个页面,打开浏览器Debug,修改为slow 3G,F5预览看下页面加载效果,单纯的一个手机页面需要加载30S左右。
image.png764071349.png
由此可见,其实资源在移动网络很慢的情况下加载确实比较慢。

2.至于这个问题应该怎么避开呢,有客户给我们提供了思路。我们可以先做一个静态页面,让页面先显示出来,再异步在该静态页面中去加载活字格的资源。保证用户在打开手机页面的时候不会受到影响,在静态页面中添加一个超链接跳转活字格的手机页面。(该方式的原型是集成微信公众号,这样客户用微信浏览器扫码访问静态页面,再跳转活字格的手机页面,因为是微信集成,不需要重新登录,就可以正常访问)

需要加载的资源见下图
image.png287410277.png

创建一个静态HTML页面,代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5.     <title>首页</title>
  6.     <meta name="viewport" content="width=device-width" />
  7.     <meta charset="utf-8" />
  8.     <link href="#PathBase#/GeneratedResources/favicon.ico?v=635294654301333692" rel="shortcut icon" type="image/x-icon" />
  9.     <link href="#PathBase#/Resources/forguncycss-loader.css" rel="stylesheet" />
  10.     <!--Debug-->
  11.     <meta http-equiv="Pragma" content="no-cache">
  12.     <meta http-equiv="Expires" content="-1">
  13.     <!--/Debug-->
  14. </head>
  15. <body>
  16.     <h1>静态HTML页面</h1>
  17.     <a href="http://localhost:40168/">跳转活字格手机页面</a>
  18.     <script src="/Resources/Scripts/JQuery/jquery-3.2.1.min.js?v=636959371228736669"></script>
  19.     <script src="/Resources/Storage.js?v=636959371228736669"></script>
  20.     <script src="/Resources/MetadataLoader.js?v=636959371228736669"></script>
  21.     <script src="/Resources/Scripts/ECharts/echarts.min.js?v=636959371228736669"></script>
  22.     <script src="/Resources/Scripts/JSEncrypt/jsencrypt.min.js?v=636959371228736669"></script>
  23.     <script src="/Resources/Scripts/Simplebar/simplebar.js?v=636959371228736669"></script>
  24.     <link href="/Resources/Forguncy.css?v=636959371228736669" rel="stylesheet" />
  25.     <script src="/Resources/Spread.js?v=636959371228736669"></script>
  26.     <script src="/Resources/Forguncy.js?v=636959371228736669"></script>
  27.     <!--PC-->
  28.     <script src="/Resources/InputMan.js?v=636959371228736669"></script>
  29. </body>
  30. </html>
复制代码

将该页面放到活字格工程文件的资源文件夹中。
image.png964379577.png
image.png940813903.png

此时我们手机二维码扫码访问的链接就不是活字格的应用链接了
如果是设计器:http://localhost:40618/GeneratedResources/UserFile/index.html
如果是服务器:http://域名/应用名/GeneratedResources/UserFile/index.html

让我们一起看下slow 3G网络 访问静态页面的效果,虽然资源加载速度没有提升,但是页面会先显示出来,资源会异步加载,并不影响静态页面。
静态页面加载.gif

静态页面跳转活字格页面,因为资源已经被加载过一次,此时资源都是获取缓存资源,不占用时间。
静态页面跳转活字格页面.gif


通过静态页面的处理,就可以让网络不好的用户体验更好,有没有很兴奋呢~大家学会了么
当然,资源我们也可以在静态页面的基础上配合CDN去使用,效果会更好。

附件参考这里: 静态JS.fgcc (86.76 KB, 下载次数: 234)

评分

参与人数 1满意度 +5 收起 理由
卡卡 + 5

查看全部评分

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部