启动优化

启动过程中的耗时操作分析

1. 资源解压

仅首次安装,通过控制台输出的下方日志,可以判定解压用时;

影响因素为rope资源的大小和设备的性能。

SW Trace: 2021/02/04 07:44:13.172306 repo.go:315: Extracting d8edff5f40be6f47088a7a8b32cee50cbfa198a8a845bc188970b120699a4ffd.dat:
SW Trace: 2021/02/04 07:44:13.174820 repo.go:315: Extracting d8f0b99b4d2195c1e84a021316f5b22f4e04b4e48c7783c15de5d8305d635797.dat:
SW Trace: 2021/02/04 07:44:13.177761 repo.go:315: Extracting d90154415125c5afb96196dbc56d37a4bc1ca318271806727cb398d0a191ebef.dat:
SW Trace: 2021/02/04 07:44:13.180605 repo.go:315: Extracting d901682cb61e29128322f8d760f9c7fbe84919380454cd968610075c6d3df6fb.dat:

解决方法:

原目录下repo_main.dat更改为repo_main.zip,解压生成repo_main文件夹,修改repo_main文件夹名字为main,同时删除repo_main.dat/repo_main.zip。

2. 获取资源发布的centrol.dat/rope.dat

可以在日志中搜索关键字,查看响应状态。默认请求失败会有弹窗提示(可自定义)。

3. 客户端的优化方案

基于解压和请求的用时,需要客户端添加过渡页,优化体验

   //1.在MADEngine 初始化前在window层添加过渡页;
    UIView *loadingView = [UIView new];
    [self.window addSubview:loadingView];
    //2.在madp_statue_finish中移除过渡页
    MADSingleClass.getInstance.madp_statue_finish = ^(id q) {
        [loadingView removeFromSuperview];
    };

自定义闪屏

为了提高首页的响应速度,采用原生实现的自定义闪屏方案

1 原生自定义实现

在MADEngine初始化前,实现customerSplash。

    MADSingleClass.getInstance.customerSplash = ^id(MADContext *context, NSInteger seconds, NSString *imageUrl, NSString *stageUrl) {
         //自定义view
         UIView *customerView = [[UIView alloc]init];
         // context 容器上下文
         // seconds == x-splashSeconds
         // imageUrl == x-splashImgUrl
         // stageUrl == x-splashStageUrl
         
         //获取图片资源
         [MADSingleClass.getInstance downLoadImg:[context getMappedUrl:imageUrl] type:@"weex" callBack:^(UIImage *img, NSInteger code) {
             //
         }];
         
         //需要移除时
        [customerView.superview removeFromSuperview];
         return customerView;
     };       

2 后管配置

启动链设置为导航栏(page_launcher),并在导航栏(page_launcher)场景上设置以下场景参数:

key value desc
x-splash yes 闪屏开关
x-splashSeconds 3 倒计时秒数,例如:3
x-splashImgUrl ../weex/imgs/splash.png 闪屏图片路径,例如:../weex/imgs/splash.png
x-splashStageUrl http://www.baidu.com 闪屏图片点击事件跳转的外链url,例如:http://www.baidu.com
x-fullscreen yes 全屏开关

注:

1、 目前闪屏页只支持weex页面配置,暂不支持web页面;

2、 文档代码为示例代码,应用层可使用原生自定义ui;

3、 需要项目组视情况调整闪屏页逻辑(如:点击广告图跳转场景或外链等)。

场景优化

占位图/骨架图/小程序窗口 三种效果

占位图

有加载本地图片与服务端图片的区别,不设置宽高默认为与容器等宽高

key vlue desc
x-placeholderImageName onloading.gif 使用本地应用层assets文件夹下的图片(不能热更新)
x-placeholderImage ./weex/imgs/onloading.gif 使用后管中相对路径下的图片 (能热更新)
x-placeholderImageWidth 80 ImageWidth
x-placeholderImageHeight 80 ImageHeight

骨架图

有背景色的等容器宽高的图片

key vlue desc
x-backgroundColor #F3F3F3 背景色(默认#F3F3F3)
x-skeletonImage ./weex/imgs/onloading.gif 使用后管中相对路径下的图片 (能热更新)

小程序窗口

仿照小程序的组件

在需要配置右上角关闭按钮的场景中配置以下场景参数即可

key value desc
x-rightButton yes 右上角关闭按钮开关,yes:显示按钮,no:不显示按钮
x-closeImageBackgroundResourceName close 右上角关闭按钮图片,例:close;支持将图片放入后管中,例如:./weex/imgs/close.png

注:可不配置x-closeImageBackgroundResourceName参数,只配置x-rightButton:yes,图片会显示sdk中默认配置的关闭按钮图片。

自定义实现替换产品中小程序组件 在MADEngine初始化前实现

   MADSingleClass.getInstance.customerLoadingTop = ^id(MADContext *context) {
      
        UIView *topview = [[UIView alloc]init];
        
        return topview;
    };

Web场景的进度条

在后管中的web场景下配置以下场景参数即可(仅对已配置的web场景生效)

key value desc
x-progressBar yes 进度条开关,yes:显示进度条,no:不显示进度条
x-progressBarHeight 4 进度条高度,默认4像素
x-progressBarBgColor #000000 进度条底色,例如:#000000
x-progressBarPgColor #F3F3F3 进度条已加载部分颜色,例如:#F3F3F3
x-progressBarY 0 进度条y轴位置,默认(刘海屏 44/普通屏 20),自定义需要设置大于0的值(比如:0.0001)

也可在repo.json中进行以上这些参数的全局配置(对所有web场景均生效)

"defaultprogress_rules" : {
    "x-progressBar" : "yes",
    "x-progressBarHeight" : "4",
    "x-progressBarBgColor" : "#000000",
    "x-progressBarPgColor" : "#F3F3F3",
}

自定义注册表路径

自定义注册表路径,必须在初始化方法之前

  • 拖放注册表文件到主工程目录下
  • 在初始化方法之前获取注册表路径,并设置到MADEngine
//获取注册表路径
NSString *path = [[NSBundle mainBundle]pathForResource:@"registry" ofType:@"dat"];
//设置路径到MADEngine
[MADEngine setRegistryPath:path];

//初始化MADEngine
[MADEngine initEnvironmentWithLogLevel:level callback:^{

}];

网络环境异常时,应用启动优化

弱网或断网状态下资源更新失败重新获取资源或加载本地资源API

在MADSingleClass类的madp_statue_get_source_error回调方法中,实现接口。根据应用层弹窗选择条件决定使用哪种API

    //资源加载失败
    MADSingleClass.getInstance.madp_statue_get_source_error = ^(id status) {
        //根据业务需求应用层弹框提示资源,选择API
        //参考:应用层自行实现Alert
        [[AlertView sharedInstance] showAlertViewWithTitle:@"提示" message:@"网络异常,请检查您的网络设置" sureButtonTitle:@"确定" sureClock:^{
                [MADEngine workerContinue];
        }];
        //重新加载资源
        //[MADEngine reloadSource]
        //网络异常,请检查您的网络设置,稍后重试。
        //退出app
        //exit(0);
        //使用本地资源
        //[MADEngine workerContinue];
    }