Method for running an application and related apparatus

Abstract

Embodiments of the present application provide a running method of an application and related devices, the method is applied to an electronic device, and the method comprises the following steps: receiving a first operation for starting the application; extracting component information described by a JavaScript language with data type from an executable file of the application; the executable file is a script file written by using the JavaScript language with data type and describes a layout, a style and a logic of a first user interface; converting the component information described by the JavaScript language with data type into component information described by a native language; the native language is different from the JavaScript language with data type; constructing a component tree of the first user interface based on the component information described by the native language; and rendering and displaying the first user interface by using the component tree of the first user interface. The embodiments of the present application can improve the starting speed of the application and the fluency of fast sliding of an application page.

Description

Technical Field

[0001] This application relates to the field of front-end framework technology, and in particular to an application running method and related apparatus. Background Technology

[0002] In the field of front-end technology, pure native development refers to developing native user interfaces (UIs) by directly calling the application programming interfaces (APIs) provided by the operating system. This method achieves high UI rendering performance and can implement complex animations. However, the content displayed is fixed, and updating new content requires releasing a new version, resulting in weak dynamism. These factors make pure native development unable to meet the increasing demands for dynamic content updates and rapidly changing business requirements.

[0003] To address the lack of dynamism in purely native development, front-end frameworks combining JavaScript and native rendering emerged, such as the Quick App framework and the Weex framework. This approach uses JavaScript as the application development language, bridging JS components to native UI components. Rendering the JS components is essentially rendering the native UI components, achieving performance parity with native rendering. Applications built on this framework can be developed once and deployed across multiple platforms, offering better dynamism than natively developed applications, with performance on par with native applications and stronger dynamism. Therefore, this JavaScript + native rendering front-end framework has become the mainstream application development framework. However, as user demands increase, applications built on this framework experience slower startup times and stuttering during rapid page scrolling, rendering the framework no longer sufficient to meet user needs. Summary of the Invention

[0004] This application discloses an application running method and related apparatus, which can improve the application startup speed and the smoothness of fast page scrolling.

[0005] In a first aspect, this application provides a method for operating an application, the method being applied to an electronic device, the method comprising:

[0006] Receive the first operation used to launch the application;

[0007] Extract component information with data type descriptions from the executable file of the aforementioned application; the aforementioned executable file is a script file written in the aforementioned JavaScript language with data types, and describes the layout, style and logic of the first user interface;

[0008] The component information described in the aforementioned JavaScript language with data types is converted into component information described in a native language; the aforementioned native language is the programming language of the operating system of the aforementioned electronic device, and the aforementioned native language is different from the aforementioned JavaScript language with data types.

[0009] The component tree of the first user interface is constructed based on the component information described in the aforementioned native language; and the component tree of the first user interface is used to render and display the first user interface.

[0010] Optionally, the JavaScript language with data types mentioned above is TypeScript.

[0011] Optionally, the aforementioned applications can be apps, mini-programs, or web applications.

[0012] Existing JavaScript application executables consist of three script files written in three different programming languages: an HTML script file (using Hyper Text Markup Language, describing the user interface layout), a CSS script file (using Cascading Style Sheets, describing the user interface styles), and a JavaScript script file (using JavaScript, describing the user interface logic). In this solution, the JavaScript application executable is a single JavaScript script file with data types. This means that a single script file can describe the content described by the three script files. Therefore, during parsing, there's no need to retrieve component information from three files for binding and then perform component language conversion. Instead, component information can be directly extracted from a single file for rapid component language conversion, accelerating component tree generation and improving rendering efficiency. This, in turn, improves application startup speed and page display responsiveness.

[0013] In one possible implementation, the aforementioned method further includes:

[0014] Based on the executable file of the aforementioned application, a dependency table is generated, which describes the properties of each component of the aforementioned first user interface and the access paths of each component.

[0015] After rendering and displaying the aforementioned first user interface using the component tree of the first user interface, the process also includes:

[0016] The aforementioned electronic device receives a second operation, which instructs a change in the attribute of a first component of the aforementioned first user interface;

[0017] Based on the second operation described above, update the properties of the first component described in the dependency table described above;

[0018] Based on the properties of the aforementioned first component described in the updated dependency table, render and update the aforementioned first component of the aforementioned first user interface.

[0019] Optionally, updating the attributes of the first component described in the dependency table according to the second operation includes: obtaining the access path of the first component and the changed attributes of the first component based on the second operation; and updating the attributes of the first component described in the dependency table to the changed attributes based on the access path of the first component.

[0020] In this application, the dependency table includes the attributes of each component of the user interface and the access paths of the components. Once a component's attribute changes, it is promptly updated in the dependency table, enabling rapid rebinding of components and their attributes. Then, the updated user interface is re-rendered and displayed based on the updated dependency table. Existing solutions rebind components and their attributes by traversing the components, which is complex and time-consuming. Therefore, the solution in this application has a simpler algorithm and faster computation speed compared to existing solutions, thus improving the efficiency of rebinding changed attributes and consequently improving the rendering efficiency of the changed user interface. This allows for faster display of the changed interface and reduces page lag.

[0021] In one possible implementation, rendering and updating the first component of the first user interface based on the attributes of the first component described in the updated dependency table includes:

[0022] The component tree of the aforementioned first user interface is generated based on the updated dependency table;

[0023] Update the properties of the first component in the rendering tree of the first user interface based on the component tree of the first user interface generated above.

[0024] Based on the properties of the first component in the updated render tree, render and update the first component of the first user interface.

[0025] In this application, the new component tree is generated quickly based on the access paths in the dependency table. Compared to existing solutions that use complex algorithms to traverse the DOM tree to generate the new component tree, this application improves the generation efficiency of the new component tree and reduces computational complexity. This, in turn, improves the update efficiency of the rendering tree, enabling faster rendering of the updated interface and reducing page display lag.

[0026] In one possible implementation, the operating system of the aforementioned electronic device includes a programming language bridging module and a rendering module described in the aforementioned native language; the aforementioned method specifically includes:

[0027] The aforementioned programming language bridging module extracts the component information described in JavaScript with data types from the executable file of the aforementioned application; and converts the component information described in JavaScript with data types into component information described in the aforementioned native language.

[0028] The aforementioned rendering module constructs the component tree of the aforementioned first user interface based on the component information described in the aforementioned native language, and uses the component tree of the aforementioned first user interface to render and display the aforementioned first user interface.

[0029] In one possible implementation, the operating system of the aforementioned electronic device includes a component state management module, a notification module, and a rendering module described in the aforementioned native language; the aforementioned method specifically includes:

[0030] The aforementioned component state management module generates a dependency table based on the executable file of the aforementioned application. The dependency table describes the attributes of each component of the aforementioned first user interface and the access path of each component.

[0031] After rendering and displaying the first user interface using the aforementioned rendering module's component tree, the process further includes:

[0032] The aforementioned second operation is received through the aforementioned notification module; the aforementioned component state management module updates the properties of the aforementioned first component described in the aforementioned dependency table according to the aforementioned second operation.

[0033] In one possible implementation, the operating system of the aforementioned electronic device includes a component state management module described in the aforementioned native language; the aforementioned updating of the attributes of the aforementioned first component described in the aforementioned dependency table according to the aforementioned second operation specifically includes:

[0034] The aforementioned component state management module obtains the access path of the aforementioned first component and the changed attributes of the aforementioned first component based on the aforementioned second operation;

[0035] The aforementioned component state management module updates the properties of the aforementioned first component described in the aforementioned dependency table to the aforementioned changed properties based on the access path of the aforementioned first component.

[0036] In one possible implementation, the operating system of the aforementioned electronic device includes a component update module and a rendering module described in the aforementioned native language; the aforementioned first component, which renders and updates the aforementioned first user interface based on the attributes of the aforementioned first component described in the updated aforementioned dependency table, specifically includes:

[0037] The aforementioned component update module generates the component tree of the aforementioned first user interface based on the updated aforementioned dependency table, and updates the properties of the aforementioned first component in the rendering tree of the first user interface based on the generated component tree of the aforementioned first user interface.

[0038] The aforementioned rendering module renders and updates the aforementioned first component in the aforementioned first user interface based on the attributes of the aforementioned first component in the aforementioned updated rendering tree.

[0039] In the above possible implementations, compared to existing solutions that use JS application parsing frameworks implemented in languages ​​other than native languages, the programming language of the functional modules implementing the above processing operations in this application is the native language of the operating system. This avoids extensive cross-language communication between the parsing framework and the operating system, greatly improving data transmission efficiency. This, in turn, improves the parsing speed of the application executable file, thereby improving the rendering speed of the user interface, and consequently, enhancing the application's startup speed and the smoothness of fast page scrolling.

[0040] Secondly, this application provides an electronic device whose operating system is programmed in a native language; the operating system of the aforementioned electronic device includes a receiving module, a programming language bridging module, and a rendering module described in the aforementioned native language.

[0041] The aforementioned receiving module is used to receive the first operation for starting the application;

[0042] The aforementioned programming language bridging module is used to extract component information described in JavaScript with data types from the executable file of the aforementioned application; and to convert the aforementioned component information described in JavaScript with data types into component information described in a native language; the aforementioned executable file is a script file written in the aforementioned JavaScript with data types, and describes the layout, style and logic of the first user interface; the aforementioned native language is different from the aforementioned JavaScript with data types.

[0043] The aforementioned rendering module is used to construct the component tree of the aforementioned first user interface based on the component information described in the aforementioned native language, and to render and display the aforementioned first user interface using the component tree of the aforementioned first user interface.

[0044] In one possible implementation, the aforementioned JavaScript language with data types is the TypeScript language.

[0045] In one possible implementation, the operating system of the aforementioned electronic device further includes a component state management module, a notification module, and an update module described in the aforementioned native language;

[0046] The aforementioned component state management module is used to generate a dependency table based on the executable file of the aforementioned application. The dependency table describes the attributes of each component of the aforementioned first user interface and the access path of each component.

