CN116700811A - 应用的运行方法及相关装置 - Google Patents

Abstract

本申请实施例提供了一种应用的运行方法及相关装置，方法应用于电子设备，方法包括：接收用于启动应用的第一操作；从应用的可执行文件中提取带数据类型的JavaScript语言描述的组件信息；可执行文件为一个使用带数据类型的JavaScript语言编写的脚本文件且描述了第一用户界面的布局、样式和逻辑；将带数据类型的JavaScript语言描述的组件信息转换为由原生语言描述的组件信息；原生语言不同于带数据类型的JavaScript语言；基于原生语言描述的组件信息构建第一用户界面的组件树；使用第一用户界面的组件树渲染并显示第一用户界面。采用本申请能够提高应用的启动速度和应用页面快速滑动的流畅性。

Description

应用的运行方法及相关装置

技术领域

本申请涉及前端框架技术领域，尤其涉及一种应用的运行方法及相关装置。

背景技术

在前端技术领域，纯原生开发是指通过直接调用操作系统提供的应用程序编程接口(application programming interface，API)来开发原生的用户界面(user interface，UI)。该方法实现的UI界面渲染性能高，可实现复杂动画。但是，这种方法展示的内容固定，更新新的内容必须要发布新的版本，动态化弱。这些因素导致纯原生开发无法满足日益增加的动态化内容更新的需求和变化迅速的业务需求。

针对纯原生开发面临动态化不足的问题，诞生了JavaScript+原生渲染的前端框架，例如快应用框架和Weex框架等。该方案是以JavaScript为应用开发语言，将JS组件桥接到原生UI组件上，对JS组件的渲染，实际是对原生UI组件的渲染，渲染性能与原生渲染持平。基于该框架实现的应用可一次开发多端部署，动态性相比原生开发的应用更好，性能与原生应用持平，且动态性要比原生应用要强，因此，这种JavaScript+原生渲染的前端框架成为主流的应用开发框架。但随着用户要求越来越高，该框架下的应用启动较慢，并在快速滑动页面的时候出现卡顿的问题，该框架已经无法满足用户的需求。

发明内容

本申请实施例公开了应用的运行方法及相关装置，能够提高应用的启动速度和应用页面快速滑动的流畅性。

第一方面，本申请提供了一种应用的运行方法，该方法应用于电子设备，该方法包括：

接收用于启动应用的第一操作；

从前述应用的可执行文件中，提取带数据类型的JavaScript语言描述的组件信息；前述可执行文件为一个使用前述带数据类型的JavaScript语言编写的脚本文件，且描述了第一用户界面的布局、样式和逻辑；

将前述带数据类型的JavaScript语言描述的组件信息，转换为由原生语言描述的组件信息；前述原生语言为前述电子设备的操作系统的编程语言，前述原生语言不同于前述带数据类型的JavaScript语言；

基于前述原生语言描述的组件信息构建前述第一用户界面的组件树；并使用前述第一用户界面的组件树渲染并显示前述第一用户界面。

可选的，上述带数据类型的JavaScript语言为TypeScript语言。

可选的，前述应用可以为应用程序APP、小程序或网页程序等。

现有的JS应用的可执行文件包括分别使用三种编程语言编写的三个脚本文件，该三个脚本文件为使用超文本标记语言(Hyper Text Markup Language，HTML)编程的描述用户界面布局的HTML脚本文件、使用层叠样式表(Cascading Style Sheets，CSS)计算机语言编程的描述用户界面的样式的CSS脚本文件以及使用JS语言编程的描述用户界面的逻辑的JS脚本文件。而本方案中，JS应用的可执行文件为一个带数据类型JS语言编写的脚本文件，即一个脚本文件即可描述前面三个脚本文件描述的内容，那么，在解析的时候无需从三个文件获取组件的信息绑定后才能进行组件语言的转换，而是可以从一个文件中直接提取组件的信息快速进行组件语言的转换，加快组件树生成的速度，提高渲染效率。从而提高应用启动速度和页面显示的响应速度。

一种可能的实施方式中，前述方法还包括：

根据前述应用的可执行文件，生成依赖表，前述依赖表描述了前述第一用户界面的各个组件的属性和前述各个组件的访问路径；

使用前述第一用户界面的组件树渲染并显示前述第一用户界面之后，还包括：

前述电子设备接收第二操作，该第二操作指示前述第一用户界面的第一组件的属性变更；

根据前述第二操作，更新前述依赖表描述的前述第一组件的属性；

基于更新后的前述依赖表描述的前述第一组件的属性，渲染并更新前述第一用户界面的前述第一组件。

可选的，前述根据前述第二操作，更新前述依赖表描述的前述第一组件的属性，包括：基于前述第二操作获取前述第一组件的访问路径和前述第一组件变更后的属性；并基于前述第一组件的访问路径将前述依赖表描述的前述第一组件的属性更新为前述变更后的属性。

本申请中，上述依赖表中包括用户界面的各个组件的属性和组件的访问路径，一旦有组件的属性变更会及时更新到依赖表中，实现组件和组件属性的快速重新绑定。然后基于更新后的依赖表重新渲染显示更新后的用户界面。现有的方案中通过遍历组件的方式来实现组件和组件属性的重新绑定，由于遍历算法复杂耗时较长。因而本申请的方案相比于现有的方案算法简单，计算速度快，因此提高了变更后属性重新绑定的效率，进而提高了变更后用户界面的渲染效率。既可以更快地将变更后的界面显示出来，减少页面卡顿。

一种可能的实施方式中，前述基于更新后的前述依赖表描述的前述第一组件的属性，渲染并更新前述第一用户界面的前述第一组件，包括：

基于更新后的前述依赖表生成前述第一用户界面的组件树；

基于前述生成的前述第一用户界面的组件树更新前述第一用户界面的渲染树中前述第一组件的属性；

基于前述更新后的渲染树中前述第一组件的属性，渲染并更新前述第一用户界面的前述第一组件。

本申请中，上述新的组件树是基于依赖表中的访问路径快速生成的。相比于现有方案中通过算法复杂的遍历方式来遍历DOM树生成该新的组件树，本申请可以提高该新的组件树的生成效率，减少了计算的复杂度。进而提高渲染树的更新效率以使得可以更快地渲染出更新后的界面，减少页面显示卡顿的情况。

一种可能的实施方式中，前述电子设备的操作系统包括前述原生语言描述的编程语言桥接模块和渲染模块；前述方法具体包括：

通过前述编程语言桥接模块从前述应用的可执行文件中，提取前述带数据类型的JavaScript语言描述的组件信息；并将前述带数据类型的JavaScript语言描述的组件信息，转换为由前述原生语言描述的组件信息；

通过前述渲染模块基于前述原生语言描述的组件信息构建前述第一用户界面的组件树，使用前述第一用户界面的组件树渲染并显示前述第一用户界面。

一种可能的实施方式中，前述电子设备的操作系统包括前述原生语言描述的组件状态管理模块、通知模块和渲染模块；前述方法具体包括：

通过前述组件状态管理模块根据前述应用的可执行文件，生成依赖表，前述依赖表描述了前述第一用户界面的各个组件的属性和前述各个组件的访问路径；

通过前述渲染模块使用前述第一用户界面的组件树渲染并显示前述第一用户界面之后，具体还包括：

通过前述通知模块接收前述第二操作；通过前述组件状态管理模块根据前述第二操作，更新前述依赖表描述的前述第一组件的属性。

一种可能的实施方式中，前述电子设备的操作系统包括前述原生语言描述的组件状态管理模块；前述根据前述第二操作，更新前述依赖表描述的前述第一组件的属性，具体包括：

通过前述组件状态管理模块基于前述第二操作获取前述第一组件的访问路径和前述第一组件变更后的属性；

通过前述组件状态管理模块基于前述第一组件的访问路径将前述依赖表描述的前述第一组件的属性更新为前述变更后的属性。

一种可能的实施方式中，前述电子设备的操作系统包括前述原生语言描述的组件更新模块和渲染模块；前述基于更新后的前述依赖表描述的前述第一组件的属性，渲染并更新前述第一用户界面的前述第一组件，具体包括：

通过前述组件更新模块基于更新后的前述依赖表生成前述第一用户界面的组件树，并基于该生成的前述第一用户界面的组件树更新该第一用户界面的渲染树中前述第一组件的属性；

通过前述渲染模块基于前述更新后的渲染树中前述第一组件的属性，渲染并更新前述第一用户界面中的前述第一组件。

上述几个可能的实施方式中，相比于现有方案中通过不同于原生语言编程实现的JS应用解析框架(即JS framework)，本申请实现上述处理操作的各个功能模块的编程语言为操作系统的原生语言，避免了解析框架和操作系统之间大量的跨语言通信，极大地提高了数据的传输效率。从而提高了应用可执行文件的解析速度，进而提高了用户界面的渲染速度，进而能够提高应用的启动速度和应用页面快速滑动的流畅性。

第二方面，本申请提供一种电子设备，该电子设备的操作系统的编程语言为原生语言；前述电子设备的操作系统包括前述原生语言描述的接收模块、编程语言桥接模块和渲染模块；

前述接收模块，用于接收用于启动应用的第一操作；

