CN109408142A - 基于jsbundle实现H5页面高性能安全加载的方法 - Google Patents

Abstract

本发明公开了一种基于jsbundle实现H5页面高性能安全加载的方法，包括：当接收到应用启动指令时，启动应用程序；开启线程池，创建若干个与安全交互平台的安全连接；通过上述各安全连接与发送请求；当接收到Activity启动指令时，启动Activity；调用loadApp方法加载预定数据；判断ReactActivity是否存在，若存在，加载所述ReactActivity，若不存在，重新创建ReactActivity；创建ReactRootView，并将其加载至缓存，完成加载。本发明利用jsbundle技术裁剪RN框架，优化了加载算法，提升了安卓系统activity与H5之间加载的效率问题，有效的解决了白屏等问题。

Description

基于jsbundle实现H5页面高性能安全加载的方法

技术领域

本发明属于软件领域，尤其是一种页面加载技术。

背景技术

现有技术通过开发H5页面，客户端通过webview进行加载H5页面，同时经过安全交互平台时，所有请求由安全交互平台进行转发，由于安全交互平台本身是单线程的，导致当前状态下，只能有一个请求会被处理，其他请求均处于等待状态，这样导致系统页面加载非常缓慢，常常会出现白屏问题，极大地影响用户的使用体验。

为此，技术人员进行了多方面的探索，一种做法是每次从数据库中查询相关数据，这种做法消耗资源比较大，效率也不高；另一种做法是将页面静态化，但这样会导致后台数据修改时，需要对整个页面进行修改，生成新的页面需要花费大量时间；因此，目前并没有很好的解决方案。

发明内容

发明目的：提供一种基于jsbundle实现H5页面高性能安全加载的方法，以使系统页面的加载更为顺畅。

技术方案：基于jsbundle实现H5页面高性能安全加载的方法，包括：

S1、当接收到应用启动指令时，启动应用程序；开启线程池，创建若干个与安全交互平台的安全连接；通过上述各安全连接与发送请求；

S2、当接收到Activity启动指令时，启动Activity；调用loadApp方法加载预定数据；

S3、判断ReactActivity是否存在，若存在，加载所述ReactActivity，若不存在，重新创建ReactActivity；

S4、创建ReactRootView，并将其加载至缓存，完成加载。

根据本发明的一个方面：还包括位于步骤S1之前的步骤S0：

步骤S0、对应用的框架部分和业务模块部分进行拆分及打包：

创建至少一个空工程，构建入口JS文件，打包该入口JS文件，生成name1.js；构建业务工程模块并打包，生成name2.js；待收到应用启动指令时，将name1.js和name2.js合并在一起。

在另一实施例中，根据本发明的一个方面：还包括在步骤S1和步骤S2之间的步骤S11：

步骤S11、记录各个模块名及模块id之间的mapping关系；当接收到业务模块打包指令时，判断各模块是否在mapping文件中，若不在其中，则将其打包至业务模块中；

构建一具有空白页面的模块，用于监听预启动应用程序的业务JS模块，当其收到监听指令后，在进入业务RN页面时，获取已经加载后的JS引擎，发送消息给所述具有空白页面的模块，通过该具有空白页面的模块渲染业务JS模块。

根据本发明的一个方面：还包括在步骤S1和步骤S2之间的步骤S12：

步骤S12、创建根视图容器和启动屏布局视图，将所述启动屏布局视图读入内存，依序添加根视图容器和启动屏布局视图，并将根视图容器与Activity绑定；在步骤S2中接收到Activity启动指令时，启动根视图容器与启动屏布局视图。

根据本发明的一个方面：所述入口JS文件打包的过程包括：加载打包需要的各个模块；创建client；通过调用outputBundle进行打包，然后将打包后的bundle文件返回；分析打包后的模块，将符合条件的模块加到bundle文件中，生成新的bundle文件；调用ReactPackager.getDependencies找到每个模块的依赖，在过滤的时调用过滤模块的依赖，依次递归；对所述新的bundle文件的各模块进行合并和替换处理，生成最终bundle文件。

根据本发明的一个方面：还包括：

步骤S5、计算各步骤的耗时并优化各步骤的耗时：

计算RN上下文初始化耗时和首屏视图渲染耗时，其中首屏视图渲染耗时为compontDidUpdate与compontWillMount之间的时间差；

RN上下文初始化优化：当接收到应用启动指令，启动应用程序时，随即进行RN初始化，与应用程序异步进行；

首屏视图渲染优化：缓存部分请求数据，在渲染界面视图时，首先使用缓存数据渲染视图，同时发起网络请求，数据返回时再以新的数据渲染一遍。

根据本发明的一个方面：所述步骤S5还包括：

对组件进行轮播，在请求的返回结果中，读取轮播图集合，依次生成全部图片视图，并添加至轮播图容器视图中，最后监听容器视图的对应事件，设置当前显示的图片视图。

根据本发明的一个方面：所述步骤S5还包括：

