Component loading method and related device

Abstract

A component loading method and related apparatus, the method being applied to a terminal device, the method comprising: in response to a first user operation, starting an application, the application loading a first page; according to a component tree, determining a first target component and a first associated component associated with the first target component, the first target component being configured with an identifier, and the component tree being used for reflecting an association relationship of each component in the application; performing layout calculation on the first target component and the first associated component to obtain a first layout result, the first layout result comprising layout information of the first target component and the first associated component; and in response to a second user operation, loading a second page containing the first target component and the first associated component according to the first layout result. The layout calculation is performed on the first target component and the first associated component in advance, so that when the first target component is accessed, the layout speed of the page of the application is greatly accelerated, and the page loading speed is further improved.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a component loading method and related devices. Background Art

[0002] With the rapid development of mobile terminals, applications on mobile terminals have also diversified. During the operation of an application, the more complex its business is, the more complex the components used will be. Layout and rendering are the most basic capabilities of an application. Common component layout methods include list layout and grid layout. The layout calculation of each component in the application is performed, and then rendering and drawing are performed to display the corresponding image on the screen.

[0003] As the complexity of components increases, the layout calculation of components takes longer and longer. Therefore, when the application is opened, the page loads longer. Summary of the invention

[0004] The present application provides a component loading method and related devices, in order to shorten the time spent on component layout calculation, thereby increasing page loading speed.

[0005] On the first aspect, the present application provides a component loading method, which can be executed by a terminal device, or the method can also be executed by a component configured in the terminal device (such as a chip, a chip system, etc.), or it can also be implemented by a logic module or software that can realize all or part of the terminal device functions, and the present application does not limit this.

[0006] Exemplarily, the method includes: in response to a first user operation, an application is started, and the application loads a first page; a first target component and a first associated component associated with the first target component are determined according to a component tree, wherein the first target component is configured with an identifier, and the component tree is used to reflect the association relationship between various components within the application; a layout calculation is performed on the first target component and the first associated component to obtain a first layout result, wherein the first layout result includes layout information of the first target component and the first associated component; in response to a second user operation, a second page including the first target component and the first associated component is loaded according to the above-mentioned first layout result.

[0007] Based on the above technical solution, after the application is started, the layout calculation is performed in advance on the first target component and the first associated component associated with the first target component to obtain a first layout result. In this way, when loading the second page containing the first target component and the first associated component, the first layout result can be directly used, which greatly speeds up the layout speed and thus improves the page loading speed.

[0008] In addition, the first target component for which layout calculation is performed in advance in the present application is configured with an identifier, and the number of the first target components can be one or more, and the present application does not limit the number. The first target component can be a visible component or an invisible component, which is more flexible. Moreover, the first target component is not limited by the component currently displayed by the application, for example, it is not limited by the type of the currently displayed component (such as the component in the first page) or the serial number, and has a wide range of uses and is more universal.

[0009] In combination with the first aspect, in some possible implementations, the method further includes: determining a second target component and a second associated component associated with the second target component according to the component tree, wherein the second target component is configured with an identifier; performing layout calculation on the second target component and the second associated component to obtain a second layout result, wherein the second layout result includes layout information of the second target component and the second associated component; and clearing the second layout result after the application exits when the second target component is not accessed. Storage space can be saved to a certain extent.

[0010] It is understandable that in actual applications, the first target component may not be accessed. For the sake of distinction, we record the unaccessed target component as the second target component, that is, the second target component is not accessed. The terminal device determines the second target component and the second associated component based on the component tree, and then performs layout calculation on the second target component and the second associated component to obtain the second layout result. If the second target component is not accessed, the second layout result is cleared after the application exits. It is understandable that when the application is started again, the layout calculation of the second target component and the second associated component can be re-performed.

[0011] In combination with the first aspect, in some possible implementations, the terminal device includes a layout processing module, and the layout calculation is performed on the first target component and the first associated component to obtain a first layout result, including: the layout processing module performs layout calculation on the first target component and the first associated component to obtain the position and size of each component in the first target component and the first associated component.

[0012] In combination with the first aspect, in some possible implementations, the terminal device further includes a layout module, and the method further includes: the layout processing module sends a first layout result to the layout module; and, in response to a second user operation, according to the first layout result, loads a second page containing a first target component and a first associated component, including: the layout module determines that the first target component is accessed in response to the second user operation; the layout module loads the second page according to the first layout result.

[0013] In combination with the first aspect, in some possible implementations, the terminal device further includes a layout storage module, and after determining the first target component and the first associated component associated with the first target component according to the component tree, the method further includes: the layout storage module stores information of the first target component and the first associated component, and the information includes at least one of the following: an identifier of the application, an identifier of each component in the first target component and the first associated component, and a level of each component in the first target component and the first associated component in the component tree. In some examples, the information of the first target component and the first associated component may be part of the above-mentioned layout information.

[0014] In combination with the first aspect, in some possible implementations, the terminal device also includes a layout analysis module, which determines the first target component and the first associated component associated with the first target component according to the component tree, including: the layout analysis module determines the first target component and the first associated component associated with the first target component according to the component tree; the above method also includes: the layout analysis module sends information about the first target component and the first associated component to the layout storage module.

[0015] In combination with the first aspect, in some possible implementations, before performing layout calculation on the first target component and the first associated component, the method further includes: the layout processing module obtains information of the first target component and the first associated component from the layout storage module through the layout analysis module.

[0016] In combination with the first aspect, in some possible implementations, in the component tree, the first associated component is a child node of the first target component.

[0017] In combination with the first aspect, in some possible implementations, the above method also includes: determining the third target component according to preset rules, wherein the preset rules include one or more of the following: the access frequency of the third target component exceeds the frequency threshold; the access time of the third target component exceeds the time threshold; the number of visits to the third target component exceeds the number threshold; the third target component includes the component with the highest access frequency among the various components in the above application; the third target component includes the component with the longest access time among the various components in the above application; or, the third target component includes the component with the most visits among the various components in the above application.

[0018] In the above scheme, the third target component is determined by presetting preset rules according to the preset rules. It can be seen from the preset rules that the third target component focuses on components with higher access frequency, more access times and longer access time. In this way, the components that are frequently accessed in the application can be pre-layouted in advance, thereby improving the page loading speed when accessing such components.

[0019] It should be understood that the above-mentioned first target component and third target component may be the same or different, and this application does not limit this. The terminal device may determine the first target component and the first associated component (the first target component is configured with an identifier) ​​according to the component tree when the application is first started or the first few times the application is started, perform layout calculations on the first target component and the first associated component, obtain a first layout result, and then load a page containing the first target component and the first associated component according to the first layout result. The terminal device may also determine the third target component according to preset rules after the application has been used for a period of time, perform layout calculations on the third target component and the third associated component associated with it, obtain a third layout result, and then load a page containing the third target component and the third associated component according to the third layout result.

[0020] On the second aspect, the present application provides a component loading method, which can be executed by a terminal device, or the method can also be executed by a component configured in the terminal device (such as a chip, a chip system, etc.), or it can also be implemented by a logic module or software that can realize all or part of the terminal device functions. The present application does not limit this.

