CN111258586B

CN111258586B - 快应用运行、编译方法、装置、电子设备和存储介质

Info

Publication number: CN111258586B
Application number: CN202010028256.9A
Authority: CN
Inventors: 董永清; 孙良木
Original assignee: Beijing Xiaomi Mobile Software Co Ltd
Current assignee: Beijing Xiaomi Mobile Software Co Ltd
Priority date: 2020-01-10
Filing date: 2020-01-10
Publication date: 2023-04-18
Anticipated expiration: 2040-01-10
Also published as: CN111258586A

Abstract

本公开是关于一种快应用运行、编译方法、装置、电子设备和存储介质，属于软件技术领域。所述方法包括：获取快应用的页面的js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象；采用并行处理方式对所述js文件和所述样式文件进行解析；基于所述js文件和所述样式文件的解析结果，输出所述快应用的页面。在本公开实施例中，将快应用页面的文件分为js文件和样式文件2个部分，这样在加载时，可以以并行的方式处理，同时解析js文件和样式文件，同时，js文件体积大大减小，提高了快应用页面的加载速度。

Description

快应用运行、编译方法、装置、电子设备和存储介质

技术领域

本公开涉及软件技术领域，尤其涉及一种快应用运行、编译方法、装置、电子设备和存储介质。

背景技术

快应用是一种新的应用形态，以往的手机端应用主要有两种方式：网页、程序应用。网页无需安装，但用户体验不是很好；程序应用体验流畅，却需要从应用商店下载安装。快应用是一种用户无需下载安装，仍然能流畅的体验应用内容的新型应用。

发明内容

本公开实施例提供了一种快应用运行、编译方法、装置、电子设备和存储介质，能够提高快应用页面的加载速度。所述技术方案如下：

根据本公开实施例的一方面，提供一种快应用运行方法，所述方法包括：

获取快应用的页面的js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象；

采用并行处理方式对所述js文件和所述样式文件进行解析；

基于所述js文件和所述样式文件的解析结果，输出所述快应用的页面。

可选地，所述样式文件为json文件。

可选地，所述采用并行处理方式对所述js文件和所述样式文件进行解析，包括：

采用两个线程分别处理所述js文件和所述样式文件。

可选地，所述采用两个线程分别处理所述js文件和所述样式文件，包括：

采用所述快应用的主线程处理所述js文件；

采用所述快应用中主线程外的线程处理所述样式文件。

根据本公开实施例的一方面，提供一种快应用编译方法，所述方法包括：

获取待编译文件，所述待编译文件包括页面的模版信息、脚本信息和样式信息；

将所述待编译文件编译成js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象。

可选地，所述样式文件为json文件。

可选地，所述将所述待编译文件编译成js文件和样式文件，包括：

抽取所述待编译文件中的样式信息；

将抽取得到的所述样式信息编译为所述样式文件；

将所述待编译文件被抽取后的部分编译为所述js文件。

根据本公开实施例的一方面，提供一种快应用运行装置，所述装置包括：

获取模块，被配置为获取快应用的页面的js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象；

处理模块，被配置为采用并行处理方式对所述js文件和所述样式文件进行解析；

输出模块，被配置为基于所述js文件和所述样式文件的解析结果，输出所述快应用的页面。

可选地，所述样式文件为json文件。

可选地，所述处理模块，被配置为采用两个线程分别处理所述js文件和所述样式文件。

可选地，所述处理模块，包括：

第一处理子模块，被配置为采用所述快应用的主线程处理所述js文件；

第二处理子模块，被配置为采用所述快应用中主线程外的线程处理所述样式文件。

根据本公开实施例的一方面，提供一种快应用编译装置，所述装置包括：

获取模块，被配置为获取待编译文件，所述待编译文件包括页面的模版信息、脚本信息和样式信息；

编译模块，被配置为将所述待编译文件编译成js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象。

可选地，所述样式文件为json文件。

可选地，所述编译模块，包括：

抽取子模块，被配置为抽取所述待编译文件中的样式信息；

编译子模块，被配置为将抽取得到的所述样式信息编译为所述样式文件；将所述待编译文件被抽取后的部分编译为所述js文件。

