本帖最后由 Eric.Liang 于 2019-6-25 15:28 编辑
很多朋友在说我们的在页面打开的时候要加载很多活字格内置的JS和CSS,有可能会遇到的性能问题,前两节课有讲过可以通过CDN加速将这些资源快速的加载,但是在实际情况中,如果是移动端,网络很慢,无论是否做CDN,都会影响活字格页面的加载速度,这里我在此使用几个小实验跟大家做一个整理总结。
活字格实验室开课了~~~
首先,我们做一下小实验:
1.使用活字格设计器随便创建一个页面,打开浏览器Debug,修改为slow 3G,F5预览看下页面加载效果,单纯的一个手机页面需要加载30S左右。
由此可见,其实资源在移动网络很慢的情况下加载确实比较慢。
2.至于这个问题应该怎么避开呢,有客户给我们提供了思路。我们可以先做一个静态页面,让页面先显示出来,再异步在该静态页面中去加载活字格的资源。保证用户在打开手机页面的时候不会受到影响,在静态页面中添加一个超链接跳转活字格的手机页面。(该方式的原型是集成微信公众号,这样客户用微信浏览器扫码访问静态页面,再跳转活字格的手机页面,因为是微信集成,不需要重新登录,就可以正常访问)
需要加载的资源见下图
创建一个静态HTML页面,代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>首页</title>
- <meta name="viewport" content="width=device-width" />
- <meta charset="utf-8" />
- <link href="#PathBase#/GeneratedResources/favicon.ico?v=635294654301333692" rel="shortcut icon" type="image/x-icon" />
- <link href="#PathBase#/Resources/forguncycss-loader.css" rel="stylesheet" />
- <!--Debug-->
- <meta http-equiv="Pragma" content="no-cache">
- <meta http-equiv="Expires" content="-1">
- <!--/Debug-->
- </head>
- <body>
- <h1>静态HTML页面</h1>
- <a href="http://localhost:40168/">跳转活字格手机页面</a>
- <script src="/Resources/Scripts/JQuery/jquery-3.2.1.min.js?v=636959371228736669"></script>
- <script src="/Resources/Storage.js?v=636959371228736669"></script>
- <script src="/Resources/MetadataLoader.js?v=636959371228736669"></script>
- <script src="/Resources/Scripts/ECharts/echarts.min.js?v=636959371228736669"></script>
- <script src="/Resources/Scripts/JSEncrypt/jsencrypt.min.js?v=636959371228736669"></script>
- <script src="/Resources/Scripts/Simplebar/simplebar.js?v=636959371228736669"></script>
- <link href="/Resources/Forguncy.css?v=636959371228736669" rel="stylesheet" />
- <script src="/Resources/Spread.js?v=636959371228736669"></script>
- <script src="/Resources/Forguncy.js?v=636959371228736669"></script>
- <!--PC-->
- <script src="/Resources/InputMan.js?v=636959371228736669"></script>
- </body>
- </html>
复制代码
将该页面放到活字格工程文件的资源文件夹中。
此时我们手机二维码扫码访问的链接就不是活字格的应用链接了
如果是设计器:http://localhost:40618/GeneratedResources/UserFile/index.html
如果是服务器:http://域名/应用名/GeneratedResources/UserFile/index.html
让我们一起看下slow 3G网络 访问静态页面的效果,虽然资源加载速度没有提升,但是页面会先显示出来,资源会异步加载,并不影响静态页面。
静态页面跳转活字格页面,因为资源已经被加载过一次,此时资源都是获取缓存资源,不占用时间。
通过静态页面的处理,就可以让网络不好的用户体验更好,有没有很兴奋呢~大家学会了么
当然,资源我们也可以在静态页面的基础上配合CDN去使用,效果会更好。
附件参考这里:
静态JS.fgcc
(86.76 KB, 下载次数: 612)
|
|