[0021] Exemplarily, the method includes: in response to a first user operation, starting an application, and the application loads a third page; determining a third target component according to a preset rule, the preset rule including one or more of the following: the access frequency of the third target component exceeds a frequency threshold; the access time of the third target component exceeds a time threshold; the number of visits to the third target component exceeds a number threshold; the third target component includes the component with the highest access frequency among the various components in the application; the third target component includes the component with the longest access time among the various components; or, the third target component includes the component with the largest number of visits among the various components; determining a third associated component associated with the third target component according to a component tree, the component tree being used to reflect the association relationship between the various components in the application; performing layout calculation on the third target component and the third associated component to obtain a third layout result, the third layout result including layout information of the third target component and the third associated component; in response to a second user operation, loading a fourth page containing the third target component and the third associated component according to the third layout result.

[0022] Based on the above technical solution, by presetting preset rules, the third target component is determined according to the preset rules. It can be seen from the preset rules that the third target component focuses on components with higher access frequency, more access times and longer access time. In this way, the components that are frequently accessed in the application can be pre-layouted in advance, thereby improving the page loading speed when accessing such components.

[0023] In combination with the second aspect, in some possible implementations, the above method also includes: determining a fourth target component according to preset rules; determining a fourth associated component associated with the fourth target component according to a component tree; performing layout calculations on the fourth target component and the fourth associated component to obtain a fourth layout result, the fourth layout result including layout information of the fourth target component and the fourth associated component; and clearing the fourth layout result after the application exits if the fourth target component is not accessed.

[0024] It is understandable that in actual applications, the third target component may not be accessed. For the sake of distinction, we will record the target component that is determined according to the preset rules but has not been accessed as the fourth target component, that is, the fourth target component has not been accessed. Therefore, the above method also includes: determining the fourth target component according to the preset rules; determining the fourth associated component associated with the fourth target component according to the component tree; performing layout calculation on the fourth target component and the fourth associated component to obtain a fourth layout result, and the fourth layout result includes the layout information of the fourth target component and the fourth associated component; when the fourth target component is not accessed, after the application exits, the fourth layout result is cleared, which is conducive to saving storage space.

[0025] In combination with the second aspect, in some possible implementations, in the component tree, the third associated component is a child node of the third target component.

[0026] In a third aspect, the present application provides a terminal device, which can implement the method described in the first aspect and any possible implementation of the first aspect, or implement the method described in the second aspect and any possible implementation of the second aspect. The terminal device includes a corresponding module for executing the above method. The module included in the terminal device can be implemented by software and / or hardware.

[0027] In a fourth aspect, the present application provides a terminal device, the terminal device comprising a processor. The processor is coupled to a memory and can be used to execute a computer program in the memory to implement the method in the first aspect and any possible implementation of the first aspect, or to implement the method in the second aspect and any possible implementation of the second aspect.

[0028] Optionally, the terminal device further includes a communication interface, and the processor is coupled to the communication interface. The communication interface is used to receive signals from other communication devices outside the device and transmit them to the processor, or send signals from the processor to other communication devices outside the device. Exemplarily, the communication interface can be a transceiver, circuit, bus, module or other type of communication interface.

[0029] Optionally, the terminal device further includes a memory, and the processor is coupled to the memory. The memory is used to store program instructions and data.

[0030] In a fifth aspect, the present application provides a computer-readable storage medium, which stores a computer program or instruction. When the computer program or instruction is executed, it implements the method in the first aspect and any possible implementation of the first aspect, or implements the method in the second aspect and any possible implementation of the second aspect.

[0031] In a sixth aspect, the present application provides a computer program product comprising instructions, which, when executed, implement the method in the first aspect and any possible implementation of the first aspect, or implement the method in the second aspect and any possible implementation of the second aspect.

[0032] In the seventh aspect, the present application provides a chip system, which includes at least one processor for supporting the implementation of the functions involved in the above-mentioned first aspect and any possible implementation method of the first aspect, or for supporting the implementation of the functions involved in the above-mentioned second aspect and any possible implementation method of the second aspect, for example, receiving or processing the data involved in the above-mentioned method, etc.

[0033] In one possible design, the chip system also includes a memory, which is used to store program instructions and data, and the memory is located inside or outside the processor.

[0034] The chip system may be composed of the chip, or may include the chip and other discrete devices.

[0035] It should be understood that the third to seventh aspects of the present application correspond to the technical solutions of the first and second aspects of the present application, and the beneficial effects achieved by each aspect and the corresponding feasible implementation methods are similar and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 is a schematic diagram of the hardware structure of a terminal device provided in an embodiment of the present application;

[0037] Figure 2 It is a structural block diagram of software applicable to the terminal device provided in the embodiment of the present application;

[0038] Figure 3 is a schematic diagram of a component tree provided in an embodiment of the present application;

[0039] Figure 4 is a schematic flow chart of a method for loading a component provided in an embodiment of the present application;

[0040] Figure 5 It is an interaction flow chart of each module provided in the embodiment of the present application;

[0041] Figure 6is another interactive flow chart of various modules provided in an embodiment of the present application;

[0042] Figure 7 is a schematic diagram of the interaction between the layout analysis module and the application framework provided in an embodiment of the present application;

[0043] Figure 8 It is a schematic diagram of performing layout calculation on a target component and its associated components provided by an embodiment of the present application;

[0044] Fig. 9 It is another interaction flow chart of each module provided in the embodiment of the present application. DETAILED DESCRIPTION

[0045] The technical solution in this application will be described below in conjunction with the accompanying drawings.

[0046] To facilitate understanding of the embodiments of the present application, the following description is first made:

[0047] First, in this application, in order to clearly describe the technical solutions of the embodiments of this application, words such as "first" and "second" are used to distinguish between identical or similar items with substantially identical functions and effects. For example, the first page and the second page are only used to distinguish between different pages, and their order is not limited. Those skilled in the art can understand that words such as "first" and "second" do not limit the quantity and execution order, and words such as "first" and "second" do not necessarily limit them to be different.

[0048] Second, in this application, "at least one" means one or more, and "more than one" means two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship, but it does not exclude the situation where the previous and next associated objects are in an "and" relationship. The specific meaning can be understood in combination with the context. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can mean: a, b, c; a and b; a and c; b and c; or a and b and c. Where a, b, c can be single or multiple.

[0049] Third, in the present application, "when", "assuming", "if", "under the circumstances" and "if" all mean that the device will take corresponding actions under certain objective circumstances. It does not limit the time, nor does it require that the device must have a judgment action when it is implemented, nor does it mean that there are other limitations.

[0050] Fourth, the method provided in the present application can be executed by a terminal device, or it can also be executed by a component configured in the terminal device (such as a chip, a chip system, etc.), or it can also be implemented by a logic module or software that can realize all or part of the functions of the terminal device, and the present application does not limit this. Among them, the terminal device can also be called user equipment (UE), access terminal, user unit, user station, mobile station, mobile station, remote station, remote terminal, mobile device, user terminal, terminal, wireless communication device, user agent or user device, etc., and the embodiments of the present application do not limit this.

[0051] In the embodiments of the present application, the types of terminal devices include, but are not limited to: mobile phones, tablet computers, computers with wireless transceiver functions (such as laptops, PDAs, etc.), mobile Internet devices (MID), virtual reality (VR) devices, augmented reality (AR) devices, wireless terminals in industrial control, wireless terminals in self-driving, wireless terminals in remote medical, wireless terminals in smart grids, wireless terminals in transportation safety, wireless terminals in smart cities, wireless terminals in smart homes, cellular phones, cordless phones, session initiation protocol (SIP) phones, wireless local loop (WLL) stations, personal digital assistants (PDAs), handheld devices with wireless communication functions, computing devices or other processing devices connected to wireless modems, vehicle-mounted devices, wearable devices, fifth generation (5th generation) The present invention relates to terminals in the 5G generation (5G) network or terminals in the future evolved public land mobile network (PLMN), laptop computers, machine type communication (MTC) terminals, etc.