[0047] The aforementioned notification module is configured to receive a second operation after the aforementioned rendering module renders and displays the aforementioned first user interface using the component tree of the aforementioned first user interface; the aforementioned second operation indicates a change in the attribute of the first component of the aforementioned first user interface.

[0048] The aforementioned component state management module is also used to update the properties of the aforementioned first component described in the aforementioned dependency table according to the aforementioned second operation;

[0049] The aforementioned update module is also used to render and update the aforementioned first component of the aforementioned first user interface based on the properties of the aforementioned first component described in the updated aforementioned dependency table.

[0050] In one possible implementation, the aforementioned component state management module is specifically used for:

[0051] Based on the aforementioned second operation, obtain the access path of the aforementioned first component and the changed attributes of the aforementioned first component;

[0052] Based on the access path of the first component, update the properties of the first component described in the dependency table to the modified properties.

[0053] In one possible implementation, the aforementioned update module includes a component update module and the aforementioned rendering module;

[0054] The aforementioned component update module is used to generate the component tree of the aforementioned first user interface based on the updated aforementioned dependency table, and to update the properties of the aforementioned first component in the rendering tree of the aforementioned first user interface based on the generated component tree of the aforementioned first user interface.

[0055] The aforementioned rendering module is used to render and update the aforementioned first component of the aforementioned first user interface based on the attributes of the aforementioned first component in the aforementioned updated rendering tree.

[0056] In one possible implementation, the aforementioned application is an app, a mini-program, or a webpage.

[0057] Thirdly, this application provides an electronic device comprising: a memory and one or more processors; the memory is coupled to the one or more processors, the memory is used to store a computer program, and the one or more processors invoke the computer program to cause the electronic device to perform the method described in any one of the first aspects.

[0058] Fourthly, this application provides a computer-readable storage medium comprising a computer program that, when executed on an electronic device, causes the electronic device to perform the method described in any one of the first aspects.

[0059] Fifthly, this application provides a computer program product comprising program code that, when run on a computer, causes the computer to perform the method described in any one of the first aspects.

[0060] It is understood that the beneficial effects achieved by the second to fifth aspects provided above can be referred to the beneficial effects described in the first aspect above, and will not be repeated here. Attached Figure Description

[0061] Figure 1 The diagram shown is a schematic of the JS application processing framework provided in an embodiment of this application;

[0062] Figure 2 The diagram shown is a schematic diagram of the electronic device structure provided in an embodiment of this application;

[0063] Figure 3 The diagram shown is a schematic diagram of the software framework in an electronic device provided in an embodiment of this application;

[0064] Figure 4 The diagram shown is a flowchart illustrating the operation method of the application provided in this embodiment.

[0065] Figure 5A , Figure 5B and Figure 5C The diagram shown is a schematic representation of the user interface provided in an embodiment of this application;

[0066] Figure 6 The diagram shown is a schematic representation of the interaction between various functional modules in an electronic device provided in this application embodiment;

[0067] Figure 7 The diagram shown is another schematic representation of the interaction between various functional modules in an electronic device provided in this application embodiment;

[0068] Figure 8 The diagram shown is a logical structure diagram of the electronic device provided in an embodiment of this application;

[0069] Figure 9 The diagram shown is a schematic representation of the hardware structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0070] The technical solutions in the embodiments of this application will now be described with reference to the accompanying drawings.

[0071] The technical terms used in this application will be introduced below.

[0072] 1. JavaScript

[0073] JavaScript, or JS for short, is a lightweight, interpreted or just-in-time (JIT) programming language that prioritizes functions.

[0074] 2. JS Application

[0075] A JS application is an application (app) implemented using the JavaScript programming language. JS applications can also include mini-programs or web pages implemented using JavaScript.

[0076] 3. JS framework

[0077] The JS framework is responsible for parsing and executing JS applications and providing various JS function libraries.

[0078] 4. Document Object Model (DOM)

[0079] The DOM is a standard programming interface for the Extensible Markup Language (EXPLAIN). It's a platform- and language-independent application programming interface (API) that allows dynamic access to programs and scripts, updating their content, structure, and document style. Through the DOM, documents can be further processed, and the results can be added to the current page. For example, a document can be a page, an HTML file, or an XML file. In existing JavaScript application runtime scenarios, the DOM can be generated by parsing the JavaScript application's executable file. The DOM can be represented as a tree structure, called the DOM tree.

[0080] 5. User Interface (UI)

[0081] A user interface (UI) is the medium through which an application or operating system interacts and exchanges information with the user. It converts the internal form of information into a form that the user can understand. UIs are source codes written in specific computer languages ​​such as Java, Extensible Markup Language (XML), and JavaScript. These source codes are parsed and rendered on the electronic device, ultimately presenting content that the user can recognize. The presented UI can include visible interface elements such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, or widgets displayed on the electronic device's screen.

[0082] 6. The application's executable file

[0083] An application's executable file is a script file that describes the layout, style, and logic of the application's user interface. The executable file defines the components of the application's user interface and describes information such as the properties, events, and methods of these components. For example, component properties include the component's content and style. The component's style may include its size, color, font, or whether it has an underline. For example, component events include binding, creation, registration, access, communication, or authentication. For example, component methods include defined functions, etc.

[0084] The layout of the user interface of the aforementioned application includes the layout of the user interface components within the user interface. The style of the user interface of the aforementioned application includes the style of the user interface itself and the style of the user interface components. The logic of the user interface of the aforementioned application includes user interface events or methods, as well as events and methods within the user interface components.

[0085] In the embodiments of this application, the components defined in the executable file are not limited to the defined component; sub-components described in the defined component also belong to the components described in this application. Furthermore, from a visual perspective, the user interface is composed of interface elements. Therefore, the components defined in the executable file correspond to the interface elements in the user interface.

[0086] 7. Component tree, element tree, and render tree

[0087] Generally, after the application's executable file is parsed, a component tree, element tree, and rendering tree of the user interface to be displayed can be generated.

[0088] Specifically, the components of the user interface to be displayed, defined in the executable file, constitute the nodes of the component tree; that is, one component corresponds to one node in the component tree. Each node in the component tree is configured with a unique node identifier. Nodes in the component tree can correspond to one or more of the component's properties, events, and methods.

[0089] The render tree is a visual representation of a document. The nodes in the component tree described above include nodes that can be displayed in the user interface and nodes that are not displayed. The render tree includes nodes that can be displayed in the user interface, and it binds information about these nodes. The layout, style, and logic of the user interface can be determined through the render tree. Therefore, drawing commands can be generated based on the render tree to render the user interface.

[0090] The element tree is an instance of the component tree, used to connect the component tree and the render tree. Specifically, there is a one-to-one correspondence between nodes in the element tree and nodes in the component tree. The element tree is used to update the corresponding node in the render tree with the changed data when a node's data changes, thus rebinding the nodes and data in the render tree. Based on the updated render tree, the changed user interface can then be rendered. Therefore, the element tree can be seen as a proxy between the component tree and the render tree.

[0091] In one possible implementation, the node connections between the component tree, element tree, and rendering tree can be implemented using pointers. A pointer is a variable that stores the address of another variable. That is, for a given node, a pointer can be defined to that node, and pointers to that same node can also be defined in the component tree, element tree, and rendering tree. If the data of that node changes, the defined pointers can be used to locate that node in the component tree, element tree, and rendering tree. Then, the corresponding node in the element tree can retrieve the changed data from the component tree and update the corresponding node in the rendering tree with the changed data.

[0092] 8. JavaScript with data types

[0093] In data structures, a data type is defined as a set of values ​​and a set of operations defined on that set of values. For example, data types include byte, short, int, long, float, double, or char. Specifically, byte defines an 8-bit signed integer represented in two's complement; short defines a 16-bit signed integer represented in two's complement; int defines a 32-bit signed integer represented in two's complement; long defines a 64-bit signed integer represented in two's complement; float defines a single-precision 32-bit floating-point number conforming to the IEEE 754 standard; double defines a double-precision 64-bit floating-point number conforming to the IEEE 754 standard; and char defines a single 16-bit character.

[0094] Typed JavaScript refers to computer programs written in typed JavaScript that require data variables to have explicit data types.

[0095] Existing JavaScript application runtime solutions are based on JavaScript frameworks, which are implemented using the JavaScript language. The application's user interface rendering module is typically implemented using the operating system's (OS) programming language (i.e., the native language). This native language is different from the JavaScript programming language. Furthermore, existing JavaScript application executables consist of three files: an HTML script file (programmed using Hyper Text Markup Language, HTML) describing the user interface layout; a CSS script file (programmed using Cascading Style Sheets, CSS) describing the user interface styles; and a JavaScript script file (programmed using JavaScript) describing the user interface logic. Therefore, during the JavaScript framework's parsing of the JavaScript application's executable file, it first needs to build the user interface's JavaScript components (i.e., components described in JavaScript, also known as JavaScript objects) based on these three script files in the JavaScript runtime environment. Then, the JavaScript engine sends the user interface's JavaScript components built in the JavaScript runtime environment to the native implementation's processing module, where the corresponding native language-described components are built. Only then can the user interface be rendered and displayed based on the components described in the native language by the rendering module. During this process, frequent cross-language data transfer is required between the JS framework and the native implementation processing modules, consuming significant computational resources. Furthermore, cross-language data transfer also increases data transmission latency and reduces data transmission performance. In addition, the user interface components need to be generated twice (once for JS and once for native language) and maintained, incurring additional memory consumption for storing component information and also incurring extra maintenance costs. Therefore, the existing JS application runtime scheme not only consumes substantial computational resources but also impacts application startup speed and page loading speed.

[0096] To improve application startup speed and the smoothness of fast page scrolling, this application provides a JS application processing framework. For example, Figure 1 A schematic diagram of the structure of this JS application processing framework is shown. This framework includes a JS engine, a JS nativeization module, and a rendering module.

[0097] The JavaScript engine provides an execution environment for running JavaScript applications and monitors changes to the properties of components in the JavaScript application's user interface. Furthermore, the JavaScript engine serves as the communication medium for data exchange between JavaScript modules and native modules; that is, data exchange between JavaScript modules and native modules occurs through the JavaScript engine.