前述编程语言桥接模块，用于从前述应用的可执行文件中，提取带数据类型的JavaScript语言描述的组件信息；并将前述带数据类型的JavaScript语言描述的组件信息，转换为由原生语言描述的组件信息；前述可执行文件为一个使用前述带数据类型的JavaScript语言编写的脚本文件，且描述了第一用户界面的布局、样式和逻辑；前述原生语言不同于前述带数据类型的JavaScript语言；

前述渲染模块，用于基于前述原生语言描述的组件信息构建前述第一用户界面的组件树，并使用前述第一用户界面的组件树渲染并显示前述第一用户界面。

一种可能的实施方式中，前述带数据类型的JavaScript语言为TypeScript语言。

一种可能的实施方式中，前述电子设备的操作系统还包括前述原生语言描述的组件状态管理模块、通知模块和更新模块；

前述组件状态管理模块，用于根据前述应用的可执行文件，生成依赖表，前述依赖表描述了前述第一用户界面的各个组件的属性和前述各个组件的访问路径；

前述通知模块，用于在前述渲染模块使用前述第一用户界面的组件树渲染并显示前述第一用户界面之后，接收第二操作；前述第二操作指示前述第一用户界面的第一组件的属性变更；

前述组件状态管理模块，还用于根据前述第二操作，更新前述依赖表描述的前述第一组件的属性；

前述更新模块，还用于基于更新后的前述依赖表描述的前述第一组件的属性，渲染并更新前述第一用户界面的前述第一组件。

一种可能的实施方式中，前述组件状态管理模块具体用于：

基于前述第二操作获取前述第一组件的访问路径和前述第一组件变更后的属性；

基于前述第一组件的访问路径将前述依赖表描述的前述第一组件的属性更新为前述变更后的属性。

一种可能的实施方式中，前述更新模块包括组件更新模块和前述渲染模块；

前述组件更新模块，用于基于更新后的前述依赖表生成前述第一用户界面的组件树，并基于前述生成的前述第一用户界面的组件树更新前述第一用户界面的渲染树中前述第一组件的属性；

前述渲染模块，用于基于前述更新后的渲染树中前述第一组件的属性，渲染并更新前述第一用户界面的前述第一组件。

一种可能的实施方式中，前述应用为应用程序APP、小程序或网页。

第三方面，本申请提供了一种电子设备，该电子设备包括：存储器、一个或多个处理器；前述存储器与前述一个或多个处理器耦合，前述存储器用于存储计算机程序，前述一个或多个处理器调用前述计算机程序以使得前述电子设备执行上述第一方面中任一项所述的方法。

第四方面，本申请提供了一种计算机可读存储介质，该计算机可读存储介质包括计算机程序，当前述计算机程序在电子设备上运行时，使得前述电子设备执行上述第一方面中任一项所述的方法。

第五方面，本申请提供了一种计算机程序产品，该计算机程序产品包括程序代码，当该程序代码在计算机上运行时，使得该计算机执行上述第一方面中任一项所述的方法。

可以理解，上述提供的第二方面至第五方面的内容，其所能达到的有益效果可参考上述第一方面中描述的有益效果，此处不再赘述。

附图说明

图1所示为本申请实施例提供的JS应用处理框架示意图；

图2所示为本申请实施例提供的电子设备结构示意图；

图3所示为本申请实施例提供的电子设备中软件框架的示意图；

图4所示为本申请实施例提供的应用的运行方法的流程示意图；

图5A、图5B和图5C所示为本申请实施例提供的用户界面的示意图；

图6所示为本申请实施例提供的电子设备中各个功能模块之间的交互示意图；

图7所示为本申请实施例提供的电子设备中各个功能模块之间交互的另一种示意图；

图8所示为本申请实施例提供的电子设备的逻辑结构示意图；

图9所示为本申请实施例提供的电子设备的硬件结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

下面首先介绍一下本申请涉及到的技术术语。

1、JavaScript

JavaScript简称JS，是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。

2、JS应用

JS应用为基于JavaScript语言编程实现的应用程序(application,APP)。JS应用还可以是基于JavaScript语言编程实现的小程序或网页等。

3、JS框架(即JS framework)

JS framework负责JS应用程序的解析、执行及提供各种JS功能库。

4、文档对象模型(document object model，DOM)

DOM是处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序编程接口(application programming interface，API)，它可以动态地访问程序和脚本，更新其内容、结构和文档的风格(即样式)。通过DOM，文档可以进一步被处理，处理的结果可以加入到当前的页面。示例性地，文档可以是一个页面、一个html文件或XML文件等。现有的JS应用运行方案中，可以通过解析JS应用的可执行文件生成DOM。DOM可以表现为树状结构，称为DOM树。

5、用户界面(user interface，UI)

用户界面是应用程序或操作系统与用户之间进行交互和信息交换的介质接口，它实现信息的内部形式与用户可以接受形式之间的转换。用户界面是通过java、可扩展标记语言(extensible markup language，XML)、JS语言等特定计算机语言编写的源代码，界面源代码在电子设备上经过解析，渲染，最终呈现为用户可以识别的内容。呈现出来的用户界面中可以包括在电子设备的显示屏中显示的文本、图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏或Widget等可视的界面元素。

6、应用的可执行文件

应用的可执行文件是描述了应用的用户界面的布局、样式和逻辑的脚本文件。在应用的可执行文件中定义了应用用户界面的组件，并描述了定义的组件的属性、事件和方法等信息。示例性地，组件的属性包括组件的内容和组件的样式等。该组件的样式可以包括该组件的大小尺寸、颜色、字体或是否有下划线等内容。示例性的，组件的事件包括组件的绑定、创建、注册、访问、通信或验证等。示例性地，组件的方法包括定义的函数等等。

上述应用的用户界面的布局包括用户界面的组件的在用户界面中的布局。上述应用的用户界面的样式包括用户界面的样式和用户界面的组件的样式。上述应用的用户界面的逻辑包括用户界面的事件或方法等，以及包括用户界面的组件中的事件和方法等。

在本申请实施例中，上述可执行文件中定义的组件不限于是定义的组件component，定义的component中描述的子组件也属于本申请描述的组件。另外，从可视化的角度来看，用户界面是由界面元素组成的。那么，可执行文件中定义的组件对应为用户界面中的界面元素。

7、组件树(component tree)、元素树(element tree)和渲染树(render tree)

一般地，应用的可执行文件解析后可以生成待显示的用户界面的组件树、元素树和渲染树。

具体的，可执行文件中定义的该待显示用户界面的组件构成该组件树的节点，即一个组件对应该组件树中的一个节点。组件树中的每个节点都配置有唯一的节点标识。组件树中的节点可以对应绑定组件的属性、事件和方法等信息中的一项或多项。

渲染树是文档的可视化表示。上述组件树的节点包括可显示在用户界面的节点和不显示在用户界面的节点。渲染树中包括可显示在用户界面的节点，并且渲染树绑定了这些节点的信息，通过渲染树可以获知用户界面的布局、样式和逻辑。因此可以基于渲染树生成绘制命令渲染出用户界面。

元素树是组件树的一个实例，用于联结组件树和渲染树。具体的，元素树中的节点和组件树中的节点一一对应。元素树用于在节点出现数据变化后，将该节点变化后的数据对应更新到渲染树中对应的节点，以实现渲染树中节点和数据的重新绑定，进而基于更新后的渲染树可以渲染出变化后的用户界面。因此，元素树可以看成是组件树和渲染树之间的一个代理。

一种可能的实现中，组件树、元素树和渲染树之间的节点联结可以通过指针来实现。指针是一种保存变量地址的变量。即对于某个节点，可以定义一个指针指向该节点，并且在组件树、元素树和渲染树都定义指向该某个节点的指针，那么若该某个节点的数据出现变更，通过该定义的指针可以在该组件树、元素树和渲染树中定位到该某个节点，进而元素树中对应的节点可以从组件树中获取该某个对应的节点变更后的数据，并将变更后的数据更新到渲染树中的该某个节点。

8、带数据类型的JavaScript语言

数据类型在数据结构中的定义是一个值的集合以及定义在这个值的集合上的一组操作。示例性地，数据类型包括byte、short、int、long、float、double或char等类型。其中，byte用于定义8位有符号的以二进制补码表示的整数的类型；short用于定义16位有符号的以二进制补码表示的整数的类型；int用于定义32位有符号的以二进制补码表示的整数的类型；long用于定义64位有符号的以二进制补码表示的整数的类型；float用于定义单精度的32位符合IEEE 754标准的浮点数的类型；double用于定义双精度的64位符合IEEE754标准的浮点数的类型；char用于定义一个单一的16位字符的类型。

带类型的JavaScript语言指的是通过该带类型的JavaScript语言编程得到的计算机程序中的数据变量要求带有明确的数据类型。