[0052] In addition, the terminal device can also be a terminal device in the Internet of Things (IoT) system. IoT is an important part of the future development of information technology. Its main technical feature is to connect objects to the network through communication technology, thereby realizing an intelligent network of human-machine interconnection and object-to-object interconnection. IoT technology can achieve massive connections, deep coverage, and terminal power saving through narrowband (NB) technology, for example.

[0053] Figure 1 1 is a schematic diagram of the hardware structure of the terminal device 100 provided in the embodiment of the present application. Figure 1 Describe in detail the possible hardware structure of the terminal device.

[0054] The terminal device 100 includes a processor 101, a transceiver 102, a memory 103, an antenna 104, a power supply 105, an input unit 106, a display unit 107, an audio circuit 108, a camera 109, a sensor 110, and a wireless fidelity (Wi-Fi) module 111. The audio circuit 108 may include a speaker 108a, a microphone 108b, and the like.

[0055] The processor 101 may include one or more processing units, for example, the processor 101 may include one or more of an application processor (AP), a microcontroller unit (MCU), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and a neural-network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors.

[0056] The memory 103 can be used to store computer executable program codes, which include instructions. The processor 101 executes various functional applications and data processing of the terminal device 100 by running the instructions stored in the memory 103. The memory 103 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area can store data created during the use of the terminal device 100 (such as audio data, a phone book, etc.), etc. In addition, the memory 103 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0057] The processor 101, the transceiver 102 and the memory 103 can communicate with each other through an internal connection path to transmit control and / or data signals. The processor 101 is used to call and run the computer program stored in the memory 103 to control the transceiver 102 to send and receive signals.

[0058] The antenna 104 is used to transmit the data or signaling output by the transceiver 102. The power supply 105 is used to provide power to various devices or circuits in the terminal device 100.

[0059] The input unit 106 is used to receive content input by the user. The display unit 107 can be used to display text, images, videos, etc. For example, in the present application, the display unit 107 can be used to display a page of an application.

[0060] It is to be understood that the structure illustrated in the present application does not constitute a specific limitation on the terminal device 100. In other embodiments, the terminal device 100 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0061] In addition, the operating system of the terminal device may be an Android operating system (Android OS), a Harmony OS, an OpenHarmony OS, or the like. This embodiment of the present application does not impose any limitation on this.

[0062] Figure 2 It is a structural block diagram of the software applicable to the terminal device provided in the embodiment of the present application. It can be understood that Figure 2Taking the layered architecture of OpenHarmony as an example, the software structure of the terminal device is exemplified. In this application, the type of operating system of the terminal device is not limited.

[0063] like Figure 2 As shown, in some embodiments, the operating system is divided into four layers, from top to bottom, namely, the application layer, the framework layer, the system service layer, and the kernel layer. In some embodiments, the terminal device also includes hardware, such as a GPU, a central processing unit (CPU), a display screen, etc.

[0064] The application layer can include a series of application programs. Figure 2 As shown, the application layer may include system applications and third-party applications. System applications may be understood as some applications that come with the system, such as camera, gallery (or album), calendar, call, map, Bluetooth, video, and music applications. Third-party applications may be understood as non-system applications that can be downloaded and installed from an application store or the like. The method provided in this application may be applicable to system applications or third-party applications, and this application does not limit the application type.

[0065] The framework layer may include a user interface (UI) framework or application framework, a user program framework (or program framework), a component framework, an ability framework, etc. The framework layer provides the operating system's application with a user program framework and component framework in multiple languages, such as C, C++, and JavaScript (JS), as well as a multi-language framework (application programming interface, API) for various software and hardware services to be open to the outside world; it also provides devices with a multi-language UI framework in multiple languages, such as C, C++, and JS. The APIs supported by different devices are related to the degree of componentization of the system.

[0066] In an embodiment of the present application, the framework layer may further include a layout analysis module, a layout storage module, a layout processing module, and the like.

[0067] Among them, the layout analysis module can be used to determine the target component, and send the information of the target component and the associated component associated with the target component to the layout storage module. The target component can be the first target component, the second target component, the third target component, the fourth target component, etc., which is not limited in the embodiment of the present application. In addition, in the present application, the associated component associated with the target component can be referred to as the associated component of the target component. In order to facilitate the distinction between the associated components of different target components, the associated component associated with the first target component can be referred to as the first associated component, the associated component associated with the second target component can be referred to as the second associated component, and so on, which will not be listed one by one here.

[0068] The layout storage module can be used to store information about a target component and associated components associated with the target component. The target component can be a first target component or a second target component.

[0069] The layout processing module can be used to perform layout calculations on the target component and the associated components associated with the target component after the application is started, and obtain a layout result so that when the target component is accessed, the layout result can be directly used to load a page containing the target component and the associated components associated with the target component.

[0070] It can be understood that in the present application, the layout calculation of the target component and its associated components is performed after the application is started and before the target component is accessed, or before the page containing the target component and its associated components is loaded. Therefore, it can also be called pre-layout of the target component and its associated components. The above-mentioned layout analysis module can also be called pre-layout analysis module, the layout storage module can also be called pre-layout storage module, and the layout processing module can also be called pre-layout processing module. The present application does not specifically limit the names of the modules.

[0071] It should be noted that in the embodiments of the present application, the target component may be, for example, a first target component, a second target component, a third target component, a fourth target component, etc., which will not be described one by one below.

[0072] The system service layer can include the system basic capability subsystem set, the basic software service subsystem set, the enhanced software service subsystem set and the hardware service subsystem set. The system service layer is the core capability set of the operating system, providing services for applications through the framework layer.

[0073] Among them, the system basic capability subsystem set can be composed of subsystems such as distributed soft bus and distributed data management. The system basic capability subsystem set can provide basic capabilities for the operation, scheduling, migration and other operations of distributed applications on multiple devices.

[0074] The basic software service subsystem set can be composed of subsystems such as event notification, telephone, multimedia, etc., and can provide public and general software services.

[0075] The enhanced software service subsystem set can be composed of subsystems such as smart screen proprietary services, wearable proprietary services, IoT proprietary services, etc., and can provide differentiated capability-enhanced software services for different devices.

[0076] The hardware service subsystem set can be composed of subsystems such as location services, biometric recognition, wearable proprietary hardware services, IoT proprietary hardware services, etc., which can provide hardware services.

[0077] It should be noted that, according to the deployment environment of different device forms, the basic software service subsystem set, enhanced software service subsystem set and hardware service subsystem set can be cut according to the subsystem granularity, and each subsystem can be cut according to the functional granularity. This embodiment of the application does not make any limitation to this.

[0078] The kernel layer can include the kernel subsystem and the driver subsystem. The operating system can adopt a multi-kernel design. Based on the kernel subsystem, the operating system supports the selection of suitable OS kernels for different resource-constrained devices; the kernel abstraction layer (KAL) shields the differences between multiple kernels and provides basic kernel capabilities to the upper layer, including process management / thread management, memory management, file system, network management, and peripheral management. The driver framework in the driver subsystem is the basis for the openness of the operating system hardware ecosystem, and can provide unified peripheral access capabilities and driver development and management frameworks.