[0098] In this embodiment, a JS functional module refers to a functional module implemented using the JS language. A native functional module refers to a functional module implemented using a native language. In this embodiment, the native functional module includes the aforementioned JS nativeization module and rendering module. "Native" means implemented using the aforementioned native language; that is, the JS nativeization module and the rendering module are both implemented using the same native language. This native language can be C++, C, or Java, etc. As described above, the native language is the programming language of the operating system. Different operating systems may use different programming languages.

[0099] For example, the JS engine could be the Ark Compiler, the V8 engine, or the Quick JS engine, etc.

[0100] The JS native modules include a programming language bridging module, a registration module, a programming paradigm integration module, a component state management module, an engine communication module, and a component update module.

[0101] The aforementioned programming language bridging module is used to extract component information with data types and JavaScript language descriptions from the executable file of a JS application; and then converts this component information with data types and JavaScript language descriptions into component information described in the native language. Component information includes component properties, events, methods, or component dependencies, etc.

[0102] For example, the executable file of the above-mentioned JS application can be a JS bundle file, which is a file obtained by packaging the JS application written by the application developer.

[0103] The registration module described above is used to register the components, functional modules, and functions described in the native language to the JS engine. This allows the JS engine to monitor changes in component properties, etc.

[0104] The aforementioned programming paradigm interface module is used to interface the programming paradigm of the component information described in the native language into a programming paradigm that the rendering module can recognize. Specifically, it performs a programming paradigm conversion. Different programming languages ​​have different programming paradigms. Although the programming language bridging module converts component information into component information described in the native language, some differences still exist in the specific programming paradigms, requiring further interface work so that the rendering module can recognize them. This, in turn, allows the rendering module to render the corresponding user interface. A programming paradigm refers to a programming style or pattern.

[0105] The aforementioned component state management module is used to establish dependencies between the user interface components of the JS application and the state of those components during the parsing of the JS application's executable file, and to manage these established dependencies. Specifically, a dependency table can be constructed, which includes the access paths and properties of components. Within this dependency table, there is a binding relationship between the access path of a specific component and its corresponding property.

[0106] In one possible implementation, the access path of the aforementioned component can be the access path of the component within the data structure in which the component resides. For example, the data structure containing the component can be a description of the dependencies between various components of the user interface corresponding to that component. For example, the data structure can be a struct. To facilitate understanding of the access paths of components in the dependency table, please refer to the following computer program as an example:

[0107] @Component

[0108] struct objA:{

[0109] arrayB:[

[0110] “xxxxx”,

[0111] “yyyyy”,

[0112] Hi! world

[0113] }}

[0114] In this computer program, a component "objA" is defined as a structure. This component defines an array B. Array B contains three elements. "Hi!world" is a sub-component of component "objA," and its access path is "objA->arrayB->2." That is, this sub-component is the second component in array B of component "objA." Furthermore, the attribute of this sub-component is "Hi!world." Optionally, if component "objA" is a sub-component of another component C, then the access path of the aforementioned sub-component can include the description of the other component C. That is, the access path of the sub-component is "C->objA->arrayB->2." The above structure and the access path of the sub-component are merely examples and do not constitute a limitation on the embodiments of this application.

[0115] In one possible implementation, the access path of the aforementioned component is not limited to the access path of the component within the structure in which it resides. The structure can be replaced by other data structure types, so the specific access path is determined according to the data structure type defined in the executable file of the JS application, and this application does not impose any restrictions on this.

[0116] In one possible implementation, the dependency table may further include the component identifier. This component identifier is a unique identifier configured for the component during the parsing of the executable file of the aforementioned JS application. The component identifier also serves as the identifier of the node corresponding to the component in the component tree, element tree, or rendering tree. Similarly, in this dependency table, there is a binding relationship between the component identifier, the access path of the component, and the properties of the component.

[0117] The aforementioned engine communication module is used to notify the component state management module of the changes after the JS engine detects that the properties of the components in the JS application have changed. The component state management module then updates the data in the dependency table based on the changes.

[0118] The aforementioned component update module is used to quickly generate a new component tree based on the access paths of components in the updated dependency table. It can also bind the properties of each component in the dependency table to the corresponding components in this new component tree. Then, the new component tree is compared with the original component tree to identify the changed components. The original component tree refers to the component tree that existed before the new component tree was generated. This existing component tree could be the component tree generated during the initial parsing of the JS application's executable file, or it could be the component tree generated based on the dependency table after the last component change. After identifying the changed components, the properties of the changed component are updated to the corresponding components in the rendering tree through the nodes in the element tree corresponding to that changed component.

[0119] In this embodiment of the application, the new component tree is generated quickly based on the access path in the dependency table. Compared with the existing solution of generating the new component tree by traversing the DOM tree, the generation efficiency of the new component tree can be improved, the computational complexity can be reduced, and the update efficiency of the rendering tree can be improved so that the updated interface can be rendered faster and the page display lag can be reduced.

[0120] The rendering module described above is used to construct the component tree, element tree, and rendering tree of the user interface to be displayed based on the component information described in the native language after the above programming paradigm is integrated. Then, the user interface is rendered and displayed based on the rendering tree. Specifically, the rendering module can create an OpenGL context according to the window handle provided by the system, rasterize the rendering tree, composite it onto the operation console surface of the window, and then send it for display, completing the entire process of loading and displaying the user interface.

[0121] In one possible implementation, based on the aforementioned JS application processing framework, this application provides an executable file for a JS application. The executable file is a script file written in JavaScript with data types. The executable file describes the layout, style, and logic of the JS application's user interface. For example, the JavaScript with data types can be TypeScript. TypeScript is a superset of JavaScript, meaning that all JavaScript syntax applies to TypeScript, and TypeScript also includes syntax not supported by JavaScript. Specifically, TypeScript is an open-source programming language built by adding data type definitions to JavaScript. TypeScript can be compiled into JavaScript and can run in any browser or operating system.

[0122] For example, the executable file of this JS application can define a container, and then describe the layout, style, and logic of the same component within the defined container. To facilitate understanding of the container defined in the executable file of the JS application of this application, please refer to the following computer program as an example:

[0123]

[0124] In the above computer program, the names of the components can be customized. In this computer program, a container "Column" is created by "Column.create({space:1})". The container "Column" represents a table with a single column and multiple rows, and then the information of the components is defined and described in the table. Then, the text property of the component is described by "Text.create('hello world')" in the container, the event of the text in the component (handling the mouse click event) is described by "onClick(()=>{console.error('clicktext');})" and the style property of the text in the component is described by "Text.fontSize(20)". Then, the relationship between the components is indicated by "pop()". For example, if "Text.pop()" is included in the container "Column", then the text of the component is a child component of the component.

[0125] In addition, the component information described in the executable file of this application can be quickly accessed by component name. For example, the component information described above can be quickly accessed by the command "loadDocument(new custom component name("1",undefined,{}))".

[0126] The computer program describing component information in the executable file of the JS application of this application is simpler than existing computer programs describing component information in JS application executable files. Furthermore, the properties, events, and methods of components in the executable file of this application can be described together in a defined container, completing the binding of component properties, events, and methods during the programming phase. This eliminates the need for additional binding during subsequent file parsing, thereby saving computational resources and speeding up file parsing. For ease of understanding, please refer to the following example of a computer program describing component information in an existing JS application executable file:

[0127] " / / style

[0128] / *** / ((module)=>{module.exports={".title":{"fontSize":"20px"}}}) / *** /

[0129] / / Component layout

[0130] module.exports = {

[0131] "attr":{"debugLine":"pages / index / index:1"},

[0132] "type": "div",

[0133] "children": [{"attr": {

[0134] "debugLine": "pages / index / index:2",

[0135] "className": "title",

[0136] "value": "hello world"

[0137] },

[0138] "type": "text",

[0139] "classList": ["title"],

[0140] "onBubbleEvents": {"click": "click"}}]}

[0141] / / Component logic

[0142] exports["default"] = void 0;

[0143] var _default_default = { data: { title: ""},

[0144] onInit: function onInit() {

[0145] this.title = this.$t('strings.world');},

[0146] click: function click() { console.log('click text');}}

[0147] As described above, existing JavaScript application executables consist of three files: an HTML script file, a CSS script file, and a JavaScript script file. The computer program describing the styles is in the CSS script file, the computer program describing the component layout is in the HTML script file, and the computer program describing the component logic is in the JavaScript script file. The components described by the computer programs in the existing JavaScript application executables are the same as those described by the computer programs in the JavaScript application executable of this application. However, the existing JavaScript application executables require combining descriptions from three script files to describe the component, which is cumbersome and redundant. Furthermore, during subsequent parsing, binding based on the descriptions in these three script files is necessary to generate a complete component instance, resulting in a cumbersome and time-consuming parsing process. Comparing these two methods of component description, it can be seen that the computer program describing the component in the JavaScript application executable of this application is more concise. Moreover, since the component information is defined and described within the same container defined in the same script file, no additional binding is required, which is more conducive to improving file parsing efficiency.

[0148] In one possible implementation, it is understood that the aforementioned native JS module, in order to achieve the corresponding functions, includes software modules that execute each function. The division of functional modules within the aforementioned native JS module is merely an example; in actual implementation, functional modules can be divided according to each function, or two or more functions can be integrated into one module. It should be noted that the module division in this embodiment is illustrative and represents only one logical functional division; other division methods may exist in actual implementation.

[0149] In one possible implementation, the aforementioned JS application processing framework can be part of an operating system (OS). It can be deployed along with the operating system to various electronic devices, which may have JS applications installed. Then, when a JS application is launched on that electronic device, the JS application processing framework can be invoked to parse and execute the JS application.

[0150] For example, electronic devices can include, but are not limited to, any electronic product based on a smart operating system, which can interact with users through input devices such as keyboards, virtual keyboards, touchpads, touchscreens, and voice control devices. Examples include smartphones, tablet PCs, handheld computers, wearable electronic devices, personal computers (PCs), and desktop computers. Electronic devices can also include, but are not limited to, any Internet of Things (IoT) device. Such IoT devices could be, for example, smart speakers, televisions (TVs), and in-vehicle displays. The smart operating system includes, but is not limited to, any operating system that enriches device functionality by providing various apps, such as Android, iOS, Windows, macOS, or HarmonyOS.

