看完必恍然大悟的活字格内幕：三十三、性能问题教程五（静态页面预加载活字格资源）

卡卡

本帖最后由 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页面，代码如下：

<!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" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
</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>
<script src="/Resources/InputMan.js?v=636959371228736669"></script>
</body>
</html>

复制代码

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

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

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