[0079] It should be understood that Figure 1 and Figure 2 The structure of the terminal device described is only an example and should not impose any limitation on the embodiments of the present application.

[0080] In order to facilitate understanding of the embodiments of the present application, the terms involved in the present application are briefly explained below.

[0081] 1. Component and component tree: A component is the smallest unit of application page development. For example, a text, a picture, a video, or a button can all be a component. The component tree is used to reflect the relationship between components in an application. For example, components generally have a parent-child relationship. If a component is regarded as a node in the component tree, then for a parent node, you can see which child nodes it has through the component tree.

[0082] In this application, the application framework can be used to generate a component tree based on the components in the application, and store the components in the component tree structure. Figure 3Give an example of a component tree.

[0083] Figure 3 is a schematic diagram of a component tree provided in an embodiment of the present application. Figure 3 The component tree shown may be a component tree corresponding to a component of a certain page of an application.

[0084] For example, the program of the components in the application is as follows, which reflects the association relationship (or parent-child relationship) between the components:

[0085]

[0086]

[0087] The application framework can generate a component tree based on the relationship between the components in the above application. Figure 3 As shown, each node can represent a component. In the component tree, the directory (Index) is the root node, and the level where the root node is located can be, for example, the first level. Next is the column (Column), which is a frame node (frame node). The level where the node is located can be the second level, and the Column can be considered as a child node of the root node. The Column has two child nodes, namely the stack (Stack) and the list (List), and the level where these two child nodes are located is the third level. Similarly, the child node of the Stack is the text (Text), and the child node of the List is the lazy node (lazy for each), and the level where the lazy node and the Text are located is the fourth level. The child node of the lazy node is the list item (Listitem). The access view (Chatview) is the child node of the node of the previous level.

[0088] It is understood that in the present application, the associated component associated with the target component (which can be regarded as a parent node) can be, for example, a child node of the target component. Figure 3 , the node corresponding to the target component is the Column of the second layer. According to the above component tree, it can be seen that the associated components it is associated with can be, for example, nodes of the third layer and below. It can be understood that the nodes of the third layer can be considered as child nodes of the nodes of the second layer, and the nodes of the fourth layer can be considered as child nodes of the nodes of the third layer. Therefore, the nodes of the fourth layer can also be considered as child nodes of the nodes of the second layer, and so on. The child nodes of the nodes of the second layer can be nodes of the third layer and below.

[0089] 2. Layout: refers to calculating the position and size relationship between components. In other words, it is the calculation of the display position and size. Common layout methods of components include, but are not limited to: list layout, grid layout, linear layout, etc.

[0090] 3. Rendering: refers to drawing the content corresponding to the component.

[0091] 4. Application framework: used to analyze and process application code. By analyzing the development components used, they are recorded and stored in a tree structure for subsequent application layout display.

[0092] It is not difficult to understand that during the development of an application, the more complex its business is, the more complex the components used will be. As the complexity of the components increases, the layout calculation of each component takes longer and longer. Therefore, when a user enters the application, the page loading time will be longer.

[0093] Exemplarily, lazy loading technology can be used to increase layout speed, thereby speeding up page loading. For example, for a list component, assuming there are 100 components in the list, the terminal device displays the first 10 components by default, that is, the components are numbered 1 to 10, and the remaining components can be displayed by sliding. If lazy loading is enabled, the terminal device can load components numbered 10 to 15 in advance, that is, pre-layout components numbered 10 to 15, which saves loading time when sliding down.

[0094] However, lazy loading technology can only pre-layout components of the same type and adjacent to the currently displayed component, where components of the same type can be understood as components corresponding to child nodes belonging to the same parent node in the component tree. The scope of application of lazy loading technology is limited.

[0095] In response to the above problems, the present application provides a component loading method. After the application is started, the layout calculation of the first target component and the first associated component is performed in advance to obtain a first layout result. In this way, when displaying a page containing the first target component and the first associated component, the first layout result can be directly used to load the second page containing the first target component and the first associated component, which greatly speeds up the layout speed and thus improves the page loading speed. Moreover, the first target component for which the layout calculation is performed in advance in the present application is not limited by the component currently displayed by the application, and has a wide range of uses and is more universal.

[0096] It should be noted that the method provided in the present application can be applicable to system applications, such as gallery, desktop, settings, app store, etc.; it can also be adapted to third-party applications, such as social applications and other applications with complex components. It can be understood that for third-party applications with relatively complex components, the method provided in the present application can be used to pre-calculate the layout of some components, thereby speeding up the loading speed.

[0097] The following will describe in detail the loading method of the components provided by the present application in conjunction with the accompanying drawings.

[0098] Figure 4 It is a schematic flowchart of a component loading method 400 provided in an embodiment of the present application.

[0099] It should be understood that Figure 4 The method 400 shown is described by taking the terminal device as the execution subject as an example, but no limitation should be imposed on the execution subject of the method. As long as the program that records the code of the method provided in the embodiment of the present application can be run, the method provided in the embodiment of the present application can be executed. For example, the terminal device can also be replaced by a component configured in the terminal device (such as a chip, a chip system, etc.), or other functional modules that can call and execute the program. The embodiment of the present application does not limit this.

[0100] In step 410 , in response to a first user operation, an application is started.

[0101] Among them, the first user operation can be, for example, user operations such as clicking an application icon and waking up the application with voice, which is not limited in this embodiment of the present application.

[0102] Exemplarily, in response to a first user operation, the terminal device starts an application, and the application loads a first page.

[0103] In step 420, a first target component and a first associated component associated with the first target component are determined according to the component tree.

[0104] The component tree is used to reflect the association relationship of each component in the application. It can be understood that the component tree includes the association relationship of the components of the currently displayed page (such as the first page), and also includes the association relationship of the components of other undisplayed pages of the application (such as the second page).

[0105] The first target component is configured with an identifier. In other words, the first target component is predefined. As mentioned above, the component tree is used to reflect the association relationship between the various components in the application. Therefore, the terminal device can determine the first target component configured with an identifier and the first associated component associated with the first target component based on the component tree. The first target component can be any one or more components in the application, for example, it can be a component visible in the application page, or it can be an invisible component, and this application does not limit this.

[0106] For example, taking social applications as an example, some advertisements are often inserted into the friend status page of the social application, or the comment page of articles and videos. For each component in these advertisements, some components can be configured with identifiers, so that before accessing the advertisements, the layout calculation of such components can be performed in advance to obtain the layout results. When the advertisement is accessed, the terminal device can quickly calculate the overall layout of the page based on the layout results, and load the page containing such components and their associated components, thereby improving the page loading speed.

[0107] Optionally, the first associated component is a child node of the first target component in the above component tree.

[0108] That is, the terminal device can determine the child node of the first target component according to the component tree, and the child node is the first associated component. Figure 3 As can be seen from the component tree, the component tree can be used to reflect the association relationship between various components in the application, or the parent-child relationship between various components. The terminal device can determine the component associated with the first target component based on the component tree, or in other words, the first target component can be regarded as a parent node, and the child nodes of the parent node can be determined based on the component tree. Figure 3 As can be seen from the description, the components associated with the first target component (i.e., the first associated components) include the components connected to the first target component and located below the level of the first target component. Figure 3 For the second-level Column in , the components at the third level and below are all components associated with the first target component.