[0151] Figure 2 An exemplary schematic diagram of the structure of electronic device 100 is shown.

[0152] Electronic device 100 may be a mobile phone, tablet computer, desktop computer, laptop computer, handheld computer, notebook computer, ultra-mobile personal computer (UMPC), netbook, as well as cellular phone, personal digital assistant (PDA), augmented reality (AR) device, virtual reality (VR) device, artificial intelligence (AI) device, wearable device, in-vehicle device, smart home device and / or smart city device. The embodiments of this application do not impose any special restrictions on the specific type of electronic device.

[0153] Electronic device 100 may include processor 110, external memory interface 120, internal memory 121, universal serial bus (USB) interface 130, charging management module 140, power management module 141, battery 142, antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, and subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0154] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0155] Processor 110 may include one or more processing units, such as application processors (APs), modem processors, graphics processing units (GPUs), image signal processors (ISPs), controllers, video codecs, digital signal processors (DSPs), baseband processors, and / or neural network processing units (NPUs). These different processing units may be independent devices or integrated into one or more processors.

[0156] The controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of instruction fetching and execution.

[0157] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0158] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0159] The I2C interface is a bidirectional synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may include multiple I2C buses. The processor 110 can couple to the touch sensor 180K, charger, flash, camera 193, etc., through different I2C bus interfaces. For example, the processor 110 can couple to the touch sensor 180K through the I2C interface, enabling the processor 110 and the touch sensor 180K to communicate through the I2C bus interface, thereby realizing the touch function of the electronic device 100.

[0160] The I2S interface can be used for audio communication. In some embodiments, the processor 110 may include multiple I2S buses. The processor 110 can be coupled to the audio module 170 via the I2S bus to enable communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 via the I2S interface to enable the function of answering phone calls through a Bluetooth headset.

[0161] The PCM interface can also be used for audio communication, sampling, quantizing, and encoding analog signals. In some embodiments, the audio module 170 and the wireless communication module 160 can be coupled via the PCM bus interface. In some embodiments, the audio module 170 can also transmit audio signals to the wireless communication module 160 via the PCM interface, enabling the function of answering phone calls through a Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.

[0162] The UART interface is a universal serial data bus used for asynchronous communication. This bus can be a bidirectional communication bus. It converts the data to be transmitted between serial and parallel communication. In some embodiments, the UART interface is typically used to connect the processor 110 and the wireless communication module 160. For example, the processor 110 communicates with the Bluetooth module in the wireless communication module 160 via the UART interface to implement Bluetooth functionality. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 via the UART interface to enable music playback through Bluetooth headphones.

[0163] The MIPI interface can be used to connect the processor 110 to peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI) and a display serial interface (DSI). In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to enable the electronic device 100 to capture images. The processor 110 and the display screen 194 communicate via the DSI interface to enable the electronic device 100 to display images.

[0164] The GPIO interface can be configured via software. It can be configured as a control signal or a data signal. In some embodiments, the GPIO interface can be used to connect the processor 110 to a camera 193, a display screen 194, a wireless communication module 160, an audio module 170, a sensor module 180, etc. The GPIO interface can also be configured as an I2C interface, an I2S interface, a UART interface, a MIPI interface, etc.

[0165] USB port 130 is a USB standard compliant interface, specifically a Mini USB port, Micro USB port, USB Type-C port, etc. USB port 130 can be used to connect a charger to charge electronic device 100, and can also be used for data transfer between electronic device 100 and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

[0166] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a structural limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0167] The charging management module 140 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 receives charging input from the wired charger via the USB interface 130. In some wireless charging embodiments, the charging management module 140 receives wireless charging input via the wireless charging coil of the electronic device 100. While charging the battery 142, the charging management module 140 can also supply power to the electronic device via the power management module 141.

[0168] The power management module 141 connects the battery 142, the charging management module 140, and the processor 110. The power management module 141 receives input from the battery 142 and / or the charging management module 140, providing power to the processor 110, internal memory 121, display screen 194, camera 193, and wireless communication module 160, etc. The power management module 141 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 141 may also be located within the processor 110. In other embodiments, the power management module 141 and the charging management module 140 may be located in the same device.

[0169] The wireless communication function of electronic device 100 can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0170] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with tuning switches.

[0171] The mobile communication module 150 can provide solutions for wireless communication, including 2G / 3G / 4G / 5G, applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low-noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves via antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 may be housed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be housed in the same device.

[0172] The modem processor may include a modulator and a demodulator. The modulator modulates the low-frequency baseband signal to be transmitted into a mid-to-high frequency signal. The demodulator demodulates the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After processing by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs sound signals through an audio device (not limited to speaker 170A, receiver 170B, etc.) or displays images or videos through the display screen 194. In some embodiments, the modem processor may be a separate device. In other embodiments, the modem processor may be independent of the processor 110 and may be housed in the same device as the mobile communication module 150 or other functional modules.

[0173] The wireless communication module 160 can provide solutions for wireless communication applications on the electronic device 100, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, demodulates and filters the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, frequency modulate and amplify them, and then convert them into electromagnetic waves for radiation via antenna 2.

[0174] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling electronic device 100 to communicate with networks and other devices via wireless communication technology. The wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies, etc. The GNSS may include the Global Positioning System (GPS), the Global Navigation Satellite System (GLONASS), the BeiDou Navigation Satellite System (BDS), the Quasi-Zenith Satellite System (QZSS), and / or satellite-based augmentation systems (SBAS).

[0175] Electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0176] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD). The display panel can also be manufactured using organic light-emitting diodes (OLEDs), active-matrix organic light-emitting diodes (AMOLEDs), flexible light-emitting diodes (FLEDs), miniled, microled, micro-OLEDs, quantum dot light-emitting diodes (QLEDs), etc. In some embodiments, the electronic device may include one or N displays 194, where N is a positive integer greater than 1.

[0177] Electronic device 100 can perform shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0178] The ISP (Image Signal Processor) is used to process data fed back from the camera 193. For example, when taking a picture, the shutter is opened, and light is transmitted through the lens to the camera's photosensitive element. The light signal is converted into an electrical signal, and the camera's photosensitive element transmits the electrical signal to the ISP for processing, transforming it into an image visible to the naked eye. The ISP can also perform algorithmic optimization of image noise, brightness, and skin tone. The ISP can also optimize parameters such as exposure and color temperature of the shooting scene. In some embodiments, the ISP can be set in the camera 193.

[0179] Camera 193 is used to capture still images or videos. An object is projected onto a photosensitive element by generating an optical image through the lens. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then passed to an ISP for conversion into a digital image signal. The ISP outputs the digital image signal to a DSP for processing. The DSP converts the digital image signal into image signals in standard RGB, YUV, or other formats. In some embodiments, the electronic device 100 may include one or N cameras 193, where N is a positive integer greater than 1.

[0180] Digital signal processors (DSPs) are used to process digital signals. Besides digital image signals, they can also process other digital signals. For example, when electronic device 100 selects a frequency, the DSP can perform Fourier transforms on the frequency energy.

[0181] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. Thus, electronic device 100 can play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0182] An NPU (Neural Processing Unit) is a computational processor for neural networks (NNs). By borrowing the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, it can rapidly process input information and continuously learn on its own. NPUs enable intelligent cognitive applications in electronic devices, such as image recognition, facial recognition, speech recognition, and text understanding.

[0183] Internal memory 121 may include one or more random access memory (RAM) and one or more non-volatile memory (NVM).

[0184] Random access memory can include static random-access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), and double data rate synchronous dynamic random access memory (DDR SDRAM, such as fifth-generation DDR SDRAM, which is generally called DDR5 SDRAM). Non-volatile memory can include disk storage devices and flash memory.

[0185] Flash memory can be classified according to its operating principle, including NOR FLASH, NAND FLASH, 3D NAND FLASH, etc.; according to the level of the storage cell, including single-level cell (SLC), multi-level cell (MLC), triple-level cell (TLC), quad-level cell (QLC), etc.; and according to the storage specification, including universal flash storage (UFS) and embedded multimedia card (eMMC), etc.

[0186] The random access memory can be directly read and written by the processor 110. It can be used to store executable programs (such as machine instructions) of the operating system or other running programs, as well as user and application data.

[0187] Non-volatile memory can also store executable programs and user and application data, and can be pre-loaded into random access memory for direct reading and writing by the processor 110.

[0188] The external memory interface 120 can be used to connect to external non-volatile memory, thereby expanding the storage capacity of the electronic device 100. The external non-volatile memory communicates with the processor 110 through the external memory interface 120 to perform data storage functions. For example, music, video, and other files can be stored in the external non-volatile memory.

[0189] Electronic device 100 can implement audio functions, such as music playback and recording, through audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, and application processor.

[0190] The audio module 170 is used to convert digital audio information into analog audio signals for output, and also to convert analog audio input into digital audio signals. The audio module 170 can also be used for encoding and decoding audio signals. In some embodiments, the audio module 170 may be located in the processor 110, or some functional modules of the audio module 170 may be located in the processor 110.

[0191] The speaker 170A, also known as a "loudspeaker," is used to convert audio electrical signals into sound signals. The electronic device 100 can listen to music or make hands-free calls through the speaker 170A.

[0192] The receiver 170B, also known as the "earpiece," is used to convert audio electrical signals into sound signals. When the electronic device 100 answers a telephone call or voice message, the receiver 170B can be brought close to the ear to listen to the voice.

[0193] Microphone 170C, also known as a "microphone" or "voice transducer," is used to convert sound signals into electrical signals. When making a phone call or sending a voice message, the user can speak by bringing their mouth close to microphone 170C, inputting the sound signal into microphone 170C. Electronic device 100 may have at least one microphone 170C. In some embodiments, electronic device 100 may have two microphones 170C, which, in addition to collecting sound signals, can also perform noise reduction. In other embodiments, electronic device 100 may also have three, four, or more microphones 170C, which can collect sound signals, reduce noise, identify the sound source, and perform directional recording, etc.