根据本公开实施例的另一方面，提供一种电子设备，所述电子设备包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为加载并执行所述可执行指令以实现如前所述的方法。

根据本公开实施例的另一方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由处理器执行时，能够执行如前所述的方法。

在本公开实施例中，将快应用页面的文件分为js文件和样式文件2个部分，这样在加载时，可以以并行的方式处理，同时解析js文件和样式文件，同时，js文件体积大大减小，提高了快应用页面的加载速度。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

图1是本公开实施例示出的应用场景图；

图2是根据一示例性实施例示出的一种快应用运行方法的流程图；

图3是根据一示例性实施例示出的一种快应用编译方法的流程图；

图4是根据一示例性实施例示出的一种快应用编译和运行方法的流程图；

图5是根据一示例性实施例示出的一种快应用运行装置的结构示意图；

图6是根据一示例性实施例示出的一种快应用编译装置的结构示意图；

图7是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

图1是本公开实施例示出的应用场景图。参见图1，该应用场景包括：用于进行快应用编译的第一电子设备11、用于运行快应用的第二电子设备12、以及分别与第一电子设备11和第二电子设备12网络连接的服务器13。

其中，第一电子设备11可以包括各种计算设备或其他处理设备，例如台式计算机、笔记本电脑等，该第一电子设备11所指的设备可以为云端设备。第二电子设备12可以为具有无线通信功能的手持设备、车载设备、可穿戴设备等，例如手机。

在本公开实施例中，第一电子设备11负责进行快应用的编译，编译好的快应用上传到服务器13中，第二电子设备12从服务器13获取快应用并加载运行。

快应用是一种无需安装的应用，即点即用。快应用的页面可以采用ux语法文件(也即ux文件)编译而成。下面是ux文件的示例：

页面组件index.ux中定义了2个组件：part1.ux、part2.ux。

可以看出，一个ux文件所包含的信息主要包括：模版(template)信息、脚本(script)信息和样式(style)信息，这里的信息也即ux文件中的标签，也即ux文件包括模版标签、脚本标签和样式标签。值得说明的是，自定义组件part1和part2可以为静态页面，因此，只包括模版标签和样式标签，不包括脚本标签。

该ux文件通过编译得到java脚本(javascript，js)文件，在该js文件中通常包括模版对象、脚本对象和样式对象。下面是js文件中样式对象的示例：

其中，class1、class2和classr为节点名称，也即前述组件的名称，通用唯一识别码(Universally Unique Identifier，uuid)为节点的标识。例如，uuid为2、节点名称为classr的节点为前述页面组件index；uuid为3、节点名称为class1的节点为前述自定义组件part1；uuid为4、节点名称为class2的节点为前述自定义组件part2。

js文件在加载过程中，js文件中的各个部分是依次加载的，也即js文件中的声明的模版对象、脚本对象和样式对象是依次被加载的。而通常，一个页面的js文件包含的样式对象通常在几个甚至十几个，一个样式对象内通常又包含数条规则，例如颜色、字体、高度、宽度等等，这样就导致了js文件体积庞大，加载耗时，造成快应用页面的加载速度较慢。

图2是根据一示例性实施例示出的一种快应用运行方法的流程图。该方法由前述第一电子设备执行，参见图2，该方法包括以下步骤：

在步骤101中，获取快应用的页面的js文件和样式文件。

这里，js文件包括页面的模版对象和脚本对象，样式文件包括页面的样式对象。

在步骤102中，采用并行处理方式对js文件和样式文件进行解析。

在快应用加载过程中，从js文件中解析出模版对象，模版对象也即该页面中的节点组成的树结构；同时，从js文件中解析出脚本对象，得到展示窗口(ViewModel)实例，该实例用于映射数据和节点的关系，这里数据的来源可以有多种，例如采用接口提供等；从样式文件中解析出样式对象，该样式对象包括每个节点的样式。

在步骤103中，基于js文件和样式文件的解析结果，输出快应用的页面。

采用样式对象中每个节点的样式对模版对象进行渲染，并采用脚本对象映射的数据填充模版对象的各个节点，得到快应用的页面。