[0109] Optionally, in the present application, the number of the first target components may be one or more, and the present application does not limit this. If the number of the first target components is one, then after the application is started, the terminal device performs layout calculations on the first target component and the first associated component associated with the first target component; if the number of the first target components is multiple, then after the application is started, the terminal device performs layout calculations on each first target component and the first associated component associated with the first target component.

[0110] It should be noted that, in some cases, the first target component may not have its associated first associated component (such as the first target component has no child node in the component tree, therefore, the first target component does not have its associated first associated component). In this case, the terminal device can perform layout calculations on the first target component after the application is started.

[0111] In step 430, layout calculation is performed on the first target component and the first associated component to obtain a first layout result.

[0112] The first layout result includes layout information of the first target component and the first associated component. The layout information may include the position and size of each component in the first target component and the first associated component, and may also include color, resolution, etc. The present application does not limit the specific content included in the layout information.

[0113] It can be understood that the first target component is not limited to the component currently displayed by the application (such as the component in the first page).

[0114] The first target component is not limited by the component currently displayed by the above application, which can be understood as the first target component is not limited by the type and serial number of the component currently displayed by the application. The first target component can be the same type as the component currently displayed by the application, or it can be different; the first target component can be a component with a serial number adjacent to the component currently displayed by the application, or it can be a component with a serial number that is not adjacent.

[0115] For example, if the serial numbers of the components currently displayed in the application are components 1 to 10, then the first target component can be a component adjacent to the serial numbers of the above components, such as components 11 to 15, or a component not adjacent to the serial numbers of the above components, such as components 20 to 25. In this way, the method provided by the present application has a wider scope of application and is more universal.

[0116] In the present application, the same type of components can be understood as the components belonging to the same parent node in the component tree, and different types can be understood as the components belonging to different parent nodes in the component tree.

[0117] Optionally, the terminal device includes a layout processing module, and the above-mentioned layout calculation is performed on the first target component and the first associated component to obtain the first layout result, including: the layout processing module performs layout calculation on the first target component and the first associated component to obtain the position and size of each component in the first target component and the first associated component.

[0118] In the present application, the layout processing module in the terminal device can perform layout calculations on the first target component and the first associated component to obtain the position and size of each component in the first target component and the second associated component, and can also obtain the color, resolution, etc. of each component. This application does not make specific limitations on this.

[0119] Optionally, before performing layout calculation on the first target component and the first associated component, the method further includes: the layout processing module obtains information of the first target component and the first associated component from the layout storage module through the layout analysis module.

[0120] The layout processing module obtains information of the first target component and the first associated component to determine which components to perform layout calculation on.

[0121] It can be understood that the layout analysis module can determine the first target component and the first associated component associated with the first target component according to the component tree, and send the information of the first target component and the first associated component to the layout storage module. Then the layout storage module stores it, and the layout processing module obtains the above information from the layout storage module before performing layout calculation to determine which components to perform layout calculation.

[0122] The above information includes at least one of the following: an identification of the application, an identification of each component in the first target component and the first associated component, and a level of each component in the first target component and the first associated component in the component tree.

[0123] Optionally, the terminal device also includes a layout module, and the above method also includes: the layout processing module sends a first layout result to the layout module; and, in response to a second user operation, according to the first layout result, loads a second page containing the first target component and the first associated component, including: the layout module determines that the first target component is accessed in response to the second user operation; the layout module loads the second page according to the first layout result.

[0124] Exemplarily, the layout processing module performs layout calculation on the first target component and the first associated component, and after obtaining the first layout result, the first layout result can be sent to the layout module. The layout module responds to the second user operation (such as the operation of accessing the first target component), determines that the first target component is accessed, and then loads the second page containing the first target component and the first associated component.

[0125] In step 440, in response to a second user operation, a second page including the first target component and the first associated component is loaded according to the first layout result.

[0126] If the first target component is accessed, the terminal device loads the second page containing the first target component and the first associated component according to the first layout result. In other words, the terminal device can perform an overall layout of the application page based on the first layout result and other components of the application.

[0127] Exemplarily, in response to a second user operation, which may be an operation of accessing the first target component, the terminal device loads a second page including the first target component and the first associated component according to the first layout result.

[0128] As an example but not limitation, the layout module in the terminal device can obtain the first layout result from the layout processing module when the first target component is accessed. For example, after the layout processing module obtains the first layout result, it sends the above-mentioned first layout result to the layout module, and accordingly, the layout module receives the above-mentioned first layout result.

[0129] It can be understood that in actual applications, the first target component may not be accessed. For the sake of distinction, we record the unaccessed target component as the second target component, that is, the second target component is not accessed. Therefore, the above method 400 also includes: determining the second target component and the second associated component associated with the second target component according to the component tree, and the second target component is configured with an identifier; performing layout calculation on the second target component and the second associated component to obtain a second layout result, and the second layout result includes layout information of the second target component and the second associated component; when the second target component is not accessed, after the application exits, clearing the second layout result.

[0130] Exemplarily, the terminal device determines the second target component and the second associated component according to the component tree, and then performs layout calculation on the second target component and the second associated component to obtain a second layout result. If the second target component is not accessed, the second layout result is cleared after the application exits. It is understandable that when the application is started again, the layout calculation can be performed again on the second target component and the second associated component.

[0131] As an example but not limitation, the layout module in the terminal device may clear the second layout result after the application exits when the second target component is not accessed.

[0132] Optionally, the above method also includes: determining the third target component according to preset rules, wherein the access frequency of the third target component exceeds the frequency threshold; the access time of the third target component exceeds the time threshold; the number of accesses of the third target component exceeds the number threshold; the third target component includes the component with the highest access frequency among all components; the third target component includes the component with the longest access time among all components; or, the third target component includes the component with the most accesses among all components.

[0133] In one example, the third target component may be a component whose access frequency exceeds a frequency threshold among various components in the application. For example, if the frequency threshold is 30%, the terminal device may select a component whose access frequency exceeds 30% among various components in the application as the third target component, and perform layout calculation on the third target component and its associated associated components.

[0134] Similarly, the third target component may also be a component whose access time exceeds a time threshold among various components in the application, and / or a component whose access times exceed a times threshold among various components in the application, which will not be listed here one by one.

[0135] In another example, the third target component may also be the component with the highest access frequency among the components. In other words, the access frequencies of the components may be compared, and the component with the highest access frequency may be selected as the third target component. It is understandable that the number of second target components may also be multiple (e.g., m, where m is an integer greater than 1). In this case, the terminal device may select the components ranked in the top m in descending order of access frequency as the third target component.

[0136] It should be understood that the above-mentioned first target component and third target component may be the same or different, and this application does not limit this. The terminal device may determine the first target component and the first associated component (the first target component is configured with an identifier) ​​according to the component tree when the application is first started or the first few times the application is started, perform layout calculations on the first target component and the first associated component, obtain a first layout result, and then load a page containing the first target component and the first associated component according to the first layout result. The terminal device may also determine the third target component according to preset rules after the application has been used for a period of time, perform layout calculations on the third target component and the third associated component associated with it, obtain a third layout result, and then load a page containing the third target component and the third associated component according to the third layout result.

[0137] The determination process, storage process, and layout calculation process of the third target component and the third associated component by each module in the terminal device can refer to the relevant explanation of the first target component, which will not be repeated here.

[0138] It can be understood that in actual applications, the terminal device can also directly determine the target component according to preset rules.