[0194] The 170D headphone jack is used to connect wired headphones. The 170D headphone jack can be a USB 130 interface or a 3.5mm Open Mobile Terminal Platform (OMTP) standard interface, a CTIA (Cellular Telecommunications Industry Association of the USA) standard interface.

[0195] Pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. In some embodiments, pressure sensor 180A can be disposed on display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may include at least two parallel plates with conductive material. When force is applied to pressure sensor 180A, the capacitance between the electrodes changes. Electronic device 100 determines the pressure intensity based on the change in capacitance. When a touch operation is applied to display screen 194, electronic device 100 detects the intensity of the touch operation based on pressure sensor 180A. Electronic device 100 can also calculate the touch position based on the detection signal from pressure sensor 180A. In some embodiments, touch operations applied to the same touch position but with different touch operation intensities can correspond to different operation commands. For example, when a touch operation with an intensity less than a first pressure threshold is applied to the SMS application icon, a command to view an SMS is executed. When a touch operation with an intensity greater than or equal to the first pressure threshold is applied to the SMS application icon, a command to create a new SMS is executed.

[0196] The gyroscope sensor 180B can be used to determine the motion attitude of the electronic device 100. In some embodiments, the gyroscope sensor 180B can determine the angular velocity of the electronic device 100 about three axes (i.e., the x, y, and z axes). The gyroscope sensor 180B can be used for image stabilization. For example, when the shutter is pressed, the gyroscope sensor 180B detects the angle of the shake of the electronic device 100, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to counteract the shake of the electronic device 100 by moving in the opposite direction, thus achieving image stabilization. The gyroscope sensor 180B can also be used in navigation and motion-sensing game scenarios.

[0197] The barometric pressure sensor 180C is used to measure air pressure. In some embodiments, the electronic device 100 calculates altitude using the air pressure value measured by the barometric pressure sensor 180C to assist in positioning and navigation.

[0198] The magnetic sensor 180D includes a Hall sensor. The electronic device 100 can use the magnetic sensor 180D to detect the opening and closing of the flip cover. In some embodiments, when the electronic device 100 is a flip phone, the electronic device 100 can detect the opening and closing of the flip cover using the magnetic sensor 180D. Then, based on the detected opening and closing state of the cover or the flip cover, features such as automatic flip unlocking can be set.

[0199] The 180E accelerometer can detect the magnitude of acceleration of electronic device 100 in various directions (typically three axes). When electronic device 100 is stationary, it can detect the magnitude and direction of gravity. It can also be used to identify the posture of electronic devices and applied to applications such as screen orientation switching and pedometers.

[0200] A distance sensor 180F is used to measure distance. Electronic device 100 can measure distance via infrared or laser. In some embodiments, during a shooting scene, electronic device 100 can utilize the distance sensor 180F to measure distance for rapid focusing.

[0201] The proximity sensor 180G may include, for example, a light-emitting diode (LED) and a light detector, such as a photodiode. The LED may be an infrared LED. The electronic device 100 emits infrared light outward through the LED. The electronic device 100 uses the photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device 100. When insufficient reflected light is detected, the electronic device 100 can determine that there is no object near the electronic device 100. The electronic device 100 may use the proximity sensor 180G to detect when a user holds the electronic device 100 close to their ear for a call, so as to automatically turn off the screen to save power. The proximity sensor 180G can also be used in holster mode and pocket mode for automatic unlocking and locking of the screen.

[0202] The ambient light sensor 180L is used to sense the brightness of ambient light. The electronic device 100 can adaptively adjust the brightness of the display screen 194 based on the sensed ambient light brightness. The ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures. The ambient light sensor 180L can also work with the proximity sensor 180G to detect whether the electronic device 100 is in a pocket to prevent accidental touches.

[0203] The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can utilize the characteristics of the collected fingerprints to achieve fingerprint unlocking, accessing application locks, taking photos with fingerprints, answering calls with fingerprints, etc.

[0204] Temperature sensor 180J is used to detect temperature. In some embodiments, electronic device 100 uses the temperature detected by temperature sensor 180J to execute a temperature handling strategy. For example, when the temperature reported by temperature sensor 180J exceeds a threshold, electronic device 100 performs thermal protection by reducing the performance of a processor located near temperature sensor 180J to reduce power consumption. In other embodiments, when the temperature is below another threshold, electronic device 100 heats battery 142 to prevent abnormal shutdown of electronic device 100 due to low temperature. In still other embodiments, when the temperature is below yet another threshold, electronic device 100 boosts the output voltage of battery 142 to prevent abnormal shutdown due to low temperature.

[0205] Touch sensor 180K, also known as a "touch device," can be located on display screen 194. The touch sensor 180K and display screen 194 together form a touchscreen, also known as a "touchscreen." Touch sensor 180K detects touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180K may also be located on the surface of electronic device 100, in a different position than display screen 194.

[0206] The bone conduction sensor 180M can acquire vibration signals. In some embodiments, the bone conduction sensor 180M can acquire vibration signals from the vibrating bone segments of the human vocal cords. The bone conduction sensor 180M can also contact the human pulse to receive blood pressure signals. In some embodiments, the bone conduction sensor 180M can also be incorporated into headphones to form bone conduction headphones. The audio module 170 can parse the voice signals from the vibrating bone segments of the vocal cords acquired by the bone conduction sensor 180M to realize voice functionality. The application processor can parse heart rate information from the blood pressure signals acquired by the bone conduction sensor 180M to realize heart rate detection functionality.

[0207] Buttons 190 include a power button, volume buttons, etc. Buttons 190 can be mechanical buttons or touch-sensitive buttons. Electronic device 100 can receive button input and generate key signal inputs related to user settings and function control of electronic device 100.

[0208] Motor 191 can generate vibration alerts. Motor 191 can be used for incoming call vibration alerts or for touch vibration feedback. For example, different vibration feedback effects can correspond to touch operations performed on different applications (such as taking photos, playing audio, etc.). Motor 191 can also correspond to different vibration feedback effects for touch operations performed on different areas of the display screen 194. Different application scenarios (such as time reminders, receiving messages, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also be customized.

[0209] Indicator 192 can be an indicator light, used to indicate charging status, power changes, or to indicate messages, missed calls, notifications, etc.

[0210] The SIM card interface 195 is used to connect a SIM card. The SIM card can be inserted into or removed from the SIM card interface 195 to make contact with and separate from the electronic device 100. The electronic device 100 can support one or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, etc. Multiple cards can be inserted into the same SIM card interface 195 simultaneously. The multiple cards can be of the same or different types. The SIM card interface 195 is also compatible with different types of SIM cards. The SIM card interface 195 is also compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to realize functions such as calls and data communication. In some embodiments, the electronic device 100 uses an eSIM, i.e., an embedded SIM card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.

[0211] The above Figure 2 The software system of the electronic device 100 shown can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application embodiment uses a layered architecture software system as an example to exemplify the software structure of the electronic device 100. Figure 3 An exemplary software structure block diagram of an electronic device 100 according to an embodiment of this application is shown.

[0212] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the software system is divided into four layers, from top to bottom: the application layer, the application framework layer, the system library layer, and the kernel layer.

[0213] The application layer can include a series of application packages.

[0214] like Figure 3 As shown, the application package may include applications such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, and SMS. Exemplarily, in this embodiment, these applications may be JavaScript applications.

[0215] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0216] like Figure 3 As shown, the application framework layer may include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc. This application framework layer also includes the aforementioned... Figure 1 The JS application processing framework shown in the embodiment of this application is provided.

[0217] The window manager is used to manage windowed applications. It can retrieve screen size, determine the presence of a status bar, lock the screen, and capture screenshots, among other things.

[0218] Content providers store and retrieve data, making that data accessible to applications. This data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc.

[0219] A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text notification icon could include views for displaying text and views for displaying images.

[0220] The phone manager is used to provide communication functions for electronic device 100. For example, it manages call status (including connection and disconnection).

[0221] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0222] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of completed downloads or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0223] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0224] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0225] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0226] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0227] A 2D graphics engine is a graphics engine for 2D drawing.

[0228] The kernel layer is the layer between hardware and software. The kernel layer contains at least the display driver, camera driver, audio driver, and sensor driver.

[0229] The following example, using a photo capture scenario, illustrates the workflow of the software and hardware of electronic device 100. When touch sensor 180K receives a touch operation, a corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the touch operation into a raw input event (including touch coordinates, timestamp of the touch operation, etc.). The raw input event is stored in the kernel layer. The application framework layer retrieves the raw input event from the kernel layer and identifies the control corresponding to the input event. Taking a single touch operation as an example, where the corresponding control is the camera application icon, the camera application calls the interface of the application framework layer to launch the camera application, and then calls the kernel layer to launch the camera driver, capturing still images or videos through camera 193. This example is only for illustrating the workflow of the software and hardware of electronic device 100 and does not constitute a limitation of this application.

[0230] This application provides a method for operating an application, which can be applied to the aforementioned electronic device. For example, see... Figure 4 This method may include, but is not limited to, the following steps:

[0231] S401, The electronic device receives a first operation to start the application.

[0232] In a specific implementation, for example, a user can launch the application by clicking its icon or link in the user interface, or by using voice activation. That is, the first operation for launching the application includes either a click or a voice activation. The electronic device can use a touch sensor (e.g., the one described above) Figure 2 The touch sensor 180K shown receives this first operation.

[0233] S402. The electronic device extracts component information described in JavaScript with data types from the executable file of the application; the executable file is a script file written in JavaScript with data types and describes the layout, style and logic of the first user interface.

[0234] In a specific implementation, after receiving the first operation to launch the application, the electronic device obtains the executable file of the application based on the first operation for parsing. For example, the application can be an APP, a mini-program, or a webpage.

[0235] If the application is an app, the electronic device can download and install the application from an app store or website. During the installation process, the application's executable file is saved to the electronic device's memory. Therefore, obtaining the application's executable file as described above can mean reading the application's executable file from the electronic device's memory.

