Web应用在便携式终端客户端中加载速度的优化方法及装置与流程

web应用在便携式终端客户端中加载速度的优化方法及装置
技术领域
1.本公开涉及一种web应用在便携式终端客户端中加载速度的优化方法，更具体地，涉及一种web应用在便携式终端客户端中加载速度的优化方法及装置。


背景技术：

2.web应用程序是一种可以通过web访问的应用程序。web应用程序的一个最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。一个web应用程序是由完成特定任务的各种web组件(web components)构成的，并通过web将服务展示给外界。在实际应用中，web应用程序是由多个servlet、js页面、html文件以及图像文件等组成。所有web组件相互协调为用户提供一组完整的服务。图1示出现有的web应用在手机客户端中的加载流程图，如图1所示，现有的web应用在手机客户端中的加载流程包括手机客户端创建webview容器，并进行webview容器的初始化；手机客户端向服务器发出网络请求，服务器返回html、css、js、图片等资源文件、手机客户端初始化web应用所用到的framework；web应用执行js，进行dom渲染。
3.现有的web应用在手机客户端中的整个加载流程，需要与服务器进行反复的请求，并下载资源文件，在这个过程中页面无法展示，用户无法操作且只能等待。如果网络情况不好或资源文件较多，白屏时间会较长。同时，现有技术大多是针对减少对资源文件的请求次数，或者减少资源文件的大小来优化web应用的加载速度。但是这些方法并没有解决依赖当前网络状况的问题，当网络状况较差时，web应用的加载速度依然较慢，用户的体验较差。


技术实现要素：