[0139] Exemplarily, in response to a first user operation, the terminal device starts an application and loads a third page; determines a third target component according to a preset rule, which preset rule includes one or more of the following: the access frequency of the third target component exceeds a frequency threshold; the access time of the third target component exceeds a time threshold; the number of visits to the third target component exceeds a number threshold; the third target component includes the component with the highest access frequency among all components in the application; the third target component includes the component with the longest access time among all components; or, the third target component includes the component with the largest number of visits among all components; determines a third associated component associated with the third target component according to a component tree, the component tree being used to reflect the association relationship between all components in the application; performs layout calculation on the third target component and the third associated component to obtain a third layout result, the third layout result including layout information of the third target component and the third associated component; in response to a second user operation, loads a fourth page containing the third target component and the third associated component according to the third layout result.

[0140] The explanation of the first user operation can be found above. After the terminal device starts the application, the third target component is determined according to the preset rules. The specific process can be found in Figure 4 Then, according to the association relationship between the components in the application in the component tree, determine the third associated component associated with the third target component, perform layout calculation on the third target component and the third associated component, and obtain a third layout result. When the third target component is accessed, load the fourth page including the third target component and the third associated component according to the third layout result.

[0141] Optionally, the third associated component is a child node of the third target component in the component tree.

[0142] It is understandable that in actual applications, the third target component may not be accessed. For the sake of distinction, we will record the target component that is determined according to the preset rules but is not accessed as the fourth target component, that is, the fourth target component is not accessed. Therefore, the above method also includes: determining the fourth target component according to the preset rules; determining the fourth associated component associated with the fourth target component according to the component tree; performing layout calculation on the fourth target component and the fourth associated component to obtain a fourth layout result, and the fourth layout result includes the layout information of the fourth target component and the fourth associated component; when the fourth target component is not accessed, the fourth layout result is cleared after the application exits.

[0143] The following will be combined Figure 5 and Figure 6 , describes in detail the interaction process between the various modules in the terminal device. Figure 5 In the illustrated embodiment, the target component is predefined, or in other words, the target component is configured with an identifier ( Figure 5 The target component may be the first target component or the second target component), Figure 6 In the embodiment shown, the target component is determined according to a preset rule (in Figure 6 The target component in the middle may be the third target component or the fourth target component).

[0144] exist Figure 5 and Figure 6 In the embodiment shown, the terminal device may include a layout analysis module, a layout storage module, a layout processing module, an application framework and a layout module. The layout analysis module, the layout storage module, the layout processing module, the application framework and the layout module may be considered as Figure 2 Different services in the framework layer are shown.

[0145] Figure 5 It is an interaction flow chart of each module provided in the embodiment of the present application.

[0146] In step 501, the application framework generates a component tree according to each component in the application.

[0147] In step 502, the application framework determines the target component with the identifier and its associated components.

[0148] As an example and not limitation, the application framework may tag the target component (e.g., key tag), or identify the target component, so that these components have identifiers. In addition, the application framework may also tag the associated components associated with the target component. For example, the application framework may determine the associated components associated with the target component based on the component tree, and tag the target component and the associated components associated with the target component.

[0149] In step 503, the application framework sends information about the target component and the associated components associated with the target component to the layout analysis module.

[0150] Among them, the information of the above-mentioned target component and its associated associated components includes one or more of the following: the identification of the application (such as the "bundle" information of the application, which is a data object that stores data in the form of key-value pairs; or the name of the application), the identification of each component in the target component and its associated associated components (such as the component key, the component identifier (identifier, ID)), and the level of each component in the target component and its associated associated components in the component tree.

[0151] Exemplarily, the application framework feeds back information of the marked target component and its associated components to the layout analysis module, and correspondingly, the layout analysis module receives the above information.

[0152] In step 504, the layout analysis module sends information of the target component and the associated components associated with the target component to the layout storage module.

[0153] After receiving the information of the target component and the associated components associated with the target component, the layout analysis module sends the information to the layout storage module for storage.

[0154] In step 505, the layout storage module stores information of the target component and the associated components associated with the target component.

[0155] After receiving the information of the target component and the components associated with the target component from the layout analysis module, the layout storage module stores the information.

[0156] In step 506, after the application is started, the layout processing module obtains information about the target component and its associated components in the layout storage module through the layout analysis module.

[0157] As an example but not limitation, the layout storage module sends information about the target component and the associated components associated with the target component to the layout analysis module. After receiving the above information, the layout analysis module sends the above information to the application framework. After receiving the above information, the application framework sends the above information to the layout processing module.

[0158] It should be understood that in this application, "send" and "receive" indicate the direction of signal transmission. For example, "the layout analysis module sends information to the application framework" can be understood as the destination of the information is the application framework, which can include indirect transmission through other units or modules. For example, information can be sent to the application framework through the program framework. In other words, the layout analysis module sends information to the program framework, and after the program framework receives the information, it sends the information to the application framework.

[0159] In step 507, the layout processing module performs layout calculation on the target component and its associated components to obtain a layout result.

[0160] After receiving the information of the target component and the components associated with the target component, the layout processing module performs layout calculation on the target component and the components associated with the target component to obtain a layout result. The layout calculation includes, for example, calculating the size and position of each component in the target component and the components associated with the target component.

[0161] In step 508, the layout processing module sends the layout result to the layout module. Correspondingly, the layout module receives the layout result.

[0162] The layout module responds to the second user operation, determines that the target component is accessed, and then loads a page containing the target component and the associated components associated with the target component according to the layout result; if the target component is not accessed, the layout result is cleared after the application exits. The second user operation may be, for example, an operation in which the user jumps the terminal device from a certain level page to a page containing the target component.

[0163] It should be understood that Figure 5 The embodiments shown are only examples and should not constitute any limitation to the present application. For example, in some embodiments, the layout analysis module may also determine the target component configured with the identifier and the associated component associated with the target component based on the component tree. For example, the layout analysis module may send a request to the application framework module to request to determine the associated component associated with the target component configured with the identifier, and the application framework may send information about the target component and the associated component associated with it to the layout analysis module.

[0164] exist Figure 5In the illustrated embodiment, the target component may be any one or more components in the application, for example, a visible component in the application page, or an invisible component, and the target component is more flexible.

[0165] Figure 6 It is another interaction flow chart of each module provided in an embodiment of the present application.

[0166] In step 601, the application framework generates a component tree according to each component in the application.

[0167] In step 602, the application framework sends data of each component in the application to the layout analysis module.

[0168] As an example but not limitation, the application framework may send data such as access frequency, access time, and access times of each component in the application to the layout analysis module. In addition, the application framework may also send information such as the identifier of each component in the application, the identifier of the application, and the level of each component to the layout analysis module. In other words, the information and data of each component in the application may be obtained from the application framework.

[0169] In step 603, the layout analysis module determines the target component according to preset rules.

[0170] The preset rules include one or more of the following: the access frequency of the target component exceeds the frequency threshold; the access time of the target component exceeds the time threshold; the number of accesses of the target component exceeds the number threshold; the target component includes the component with the highest access frequency among multiple components; the target component includes the component with the longest access time among multiple components; or, the target component includes the component with the largest number of accesses among multiple components.

[0171] It can be understood that after the layout analysis module determines the target component according to the preset rules, it can obtain the information of the target component and the associated components associated with the target component (such as the child nodes of the target component in the component tree) from the application framework. Exemplarily, the layout analysis module determines the target component according to the preset rules and sends the identifier of the target component to the application framework. After the application framework obtains the identifier of the target component, it determines the components associated with the target component according to the component tree, and sends the information of the target component and the associated components associated with the target component to the layout analysis module, such as the identifier of the application, the identifiers of each component in the target component and the associated components associated with the target component, and the hierarchy of each component in the target component and the associated components associated with the target component.