在初始时，将列表项视图渲染为预定尺寸的空视图，待所有空视图渲染完成后，获取视图在容器中相对位置，仅将可视区域内的列表项用真实视图重新渲染；同时监听列表容器的滚动事件，在滚动事件回调中，计算视图在容器中的相对位置，当视图进入了可视区域时，再用真实视图替换空视图。

有益效果：本发明利用jsbundle技术裁剪RN框架，优化加载算法，提升了安卓系统activity与H5页面之间加载的效率问题，有效的解决了白屏等问题；在处理加载速度和系统资源占用等方面均有很好的表现。

附图说明

图1是安卓activity与H5之间加载流程图。

图2是创建连接关系的流程图。

具体实施方式

在目前的移动应用开发中，webkit加载H5页面存在卡顿现象比较明显，其次，在接入安全交互平台时，由于安全交互平台的瓶颈，存在网络请求排队，导致系统页面加载缓慢的问题。为此，申请人进行了深入地研究，提出了如下的解决方案。

如图1和图2所示，本发明的实施例一种，该基于jsbundle实现H5页面高性能安全加载的方法，主要包括：

S1、当接收到应用启动指令时，启动应用程序；开启线程池，创建若干个与安全交互平台的安全连接；通过上述各安全连接与发送请求；

S2、当接收到Activity启动指令时，启动Activity；调用loadApp方法加载预定数据；

S3、判断ReactActivity是否存在，若存在，加载所述ReactActivity，若不存在，重新创建ReactActivity；

S4、创建ReactRootView，并将其加载至缓存，完成加载。

该实施例利用jsbundle技术裁剪RN框架，优化加载算法，提升了安卓系统activity与H5之间加载的效率问题，有效的解决了白屏等问题。

在本发明的另一实施例中，还包括如下步骤：

步骤S0、对应用的框架部分和业务模块部分进行拆分及打包：

创建至少一个空工程，构建入口JS文件，打包该入口JS文件，生成name1.js；构建业务工程模块并打包，生成name2.js；待收到应用启动指令时，将name1.js和name2.js合并在一起。

在该实施例中，通过模块的拆分和组合，在使用的时候组合，然后加载，能够提高加载效率，同时该方案简单，无侵入，实现成本低。

在本发明的另一实施例中，还包括如下步骤：

在步骤S1和步骤S2之间的步骤S11：

步骤S11、记录各个模块名及模块id之间的mapping关系；当接收到业务模块打包指令时，判断各模块是否在mapping文件中，若不在其中，则将其打包至业务模块中；

构建一具有空白页面的模块，用于监听预启动应用程序的业务JS模块，当其收到监听指令后，在进入业务RN页面时，获取已经加载后的JS引擎，发送消息给所述具有空白页面的模块，通过该具有空白页面的模块渲染业务JS模块。

在该实施例中，通过分析RN(react native)框架文件的特点，对占比较大的文件进行预加载，在进入特定业务时，只需加载执行业务的若干JS文件，从而大幅度提高了页面记载速度。

在另一实施例中，还可以采用如下方案解决：

在步骤S1和步骤S2之间的步骤S12：

步骤S12、创建根视图容器和启动屏布局视图，将所述启动屏布局视图读入内存，依序添加根视图容器和启动屏布局视图，并将根视图容器与Activity绑定；在步骤S2中接收到Activity启动指令时，启动根视图容器与启动屏布局视图。

通过启动屏布局视图进行过渡，为后续真正业务模块的加载提供一定的时间，该方案占用资源较少，实现较为容易。

在进一步的实施例中，所述入口JS文件打包的过程包括：加载打包需要的各个模块；创建client；通过调用outputBundle进行打包，然后将打包后的bundle文件返回；分析打包后的模块，将符合条件的模块加到bundle文件中，生成新的bundle文件；调用ReactPackager.getDependencies找到每个模块的依赖，在过滤的时调用过滤模块的依赖，依次递归；对所述新的bundle文件的各模块进行合并和替换处理，生成最终bundle文件。

通过对JS文件打包过程进行优化，提高了加载效率，降低了资源使用。

在进一步的实施例中，

步骤S5、计算各步骤的耗时并优化各步骤的耗时：

计算RN上下文初始化耗时和首屏视图渲染耗时，其中首屏视图渲染耗时为compontDidUpdate与compontWillMount之间的时间差；

RN上下文初始化优化：当接收到应用启动指令，启动应用程序时，随即进行RN初始化，与应用程序异步进行；

首屏视图渲染优化：缓存部分请求数据，在渲染界面视图时，首先使用缓存数据渲染视图，同时发起网络请求，数据返回时再以新的数据渲染一遍。

对组件进行轮播，在请求的返回结果中，读取轮播图集合，依次生成全部图片视图，并添加至轮播图容器视图中，最后监听容器视图的对应事件，设置当前显示的图片视图。

在初始时，将列表项视图渲染为预定尺寸的空视图，待所有空视图渲染完成后，获取视图在容器中相对位置，仅将可视区域内的列表项用真实视图重新渲染；同时监听列表容器的滚动事件，在滚动事件回调中，计算视图在容器中的相对位置，当视图进入了可视区域时，再用真实视图替换空视图。

