看完必恍然大悟的活字格内幕：三十三、性能问题教程五（静态页面预加载活字格资源）
本帖最后由 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网络 访问静态页面的效果，虽然资源加载速度没有提升，但是页面会先显示出来，资源会异步加载，并不影响静态页面。
静态页面跳转活字格页面，因为资源已经被加载过一次，此时资源都是获取缓存资源，不占用时间。
通过静态页面的处理，就可以让网络不好的用户体验更好，有没有很兴奋呢～大家学会了么:jy74a:
当然，资源我们也可以在静态页面的基础上配合CDN去使用，效果会更好。
附件参考这里：
页:
[1]