[0172] In step 604, the layout analysis module sends information of the target component and the associated components associated with the target component to the layout storage module.

[0173] Among them, the information of the above-mentioned target component and its associated associated components includes one or more of the following: the identification of the application (such as the "bundle" information of the application, which is a data object that stores data in the form of key-value pairs; or the name of the application), the identification of each component in the target component and its associated associated components (such as the component key, the component identifier (identifier, ID)), and the level of each component in the target component and its associated associated components in the component tree.

[0174] In step 605, the layout storage module stores information of the target component and the associated components associated with the target component.

[0175] After receiving the information of the target component and the associated components associated with the target component from the layout analysis module, the layout storage module stores the information.

[0176] It can be understood that the source of the information of the target component and the associated components associated with the target component stored in the layout storage module is the application framework, the application framework sends the above information to the layout analysis module, and the layout analysis module sends the above information to the layout storage module.

[0177] In step 606, after the application is started, the layout processing module obtains information about the target component and its associated components in the layout storage module through the layout analysis module.

[0178] As an example but not limitation, the layout storage module sends information of the target component and the associated components associated with the target component to the layout analysis module, the layout analysis module sends the above information to the application framework, and the application framework sends the above information to the layout processing module.

[0179] In step 607, the layout processing module performs layout calculation on the target component and its associated components to obtain a layout result.

[0180] After receiving the information of the target component and the associated components associated with the target component, the layout processing module performs layout calculation on the target component and the associated components associated with the target component to obtain a layout result. The layout calculation includes, for example, calculating the size and position of each component in the target component and the associated components associated with the target component.

[0181] In step 608, the layout processing module sends the layout result to the layout module. Correspondingly, the layout module receives the layout result.

[0182] The layout module responds to the second user operation, determines that the target component is accessed, and then loads a page containing the target component and the associated components associated with the target component according to the layout result; if the target component is not accessed, the layout result is cleared after the application exits. The second user operation may be, for example, an operation in which the user jumps the terminal device from a certain level page to a page containing the target component.

[0183] exist Figure 6 In the embodiment shown, the target component is determined based on preset rules. It can be seen from the preset rules that the target component focuses on components with higher access frequency, more access times, and longer access time. In this way, the components that are frequently accessed within the application can be pre-layouted, thereby improving the page loading speed when accessing this type of component.

[0184] The following will be combined Figure 7 and Figure 8 , respectively introduces in detail the process of analyzing and determining the target component and the process of performing layout calculation on the target component and its associated components. Figure 7 The diagram shows the actions performed by various modules of the terminal device during the process of analyzing and determining the target component. Figure 8 The diagram shows the actions performed by various modules of the terminal device during the process of performing layout calculation on the target component and its associated components.

[0185] Figure 7 It is a schematic diagram of the interaction between the layout analysis module and the application framework provided in the embodiment of the present application.

[0186] like Figure 7 As shown, the UI framework or application framework can generate a component tree based on a component set (a set of components within the application). The layout analysis module can determine the target component based on preset rules; the layout analysis module can also determine the target component based on predefined components. In other words, preset rules can be preset in the layout analysis module, or the target component can be marked in advance. In addition, the associated components associated with the target component are determined based on the component tree. For example, the application framework can determine the associated components associated with the target component based on the component tree and inform the layout analysis module of the associated components. In other words, the layout analysis module can obtain the associated components associated with the target component from the application framework.

[0187] In addition, for each component in the component tree, it can be displayed on the screen after measurement, layout, and rendering.

[0188] Figure 8 It is a schematic diagram of performing layout calculation on a target component and its associated components provided by an embodiment of the present application.

[0189] like Figure 8 As shown, the layout analysis module notifies the application framework to pre-layout (that is, to pre-calculate the layout of the target component and its associated components). Further, the application framework notifies the layout processing module to perform pre-layout. When notifying the application framework to pre-layout, the layout analysis module may send information about the target component and its associated components to the application framework, and the application framework receives the above information accordingly. After receiving the above information, the application framework sends the above information to the layout processing module, and the layout processing module receives the above information accordingly.

[0190] After receiving the above information, the layout processing module performs layout processing on the target component and its associated components to obtain a layout result, and realizes layout information sharing with the layout module. The layout processing module and the layout module realize layout information sharing, which may include: the layout processing module sends the above layout result to the layout module. When the target component is accessed, the layout module loads a page containing the target component and its associated components according to the layout result. The rendering module may be used to draw the corresponding content.

[0191] Figure 7 and Figure 8 The process of determining the target component and the process of calculating the layout of the target component and its associated components are described separately. Fig. 9 , describes the detailed process of the component loading method provided by this application. Fig. 9 In the illustrated embodiment, the various modules of the terminal device are described as the execution entities, wherein the terminal device may include a layout analysis module, a layout storage module, a layout processing module, an application framework, a program framework, a layout module, a rendering module, and a resource module.

[0192] Fig. 9 It is another interaction flow chart of each module provided in the embodiment of the present application.

[0193] like Fig. 9 As shown, the layout analysis module can be used to determine the target component and send the information of the target component and the associated components associated with the target component to the layout storage module. After receiving the information of the target component and the associated components associated with the target component, the layout storage module stores it.

[0194] The program framework can be used to manage the life cycle of the application. When the application is started, the program framework can notify the layout analysis module of the application startup, and the layout analysis module obtains data from the layout storage module, such as obtaining information about the target component and the associated components associated with the target component. The layout analysis module notifies the program framework to pre-layout, the program framework notifies the application framework, and the application framework notifies the layout processing module to pre-layout. Among them, the layout analysis module can send information about the target component and its associated associated components to the application framework through the program framework, and the application framework sends the above information to the layout processing module.

[0195] After receiving the above information, the layout processing module performs layout processing on the target component and its associated components to obtain a layout result, and shares the layout information with the layout module, or in other words, sends the above layout result to the layout module.

[0196] When the target component is accessed, the layout module loads the page containing the target component and its associated components according to the layout result. The rendering module can be used to draw the corresponding content. The resource module can be used to store data resources.

[0197] It should be understood that the source of the information of the target component and the associated components associated with the target component stored in the layout storage module is the application framework, and the application framework sends the above information to the layout analysis module, and the layout analysis module sends the above information to the layout storage module.

[0198] Based on the above technical solution, after the application is started, the layout calculation is performed in advance on the target component and its associated components to obtain the layout result. In this way, when the target component is accessed, the layout result can be directly used. Compared with real-time layout calculation when accessed, the layout speed is greatly accelerated, thereby improving the page loading speed. In addition, the target component for which the layout calculation is performed in advance in the present application is not limited by the components currently displayed by the application, for example, it is not limited by the type or serial number of the components currently displayed, and has a wide range of uses and is more universal.

[0199] The present application also provides a terminal device that can implement Figures 4 to 9 The method described in any of the embodiments shown in the embodiments. The terminal device includes a corresponding module for executing the above method. The module included in the terminal device can be implemented by software and / or hardware.

[0200] The embodiment of the present application also provides a terminal device, which includes a memory and a processor, wherein the memory is used to store a computer program, and the processor is used to call and execute the computer program, so that the terminal device can realize Figures 4 to 9 The method described in any of the embodiments shown.