[0236] If the application is a mini-program or a webpage, then after receiving the first operation to launch the application, the electronic device can send a request to the application's server to retrieve the application's executable file, so that the server can send the executable file to the electronic device for parsing. Alternatively, if the mini-program or webpage has already been launched on the electronic device, then the electronic device can cache the executable file of the mini-program or webpage. In this case, after receiving the first operation, the electronic device can read the executable file of the mini-program or webpage from the cache for parsing.

[0237] Specifically, the executable file of the aforementioned application is a script file written in JavaScript with data types, describing the layout, style, and logic of the application's first user interface. After obtaining the executable file, the electronic device parses it. Specifically, it first extracts the component information described in the JavaScript with data types from the executable file.

[0238] For example, it can be done through the above Figure 1 The programming language bridging module in the illustrated JS application processing framework extracts the component information, including the JavaScript language description with data types, from the executable file. For a detailed implementation description, please refer to the above. Figure 1 The description of programming language bridging modules in the documentation is omitted here.

[0239] S403. The electronic device converts the component information described in JavaScript with data types into component information described in a native language; the native language is the programming language of the operating system of the electronic device, and the native language is different from the JavaScript with data types.

[0240] In practical implementation, since the programming language of the electronic device's operating system differs from the programming language of the application's executable file, in order for the operating system to recognize and process the component information of the first user interface extracted from the executable file, the programming language describing the component information needs to be converted from JavaScript (with data types) to a native language. This language conversion process can also be called language bridging. Existing programming language conversion methods can be used for the specific conversion, and this application does not impose any restrictions on this.

[0241] For example, it can be done through the above Figure 1 The programming language bridging module in the JS application processing framework shown implements the conversion of the description language of the component information.

[0242] S404. The electronic device constructs the component tree of the first user interface based on the component information described in the native language.

[0243] In a specific implementation, after the component information of the first user interface is converted into a native language description, the operating system of the electronic device can recognize the component information and then construct the component tree of the first user interface based on the component information for subsequent rendering and display of the first user interface.

[0244] In one possible implementation, different programming languages ​​have different programming paradigms. Although the component information is converted into component information described in the native language, there are still some differences in the specific programming paradigms. Further paradigm matching is needed so that the rendering module can recognize the information and thus render the corresponding user interface. Specifically, after converting the component information of the first user interface into a native language description, the programming paradigm of the native language describing the component information can be matched with the programming paradigm that the rendering module can recognize. That is, the programming paradigm of the native language describing the component information is converted into a programming paradigm that the rendering module can recognize. This allows the rendering module to render the first user interface based on the component information.

[0245] Specifically, the component information of the first user interface after the programming paradigm shift can be input into the rendering module. The rendering module generates a component tree of the first user interface based on this component information for subsequent rendering and display of the first user interface.

[0246] For example, it can be done through the above Figure 1 The programming paradigm interface module in the illustrated JS application processing framework implements the above-mentioned programming paradigm conversion. The above-mentioned rendering module can be the one described above. Figure 1 The rendering module in the JS application processing framework shown.

[0247] S405. The electronic device uses the component tree of the first user interface to render and display the first user interface.

[0248] In practice, after the rendering module generates the component tree of the first user interface, it can generate the rendering tree of the first user interface based on the component tree. Then, the electronic device renders the first user interface based on the rendering tree through the rendering module and displays it on the screen of the electronic device, thereby completing the loading and display process of the first user interface.

[0249] In addition, the rendering module can also generate an element tree of the first user interface based on the component tree of the first user interface. The element tree is used to update the changed attributes of the components of the first user interface to the rendering tree of the first user interface, so that the updated user interface can be rendered quickly.

[0250] The application running method provided in this application embodiment can improve the application startup speed and the smoothness of fast page scrolling compared with the existing JS application parsing and execution scheme.

[0251] Specifically, as described above, existing JS application parsing and execution schemes not only consume significant computing resources but also impact application startup and page loading speeds. In this embodiment, the functionality of the aforementioned JS framework is implemented through a native JS module, i.e., the JS application is parsed and executed via the native JS module. The native JS module provided in this embodiment is implemented using a native language, and the executable file of the JS application is a script file written in JavaScript with data types. Therefore, during the parsing and execution of the JS application's executable file, there is no need to repeatedly generate and maintain the user interface components twice (in existing schemes, components described in JS are generated once in the JS runtime environment based on three script files, and components described in native language are generated again in the native language processing module). Instead, the component information extracted from the executable file written in JavaScript with data types is converted into component information described in native language by the native JS module, saving the step of generating components described in JS first. Furthermore, since the programming language of the native JS module in this application is a native language, extensive cross-language communication is avoided.

[0252] In summary, compared to existing solutions, the embodiments of this application can save parsing steps and avoid generating component information twice, thereby saving computing resources, saving storage space for component information, and reducing the maintenance cost of component information. Furthermore, since the programming language of the JS native module in this application is a native language, it avoids a large amount of cross-language communication, reduces data communication latency, and greatly improves data transmission efficiency. This improves the parsing speed of the application executable file, thereby improving the rendering speed of the user interface, and ultimately improving the application's startup speed and the smoothness of fast page scrolling.

[0253] In addition, this application implements the above-mentioned JS native module using a native language. Compared with a JS framework implemented using the JS language, it does not require just-in-time (JIT) compilation when performing operations such as component property binding, event management, and lifecycle management, thereby improving the efficiency of program execution.

[0254] In one possible implementation, the application running method provided in this application embodiment further includes processing operations when the attributes of the user interface components change.

[0255] For example, the method further includes: the electronic device generating a dependency table based on the executable file of the application, the dependency table describing the attributes of each component of the first user interface and the access paths of each component. After the electronic device renders and displays the first user interface using the component tree of the first user interface in S405, the method may further include the following operations: the electronic device receiving a second operation; the second operation indicating a change in the attributes of a first component of the first user interface; the electronic device updating the attributes of the first component described in the dependency table according to the second operation; and the electronic device rendering and updating the first component of the first user interface based on the updated attributes of the first component described in the dependency table.

[0256] Specifically, during the parsing of a JavaScript application's executable file, the electronic device can build the aforementioned dependency table based on the parsed component information. For example, this can be achieved through the above... Figure 1 The component state management module, as shown, establishes this dependency table. Specifically, the component state management module can obtain the access path and attributes of a component from the parsed component information using the `get()` function, and then record the obtained component access path and attributes into the dependency table using the `set()` function. Therefore, this dependency table describes the attributes of each component in the aforementioned first user interface and the access path of each component.

[0257] In practical implementation, after obtaining the component information described in the native language, the component can be registered with the JS engine so that the JS engine can listen for changes in the component's properties. Additionally, functions and various functional modules obtained from the executable file can also be registered with the JS engine. For example, this can be achieved through the above... Figure 1 The registration module in the JS application processing framework shown sends the names (or identifiers), parameters, and data of the aforementioned components, functions, and various functional modules to the JS engine for storage in order to complete the registration.

[0258] Therefore, based on the above description, the electronic device can monitor changes in the properties of the first component of the first user interface through the JS engine. For example, the second operation could be an operation by the user to change the properties of the first component through the first user interface. After receiving the second operation, the electronic device can call an event callback function to notify the JS engine of the change. The notification message received by the JS engine can include the access path of the first component and the changed properties of the first component. Then, the JS engine sends the access path of the first component and the changed properties of the first component in the notification message to the component state management module in the JS native module through the engine communication module.

[0259] After receiving the access path and changed attributes of the first component, the component state management module uses the access path as an index to query the dependency table for the entry containing the first component. Then, the recording module updates and records the changed attributes of the first component in that entry, thus completing the rebinding of the changed attributes and the component. For more information on this dependency table, please refer to the above. Figure 1 The relevant descriptions of the component state management module are not repeated here.

[0260] After updating the dependency table, the electronic device can render and update the first component of the first user interface based on the properties of the first component described in the updated dependency table.

[0261] In practical implementation, since the dependency table includes access paths for components within each component, the component tree of the first user interface can be quickly generated based on these access paths. Furthermore, binding the attributes of the components of the first user interface in the dependency table to the corresponding component nodes completes the construction of the component tree. Therefore, after updating the data in the dependency table, a new component tree can be quickly generated based on the updated dependency table. For example, it can be based on the above... Figure 1 The component update module shown generates the new component tree based on the updated dependency table.

[0262] Then, the electronic device updates the properties of the first component in the rendering tree of the first user interface based on the newly generated component tree of the first user interface. Specifically, the electronic device can locate the first component in the generated component tree that has changed compared to the original component tree. The original component tree is the component tree of the first user interface before the change of the first component.

[0263] For example, the electronic device can compare the new component tree with the original component tree through the component update module to identify the component in the new component tree that is different from the original component tree (i.e., the first component). After determining that the component in the new component tree that has changed compared to the original component tree is the first component, the component update module can find the corresponding rendering node in the rendering tree through the node of the first component in the element tree, and update the attributes of the rendering node to the changed attributes, thereby completing the rebinding of node attributes in the rendering tree.

[0264] After updating the rendering tree, the rendering module can render based on the updated rendering tree to obtain the updated user interface.

[0265] To facilitate understanding the process of updating the rendering tree in the dependency table after the attributes of the first component change, the following description uses the component "objA," which is the computer program description given above for ease of understanding the access path of components in the dependency table, as an example. Assume that when this component is displayed on the screen of an electronic device, it appears as a text box; that is, the first user interface shown above includes this text box. See, for example, [link to example description]. Figure 5A Taking a mobile phone as an example, Figure 5A The diagram illustrates a first user interface displayed on a mobile phone screen. This first user interface includes a text box and other information display areas. The text box comprises three lines, each displaying "abc", "efg", and "Hi!world" respectively. The text box is a component of this first user interface, and the content displayed within it is its child component. Then, the user... Figure 5A The first user interface shown here, when clicked, changes the content of a child component within the text box from "Hi!world" to "Hello ABC!". This click can be performed by touching the displayed text box with a mouse, stylus, or the user's finger. For example, see [link to example]. Figure 5B The diagram illustrates how a user's finger clicks on a text box in the first user interface.