4.提供了本公开以解决现有技术中存在的上述问题。需要一种web应用在便携式终端客户端中加载速度的优化方法及装置，首先需要将资源文件本地化，web应用拉取html、css、js、图片等资源文件时只需要从本地获取，在网络情况不好或资源文件较多的情况下，避免了频繁的网络请求以拉取资源文件，缩短了web应用获取资源文件的时间。其次，在webview初始化的同时加载公共模块，实现了公共模块的同步加载，节省了web应用展示时加载公共资源的时间。最后，从容器池中取出webview容器的同时创建下一个webview容器，以备下次使用，缩短了白屏时间。
5.根据本公开的第一方案，提供一种web应用在便携式终端客户端中加载速度的优化方法，所述优化方法包括加载web应用的压缩包至便携式终端应用内部，所述web应用的压缩包中包含有资源文件；将所述web应用的公共模块与业务模块解耦；在webview容器初始化的同时，加载所述web应用的公共模块，最终获取用户所需的资源文件并展现。
6.在一些实施例中，所述加载web应用的压缩包至便携式终端应用内部包括获取所述web应用的压缩包；将所述web应用的压缩包内置进便携式终端应用的安装包中；安装所述便携式终端应用的安装包，以加载web应用的压缩包至便携式终端应用内部。
7.在一些实施例中，所述在webview容器初始化的同时，加载公共模块，最终获取用
户所需的资源文件并展现包括在便携式终端应用启动时创建webview容器；在创建webview容器的第一时间段后进行webview容器初始化，以及在创建webview的第一时间段后基于所述webview容器加载公共模块，并把加载有公共模块的webview容器缓存至容器池。
8.在一些实施例中，所述在webview容器初始化的同时，加载公共模块，最终获取用户所需的资源文件并展现进一步包括获取用户对web应用的请求；基于获取的所述用户对web应用的请求，从容器池中取出所述webview容器，并将web应用对应的业务模块注入webview容器；运行所述业务模块，得到用户所需的资源文件并展示。
9.在一些实施例中，从容器池中取出所述webview容器的同时，创建下一个webview容器。
10.在一些实施例中，所述便携式终端为手机。
11.根据本公开的第二方案，提供一种web应用在便携式终端客户端中加载速度的优化装置，所述优化装置包括加载模块，所述加载模块配置为加载web应用的压缩包至便携式终端应用内部，所述web应用的压缩包中包含有资源文件；解耦模块，所述解耦模块配置为将所述web应用的公共模块与业务模块解耦；获取模块，所述获取模块配置为在webview容器初始化的同时，加载所述web应用的公共模块，最终获取用户所需的资源文件并展现。
12.在一些实施例中，所述加载模块进一步配置为获取所述web应用的压缩包；将所述web应用的压缩包内置进便携式终端应用的安装包中；安装所述便携式终端应用的安装包，以加载web应用的压缩包至便携式终端应用内部。
13.在一些实施例中，所述获取模块进一步配置为在便携式终端应用启动时创建webview容器；在创建webview的第一时间段后进行webview初始化，以及在创建webview的第一时间段后基于所述webview容器加载公共模块，并把加载有公共模块的webview容器缓存至容器池。
14.在一些实施例中，所述获取模块进一步配置为获取用户对web应用的请求；基于获取的所述用户对web应用的请求，从容器池中取出所述webview容器，并将web应用对应的业务模块注入webview容器；运行所述业务模块，得到用户所需的资源文件并展示。
15.在一些实施例中，所述获取模块进一步配置为从容器池中取出所述webview容器的同时，创建下一个webview容器。
16.在一些实施例中，所述便携式终端为手机。
附图说明
17.在不一定按比例绘制的附图中，相同的附图标记可以在不同的视图中描述相似的部件。附图大体上通过举例而不是限制的方式示出各种实施例，并且与说明书以及权利要求书一起用于对所公开的实施例进行说明。在适当的时候，在所有附图中使用相同的附图标记指代同一或相似的部分。这样的实施例是例证性的，而并非旨在作为本装置或方法的穷尽或排他实施例。
18.图1示出现有的web应用在便携式终端客户端中的加载流程图。
19.图2示出根据本公开实施例的web应用在手机客户端中加载速度的优化方法流程图。
20.图3示出根据本公开实施例的基于本地加载实现的web应用在手机客户端中的加
载流程图。
21.图4示出根据本公开实施例的基于异步化实现的的web应用在手机客户端中的加载流程图。
22.图5示出根据本公开实施例的基于缓存化实现的的web应用在手机客户端中的加载流程图。
23.图6示出根据本公开实施例的web应用在便携式终端客户端中加载速度的优化装置的结构示意图。
具体实施方式
24.为使本领域技术人员更好的理解本公开的技术方案，下面结合附图和具体实施方式对本公开作详细说明。下面结合附图和具体实施例对本公开的实施例作进一步详细描述，但不作为对本公开的限定。本文中所描述的各个步骤，如果彼此之间没有前后关系的必要性，则本文中作为示例对其进行描述的次序不应视为限制，本领域技术人员应知道可以对其进行顺序调整，只要不破坏其彼此之间的逻辑性导致整个流程无法实现即可。
25.在一些实施例中，便携式终端可以是手机、ipad、用户携带的智能设备等，下述实施例中将以手机作为便携式终端展开详细描述，但深知本公开不限于此。
26.图2示出根据本公开实施例的web应用在手机客户端中加载速度的优化方法的流程示意图。在一些实施例中，如图2所示，优化方法始于步骤s101。
27.步骤s101.加载web应用的压缩包至手机应用内部，web应用的压缩包中包含有资源文件。在一些实施例中，加载web应用的压缩包至手机应用内部包括如下步骤：通过自动化流水线打包，获取web应用的压缩包；在手机应用打包时，将web应用的压缩包内置进手机应用的安装包中；在客户端安装所述手机应用的安装包，以加载web应用的压缩包至手机应用内部。具体的，每个手机应用都有一个系统分配的沙盒文件，所有的内置web应用都保存在该沙盒文件夹下的一个自定义的子目录下，其中，手机应用可以使手机上可以安装的手机app。此时也将资源文件加载至手机本地，后续需要获取资源文件时，只需要从手机本地加载即可。
28.步骤s102.将web应用的公共模块与业务模块解耦。在一些实施例中，web应用的公共模块能够实现web应用公共的一些功能，如加解密、js桥、前端ui库、跳转页面路由、vue前端框架、调试日志等等。在一些实施例中，业务模块指的是能够实现web应用的一些业务逻辑的模块，如framework、执行js、dom渲染等。在该步骤之前，web应用的公共模块与业务模块是一体化的，但是将web应用的公共模块与业务模块解耦之后，公共模块与业务模块两者可单独加载，从而实现公共模块的同步加载，缩短资源加载的时间。
29.基于上述步骤s102得到解耦后的公共模块和业务模块后，在webview容器初始化的同时，加载web应用的公共模块，最终获取用户所需的资源文件并展现，具体的实现步骤如下述流程所示。
30.步骤s103.判断手机应用是否启动，在手机应用启动的同时创建webview容器(如图2中的步骤s104)。在一些实施例中，可以先添加使用权限，接着创建webview容器实例，对webview容器进行基本设置，如设置互联网需要显示的网页或者设置本地文件需要显示的网页等等从而实现创建webview容器。在手机应用没有启动的情况下，不创建webview容器，
此时继续判断手机应用是否启动。在一些实施例中，在webview容器初始化的同时，加载公共模块，最终获取用户所需的资源文件并展现包括在便携式终端应用启动时创建webview容器；在创建webview容器的第一时间段后进行webview初始化，以及在创建webview的第一时间段后基于webview容器加载公共模块，并把加载有公共模块的webview容器缓存至容器池。
31.步骤s105.在创建webview容器的第一时间段后，开始webview容器初始化。在一些实施例中，创建webview容器的第一时间段基于手机系统、手机配置的高低来确定，不同的手机系统，或者手机配置的高低都会影响创建webview容器的第一时间段。
32.步骤s106.在创建webview容器的第一时间段后，利用该webview容器加载公共模块，并将加载有公共模块的webview容器缓存放入容器池中。也即在开始webview容器初始化的同时实现公共模块的加载，避免了先进行webview容器初始化继而加载公共模块造成的白屏时间较长的问题，缩短了白屏时间。
33.步骤s107.判断用户对web应用是否有请求，在用户对web应用没有请求的情况下，继续执行该步骤。在一些实施例中，用户对web应用是否有请求可以是用户是否点击该web应用。
34.步骤s108.在用户对web应用有请求的情况下，获取用户对web应用的请求，并根据获取的用户对web应用的请求，从容器池中取出webview容器，并将web应用对应的业务模块注入webview容器内。
35.步骤s109.运行业务模块，得到用户所需的资源文件并展示。在一些实施例中，运行业务模块也就是进行framework初始化、执行js和进行dom渲染的过程，在webview容器直接可以对用户所需的文件资源进行渲染，最后将用户所需的文件资源展现在页面上。在一些实施例中，在webview容器初始化的同时，加载公共模块，获取用户所需的资源文件并展现进一步包括获取用户对web应用的请求；基于获取的用户对web应用的请求，从容器池中取出webview容器，并将web应用对应的业务模块注入webview容器；运行业务模块，得到用户所需的资源文件并展示。在一些实施例中，从容器池中取出webview容器的同时，创建下一个webview容器，以备下次使用，使得用户在下次不再需要重新创建webview容器，只需要将已将创建好的webview容器直接拿来使用即可，有利于缩短web应用的加载时间，提高用户的体验。
36.图3示出根据本公开实施例的基于本地加载实现的web应用在手机客户端中的加载流程图。在一些实施例中，如图3所示，将用户所需的资源文件加载至手机本地后，web应用不再进行网络请求，web应用拉取html、css、js、图片等资源文件时只需要从本地获取，在网络情况不好或资源文件较多的情况下，避免了频繁的网络请求以拉取资源文件，缩短了web应用获取资源文件的时间。
37.图4示出根据本公开实施例的基于异步化实现的的web应用在手机客户端中的加载流程图。在一些实施例中，如图4所示，在开始webview容器初始化的同时实现公共模块的同步加载，避免了先进行webview容器初始化继而加载公共模块造成的白屏时间较长的问题，缩短了白屏时间。
38.图5示出根据本公开实施例的基于缓存化实现的的web应用在手机客户端中的加载流程图。在一些实施例中，如图5所示，由于第一次web应用的执行，webview容器创建、
webview容器初始化和framework初始化已经实现缓存化，后期web应用执行时，这些控件或者框架不再需要重复执行，因此在后期web应用中直接拿来使用即可，较大的缩短了白屏的时间，提高了用户体验。
39.图6示出根据本公开实施例的web应用在便携式终端客户端中加载速度的优化装置的结构示意图。在一些实施例中，如图6所示，web应用在便携式终端客户端中加载速度的优化装置包括加载模块101，加载模块101配置为加载web应用的压缩包至便携式终端应用内部，web应用的压缩包中包含有资源文件；解耦模块102，解耦模块102配置为将web应用的公共模块与业务模块解耦；获取模块103，获取模块103配置为在webview容器初始化的同时，加载web应用的公共模块，最终获取用户所需的资源文件并展现。通过加载模块101将资源文件加载至本地，使得资源文件本地化，web应用拉取html、css、js、图片等资源文件时只需要从本地获取，在网络情况不好或资源文件较多的情况下，避免了频繁的网络请求以拉取资源文件，缩短了web应用获取资源文件的时间。其次，获取模块103在webview容器初始化的同时加载公共模块，实现了公共模块的同步加载，节省了web应用加载资源文件的时间。最后，从容器池中取出webview容器的同时创建下一个webview容器，以备下次使用，缩短了白屏时间，提高了用户的体验度。
40.本公开中的“模块”可以实现为硬件，可以实现为软件，也可以实现为硬件和软件的组合。在至少部分用软件实现时，“模块”可以为gpu，但深知不限于此。
41.在一些实施例中，加载模块101进一步配置为获取web应用的压缩包；将web应用的压缩包内置进便携式终端应用的安装包中；安装便携式终端应用的安装包，以加载web应用的压缩包至便携式终端应用内部。web应用的压缩包中包含有资源文件，通过将资源文件加载至本地，在web应用拉取html、css、js、图片等资源文件时只需要从本地获取，在网络情况不好或资源文件较多的情况下，避免了频繁的网络请求以拉取资源文件，缩短了web应用获取资源文件的时间。
42.在一些实施例中，获取模块103进一步配置为在便携式终端应用启动时创建webview容器；在创建webview容器的第一时间段后进行webview初始化，以及在创建webview的第一时间段后基于webview容器加载公共模块，并把加载有公共模块的webview容器缓存至容器池。在开始webview容器初始化的同时创建webview容器，并利用该webview容器加载公共模块，实现了webview容器初始化和公共模块的同步加载，避免了先进行webview容器初始化继而加载公共模块造成的白屏时间较长的问题，缩短了白屏时间。
43.在一些实施例中，获取模块进一步配置为获取用户对web应用的请求；基于获取的用户对web应用的请求，从容器池中取出webview容器，并将web应用对应的业务模块注入webview容器；运行业务模块，得到用户所需的资源文件并展示。
44.在一些实施例中，获取模块103进一步配置为从容器池中取出webview容器的同时，创建下一个webview容器，以备下次使用，使得用户在下次不再需要重新创建webview容器，只需要将已将创建好的webview容器直接拿来使用即可，有利于节省web应用的时间，提高用户的体验。
45.在一些实施例中，便携式终端为手机。
46.此外，尽管在此描述了说明性实施例，但是范围包括具有基于本公开的等效元素、修改、省略、组合(例如，跨各种实施例的方案的组合)、调整或变更的任何和所有实施例。权
利要求中的要素将基于权利要求中使用的语言进行宽泛地解释，而不限于本说明书中或在本技术的存续期间描述的示例，这些示例将被解释为非排他性的。因此，意图仅仅将描述视为例子，真正的范围由权利要求及其全部等同范围表示。
47.以上描述旨在是说明性的而不是限制性的。例如，上述示例(或其一个或多个方案)可以彼此组合使用。本领域普通技术人员在查看以上描述时可以使用其他实施例。而且，在上面的详细描述中，各种特征可以被组合在一起以简化本公开。这不应被解释成意图让不要求保护的公开特征对于任何权利要求而言都是必不可少的。而是，发明主题可以在于比一个公开的实施例的所有特征少的特征组合。因此，权利要求由此作为示例或实施例并入到具体实施方式中，其中每个权利要求独立作为单独的实施例，并且可以构想的是，这些实施例可以以各种组合或置换来相互组合。本发明的范围应该参考所附权利要求以及赋予这些权利要求的等同物的全部范围来确定。