[0201] The present application also provides a chip system, which includes at least one processor for implementing the above Figures 4 to 9 The functions involved in the method described in any of the embodiments shown in the embodiments, for example, receiving or processing the data and / or information involved in the above method.

[0202] In one possible design, the chip system also includes a memory, which is used to store program instructions and data, and the memory is located inside or outside the processor.

[0203] The chip system may be composed of the chip, or may include the chip and other discrete devices.

[0204] The present application also provides a computer-readable storage medium, wherein a computer program (also referred to as code or instruction) is stored on the computer storage medium. When the computer program is executed by a processor, the above Figures 4 to 9 The method described in any of the illustrated embodiments is performed.

[0205] The present application also provides a computer program product, the computer program product comprising: a computer program (also referred to as code, or instruction), when the computer program is executed, causes the computer to execute Figures 4 to 9 The method described in any of the embodiments shown.

[0206] It should be understood that the processor in the embodiment of the present application can be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method embodiment can be completed by the hardware integrated logic circuit or software instructions in the processor. The above processor can be a general processor, a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in the embodiment of the present application can be directly embodied as a hardware decoding processor to perform, or the hardware and software modules in the decoding processor can be combined to perform. The software module can be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0207] It should also be understood that the memory in the embodiments of the present application may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), and direct RAM (DR RAM). It should be noted that the memory of the systems and methods described herein is intended to include, but is not limited to, these and any other suitable types of memory.

[0208] The terms "unit", "module", etc. used in this specification may be used to represent computer-related entities, hardware, firmware, a combination of hardware and software, software, or software in execution. The units and modules in the embodiments of the present application have the same meaning and can be used interchangeably.

[0209] It will be appreciated by those skilled in the art that the various illustrative logical blocks and steps described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or in combination with computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application. In the several embodiments provided in this application, it should be understood that the disclosed devices, equipment and methods can be implemented in other ways. For example, the device embodiments described above are merely schematic, for example, the division of units is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point, the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0210] In the above embodiments, the functions of each functional unit can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions (programs). When loading and executing computer program instructions (programs) on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. Computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, computer instructions can be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (digital subscriber line, DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that contains one or more available media integrated. Available media may be magnetic media (eg, floppy disks, hard disks, magnetic tapes), optical media (eg, digital video discs (DVD)), or semiconductor media (eg, solid state drives (SSD)).

[0211] If the functions provided by the embodiments of the present application are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a ROM, a RAM, a magnetic disk, or an optical disk.

[0212] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A component loading method, applied to a terminal device, characterized in that: The method comprises: In response to a first user operation, starting an application, wherein the application loads a first page; Determine a first target component and a first associated component associated with the first target component according to a component tree, wherein the first target component is configured with an identifier, and the component tree is used to reflect the association relationship between various components in the application; Performing layout calculation on the first target component and the first associated component to obtain a first layout result, wherein the first layout result includes layout information of the first target component and the first associated component; In response to a second user operation, a second page including the first target component and the first associated component is loaded according to the first layout result.

2. The method according to claim 1, characterized in that The method further comprises: Determine a second target component and a second associated component associated with the second target component according to the component tree, wherein the second target component is configured with an identifier; Performing layout calculation on the second target component and the second associated component to obtain a second layout result, where the second layout result includes layout information of the second target component and the second associated component; When the second target component is not accessed, the second layout result is cleared after the application exits.

3. The method according to claim 1 or 2, characterized in that The terminal device includes a layout processing module, and the performing layout calculation on the first target component and the first associated component to obtain a first layout result includes: The layout processing module performs layout calculation on the first target component and the first associated component to obtain the position and size of each component in the first target component and the first associated component.

4. The method according to claim 3, characterized in that The terminal device further includes a layout module, and the method further includes: The layout processing module sends the first layout result to the layout module; and The step of, in response to a second user operation, loading a second page including the first target component and the first associated component according to the first layout result, comprises: The layout module determines, in response to the second user operation, that the first target component is accessed; The layout module loads the second page according to the first layout result.

5. The method according to claim 3 or 4, characterized in that The terminal device further includes a layout storage module. After determining the first target component and the first associated component associated with the first target component according to the component tree, the method further includes: The layout storage module stores information about the first target component and the first associated component, and the information includes at least one of the following: an identifier of the application, an identifier of each component in the first target component and the first associated component, and a level of each component in the first target component and the first associated component in the component tree.

6. The method according to claim 5, characterized in that The terminal device further includes a layout analysis module, and the determining, according to the component tree, a first target component and a first associated component associated with the first target component includes: The layout analysis module determines a first target component and a first associated component associated with the first target component according to the component tree; the method further includes: The layout analysis module sends information of the first target component and the first associated component to the layout storage module.

7. The method according to claim 6, characterized in that Before performing layout calculation on the first target component and the first associated component, the method further includes: The layout processing module obtains the information of the first target component and the first associated component from the layout storage module through the layout analysis module.

8. The method according to any one of claims 1 to 7, characterized in that In the component tree, the first associated component is a child node of the first target component.

9. The method according to any one of claims 1 to 8, characterized in that The method further comprises: The third target component is determined according to a preset rule, wherein the preset rule includes one or more of the following: The access frequency of the third target component exceeds a frequency threshold; The access time of the third target component exceeds a time threshold; The number of accesses to the third target component exceeds a number threshold; The third target component includes the component with the highest access frequency among the components; The third target component includes the component with the longest access time among the components; or, The third target component includes the component with the most access times among the various components.

10. A component loading method, applied to a terminal device, characterized in that: The method comprises: In response to the first user operation, starting the application, wherein the application loads a third page; The third target component is determined according to a preset rule, wherein the preset rule includes one or more of the following: the access frequency of the third target component exceeds a frequency threshold; the access time of the third target component exceeds a time threshold; the number of accesses of the third target component exceeds a number threshold; the third target component includes the component with the highest access frequency among the components in the application; the third target component includes the component with the longest access time among the components in the application; or the third target component includes the component with the most accesses among the components in the application; Determining a third associated component associated with the third target component according to a component tree, wherein the component tree is used to reflect the association relationship between various components in the application; Performing layout calculation on the third target component and the third associated component to obtain a third layout result, wherein the third layout result includes layout information of the third target component and the third associated component; In response to a second user operation, a fourth page including the third target component and the third associated component is loaded according to the third layout result.

11. The method according to claim 10, characterized in that The method further comprises: Determine a fourth target component according to the preset rule; Determine, according to the component tree, a fourth associated component associated with the fourth target component; Performing layout calculation on the fourth target component and the fourth associated component to obtain a fourth layout result, wherein the fourth layout result includes layout information of the fourth target component and the fourth associated component; When the fourth target component is not accessed, the fourth layout result is cleared after the application exits.

12. The method according to claim 10 or 11, characterized in that In the component tree, the third associated component is a child node of the third target component.

13. A terminal device, characterized in that: comprising a processor and a memory, wherein: The memory is used to store computer programs; The processor is configured to call the computer program so that the terminal device implements the method according to any one of claims 1 to 12.

14. A computer-readable storage medium, characterized in that: The storage medium stores a computer program or instruction. When the computer program or instruction is executed by a computer, the method according to any one of claims 1 to 12 is implemented.

15. A computer program product, characterized in that The computer program product comprises instructions, and when the instructions are executed by a computer, the method according to any one of claims 1 to 12 is implemented.

Images