[0266] After the electronic device receives a content change request from the aforementioned sub-component via the first user interface, it calls an event callback function to notify the JavaScript engine of the change. This event callback function can return the access path of the sub-component and the changed content to the JavaScript engine. For example, the event callback function could be as follows:

[0267] clickHandle:function(){

[0268] this.objA.arrayB[2]="Hello ABC!"

[0269] }

[0270] The JavaScript engine obtains the access path "objA->arrayB->2" and the changed property "Hello ABC!" of the aforementioned child component through the event callback function. Then, the JavaScript engine sends this access path and changed property to the component state management module via the engine communication module. The component state management module uses the access path "objA->arrayB->2" as an index to find the corresponding entry in the dependency table, and then changes the component property in that entry to "Hello ABC!".

[0271] After the component state management module updates the dependency table, it can generate an attribute update command and send it to the component update module to trigger the component update module to generate a new component tree for the first user interface based on the dependency table. Then, based on the generated component tree and the original component tree of the first user interface, the module updates the attributes of the corresponding components in the rendering tree. This updating of the attributes of the corresponding components in the rendering tree based on the generated component tree and the original component tree of the first user interface can be implemented using existing algorithms, such as existing diff algorithms.

[0272] Then, the rendering module renders based on the updated rendering tree and sends the rendering result to the display screen to obtain the updated user interface. An example of the updated user interface can be found here. Figure 5C .

[0273] One possible implementation can be exemplified by [example shown]. Figure 6 This paper presents a schematic diagram illustrating the interactions between various functional modules in an electronic device used to handle changes in component attributes.

[0274] like Figure 6 As shown, the event triggering module is a software module in an electronic device used to monitor property change operations of components in the user interface. Upon detecting a property change operation, it can send a notification to the data access module indicating that the operation has been detected. Figure 6 The data access module and data recording module belong to the component state management module described above; in addition, Figure 6 The data access proxy module can be the engine communication module described above. Specifically, after receiving the aforementioned notification, the data access module further sends the notification to the JS engine, which responds to the notification and returns it to the data access module. Then, the data access module sends a request to the JS engine to retrieve the information of the changed component. Based on this request, the JS engine retrieves the access path and changed properties of the changed component through an event callback function. The access path and changed properties of the changed component can be read from the event callback function using the `exticGet` function. Then, the JS engine sends the obtained access path and changed properties of the changed component to the data access module in the component state management module through the data access proxy module. The data recording module in the component state management module retrieves the access path and changed properties of the changed component from the data access module and updates the properties of the changed component in the dependency table based on the access path. After the update is completed, the data access module in the component state management module generates a property update command and sends it to the component update module to trigger the component update module to generate a new component tree for the first user interface based on the dependency table. Subsequent operations are described above and will not be repeated here.

[0275] Compared to existing JS application parsing and execution schemes, the embodiments of this application can improve the rendering speed of application pages, thereby improving the smoothness of fast page scrolling and reducing lag. Specifically, the new component tree is quickly generated based on the access path in the dependency table. Compared to the existing scheme that generates the new component tree by traversing the DOM tree, this improves the generation efficiency of the new component tree, reduces computational complexity, and thus improves the update efficiency of the rendering tree, enabling faster rendering of the updated interface and reducing page display lag.

[0276] One possible implementation can be exemplified by [example shown]. Figure 7 The present invention provides a schematic diagram illustrating the interaction between various functional modules in an electronic device in order to implement the application provided in the embodiments of the present application described above.

[0277] exist Figure 7 In response to a startup operation, the application can send its executable file to the JS engine. As described earlier, the JS engine provides an execution environment for the application. After receiving the executable file, the JS engine can hand it over to the aforementioned native JS modules for processing; details can be found in the previous descriptions and will not be repeated here. Additionally, after receiving the executable file, the JS engine can create a JS engine listener to monitor changes in the properties of the application's components. For example, this JS engine listener may include the aforementioned... Figure 6 The event triggering module within the JavaScript engine. Additionally, the JavaScript engine listener can retrieve component information parsed from the executable file from the native JavaScript module and register this information with the component manager. This allows the component manager to generate the aforementioned dependency table. In other words, the component manager can be the aforementioned component state management module.

[0278] In addition, Figure 7 In response to a startup operation, the application can register the views it depends on with the JS engine. Then, the JS engine registers these dependent views with the view manager. The view manager manages the application's user interface through these dependent views. Furthermore, when the properties of user interface components change, the component manager can update the dependency table based on the changes. The specific update process is described above and will not be repeated here. Besides updating the dependency table, the component manager can also send notifications to the view manager indicating that a view needs updating. The view manager then notifies the corresponding nodes in the application's element tree to update the render tree. The rendering module then renders based on the updated render tree and sends the rendering result to the display. This view manager can be part of the aforementioned component update module, used to assist in updating the properties of user interface components.

[0279] The technical effects of the application running method provided in this application embodiment are illustrated below with exemplary experimental results. For example, please refer to Table 1. Table 1 exemplarily shows a comparison of the time overhead required to run mobile phones and watches in different scenarios using existing JS application running schemes and the JS application running scheme provided in this application.

[0280] Table 1

[0281]

[0282] As shown in Table 1 above, for the calendar application in the watch, this solution reduces the JS environment initialization time by nearly four times compared to the existing solution. The homepage loading time is more than twice as fast as the existing solution. Furthermore, in the calendar application of the watch, the time taken to display component properties after updates was tested, and this solution takes half the time of the existing solution.

[0283] Furthermore, tests were conducted on a mobile app mimicking Taobao, measuring the time for JS environment initialization and loading the homepage (a Taobao-like page containing 100 page components). The JS environment initialization time of this solution is 4 times faster than existing solutions, and the loading time of the complex Taobao-like page is halved. A Taobao-like app refers to a JS application implemented using JS language with data types, mimicking Taobao's features.

[0284] Based on Table 1, the feasibility and effectiveness of this solution have been verified on mobile phones and watches. Compared with existing solutions, it significantly improves application startup speed and page loading speed.

[0285] In addition, to verify the effectiveness of the proposed solution for handling changes in the properties of user interface components, a calendar application containing 1440 texts was specifically tested on mobile phones and TVs. The test results are shown in Table 2.

[0286] Table 2

[0287]

[0288] As shown in Table 2, in test scenarios where a large amount of text content needs to be updated before being displayed in calendar applications, whether on TV or mobile phone, this solution saves an average of 72.45% of the time compared to the existing solution, demonstrating a significant improvement. This proves the feasibility and effectiveness of the proposed solution for handling changes in the attributes of user interface components.

[0289] In summary, the beneficial effects of this solution are as follows:

[0290] (1) On different devices, the startup speed of the homepage in the JS application of this solution is nearly twice as fast as that of the existing solution;

[0291] (2) In the scenario of updating component properties, the startup time of JS application is linearly related to the performance of JS parsing. If there are many properties to be updated, the advantages of this solution are more obvious.

[0292] (3) In this solution, the JS native module that parses the JS application executable file is implemented in the native language. It only needs to generate the component information described in the native language once. Unlike the existing solution, it does not need to generate and maintain the component information in both the JS runtime environment and the native language environment, thereby reducing memory usage.

[0293] (4) In this solution, the JS native module that parses the JS application executable file is implemented in native language, which solves the communication bottleneck between JS and Native. In scenarios with frequent scrolling and interaction, the page scrolling is smooth and there is no lag, resulting in a good user experience.

[0294] (5) Addressing the issue of low execution efficiency in existing diff algorithms. Specifically, the solution for handling changes in the attributes of user interface components in this application is to quickly generate a new component tree based on the dependency table to update the render tree. This differs from existing diff algorithms, which generate the new component tree by traversing the DOM tree before updating the render tree. Traversal algorithms are complex and inefficient; this solution avoids using traversal algorithms to generate a new component tree, thereby accelerating the efficiency of render tree updates and quickly rendering the changed user interface.

[0295] (6) This solution addresses the low data binding efficiency of existing solutions. Instead of binding data by traversing the component tree as in existing solutions, this solution improves data binding efficiency and speeds up page display. It constructs a dependency table to record the access path, component identifier, and component attributes of each component, enabling rapid binding of component-related attributes.

[0296] (7) To solve the problem of low JS execution efficiency, since the execution efficiency on the native side is higher than that on the JS side, this solution will implement the JS native module that parses the JS application executable file through the native language to solve the problem of low execution efficiency on the JS side.

[0297] The above describes the operation method of the application provided in the embodiments of this application. It is understood that, in order to achieve the corresponding functions, the electronic device includes hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed by hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0298] This application embodiment can divide electronic devices and the like into functional modules according to the above method examples. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one module. It should be noted that the module division in this application embodiment is illustrative and is only one logical functional division. In actual implementation, there may be other division methods.

[0299] When dividing each function into modules according to its corresponding function. Figure 8 An electronic device 800 is shown, which may be, for example, the electronic device described in the above-described method embodiments. The operating system of this electronic device 800 is programmed in a native language. The operating system of this electronic device 800 includes a receiving module 801, a programming language bridging module 802, and a rendering module 803, all described in the native language. Wherein:

[0300] The receiving module 801 is used to receive the first operation for starting the application;

[0301] The programming language bridging module 802 is used to extract component information described in JavaScript with data types from the executable file of the application; and convert the component information described in JavaScript with data types into component information described in a native language; the executable file is a script file written in JavaScript with data types and describes the layout, style and logic of the first user interface; the native language is different from the JavaScript with data types.

[0302] The rendering module 803 is used to construct a component tree of the first user interface based on the component information described in the native language, and to render and display the first user interface using the component tree of the first user interface.

[0303] In one possible implementation, the JavaScript language with data types is TypeScript.

[0304] In one possible implementation, the operating system of the electronic device further includes a component state management module, a notification module, and an update module described in the native language;

[0305] The component state management module is used to generate a dependency table based on the application's executable file. This dependency table describes the properties of each component in the first user interface and the access path of each component.