可选地，样式文件为js对象简谱(javascript object notation，json)文件。

在该实现方式中，由于json格式是网页(web)中应用较为广泛的格式，各个平台和语言都天然集成处理json格式文件的能力，所以将样式文件编译成json格式可以被各种平台处理，提高该页面的实用性。

可选地，采用并行处理方式对js文件和样式文件进行解析，包括：

采用两个线程分别处理js文件和样式文件。

在该实现方式中，采用2个线程分别处理js文件和样式文件，实现两个文件的并行处理，加速快应用页面的加载运行。

可选地，采用两个线程分别处理js文件和样式文件，包括：

采用所述快应用的主线程处理js文件；

采用所述快应用中主线程外的线程处理样式文件。

在该实现方式中，通常快应用包括有一个主线程和多个其他线程，快应用中的主线程的作用是处理资源的调度，例如调度其他线程来处理js文件。但是，由于本申请中js文件处理量不大，如果采用主线程进行调度，然后通过其他线程进行处理，也并不能加快处理，反而会带来线程间交互造成的资源浪费，因此可以直接采用主线程处理。而样式文件通常处理量大，可以采用主线程外的其他线程处理，形成并行处理方案，进而提高加载速度。

值得说明的是，前述步骤101-103与上述可选步骤可以任意组合。

图3是根据一示例性实施例示出的一种快应用编译方法的流程图。该方法由前述第二电子设备执行，参见图3，该方法包括以下步骤：

在步骤201中，获取待编译文件，待编译文件包括页面的模版信息、脚本信息和样式信息。

在本公开实施例中，待编译文件可以为ux文件。

在待编译文件中，模版信息用于限定页面的结构，该结构包括各个节点的关系；脚本信息用于指示映射数据和节点的关系；样式信息用于指示每个节点的样式。

在步骤202中，将待编译文件编译成js文件和样式文件，js文件包括页面的模版对象和脚本对象，样式文件包括页面的样式对象。

在本公开实施例中，将快应用页面的文件分为js文件和样式文件2个部分，这样在加载时，可以以并行的方式处理，同时解析js文件和样式文件，这样，即使样式文件的体积较大，也不会造成快应用页面的运行时间过长，同时，js文件体积减小，提高了快应用页面的加载速度。

可选地，样式文件为json文件。

可选地，将待编译文件编译成js文件和样式文件，包括：

抽取待编译文件中的样式信息；

将抽取得到的样式信息编译为样式文件；

将待编译文件被抽取后的部分编译为js文件。

在该实现方式中，待编译文件在编译过程中，将样式信息单独抽取出来并编译成样式文件，然后对待编译文件剩下的部分(也即模版信息和脚本信息)进行编译得到js文件，从而实现了样式文件和js文件的分离，为后续并行处理做准备。

值得说明的是，前述步骤201-202与上述可选步骤可以任意组合。

图4是根据一示例性实施例示出的一种快应用编译和运行方法的流程图。该方法由前述第一电子设备和第二电子设备执行，参见图4，该方法包括以下步骤：

在步骤301中，获取待编译文件，待编译文件包括页面的模版信息、脚本信息和样式信息。

其中，关于待编译文件及其包含的信息的详细说明参见步骤201。

在步骤302中，抽取待编译文件中的样式信息。

在本公开实施例中，电子设备可以通过运行编译工具来进行待编译文件的编译，例如toolkit工具。

在编译过程中，可以在编译工具中设置参数进行样式信息的抽取，例如以ux文件中样式信息的开头和结束作为编译工具中的设置参数，使得编译工具可以以样式信息的开头和结束为依据从待编译文件中抽取样式信息。

示例性地，可以以“<style>”作为开头，以“</style>”作为结束来进行样式信息的抽取。当存在多个节点时，可以抽取得到多个部分的样式信息，这些样式信息可以按照顺序被编译到同一样式文件中。

在步骤303中，将抽取得到的样式信息编译为样式文件。