现有的JS应用运行方案是基于JS framework来实现，该JS framework是使用JS语言编程实现。而应用用户界面的渲染模块一般是使用操作系统(operating system，OS)的编程语言(即原生(native)语言)来实现。该native语言和JS编程语言不同。另外，现有的JS应用的可执行文件包括三个文件，分别是使用超文本标记语言(Hyper Text MarkupLanguage，HTML)编程的描述用户界面布局的HTML脚本文件、使用层叠样式表(CascadingStyle Sheets，CSS)计算机语言编程的描述用户界面的样式的CSS脚本文件以及使用JS语言编程的描述用户界面的逻辑的JS脚本文件。那么，在JS framework解析JS应用的可执行文件的过程中，需要先在JS运行环境中基于该三个脚本文件构建用户界面的JS组件(即JS语言描述的组件，也可以称为JS对象)。然后，再通过JS引擎将在JS运行环境中构建的用户界面的JS组件发送到native实现的处理模块中，并在该处理模块中对应构建native语言描述的组件。之后，才能通过渲染模块基于该native语言描述的组件渲染显示用户界面。这个过程中，JS framework和native实现的处理模块之间需要频繁地进行跨语言数据传递，消耗了很多的计算资源，并且跨语言进行数据传输也增加了数据传输的时延，降低数据传输的性能。并且，需要重复生成两次用户界面的组件(一次生成JS语言描述的组件，另一次生成native语言描述的组件)并进行维护，除了额外消耗内存来存储组件的信息之外，也同样消耗额外的维护成本。因此，现有的JS应用运行方案不但需要消耗较多的计算资源，也影响了应用启动的速度和页面加载的速度。

为了提高应用的启动速度和应用页面快速滑动的流畅性，本申请提供了一种JS应用处理框架。示例性的，图1示出了该JS应用处理框架的结构示意图。该JS应用处理框架包括JS引擎、JS原生化模块和渲染模块。

JS引擎用于为JS应用的运行提供一个执行环境，并监听JS应用用户界面的组件的属性的变化。另外，JS引擎还是JS功能模块和native功能模块之间数据交互的通信媒介，即JS功能模块和native功能模块之间通过JS引擎进行数据的交互。

本申请实施例中，JS功能模块指的是使用JS语言实现的功能模块。native功能模块指的是使用native语言实现的功能模块。本申请实施例中，该native功能模块包括上述JS原生化模块和渲染模块。原生化指的是通过上述native语言实现，即该JS原生化模块与渲染模块一样，均是使用相同的native语言编程实现。该native语言可以是C++语言、C语言或Java语言等。基于前面的描述可知，native语言是操作系统的编程语言。不同的操作系统的编程语言可以不同。

示例性地，JS引擎可以是方舟编译器、V8引擎或quick JS引擎等。

JS原生化模块包括编程语言桥接模块、注册模块、编程范式对接模块、组件状态管理模块、引擎通信模块和组件更新模块。

上述编程语言桥接模块用于从JS应用的可执行文件中提取带数据类型的JavaScript语言描述的组件信息；并将该带数据类型的JavaScript语言描述的组件信息，转换为由原生语言描述的组件信息。组件信息包括组件的属性、事件、方法或组件的依赖关系等。

示例性地，上述JS应用的可执行文件可以是JS bundle文件，是对应用开发者编写的JS应用程序打包后获得的文件。

上述注册模块用于将上述由原生语言描述的组件、各个功能模块和函数等注册到JS引擎。以使的JS引擎可以监听组件的属性的变化等。

上述编程范式对接模块用于将上述原生语言描述的组件信息的编程范式对接为渲染模块可以识别的编程范式，具体为做一个编程范式的转换。不同编程语言的编程范式不相同，虽然上述通过编程语言桥接模块将组件信息转换为原生语言描述的组件信息。但具体的编程范式仍存在一下差异，需要进一步对接以使得渲染模块可以识别。进而使得渲染模块可以进行对应用户界面的渲染。编程范式(programming paradigm)指的是编程的风格或模式。

上述组件状态管理模块用于在解析JS应用的可执行文件的过程中建立JS应用的用户界面的组件和该组件的状态之间的依赖关系，并管理该建立的依赖关系。具体的，可以构建一个依赖表，该依赖表中包括组件的访问路径和该组件的属性。在该依赖表中，某个组件的访问路径和该某个组件的属性之间存在绑定关系。

一种可能的实现方式中，上述组件的访问路径可以是组件在该组件所在的数据结构中的访问路径。示例性地，该组件所在的数据结构可以是描述了该组件对应的用户界面的各个组件的依赖关系等。示例性地，该数据结构可以是结构体。为了便于理解依赖表中组件的访问路径，可以示例性地参见如下计算机程序：

@Component

struct objA:{

arrayB:[

“xxxxx”,

“yyyyy”,

“Hi！world”]

}}

在该计算机程序中，以结构体的形式定义了一个组件“objA”。该组件下定义了一个数组B。该数组B中包括三个元素。“Hi！world”是该组件“objA”中的一个子组件，那么，该子组件的访问路径为“objA->arrayB->2”。即该子组件是组件“objA”中数组B的第2个组件。另外，该子组件的属性即为“Hi！world”。可选的，若组件“objA”为另一个组件C的子组件，那么，前述子组件的访问路径可以再加上该另一个组件C的描述。即该子组件的访问路径为“C->objA->arrayB->2”。上述结构体和该子组件的访问路径仅为示例，不构成对本申请实施例的限制。

一种可能的实现方式中，上述组件的访问路径不限于是组件在该组件所在的结构体中的访问路径。结构体可以被其它的数据结构类型替代，因此具体的访问路径根据JS应用的可执行文件中定义的数据结构类型来确定，本申请对此不作限制。

一种可能的实施方式中，上述依赖表还可以包括该组件的组件标识。该组件的标识是在解析上述JS应用的可执行文件的过程中为该组件配置的唯一标识。该组件的标识也是组件树、元素树或渲染树中该组件对应的节点的标识。同理，在该依赖表中，某个组件的组件标识、该某个组件的访问路径和该某个组件的属性三者之间存在绑定关系。

上述引擎通信模块用于在JS引擎监听到JS应用的组件的属性发生变化后，将变化后的情况通知给组件状态管理模块，组件状态管理模块根据该变化后的情况更新依赖表中的数据。

上述组件更新模块，用于基于上述更新后的依赖表中组件的访问路径快速生成新的组件树，还可以将依赖表中各个组件的属性绑定到该新的组件树中对应的组件。然后，比较该新的组件树与原来的组件树，找出出现变化的组件。该原来的组件树指的是生成该新的组件树之前已经存在的组件树。该已经存在的组件树可以是一开始解析JS应用的可执行文件的过程中生成的组件树。或者，该已经存在的组件树可以是上一次组件出现变化后基于上述依赖表生成的组件树。找到变化的组件后，通过该变化的组件对应的元素树中的节点将该变化的组件的属性更新到渲染树中对应的组件。

在本申请实施例中，上述新的组件树是基于依赖表中的访问路径快速生成的，相比于现有方案中通过遍历DOM树来生成该新的组件树，可以提高该新的组件树的生成效率，减少了计算的复杂度，进而提高渲染树的更新效率以使得可以更快地渲染出更新后的界面，减少页面显示卡顿的情况。

上述渲染模块用于基于上述编程范式对接之后的原生语言描述的组件信息构建待显示用户界面的组件树、元素树和渲染树。然后，基于渲染树进行渲染并显示用户界面。具体的，渲染模块可以根据系统提供的窗口句柄，创建OpenGL上下文，将渲染树进行光栅化后合成到该窗口的操作台surface上后送显，完成整个用户界面的加载和显示过程。

一种可能的实施方式中，基于上述JS应用处理框架，本申请实施例提供一种JS应用的可执行文件。该JS应用的可执行文件为一个使用带数据类型的JavaScript语言编写的脚本文件。该JS应用的可执行文件中描述了该JS应用的用户界面的布局、样式和逻辑。示例性地，该带数据类型的JavaScript语言可以是TypeScript语言。TypeScript语言是JavaScript语言的超集，即JavaScript语言的语法全部适用于TypeScript语言，并且TypeScript语言中还包括JavaScript语言不支持的语法。具体的，该TypeScript语言是一个开源的编程语言，通过在JavaScript的基础上添加数据类型定义构建而成。TypeScript语言通过编译后可以转移为JavaScript语言，TypeScript语言可运行在任何浏览器或任何操作系统。

示例性地，该JS应用的可执行文件可以通过定义容器，然后在定义的容器中描述同一个组件的布局、样式和逻辑。为了便于理解本申请JS应用的可执行文件中定义的容器，可以示例性地参见如下计算机程序：

在上述计算机程序中，可以自定义组件的名称。在该计算机程序中，通过“Column.create({space:1})”创建了一个容器“Column”。该容器“Column”表示一个单列多行的表，然后在该表中定义和描述组件的信息。然后，在该容器中通过“Text.create('hello world')”描述了该组件的文本属性，通过“onClick(()＝>{console.error('clicktext')；})”描述了该组件中文本的事件(处理鼠标点击的事件)，通过“Text.fontSize(20)”描述了该组件中文本的样式属性。然后，通过“pop()”表明组件之间的关系。例如，“Text.pop()”包括在容器“Column”中，那么，该组件的文本为该组件的一个子组件。

另外，对于本申请可执行文件中描述的组件信息，可以通过组件名称快速调用。示例性地，对于上述描述的组件信息，可以通过命令“loadDocument(new自定义组件名("1",undefined,{}))”快速调用。