[0306] The notification module is used to receive a second operation after the rendering module 803 renders and displays the first user interface using the component tree of the first user interface; the second operation indicates a change in the attribute of the first component of the first user interface;

[0307] The component state management module is also used to update the properties of the first component described in the dependency table according to the second operation;

[0308] The update module is also used to render and update the first component of the first user interface based on the properties of the first component described in the updated dependency table.

[0309] In one possible implementation, the component state management module is specifically used for:

[0310] Based on this second operation, the access path of the first component and the changed attributes of the first component are obtained;

[0311] Based on the access path of the first component, the properties of the first component described in the dependency table are updated to the changed properties.

[0312] In one possible implementation, the update module includes a component update module and the rendering module 803;

[0313] The component update module is used to generate the component tree of the first user interface based on the updated dependency table, and to update the properties of the first component in the rendering tree of the first user interface based on the generated component tree of the first user interface.

[0314] The rendering module 803 is used to render and update the first component of the first user interface based on the attributes of the first component in the updated rendering tree.

[0315] In one possible implementation, the application is an app, a mini-program, or a webpage.

[0316] Figure 8 The specific operation and beneficial effects of each functional module in the electronic device 800 shown can be found in the above description. Figure 4 The descriptions of the possible method embodiments are not repeated here.

[0317] Figure 9 The diagram illustrates a possible hardware structure of the electronic device provided in this application. This device can be the electronic device described in the above-described method embodiments, or it can be a chip within the electronic device, or it can be a processing system within the electronic device, etc. The electronic device 900 includes: a processor 901, a memory 902, and a communication interface 903. The processor 901, the communication interface 903, and the memory 902 can be interconnected or interconnected via a bus 904.

[0318] For example, memory 902 is used to store computer programs and data of electronic device 900. Memory 902 may include, but is not limited to, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), or compact disc read-only memory (CD-ROM).

[0319] The communication interface 903 includes a transmitting interface and a receiving interface. There can be multiple communication interfaces 903, which are used to support the electronic device 900 to communicate, such as receiving or sending data or messages.

[0320] For example, processor 901 can be a central processing unit, a general-purpose processor, a digital signal processor, an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. The processor can also be a combination that implements computational functions, such as a combination of one or more microprocessors, a combination of a digital signal processor and a microprocessor, etc. Processor 901 can be used to read the program stored in the aforementioned memory 902, causing electronic device 900 to execute as described above. Figure 4 The operating method of the application described in its possible embodiments.

[0321] In one possible implementation, the processor 901 can be used to perform the following operations: receiving a first operation for launching an application; extracting component information described in JavaScript with data types from the executable file of the application; the executable file is a script file written in JavaScript with data types and describing the layout, style, and logic of a first user interface; converting the component information described in JavaScript with data types into component information described in a native language; the native language is the programming language of the operating system of the electronic device, and the native language is different from the JavaScript with data types; constructing a component tree of the first user interface based on the component information described in the native language; and rendering and displaying the first user interface using the component tree of the first user interface.

[0322] Figure 9 The specific operation and beneficial effects of each unit in the electronic device 900 shown can be found in the above description. Figure 2 The descriptions of the possible method embodiments are not repeated here.

[0323] This application also provides a computer-readable storage medium storing a computer program that is executed by a processor to perform the above-described tasks. Figure 4 The method described in any of the possible method embodiments.

[0324] This application also provides a computer program product, which, when read and executed by a computer, performs the above-mentioned... Figure 4 The method described in any of the possible method embodiments.

[0325] In summary, compared to existing solutions, the embodiments of this application can save parsing steps, avoid generating component information twice, thereby saving computing resources, saving storage space for component information, and reducing the maintenance cost of component information. Furthermore, since the programming language of the native JS module in this application is a native language, it avoids a large amount of cross-language communication, reduces data communication latency, and greatly improves data transmission efficiency. This improves the parsing speed of the application executable file, thereby improving the rendering speed of the user interface, and ultimately improving the application startup speed and the smoothness of fast page scrolling. In addition, since this application implements the above-mentioned native JS module using a native language, compared to a JS framework implemented using the JS language, it does not require just-in-time (JIT) compilation when performing operations such as component property binding, event management, and lifecycle management, thus improving program execution efficiency.

[0326] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for operating an application, characterized in that, The method is applied to an electronic device, and the method includes: Receive the first operation used to launch the application; Extract component information with data type descriptions from the executable file of the application; the executable file is a script file written in the JavaScript language with data type descriptions, and describes the layout, style and logic of the first user interface; The component information described in JavaScript with data types is converted into component information described in a native language; the native language is the programming language of the operating system of the electronic device, and the native language is different from the JavaScript with data types. The component tree of the first user interface is constructed based on the component information described in the native language; The first user interface is rendered and displayed using the component tree of the first user interface.

2. The method according to claim 1, characterized in that, The JavaScript language with data types mentioned is TypeScript.

3. The method according to claim 1, characterized in that, The method further includes: Based on the executable file of the application, a dependency table is generated, which describes the attributes of each component of the first user interface and the access path of each component. After rendering and displaying the first user interface using the component tree of the first user interface, the process further includes: Receive a second operation; the second operation indicates a change in the attribute of the first component of the first user interface; According to the second operation, update the properties of the first component described in the dependency table; Based on the properties of the first component described in the updated dependency table, render and update the first component of the first user interface.

4. The method according to claim 3, characterized in that, The step of updating the properties of the first component described in the dependency table according to the second operation includes: Based on the second operation, obtain the access path of the first component and the changed attributes of the first component; The properties of the first component described in the dependency table are updated to the changed properties based on the access path of the first component.

5. The method according to claim 3, characterized in that, The step of rendering and updating the first component of the first user interface based on the attributes of the first component described in the updated dependency table includes: The component tree of the first user interface is generated based on the updated dependency table; Update the properties of the first component in the rendering tree of the first user interface based on the generated component tree of the first user interface; Based on the attributes of the first component in the updated rendering tree, render and update the first component of the first user interface.

6. The method according to any one of claims 1-5, characterized in that, The application is an application program (APP), a mini-program, or a web application.

7. The method according to any one of claims 1-5, characterized in that, The operating system of the electronic device includes a programming language bridging module and a rendering module described in the native language; the method specifically includes: The programming language bridging module extracts the component information described in JavaScript with data types from the executable file of the application; and converts the component information described in JavaScript with data types into component information described in the native language. The rendering module constructs a component tree for the first user interface based on the component information described in the native language, and then renders and displays the first user interface using the component tree.

8. The method according to any one of claims 3-5, characterized in that, The operating system of the electronic device includes a component state management module, a notification module, and a rendering module described in the native language; the method specifically includes: The component state management module generates a dependency table based on the executable file of the application. The dependency table describes the attributes of each component of the first user interface and the access path of each component. After the rendering module renders and displays the first user interface using the component tree of the first user interface, the process further includes: The second operation is received through the notification module; The component state management module updates the properties of the first component described in the dependency table according to the second operation.

9. The method according to claim 4, characterized in that, The operating system of the electronic device includes a component state management module described in the native language; updating the attributes of the first component described in the dependency table according to the second operation specifically includes: The component status management module obtains the access path of the first component and the changed attributes of the first component based on the second operation. The component state management module updates the attributes of the first component described in the dependency table to the changed attributes based on the access path of the first component.

10. The method according to claim 5, characterized in that, The operating system of the electronic device includes a component update module and a rendering module described in the native language; the process of rendering and updating the first component of the first user interface based on the attributes of the first component described in the updated dependency table specifically includes: The component update module generates a component tree for the first user interface based on the updated dependency table, and updates the properties of the first component in the rendering tree of the first user interface based on the generated component tree. The rendering module renders and updates the first component in the first user interface based on the attributes of the first component in the updated rendering tree.

11. An electronic device, characterized in that, The operating system of the electronic device is programmed in a native language; the operating system of the electronic device includes a receiving module, a programming language bridging module, and a rendering module described in the native language. The receiving module is used to receive a first operation for launching the application; The programming language bridging module is used to extract component information with data type descriptions in JavaScript from the executable file of the application. The component information described in the JavaScript language with data types is converted into component information described in the native language; the executable file is a script file written in the JavaScript language with data types, and describes the layout, style and logic of the first user interface; the native language is different from the JavaScript language with data types. The rendering module is used to construct a component tree of the first user interface based on the component information described in the native language, and to render and display the first user interface using the component tree of the first user interface.

12. The electronic device according to claim 11, characterized in that, The JavaScript language with data types mentioned is TypeScript.

13. The electronic device according to claim 11, characterized in that, The operating system of the electronic device also includes a component state management module, a notification module, and an update module described in the native language; The component state management module is used to generate a dependency table based on the executable file of the application. The dependency table describes the attributes of each component of the first user interface and the access path of each component. The notification module is configured to receive a second operation after the rendering module renders and displays the first user interface using the component tree of the first user interface; the second operation indicates a change in the attribute of the first component of the first user interface. The component state management module is further configured to update the properties of the first component described in the dependency table according to the second operation; The update module is further configured to render and update the first component of the first user interface based on the attributes of the first component described in the updated dependency table.

14. The electronic device according to claim 13, characterized in that, The component state management module is specifically used for: Based on the second operation, obtain the access path of the first component and the changed attributes of the first component; The properties of the first component described in the dependency table are updated to the changed properties based on the access path of the first component.

15. The electronic device according to claim 13, characterized in that, The update module includes a component update module and the rendering module; The component update module is used to generate a component tree of the first user interface based on the updated dependency table, and update the attributes of the first component in the rendering tree of the first user interface based on the generated component tree of the first user interface. The rendering module is used to render and update the first component of the first user interface based on the attributes of the first component in the updated rendering tree.

16. The electronic device according to any one of claims 11-15, characterized in that, The application is an app, a mini-program, or a webpage.

17. An electronic device, characterized in that, include: Memory, one or more processors; The memory is coupled to the one or more processors, the memory being used to store a computer program, the one or more processors invoking the computer program to cause the electronic device to perform the method as described in any one of claims 1-10.

18. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a computer program that, when run on an electronic device, causes the electronic device to perform the method as described in any one of claims 1-10.

Images