在步骤302之后，电子设备通过编译工具将抽取出的样式信息编译成样式文件。该样式文件中包含的样式可以采用层叠样式表(Cascading Style Sheets，CSS)语言，该样式文件的格式可以为json格式。在编译工具中可以通过设置参数控制编译后的样式文件的格式，如前述json格式。

下面是json格式的样式文件示例：

这里，color为颜色，ff0000、00ff00、0000ff为颜色的具体代码。

在该json文件示例中，各个节点的样式可以仅采用节点的名称来标识。在其他实现方式中，各个节点的样式还可以采用节点的名称和uuid共同进行标识。

在步骤304中，将待编译文件被抽取后的部分编译为js文件。

在步骤302之后，电子设备通过编译工具将待编译文件被抽取后的部分(也即模版信息和脚本信息)编译为js文件。

这里，步骤301-304为可选步骤，采用前文的第一电子设备执行。

当然，在编译过程中，除了可以生成js文件和json文件外，还可以生成用于调试使用的map文件，本申请对此不做限定。

在步骤305中，获取快应用的页面的js文件和样式文件。

在快应用运行过程中，当快应用需要加载一个页面(也即上述页面)时，除了需要获取js文件外，还需要获取样式文件。

这两个文件具有相同的名称，例如，页面index的两个文件分别为：index.js和index.css.json。因此，在该步骤中，获取具有与该页面的名称相同的前缀的js文件和json文件即可。

在步骤306中，采用两个线程分别处理js文件和样式文件。

可选地，采用两个线程分别处理js文件和样式文件，包括：

采用所述快应用的主线程处理js文件；

采用所述快应用中主线程外的线程处理样式文件。

在该实现方式中，电子设备通过主线程从js文件中解析出模版对象，模版对象也即该页面中的节点组成的树结构；同时，从js文件中解析出脚本对象，得到ViewModel实例，该实例用于映射数据和节点的关系；电子设备通过其他线程从样式文件中解析出样式对象，该样式对象通过注册存储到电子设备中，以供后续渲染页面时使用，该样式对象包括每个节点的样式。

在该实现方式中，由于样式文件采用其他线程处理，使得主线程可以有更多的时间片处理js文件，加快应用构建。

在步骤307中，基于js文件和样式文件的解析结果，输出快应用的页面。

这里，步骤305-307采用前文的第二电子设备执行。值得说明的是，这里的第一电子设备和第二电子设备也可以为同一电子设备。

在本公开实施例中，通过将快应用页面的文件分为js文件和样式文件两个部分，一方面减小了js文件的体积，加速了页面的构建，另一方面将样式对象从js文件中抽离，解除了样式对象和js文件的耦合，加速了样式文件的解析和注册过程。同时，将样式文件从js文件中抽离处理，可以在后续过程中便于对样式文件进行拓展等处理，使得快应用页面设计更灵活。

示例性地，该方法还可以包括：接收针对该样式文件的操作指令；基于该操作指令对该样式文件进行操作。这里的操作文件包括新增内容、删除内容、修改内容等，该操作指令可以由电子设备中的接口提供。通过该方式可以对样式文件进行如前所述的拓展处理。

图5是根据一示例性实施例示出的一种快应用运行装置的结构示意图。该装置具有实现上述方法实施例中第一电子设备的功能，该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。如图5所示，该装置包括：获取模块401、处理模块402和输出模块403。

获取模块401，被配置为获取快应用的页面的js文件和样式文件，js文件包括页面的模版对象和脚本对象，样式文件包括页面的样式对象；

处理模块402，被配置为采用并行处理方式对js文件和样式文件进行解析；

输出模块403，被配置为基于js文件和样式文件的解析结果，输出快应用的页面。

可选地，样式文件为json文件。

可选地，处理模块402，被配置为采用两个线程分别处理js文件和样式文件。

可选地，处理模块402，包括：

第一处理子模块421，被配置为采用所述快应用的主线程处理js文件；

第二处理子模块422，被配置为采用所述快应用中主线程外的线程处理样式文件。

图6是根据一示例性实施例示出的一种快应用编译装置的结构示意图。该装置具有实现上述方法实施例中第二电子设备的功能，该功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。如图6所示，该装置包括：获取模块501和编译模块502。