在布局事件完成后，获取视图在容器内的相对位置，监听滚动视图的滚动事件，判断视图距离可视区域的位置以决定是否渲染该视图；给视图的渲染设置一个提前阈值，当视图距离可视区域达到该阈值时，提前渲染该视图。

在首屏渲染时，将热门页面渲染为空视图，再将阈值调大，使得空视图落在阈值区域范围内，接着异步地计算该空视图在容器中位置，并将热门页面真实视图渲染出来。

总之，在本发明中，在安卓activity加载H5之前，提前渲染好H5页面，这样保证activity能够平滑的加载H5页面，很快地将H5页面显示出来，同时，在页面端优化了网络请求的算法，利用多线程的方式，与安全交互平台多次建立连接，解决了安全交互平台本身单线程，多请求需要排队等待的状态的问题。

需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。

Claims (8)

1.基于jsbundle实现H5页面高性能安全加载的方法，其特征在于，包括：

S1、当接收到应用启动指令时，启动应用程序；开启线程池，创建若干个与安全交互平台的安全连接；通过上述各安全连接与发送请求；

S2、当接收到Activity启动指令时，启动Activity；调用loadApp方法加载预定数据；

S3、判断ReactActivity是否存在，若存在，加载所述ReactActivity，若不存在，重新创建ReactActivity；

S4、创建ReactRootView，并将其加载至缓存，完成加载。

2.根据权利要求1所述的基于jsbundle实现H5页面高性能安全加载的方法，其特征在于，还包括位于步骤S1之前的步骤S0：

步骤S0、对应用的框架部分和业务模块部分进行拆分及打包：

创建至少一个空工程，构建入口JS文件，打包该入口JS文件，生成name1.js；构建业务工程模块并打包，生成name2.js；待收到应用启动指令时，将name1.js和name2.js合并在一起。

3.根据权利要求1所述的基于jsbundle实现H5页面高性能安全加载的方法，其特征在于，还包括在步骤S1和步骤S2之间的步骤S11：

步骤S11、记录各个模块名及模块id之间的mapping关系；当接收到业务模块打包指令时，判断各模块是否在mapping文件中，若不在其中，则将其打包至业务模块中；

构建一具有空白页面的模块，用于监听预启动应用程序的业务JS模块，当其收到监听指令后，在进入业务RN页面时，获取已经加载后的JS引擎，发送消息给所述具有空白页面的模块，通过该具有空白页面的模块渲染业务JS模块。

4.根据权利要求1所述的基于jsbundle实现H5页面高性能安全加载的方法，其特征在于，还包括在步骤S1和步骤S2之间的步骤S12：

步骤S12、创建根视图容器和启动屏布局视图，将所述启动屏布局视图读入内存，依序添加根视图容器和启动屏布局视图，并将根视图容器与Activity绑定；在步骤S2中接收到Activity启动指令时，启动根视图容器与启动屏布局视图。

5.根据权利要求2所述的基于jsbundle实现H5页面高性能安全加载的方法，其特征在于，所述入口JS文件打包的过程包括：加载打包需要的各个模块；创建client；通过调用outputBundle进行打包，然后将打包后的bundle文件返回；分析打包后的模块，将符合条件的模块加到bundle文件中，生成新的bundle文件；调用ReactPackager.getDependencies找到每个模块的依赖，在过滤的时调用过滤模块的依赖，依次递归；对所述新的bundle文件的各模块进行合并和替换处理，生成最终bundle文件。

6.根据权利要求1所述的基于jsbundle实现H5页面高性能安全加载的方法，其特征在于，还包括：

步骤S5、计算各步骤的耗时并优化各步骤的耗时：

计算RN上下文初始化耗时和首屏视图渲染耗时，其中首屏视图渲染耗时为compontDidUpdate与compontWillMount之间的时间差；

RN上下文初始化优化：当接收到应用启动指令，启动应用程序时，随即进行RN初始化，与应用程序异步进行；

首屏视图渲染优化：缓存部分请求数据，在渲染界面视图时，首先使用缓存数据渲染视图，同时发起网络请求，数据返回时再以新的数据渲染一遍。

7.根据权利要求6所述的基于jsbundle实现H5页面高性能安全加载的方法，其特征在于，所述步骤S5还包括：

对组件进行轮播，在请求的返回结果中，读取轮播图集合，依次生成全部图片视图，并添加至轮播图容器视图中，最后监听容器视图的对应事件，设置当前显示的图片视图。

8.根据权利要求7所述的基于jsbundle实现H5页面高性能安全加载的方法，其特征在于，所述步骤S5还包括：

在初始时，将列表项视图渲染为预定尺寸的空视图，待所有空视图渲染完成后，获取视图在容器中相对位置，仅将可视区域内的列表项用真实视图重新渲染；同时监听列表容器的滚动事件，在滚动事件回调中，计算视图在容器中的相对位置，当视图进入了可视区域时，再用真实视图替换空视图。