本申请JS应用的可执行文件中描述组件信息的计算机程序，相比于现有的JS应用的可执行文件中描述组件信息的计算机程序简洁，并且本申请JS应用的可执行文件中组件的属性、事件和方法可以一起在定义的容器中描述，在编程阶段就完成了组件属性、事件和方法的绑定，无需在后续解析文件过程中额外进行绑定，从而节省了计算资源，加快了文件解析的速度。为了便于理解，可以示例性地参见如下示出的现有的JS应用的可执行文件中描述组件信息的计算机程序：

“//样式

/***/((module)＝>{module.exports＝{".title":{"fontSize":"20px"}}})/***/

//组件布局

module.exports＝{

"attr":{"debugLine":"pages/index/index:1"},

"type":"div",

"children":[{"attr":{

"debugLine":"pages/index/index:2",

"className":"title",

"value":"hello world"

},

"type":"text",

"classList":["title"],

"onBubbleEvents":{"click":"click"}}]}

//组件逻辑

exports["default"]＝void 0；

var_default_default＝{data:{title:""},

onInit:function onInit(){

this.title＝this.$t('strings.world')；},

click:function click(){console.log('click text')；}}”

基于前面的描述可知，现有的JS应用的可执行文件包括三个文件，分别是HTML脚本文件、CSS脚本文件以及JS脚本文件。上述描述样式的计算机程序在CSS脚本文件中，上述描述组件布局的计算机程序在HTML脚本文件中，上述描述组件逻辑的计算机程序在JS脚本文件中。上述所示现有的JS应用的可执行文件中的计算机程序描述的组件与前述本申请JS应用可执行文件中计算机程序描述的组件相同。而该现有的JS应用的可执行文件中，需要结合三个脚本文件中的描述来实现该组件的描述，显得繁琐冗余，在后续解析的时候还需要基于该三个脚本文件中的描述进行绑定才能生成完整的组件的实例，导致解析过程繁琐和耗时较长。比较该组件的这两种方式的描述，可以看到本申请JS应用可执行文件中描述组件的计算机程序更简洁，并且由于组件的信息都在同一个脚本文件中定义的同一个容器中定义和描述，无需另外做绑定，更有利于提高文件的解析效率。

一种可能的实施方式中，可以理解的是，上述JS原生化模块为了实现上述对应的功能，其包括了执行各个功能相应的软件模块。上述JS原生化模块中各个功能模块的划分仅为一个示例，具体实现中，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个模块中。需要说明的是，本申请实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

一种可能的实施方式中，上述JS应用处理框架可以是操作系统(operatingsystem，OS)的一部分。其可以随着操作系统部署到各种电子设备上，该电子设备中可以安装有JS应用。那么，当在该电子设备上启动JS应用时，可以调用该JS应用处理框架解析和执行该JS应用。

示例性地，电子设备可以包括但不限于任何一种基于智能操作系统的电子产品，其可与用户通过键盘、虚拟键盘、触摸板、触摸屏以及声控设备等输入设备来进行人机交互。诸如智能手机、平板电脑(tablet personal computer，Tablet PC)、手持计算机、可穿戴电子设备、个人计算机(personal computer，PC)和台式计算机等。电子设备还可以包括但不限于任何一种物联网(internet of things，IoT)设备。该IoT设备例如可以是智能音箱、电视机(television，TV)和汽车的车载显示器等等。其中，智能操作系统包括但不限于任何通过向设备提供各种APP来丰富设备功能的操作系统，诸如安卓Android、IOS、Windows、MAC或鸿蒙系统(HarmonyOS)等操作系统。

图2示例性示出了电子设备100的结构示意图。

电子设备100可以是手机、平板电脑、桌面型计算机、膝上型计算机、手持计算机、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本，以及蜂窝电话、个人数字助理(personal digital assistant，PDA)、增强现实(augmentedreality，AR)设备、虚拟现实(virtual reality，VR)设备、人工智能(artificialintelligence,AI)设备、可穿戴式设备、车载设备、智能家居设备和/或智慧城市设备，本申请实施例对该电子设备的具体类型不作特殊限制。

电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。

可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。

在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuitsound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purposeinput/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。

I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K，充电器，闪光灯，摄像头193等。例如：处理器110可以通过I2C接口耦合触摸传感器180K，使处理器110与触摸传感器180K通过I2C总线接口通信，实现电子设备100的触摸功能。

I2S接口可以用于音频通信。在一些实施例中，处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合，实现处理器110与音频模块170之间的通信。在一些实施例中，音频模块170可以通过I2S接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。

PCM接口也可以用于音频通信，将模拟信号抽样，量化和编码。在一些实施例中，音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中，音频模块170也可以通过PCM接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。所述I2S接口和所述PCM接口都可以用于音频通信。

UART接口是一种通用串行数据总线，用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中，UART接口通常被用于连接处理器110与无线通信模块160。例如：处理器110通过UART接口与无线通信模块160中的蓝牙模块通信，实现蓝牙功能。在一些实施例中，音频模块170可以通过UART接口向无线通信模块160传递音频信号，实现通过蓝牙耳机播放音乐的功能。

MIPI接口可以被用于连接处理器110与显示屏194，摄像头193等外围器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)，显示屏串行接口(displayserial interface，DSI)等。在一些实施例中，处理器110和摄像头193通过CSI接口通信，实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信，实现电子设备100的显示功能。

GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号，也可被配置为数据信号。在一些实施例中，GPIO接口可以用于连接处理器110与摄像头193，显示屏194，无线通信模块160，音频模块170，传感器模块180等。GPIO接口还可以被配置为I2C接口，I2S接口，UART接口，MIPI接口等。

USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与外围设备之间传输数据。也可以用于连接耳机，通过耳机播放音频。该接口还可以用于连接其他电子设备，例如AR设备等。

可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。

充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。

电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。

电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。

天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。

移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(lownoise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。

调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。

无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号解调以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。

在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications，GSM)，通用分组无线服务(general packet radio service，GPRS)，码分多址接入(codedivision multiple access，CDMA)，宽带码分多址(wideband code division multipleaccess，WCDMA)，时分码分多址(time-division code division multiple access，TD-SCDMA)，长期演进(long term evolution，LTE)，BT，GNSS，WLAN，NFC，FM，和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(beidounavigation satellite system，BDS)，准天顶卫星系统(quasi-zenith satellitesystem，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。

电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)。显示面板还可以采用有机发光二极管(organiclight-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode，AMOLED)，柔性发光二极管(flexlight-emitting diode，FLED)，miniled，microled，micro-oled，量子点发光二极管(quantum dot light emitting diodes，QLED)等制造。在一些实施例中，电子设备可以包括1个或N个显示屏194，N为大于1的正整数。

电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。

ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。

摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或N个摄像头193，N为大于1的正整数。

数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。

视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。

NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。

内部存储器121可以包括一个或多个随机存取存储器(random access memory，RAM)和一个或多个非易失性存储器(non-volatile memory，NVM)。

随机存取存储器可以包括静态随机存储器(static random-access memory，SRAM)、动态随机存储器(dynamic random access memory，DRAM)、同步动态随机存储器(synchronous dynamic random access memory,SDRAM)、双倍资料率同步动态随机存取存储器(double data rate synchronous dynamic random access memory,DDR SDRAM，例如第五代DDR SDRAM一般称为DDR5 SDRAM)等；非易失性存储器可以包括磁盘存储器件、快闪存储器(flash memory)。

快闪存储器按照运作原理划分可以包括NOR FLASH、NAND FLASH、3D NAND FLASH等，按照存储单元电位阶数划分可以包括单阶存储单元(single-level cell,SLC)、多阶存储单元(multi-level cell,MLC)、三阶储存单元(triple-level cell,TLC)、四阶储存单元(quad-level cell,QLC)等，按照存储规范划分可以包括通用闪存存储(英文：universalflash storage，UFS)、嵌入式多媒体存储卡(embeddedmultimediaCard，eMMC)等。

随机存取存储器可以由处理器110直接进行读写，可以用于存储操作系统或其他正在运行中的程序的可执行程序(例如机器指令)，还可以用于存储用户及应用程序的数据等。

非易失性存储器也可以存储可执行程序和存储用户及应用程序的数据等，可以提前加载到随机存取存储器中，用于处理器110直接进行读写。

外部存储器接口120可以用于连接外部的非易失性存储器，实现扩展电子设备100的存储能力。外部的非易失性存储器通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部的非易失性存储器中。

电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。

扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐，或收听免提通话。

受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。

麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。

耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口。

压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。

陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即，x，y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。

气压传感器180C用于测量气压。在一些实施例中，电子设备100通过气压传感器180C测得的气压值计算海拔高度，辅助定位和导航。

磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中，当电子设备100是翻盖机时，电子设备100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态，设置翻盖自动解锁等特性。

加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。

距离传感器180F，用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中，拍摄场景，电子设备100可以利用距离传感器180F测距以实现快速对焦。

接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定电子设备100附近有物体。当检测到不充分的反射光时，电子设备100可以确定电子设备100附近没有物体。电子设备100可以利用接近光传感器180G检测用户手持电子设备100贴近耳朵通话，以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式，口袋模式自动解锁与锁屏。

环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。

指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。