获取模块501，被配置为获取待编译文件，待编译文件包括页面的模版信息、脚本信息和样式信息；

编译模块502，被配置为将待编译文件编译成js文件和样式文件，js文件包括页面的模版对象和脚本对象，样式文件包括页面的样式对象。

可选地，样式文件为json文件。

可选地，编译模块502，包括：

抽取子模块521，被配置为抽取待编译文件中的样式信息；

编译子模块522，被配置为将抽取得到的样式信息编译为样式文件；将待编译文件被抽取后的部分编译为js文件。

图7是根据一示例性实施例示出的一种电子设备600的框图，该电子设备600为第一电子设备或第二电子设备，该电子设备可以包括：处理器601、接收器602、发射器603、存储器604和总线605。

处理器601包括一个或者一个以上处理核心，处理器601通过运行软件程序以及模块，从而执行各种功能应用以及信息处理。

接收器602和发射器603可以实现为一个通信组件，该通信组件可以是一块通信芯片。

存储器604通过总线605与处理器601相连。

存储器604可用于存储至少一个指令，处理器601用于执行该至少一个指令，以实现上述方法实施例中的各个步骤。

此外，存储器604可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，易失性或非易失性存储设备包括但不限于：磁盘或光盘，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，静态随时存取存储器(SRAM)，只读存储器(ROM)，磁存储器，快闪存储器，可编程只读存储器(PROM)。

在示例性实施例中，还提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现上述各个方法实施例提供的快应用运行方法或快应用编译方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims

1.一种快应用运行方法，其特征在于，所述方法包括：

获取快应用的页面的js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象；所述模版对象是所述页面中的节点组成的树结构；所述脚本对象是展示窗口实例；所述样式对象包括每个节点的样式；

采用所述快应用的主线程对所述js文件进行解析，采用所述快应用中主线程外的线程对所述样式文件进行解析；

2.根据权利要求1所述的方法，其特征在于，所述样式文件为json文件。

3.一种快应用编译方法，其特征在于，所述方法包括：

将所述待编译文件编译成js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象；所述模版对象是所述页面中的节点组成的树结构；所述脚本对象是展示窗口实例；所述样式对象包括每个节点的样式；

所述js文件采用快应用的主线程进行解析，所述样式文件采用所述快应用中主线程外的线程进行解析。

4.根据权利要求3所述的方法，其特征在于，所述样式文件为json文件。

5.根据权利要求3或4所述的方法，其特征在于，所述将所述待编译文件编译成js文件和样式文件，包括：

抽取所述待编译文件中的样式信息；

将抽取得到的所述样式信息编译为所述样式文件；

将所述待编译文件被抽取后的部分编译为所述js文件。

6.一种快应用运行装置，其特征在于，所述装置包括：

获取模块，被配置为获取快应用的页面的js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象；所述模版对象是所述页面中的节点组成的树结构；所述脚本对象是展示窗口实例；所述样式对象包括每个节点的样式；

处理模块，被配置为采用所述快应用的主线程对所述js文件进行解析，采用所述快应用中主线程外的线程对所述样式文件进行解析；

7.根据权利要求6所述的装置，其特征在于，所述样式文件为json文件。

8.一种快应用编译装置，其特征在于，所述装置包括：

编译模块，被配置为将所述待编译文件编译成js文件和样式文件，所述js文件包括所述页面的模版对象和脚本对象，所述样式文件包括所述页面的样式对象；所述模版对象是所述页面中的节点组成的树结构；所述脚本对象是展示窗口实例；所述样式对象包括每个节点的样式；

9.根据权利要求8所述的装置，其特征在于，所述样式文件为json文件。

10.根据权利要求8或9所述的装置，其特征在于，所述编译模块，包括：

抽取子模块，被配置为抽取所述待编译文件中的样式信息；

11.一种电子设备，其特征在于，所述电子设备包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为加载并执行所述可执行指令以实现权利要求1或2所述的方法，或者实现权利要求3至5任一项所述的方法。

12.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由处理器执行时，能够执行如权利要求1或2所述的方法，或者能够执行如权利要求3至5任一项所述的方法。