温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。

触摸传感器180K，也称“触控器件”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。

骨传导传感器180M可以获取振动信号。在一些实施例中，骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏，接收血压跳动信号。在一些实施例中，骨传导传感器180M也可以设置于耳机中，结合成骨传导耳机。音频模块170可以基于所述骨传导传感器180M获取的声部振动骨块的振动信号，解析出语音信号，实现语音功能。应用处理器可以基于所述骨传导传感器180M获取的血压跳动信号解析心率信息，实现心率检测功能。

按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。

马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触摸操作，可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作，马达191也可对应不同的振动反馈效果。不同的应用场景(例如：时间提醒，接收信息，闹钟，游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。

指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。

SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡，Micro SIM卡，SIM卡等。同一个SIM卡接口195可以同时插入多张卡。所述多张卡的类型可以相同，也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互，实现通话以及数据通信等功能。在一些实施例中，电子设备100采用eSIM，即：嵌入式SIM卡。eSIM卡可以嵌在电子设备100中，不能和电子设备100分离。

上述图2所示的电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的软件系统为例，示例性说明电子设备100的软件结构。图3示例性示出了本申请实施例的电子设备100的软件结构框图。

分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将软件系统分为四层，从上至下分别为应用程序层，应用程序框架层，系统库以及内核层。

应用程序层可以包括一系列应用程序包。

如图3所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。示例性地，在本申请实施例中，这些应用程序可以是JS应用程序。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。

如图3所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。该应用程序框架层还包括上述图1所示的本申请实施例提供的JS应用处理框架。

窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。

内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。

视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。

电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。

资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。

通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。

媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。

三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。

2D图形引擎是2D绘图的绘图引擎。

内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。

下面结合捕获拍照场景，示例性说明电子设备100软件以及硬件的工作流程。当触摸传感器180K接收到触摸操作，相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标，触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件，识别该输入事件所对应的控件。以该触摸操作是触摸单击操作，该单击操作所对应的控件为相机应用图标的控件为例，相机应用调用应用框架层的接口，启动相机应用，进而通过调用内核层启动摄像头驱动，通过摄像头193捕获静态图像或视频。该示例仅为说明电子设备100软件以及硬件互相配合工作的流程，不构成对本申请的限制。

本申请实施例提供了一种应用的运行方法，可以应用于上述电子设备。示例性地，可以参见图4，该方法可以包括但不限于如下步骤：

S401、该电子设备接收用于启动应用的第一操作。

在具体实现中，示例性地，用户可以通过用户界面点击应用的图标或链接等控件启动该应用，或者通过语音唤醒来启动该应用。即上述用于启动应用的第一操作包括该点击操作或语音唤醒操作等。电子设备可以通过触摸传感器(例如上述图2中所示的触摸传感器180K)接收该第一操作。

S402、该电子设备从该应用的可执行文件中，提取带数据类型的JavaScript语言描述的组件信息；该可执行文件为一个使用该带数据类型的JavaScript语言编写的脚本文件，且描述了第一用户界面的布局、样式和逻辑。

在具体实现中，电子设备接收到启动应用的第一操作后，基于该第一操作获取该应用的可执行文件以进行解析。示例性地，该应用可以是APP、小程序或网页等。

若该应用为APP，那么，电子设备可以从应用商店或网站等下载该应用的安装包并安装，那么，在安装该应用的过程中即将该应用的可执行文件保存到该电子设备的存储器中。因此，上述获取该应用的可执行文件，可以是从该电子设备的存储器中读取出该应用的可执行文件。

若该应用为小程序或网页等，那么，电子设备接收到上述启动应用的第一操作后，可以基于该第一操作向该应用的服务器发送获取该应用的可执行文件的请求，以使得该服务器可以将该应用的可执行文件发送给该电子设备以进行解析。或者，该小程序或网页已经在该电子设备中启动过，那么，该电子设备可以缓存有该小程序或网页的可执行文件。这种情况下，电子设备接收到上述第一操作后，可以从缓存中读取该小程序或网页的可执行文件进行解析。

具体的，上述应用的可执行文件为使用带数据类型的JavaScript语言编写的脚本文件，且描述了该应用的第一用户界面的布局、样式和逻辑。那么，电子设备获得该应用的可执行文件后，解析该可执行文件。具体的，首先从该可执行文件中提取出该带数据类型的JavaScript语言描述的组件信息。

示例性地，可以通过上述图1所示的JS应用处理框架中的编程语言桥接模块从该可执行文件中提取出该带数据类型的JavaScript语言描述的组件信息。具体实现的描述可以参考上述图1中关于编程语言桥接模块的描述，此处不赘述。

S403、该电子设备将该带数据类型的JavaScript语言描述的组件信息，转换为由原生语言描述的组件信息；该原生语言为该电子设备的操作系统的编程语言，该原生语言不同于该带数据类型的JavaScript语言。

具体实现中，由于电子设备操作系统的编程语言不同于应用的可执行文件的编程语言，因此，为了操作系统可以识别和处理上述从可执行文件中提取出的第一用户界面的组件信息，需要将描述组件信息的编程语言由带数据类型的JavaScript语言转换为原生语言。该语言转换的过程又可以称为语言的桥接。具体的编程语言的转换方法可以采用现有的编程语言转换方法，本申请对此不做限制。

示例性地，可以通过上述图1所示的JS应用处理框架中的编程语言桥接模块来实现该组件信息的描述语言的转换。

S404、该电子设备基于该原生语言描述的组件信息构建该第一用户界面的组件树。

在具体实现中，上述将第一用户界面的组件信息转换为原生语言描述后，电子设备的操作系统可以识别该组件信息，进而可以基于该组件信息构建该第一用户界面的组件树，以用于后续渲染和显示该第一用户界面。

一种可能的实现方式中，不同编程语言的编程范式不相同，虽然上述将组件信息转换为原生语言描述的组件信息。但具体的编程范式仍存在一下差异，需要进一步进行编程范式的对接以使得渲染模块可以识别。进而使得渲染模块可以进行对应用户界面的渲染。具体的，上述将第一用户界面的组件信息转换为原生语言描述后，可以再将描述该组件信息的原生语言的编程范式与渲染模块可识别的编程范式做一下对接。即将描述该组件信息的原生语言的编程范式转换为渲染模块可识别的编程范式。从而使得渲染模块可以基于该组件信息渲染出第一用户界面。

具体的，编程范式转换之后的第一用户界面的组件信息可以输入到渲染模块，渲染模块基于该组件信息生成该第一用户界面的组件树，以用于后续渲染和显示该第一用户界面。

示例性地，可以通过上述图1所示的JS应用处理框架中的编程范式对接模块来实现上述编程范式的转换。上述渲染模块可以是上述图1所示的JS应用处理框架中的渲染模块。

S405、该电子设备使用该第一用户界面的组件树渲染并显示该第一用户界面。

具体实现中，上述渲染模块生成第一用户界面的组件树后，基于该组件树可以生成该第一用户界面的渲染树。然后，电子设备通过该渲染模块基于该渲染树渲染出该第一用户界面，然后显示到电子设备的屏幕上，以此完成该第一用户界面的加载和显示过程。

另外，上述渲染模块还可以基于上述第一用户界面的组件树生成该第一用户界面的元素树，该元素树用于将该第一用户界面的组件变化后的属性更新到该第一用户界面的渲染树中，以使得可以快速渲染出更新后的用户界面。

本申请实施例提供的上述应用的运行方法相比于现有的JS应用解析和执行方案能够提高应用的启动速度和应用页面快速滑动的流畅性。

具体的，基于前面的描述可知，现有的JS应用解析和执行方案不但需要消耗较多的计算资源，也影响了应用启动的速度和页面加载的速度。而在本申请实施例中，通过JS原生化模块来实现上述JS framework实现的功能，即通过JS原生化模块解析和执行JS应用。本申请实施例提供的JS原生化模块是使用native语言来实现，并且JS应用的可执行文件为一个使用带数据类型的JavaScript语言编写的脚本文件。那么，在解析和执行JS应用的可执行文件的过程中，无需重复生成两次用户界面的组件(现有的方案中一次在JS运行环境中基于三个脚本文件生成JS语言描述的组件，另一次在原生语言描述的处理模块中生成native语言描述的组件)并进行维护。而是通过JS原生化模块将从带数据类型的JavaScript语言编写的可执行文件中提取的组件信息转化为原生语言描述的组件信息，节省了先生成JS语言描述的组件的步骤。另外，由于本申请的JS原生化模块的编程语言为原生语言，避免了大量的跨语言通信。

综上，本申请实施例相比于现有方案可以节省解析步骤，避免生成两次组件信息，从而节省计算资源、节省存储组件信息的存储空间并且降低组件信息的维护成本。另外，由于本申请的JS原生化模块的编程语言为原生语言，避免了大量的跨语言通信，降低了数据通信的时延，极大地提高了数据的传输效率。从而提高了应用可执行文件的解析速度，进而提高了用户界面的渲染速度，进而能够提高应用的启动速度和应用页面快速滑动的流畅性。

另外，本申请通过native语言实现上述JS原生化模块，相比于通过JS语言实现的JS framework，无需在执行组件的属性绑定、事件管理和生命周期管理等操作时进行即时(Just-in-time，JIT)编译，从而提高了程序执行的效率。

一种可能的实施方式中，本申请实施例提供的应用的运行方法中还包括当用户界面的组件的属性变化后的处理操作。

示例性地，该方法还包括：上述电子设备根据上述应用的可执行文件生成依赖表，该依赖表描述了该第一用户界面的各个组件的属性和该各个组件的访问路径。上述S405中电子设备使用该第一用户界面的组件树渲染并显示该第一用户界面之后，还可以包括如下操作：该电子设备接收第二操作；该第二操作指示该第一用户界面的第一组件的属性变更；该电子设备根据该第二操作，更新该依赖表描述的该第一组件的属性；该电子设备基于更新后的该依赖表描述的该第一组件的属性，渲染并更新该第一用户界面的该第一组件。

具体的，在解析JS应用的可执行文件的过程中，电子设备可以基于解析出的组件信息建立上述依赖表。示例性地，可以通过上述图1所示的组件状态管理模块建立该依赖表。具体的，组件状态管理模块可以通过get()函数从解析后的组件信息中获取组件的访问路径和属性，然后，通过set()函数将获得的组件访问路径和属性记录到依赖表中。那么，该依赖表中描述了上述第一用户界面的各个组件的属性和该各个组件的访问路径。

在具体实现中，上述获得原生语言描述的组件信息之后，可以将该原生语言描述的组件注册到JS引擎中，以使得JS引擎可以监听组件的属性的变化。另外，可以将基于可执行文件获得的函数和各个功能模块注册到JS引擎中。示例性的，可以通过上述图1所示的JS应用处理框架中的注册模块把上述组件、函数和各个功能模块的名称(或标识)、参数和数据发送到JS引擎中进行保存，以完成注册。

因此，基于上述的描述，电子设备可以通过JS引擎监听上述第一用户界面的第一组件的属性的变化。示例性地，上述第二操作可以是用户通过上述第一用户界面更改该第一组件的属性的操作等。电子设备接收到该第二操作后，可以调用事件回调函数将变化的情况通知给JS引擎。该JS引擎接收到的通知消息中可以包括该第一组件的访问路径和该第一组件变化后的属性。然后，JS引擎通过引擎通信模块将该通知消息中该第一组件的访问路径和该第一组件变化后的属性发送给上述JS原生化模块中的组件状态管理模块。

上述组件状态管理模块接收到上述第一组件的访问路径和该第一组件变化后的属性后，该组件状态管理模块中的访问模块以该第一组件的访问路径为索引在上述依赖表中查询到该第一组件所在的表项。然后，该组件状态管理模块中的记录模块将该第一组件变化后的属性更新记录到该表项中，从而完成了变化后的属性和组件的重新绑定。关于该依赖表可以参见上述图1中关于组件状态管理模块中的相关描述，此处不再赘述。

更新上述依赖表后，电子设备可以基于该更新后的依赖表描述的第一组件的属性，渲染并更新上述第一用户界面的第一组件。

在具体实现中，由于上述依赖表中包括各个组件中的组件的访问路径，因此，可以基于这些访问路径快速生成上述第一用户界面的组件树，另外再将依赖表中该第一用户界面的组件的属性绑定到对应的组件节点中即可完成该组件树的构建。因此，在上述更新完依赖表中的数据后，可以基于更新后的依赖表快速生成新的组件树。示例性地，可以基于上述图1所示的组件更新模块基于更新后的依赖表生成该新的组件树。

然后，电子设备基于该新生成的第一用户界面的组件树更新该第一用户界面的渲染树中第一组件的属性。具体实现中，电子设备可以查找该生成的组件树中相比于原来的组件树出现变化的该第一组件。该原来的组件树为该第一组件出现变化前该第一用户界面的组件树。

示例性地，电子设备可以通过上述组件更新模块将该新的组件树与上述原来的组件树进行比较，找出该新的组件树中不同于该原来的组件树中的组件(即上述第一组件)。确定该新的组件树中相比于原来的组件树出现变化的组件为第一组件后，组件更新模块可以通过该第一组件在元素树中的节点找到渲染树中该第一组件对应的渲染节点，并将该渲染节点的属性更新为变化后的属性，从而完成渲染树中节点属性的重新绑定。

更新完上述渲染树后，渲染模块可以基于更新后的渲染树进行渲染，以获得更新后的用户界面。

为了便于理解上述第一组件的属性变化后于依赖表更新渲染树的过程，下面以该第一组件为上述为了便于理解依赖表中组件的访问路径给出的计算机程序描述的组件“objA”为例介绍。假设该组件显示在电子设备的显示屏上时表现出来的是一个文本框，即上述显示的第一用户界面中包括该文本框，可以示例性地参见图5A。以上述电子设备为手机为例，图5A中示出了手机显示屏显示的第一用户界面的示意图。该第一用户界面中包括一个文本框和其它信息显示区域。该文本框包括三行，每一行显示的内容分别为“abc”、“efg”和“Hi！world”。该文本框为该第一用户界面的组件，该组件的显示的内容为该组件的子组件。然后，用户通过上述图5A所示的第一用户界面点击该显示的文本框，并将文本框中的一个子组件的内容“Hi！world”更改为“Hello ABC！”。该点击可以是通过鼠标、触笔或者用户的手指等来触摸该显示的文本框完成的。示例性地，可以参见图5B，以用户的手指为例示出了点击第一用户界面的文本框的示意图。

电子设备通过第一用户界面接收到上述子组件的内容更改操作后，调用事件回调函数将更改的情况通知给JS引擎。该事件回调函数可以将该子组件的访问路径和更改后的内容一起返回给JS引擎。示例性的，该事件回调函数可以如下：

clickHandle：function(){

this.objA.arrayB[2]＝“Hello ABC！”

}

JS引擎通过上述事件回调函数可以获取上述子组件的访问路径“objA->arrayB->2”和变更后的属性“Hello ABC！”。然后，JS引擎通过引擎通信模块将该子组件的访问路径和更改后的属性发送给组件状态管理模块。组件状态管理模块以访问路径“objA->arrayB->2”为索引找到依赖表中的对应表项，然后将该表项中的组件属性更改为“Hello ABC！”。

上述组件状态管理模块更新依赖表后，可以生成一个属性更新命令发送到组件更新模块，以触发组件更新模块基于该依赖表生成新的第一用户界面的组件树。然后，基于该生成的第一用户界面的组件树和原来的第一用户界面的组件树更新渲染树中对应的组件的属性。该基于该生成的第一用户界面的组件树和原来的第一用户界面的组件树更新渲染树中对应的组件的属性，可以是采用现有的算法来实现，例如可以采用现有的diff算法来实现等。

然后，渲染模块基于上述更新后的渲染树进行渲染，并将渲染结果送到显示屏显示，以获得更新后的用户界面。更新后的用户界面可以示例性地参见图5C。

一种可能的实现中的，可以示例性地参见图6，给出了电子设备中用于处理组件属性变更情况的各个功能模块之间的交互示意图。

如图6所示，事件触发模块为电子设备中用于监听用户界面的组件的属性变更操作的软件模块。当监听到组件的属性变更操作后，可以向数据访问模块发送该监听到该操作通知。图6中的数据访问模块和数据记录模块属于前述描述的组件状态管理模块；另外，图6中的数据访问代理模块可以为前述介绍的引擎通信模块。具体的，数据访问模块接收到前述通知后，进一步将该通知发送到JS引擎，JS引擎对于接收到该通知做出响应返给数据访问模块。然后，数据访问模块向JS引擎发送获取变更的组件信息的请求。JS引擎基于该请求，通过事件回调函数获取该变更的组件的访问路径和变更后属性。可以通过exticGet函数读取事件回调函数中该变更的组件的访问路径和变更后属性。然后，JS引擎将获得的该变更的组件的访问路径和变更后属性通过数据访问代理模块发送给组件状态管理模块中的数据访问模块。组件状态管理模块中的数据记录模块从该数据访问模块获取该变更的组件的访问路径和变更后属性，并基于该访问路径更新依赖表中变更组件的属性。更新完成后，组件状态管理模块中的数据访问模块生成属性更新命令发送到组件更新模块。以触发组件更新模块基于该依赖表生成新的第一用户界面的组件树。后续的操作参见前述的描述，此处不赘述。

本申请实施例相比于现有的JS应用解析和执行方案也能够提高应用页面的渲染速度，进而提高应用页面快速滑动的流畅性，减少卡顿。具体的，上述新的组件树是基于依赖表中的访问路径快速生成的，相比于现有方案中通过遍历DOM树来生成该新的组件树，可以提高该新的组件树的生成效率，减少了计算的复杂度，进而提高渲染树的更新效率以使得可以更快地渲染出更新后的界面，减少页面显示卡顿的情况。

一种可能的实现中的，可以示例性地参见图7，给出了为了实现上述本申请实施例提供的应用的运行方法，电子设备中各个功能模块之间的交互示意图。

在图7中，应用响应于启动的操作，可以将该应用的可执行文件发送给JS引擎。基于前面的描述可知，JS引擎可以为应用的运行提供一个执行环境。JS引擎接收到可执行文件后，可以交由前述的JS原生化模块进行处理，具体可以参见前面的描述，此处不赘述。另外，JS引擎接收到可执行文件后，可以创建一个JS引擎监听器，用于监听该应用的组件的属性变化情况。示例性地，该JS引擎监听器可以包括上述图6中的事件触发模块。另外，JS引擎监听器还可以从JS原生化模块中获取从可执行文件中解析出的组件信息，并将组件信息注册到组件管理器。以使得组件管理器可以生成前述的依赖表。即该组件管理器可以是前述的组件状态管理模块。

另外，在图7中，应用响应于启动的操作，还可以将该应用依赖的视图view注册到JS引擎中。然后，通过JS引擎将该依赖的view注册到视图管理器中。视图管理器通过应用依赖的view来管理该应用的用户界面。此外，当用户界面的组件的属性出现变更时，组件管理器可以基于变更的情况更新依赖表。具体更新的过程可参考前述的描述，此处不赘述。除了更新依赖表，组件管理器还可以发送view需要更新的通知给视图管理器。视图管理器则通知该应用的元素树对应的节点来更新渲染树。然后，渲染模块基于更新后的渲染树渲染并将渲染结果送到显示器送显。该视图管理器可以属于前述的组件更新模块的部分，用于协助用户界面的组件的属性更新。

下面结合示例性的实验结果来说明本申请实施例提供的应用的运行方法的技术效果。示例性地，可以参见表1。表1示例性示出了手机和手表在不同场景下，通过现有的JS应用运行方案和本申请提供的JS应用运行方案实现所需的时间开销的对比情况。

表1

通过上述表1比较可知，对于手表中的日程应用，本方案相比现有方案，JS环境初始化的时间开销减少了近4倍。本方案相比现有方案，加载首页的时间快了2倍多。另外，在手表的日程应用中测试了组件属性更新后再显示的时间，本方案的耗时要比现有方案要少一半时间。

此外，在手机上的仿淘宝应用分别测试了JS环境初始化的时间及加载首页(仿淘宝页面，包含100个页面组件)的时间，本方案的JS环境初始化的时间比现有方案快4倍，加载仿淘宝复杂页面的时间要少花一半的时间。仿淘宝应用指的是基于带数据类型的JS语言模仿淘宝实现的JS应用。

基于表1证明在手机和手表上，验证了本方案的可行性和有效性，相比现有方案，较大地提升应用的启动速度和页面加载速度。

此外，为了验证本方案中提出的当用户界面的组件的属性变化后的处理方案的有效性，专门在手机和电视机TV上测试了包含1440个文本的日历应用，测试结果如表2所示。

表2

/>

从表2中结果可知，不论在TV上，还是手机上，日历应用中在大量的文本内容需要更新后再显示的测试场景，本方案相比于现有方案的时间开销平均节省了72.45％，提升效果显著，进而证明本方案中提出的当用户界面的组件的属性变化后的处理方案的可行性和有效性。

综上所述，本方案的有益效果如下：

(1)在不同设备上，本方案的JS应用中首页加载的启动速度比现有方案要快近一倍；

(2)在组件属性更新的场景，JS应用的启动时间与JS解析的性能线性相关，如果更新的属性比较多，本方案优势更明显；

(3)本方案中解析JS应用可执行文件的JS原生化模块通过原生语言实现，只需生成一次原生语言描述的组件信息，无需像现有方案中需要分别在JS运行环境中和原生语言环境中均生成和维护组件的信息，从而降低了内存的占用；

(4)本方案中解析JS应用可执行文件的JS原生化模块通过原生语言实现，解决JS和Native侧通讯瓶颈问题，在频繁滑动，交互的场景，页面滑动流畅，不会卡顿，用户体验好；

(5)解决现有diff算法执行效率低的问题。具体的，本申请用户界面的组件的属性变化后的处理方案，是基于依赖表来快速生成新的组件树以更新渲染树。而不是像现有diff算法，通过遍历DOM树来生成该新的组件树，然后才能更新渲染树。遍历算法复杂执行效率低，本方案避免了采用遍历算法来生成新的组件树，从而加快了渲染树更新的效率，进而快速渲染出变化后的用户界面。

(6)解决现有方案中数据绑定效率低的问题。本方案通过构建一个依赖表记录每个组件的访问路径，组件标识和组件的属性来实现组件相关属性的快速绑定。而不是像现有的方案中通过遍历组件树的方式来进行数据的绑定，从而提高了数据绑定的效率，加快页面显示的速度；

(7)解决JS执行效率低的问题，由于在native侧执行效率要高于在JS侧，本方案将解析JS应用可执行文件的JS原生化模块通过原生语言实现，解决JS侧执行效率低的问题。

上述对本申请实施例提供的应用的运行方法进行了介绍。可以理解的是，电子设备为了实现上述对应的功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

本申请实施例可以根据上述方法示例对电子设备等进行功能模块的划分，例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个模块中。需要说明的是，本申请实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

在采用对应各个功能划分各个功能模块的情况下，图8示出了一种电子设备800，该电子设备800例如可以是上述方法实施例中所述的电子设备。该电子设备800的操作系统的编程语言为原生语言。该电子设备800的操作系统包括该原生语言描述的接收模块801、编程语言桥接模块802和渲染模块803。其中：

该接收模块801，用于接收用于启动应用的第一操作；

该编程语言桥接模块802，用于从该应用的可执行文件中，提取带数据类型的JavaScript语言描述的组件信息；并将该带数据类型的JavaScript语言描述的组件信息，转换为由原生语言描述的组件信息；该可执行文件为一个使用该带数据类型的JavaScript语言编写的脚本文件，且描述了第一用户界面的布局、样式和逻辑；该原生语言不同于该带数据类型的JavaScript语言；

该渲染模块803，用于基于该原生语言描述的组件信息构建该第一用户界面的组件树，并使用该第一用户界面的组件树渲染并显示该第一用户界面。

一种可能的实施方式中，该带数据类型的JavaScript语言为TypeScript语言。

一种可能的实施方式中，该电子设备的操作系统还包括该原生语言描述的组件状态管理模块、通知模块和更新模块；

该组件状态管理模块，用于根据该应用的可执行文件，生成依赖表，该依赖表描述了该第一用户界面的各个组件的属性和该各个组件的访问路径；

该通知模块，用于在该渲染模块803使用该第一用户界面的组件树渲染并显示该第一用户界面之后，接收第二操作；该第二操作指示该第一用户界面的第一组件的属性变更；

该组件状态管理模块，还用于根据该第二操作，更新该依赖表描述的该第一组件的属性；

该更新模块，还用于基于更新后的该依赖表描述的该第一组件的属性，渲染并更新该第一用户界面的该第一组件。

一种可能的实施方式中，该组件状态管理模块具体用于：

基于该第二操作获取该第一组件的访问路径和该第一组件变更后的属性；

基于该第一组件的访问路径将该依赖表描述的该第一组件的属性更新为该变更后的属性。

一种可能的实施方式中，该更新模块包括组件更新模块和该渲染模块803；

该组件更新模块，用于基于更新后的该依赖表生成该第一用户界面的组件树，并基于该生成的该第一用户界面的组件树更新该第一用户界面的渲染树中该第一组件的属性；

该渲染模块803，用于基于该更新后的渲染树中该第一组件的属性，渲染并更新该第一用户界面的该第一组件。

一种可能的实施方式中，该应用为应用程序APP、小程序或网页。

图8所示电子设备800中各个功能模块的具体操作以及有益效果可以参见上述图4及其可能的方法实施例中对应的描述，此处不再赘述。

图9所示为本申请提供的电子设备的一种可能的硬件结构示意图，该装置可以是上述方法实施例所述的电子设备，或者可以是该电子设备中的芯片，或者可以是该电子设备中的处理系统等。该电子设备900包括：处理器901、存储器902和通信接口903。处理器901、通信接口903以及存储器902可以相互连接或者通过总线904相互连接。

示例性的，存储器902用于存储电子设备900的计算机程序和数据，存储器902可以包括但不限于是随机存储记忆体(random access memory，RAM)、只读存储器(read-onlymemory，ROM)、可擦除可编程只读存储器(erasable programmable read only memory，EPROM)或便携式只读存储器(compact disc read-only memory，CD-ROM)等。

通信接口903包括发送接口和接收接口，通信接口903的个数可以为多个，用于支持电子设备900进行通信，例如接收或发送数据或消息等。

示例性的，处理器901可以是中央处理器单元、通用处理器、数字信号处理器、专用集成电路、现场可编程门阵列或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。处理器也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，数字信号处理器和微处理器的组合等等。处理器901可以用于读取上述存储器902中存储的程序，使得电子设备900执行如上述图4及其可能的实施例中所述的应用的运行方法。

一种可能的实施方式中，处理器901可以用于执行如下操作：接收用于启动应用的第一操作；从该应用的可执行文件中，提取带数据类型的JavaScript语言描述的组件信息；该可执行文件为一个使用该带数据类型的JavaScript语言编写的脚本文件，且描述了第一用户界面的布局、样式和逻辑；将该带数据类型的JavaScript语言描述的组件信息，转换为由原生语言描述的组件信息；该原生语言为该电子设备的操作系统的编程语言，该原生语言不同于该带数据类型的JavaScript语言；基于该原生语言描述的组件信息构建该第一用户界面的组件树；使用该第一用户界面的组件树渲染并显示该第一用户界面。

图9所示电子设备900中各个单元的具体操作以及有益效果可以参见上述图2及其可能的方法实施例中对应的描述，此处不再赘述。

本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行以实现上述图4及其可能的方法实施例中任一实施例所述的方法。

本申请实施例还提供一种计算机程序产品，当该计算机程序产品被计算机读取并执行时，上述图4及其可能的方法实施例中任一实施例所述的方法。

综上，本申请实施例相比于现有方案可以节省解析步骤，避免生成两次组件信息，从而节省计算资源、节省存储组件信息的存储空间并且降低组件信息的维护成本。另外，由于本申请的JS原生化模块的编程语言为原生语言，避免了大量的跨语言通信，降低了数据通信的时延，极大地提高了数据的传输效率。从而提高了应用可执行文件的解析速度，进而提高了用户界面的渲染速度，进而能够提高应用的启动速度和应用页面快速滑动的流畅性。另外，本申请通过native语言实现上述JS原生化模块，相比于通过JS语言实现的JSframework，无需在执行组件的属性绑定、事件管理和生命周期管理等操作时进行即时(Just-in-time，JIT)编译，从而提高了程序执行的效率。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (18)

1.一种应用的运行方法，其特征在于，所述方法应用于电子设备，所述方法包括：

接收用于启动应用的第一操作；

从所述应用的可执行文件中，提取带数据类型的JavaScript语言描述的组件信息；所述可执行文件为一个使用所述带数据类型的JavaScript语言编写的脚本文件，且描述了第一用户界面的布局、样式和逻辑；

将所述带数据类型的JavaScript语言描述的组件信息，转换为由原生语言描述的组件信息；所述原生语言为所述电子设备的操作系统的编程语言，所述原生语言不同于所述带数据类型的JavaScript语言；

基于所述原生语言描述的组件信息构建所述第一用户界面的组件树；

使用所述第一用户界面的组件树渲染并显示所述第一用户界面。

2.根据权利要求1所述的方法，其特征在于，所述带数据类型的JavaScript语言为TypeScript语言。

3.根据权利要求1或2所述的方法，其特征在于，所述方法还包括：

根据所述应用的可执行文件，生成依赖表，所述依赖表描述了所述第一用户界面的各个组件的属性和所述各个组件的访问路径；

所述使用所述第一用户界面的组件树渲染并显示所述第一用户界面之后，还包括：

接收第二操作；所述第二操作指示所述第一用户界面的第一组件的属性变更；

根据所述第二操作，更新所述依赖表描述的所述第一组件的属性；

基于更新后的所述依赖表描述的所述第一组件的属性，渲染并更新所述第一用户界面的所述第一组件。

4.根据权利要求3所述的方法，其特征在于，所述根据所述第二操作，更新所述依赖表描述的所述第一组件的属性，包括：

基于所述第二操作获取所述第一组件的访问路径和所述第一组件变更后的属性；

基于所述第一组件的访问路径将所述依赖表描述的所述第一组件的属性更新为所述变更后的属性。

5.根据权利要求3或4所述的方法，其特征在于，所述基于更新后的所述依赖表描述的所述第一组件的属性，渲染并更新所述第一用户界面的所述第一组件，包括：

基于更新后的所述依赖表生成所述第一用户界面的组件树；

基于所述生成的所述第一用户界面的组件树更新所述第一用户界面的渲染树中所述第一组件的属性；

基于所述更新后的渲染树中所述第一组件的属性，渲染并更新所述第一用户界面的所述第一组件。

6.根据权利要求1-5任一项所述的方法，其特征在于，所述应用为应用程序APP、小程序或网页程序。

7.根据权利要求1-6任一项所述的方法，其特征在于，所述电子设备的操作系统包括所述原生语言描述的编程语言桥接模块和渲染模块；所述方法具体包括：

通过所述编程语言桥接模块从所述应用的可执行文件中，提取所述带数据类型的JavaScript语言描述的组件信息；并将所述带数据类型的JavaScript语言描述的组件信息，转换为由所述原生语言描述的组件信息；

通过所述渲染模块基于所述原生语言描述的组件信息构建所述第一用户界面的组件树，使用所述第一用户界面的组件树渲染并显示所述第一用户界面。

8.根据权利要求3-5任一项所述的方法，其特征在于，所述电子设备的操作系统包括所述原生语言描述的组件状态管理模块、通知模块和渲染模块；所述方法具体包括：

通过所述组件状态管理模块根据所述应用的可执行文件，生成依赖表，所述依赖表描述了所述第一用户界面的各个组件的属性和所述各个组件的访问路径；

通过所述渲染模块使用所述第一用户界面的组件树渲染并显示所述第一用户界面之后，具体还包括：

通过所述通知模块接收所述第二操作；

通过所述组件状态管理模块根据所述第二操作，更新所述依赖表描述的所述第一组件的属性。

9.根据权利要求4所述的方法，其特征在于，所述电子设备的操作系统包括所述原生语言描述的组件状态管理模块；所述根据所述第二操作，更新所述依赖表描述的所述第一组件的属性，具体包括：

通过所述组件状态管理模块基于所述第二操作获取所述第一组件的访问路径和所述第一组件变更后的属性；

通过所述组件状态管理模块基于所述第一组件的访问路径将所述依赖表描述的所述第一组件的属性更新为所述变更后的属性。

10.根据权利要求5所述的方法，其特征在于，所述电子设备的操作系统包括所述原生语言描述的组件更新模块和渲染模块；所述基于更新后的所述依赖表描述的所述第一组件的属性，渲染并更新所述第一用户界面的所述第一组件，具体包括：

通过所述组件更新模块基于更新后的所述依赖表生成所述第一用户界面的组件树，并基于所述生成的所述第一用户界面的组件树更新所述第一用户界面的渲染树中所述第一组件的属性；

通过所述渲染模块基于所述更新后的渲染树中所述第一组件的属性，渲染并更新所述第一用户界面中的所述第一组件。

11.一种电子设备，其特征在于，所述电子设备的操作系统的编程语言为原生语言；所述电子设备的操作系统包括所述原生语言描述的接收模块、编程语言桥接模块和渲染模块；

所述接收模块，用于接收用于启动应用的第一操作；

所述编程语言桥接模块，用于从所述应用的可执行文件中，提取带数据类型的JavaScript语言描述的组件信息；并将所述带数据类型的JavaScript语言描述的组件信息，转换为由原生语言描述的组件信息；所述可执行文件为一个使用所述带数据类型的JavaScript语言编写的脚本文件，且描述了第一用户界面的布局、样式和逻辑；所述原生语言不同于所述带数据类型的JavaScript语言；

所述渲染模块，用于基于所述原生语言描述的组件信息构建所述第一用户界面的组件树，并使用所述第一用户界面的组件树渲染并显示所述第一用户界面。

12.根据权利要求11所述的电子设备，其特征在于，所述带数据类型的JavaScript语言为TypeScript语言。

13.根据权利要求11或12所述的电子设备，其特征在于，所述电子设备的操作系统还包括所述原生语言描述的组件状态管理模块、通知模块和更新模块；

所述组件状态管理模块，用于根据所述应用的可执行文件，生成依赖表，所述依赖表描述了所述第一用户界面的各个组件的属性和所述各个组件的访问路径；

所述通知模块，用于在所述渲染模块使用所述第一用户界面的组件树渲染并显示所述第一用户界面之后，接收第二操作；所述第二操作指示所述第一用户界面的第一组件的属性变更；

所述组件状态管理模块，还用于根据所述第二操作，更新所述依赖表描述的所述第一组件的属性；

所述更新模块，还用于基于更新后的所述依赖表描述的所述第一组件的属性，渲染并更新所述第一用户界面的所述第一组件。

14.根据权利要求13所述的电子设备，其特征在于，所述组件状态管理模块具体用于：

基于所述第二操作获取所述第一组件的访问路径和所述第一组件变更后的属性；

基于所述第一组件的访问路径将所述依赖表描述的所述第一组件的属性更新为所述变更后的属性。

15.根据权利要求13或14所述的电子设备，其特征在于，所述更新模块包括组件更新模块和所述渲染模块；

所述组件更新模块，用于基于更新后的所述依赖表生成所述第一用户界面的组件树，并基于所述生成的所述第一用户界面的组件树更新所述第一用户界面的渲染树中所述第一组件的属性；

所述渲染模块，用于基于所述更新后的渲染树中所述第一组件的属性，渲染并更新所述第一用户界面的所述第一组件。

16.根据权利要求11-15任一项所述的电子设备，其特征在于，所述应用为应用程序APP、小程序或网页。

17.一种电子设备，其特征在于，包括：存储器、一个或多个处理器；所述存储器与所述一个或多个处理器耦合，所述存储器用于存储计算机程序，所述一个或多个处理器调用所述计算机程序以使得所述电子设备执行如权利要求1-10中任一项所述的方法。

18.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括计算机程序，当所述计算机程序在电子设备上运行时，使得所述电子设备执行如权利要求1-10中任一项所述的方法。