Method for creating a UI component and electronic device

Abstract

A method for creating a UI component and an electronic device are provided to reduce the probability of frame loss caused by a long pre-creation time of a UI component, and to reduce the possibility of application freezing. The method comprises: a first thread of a first application process processing a UI task, the UI task being used to create a UI component of a to-be-displayed frame of the first application process, the to-be-displayed frame being associated with a current frame of the first application process displayed by the electronic device. When a first time length is greater than or equal to a first threshold, the first thread sends a first sub-task of the UI task to a second thread of the first application; wherein the first time length is a time length from a starting time of the current frame, the first sub-task is used to create M UI components, the M UI components are UI components that have not been completed in creating UI components required by the UI task, M is a positive integer, and the first threshold is less than a screen refresh period of the electronic device.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a method for creating user interface (UI) components and an electronic device. Background Technology

[0002] Electronic devices provide users with a UI (User Interface) for interaction. Components are the smallest units for building and displaying UIs; examples of components include lists, grids, buttons, radio buttons, progress bars, and text. Application (APP) developers can combine various components to build application interfaces that meet their specific application requirements.

[0003] When displaying an application's page, the components for that page must first be created, and then the corresponding application interface—the image frames displayed on that page—must be drawn based on these components. If the application's page is complex, for example, containing a large number of components or complex components, the UI thread may take a long time to create the components when displaying the page. If component creation cannot be completed before the next frame is updated, the next frame or subsequent frames will not be displayed, resulting in dropped frames during application display, which users will perceive as a lag. To alleviate the frame dropping problem caused by long component creation times, a component pre-creation technology is currently provided. This technology allows some UI components to be pre-created and cached when the UI thread is idle, and these UI components can be used directly when needed for subsequent display.

[0004] However, since the UI thread typically processes tasks sequentially, when executing tasks for pre-created UI components, it may consume the time originally intended for processing the next frame's UI tasks, resulting in insufficient processing time for the next frame and causing frame drops. Summary of the Invention

[0005] This application provides a method for creating UI components and an electronic device to reduce the probability of frame drops caused by excessive time spent on pre-created UI components, thereby reducing the possibility of application lag.

[0006] Firstly, a method for creating UI components is provided, applicable to an electronic device including a first application process of a first application. The method includes: a first thread of the first application process processing a UI task, the UI task being used to create UI components for a frame to be displayed in the first application process, the frame to be displayed being associated with the current frame of the first application process displayed on the electronic device. When a first duration is greater than or equal to a first threshold, the first thread sends a first subtask of the UI task to a second thread of the first application process; wherein the first duration is the duration from the start time of the current frame, the first subtask is used to create M UI components, the M UI components being UI components that have not yet been created among the UI components required by the UI task, M being a positive integer, and the first threshold being less than the screen refresh cycle of the electronic device.

[0007] In this method, when the first thread processes the UI task of pre-creating UI components, if the first thread determines that the duration of the current frame is greater than or equal to a first threshold, the first thread will send the unprocessed first subtask of that UI task to the second thread. This serves two purposes: firstly, the first thread can be freed up to process the UI task of the next frame, reducing the probability of frame drops caused by the pre-creating UI components occupying the first thread for too long, thus reducing the probability of application stuttering and improving the user experience. Secondly, by sending the unprocessed first subtask to the second thread, the second thread can continue processing the first subtask to complete the creation of the remaining components, ensuring that tasks requiring pre-created UI components are completed promptly. This allows subsequent display of these UI components to be directly based on the already created UI components, saving the time spent creating UI components and improving the responsiveness of UI component display.

[0008] In one possible implementation, the method further includes: a second thread creating M UI components; the second thread sending the M UI components to a first thread; and the first thread generating a first component tree corresponding to the frame to be displayed based on the M and N UI components. The first component tree is used to draw the M and N UI components, where the N UI components are created by the first thread during UI task processing, and N is a positive integer. Based on this implementation, the second thread continues to process the first subtask to complete the creation of the remaining components. The first thread can merge all components to obtain the first component tree corresponding to the frame to be displayed. This achieves complete UI task processing, enabling not only pre-creation of UI components but also avoiding the problem of frame drops caused by excessive time spent on pre-creating UI components in the first thread.

[0009] In one possible implementation, the method further includes: a first thread attaching a first component tree to a second component tree corresponding to a first application process, the second component tree being used to draw the application interface corresponding to the first application process. Based on this implementation, the first thread can attach pre-created UI components to the component tree of the first application, thereby enabling the drawing of the user interface based on the component tree of the first application. This allows these UI components to be displayed on the application interface of the first application. Since these UI components are pre-created, the time spent on component creation when these UI components need to be displayed later is saved, improving the response speed when displaying UI components.

[0010] In one possible implementation, the first threshold is determined based on one or more of the following: the screen refresh rate of the electronic device; the CPU frequency of the electronic device; the load information of the electronic device; or the complexity of the UI components to be created in the UI task. Based on this implementation, the first thread can determine the first threshold based on the device state of the electronic device. The first threshold determined in this way can better reflect the actual situation of the electronic device. Furthermore, the first thread can promptly interrupt the pre-creation task based on the first threshold to reserve sufficient processing time for the UI task in the next frame, avoiding the problem of frame drops caused by the pre-creation of UI components occupying too much time for the first thread.

[0011] In one possible implementation, the first thread sends a first subtask of the UI task to the second thread, including: the first thread generating a first instruction set based on the first subtask, the first instruction set being used to instruct the second thread to process the first subtask; and the first thread sending the first instruction set to the second thread. Based on this implementation, the first thread can convert the first subtask into instructions for creating UI components, so that the second thread can pre-create the UI components according to these instructions.

[0012] In one possible implementation, the first thread generates a first instruction set based on a first subtask, including: the first thread converting at least one closure corresponding to the first subtask from a first data format to a second data format, the first instruction set including the converted at least one closure, the second data format being a data format for data storage or transmission, and each of the at least one closure being used to create at least one UI component. Based on this implementation, the first thread can convert the closure of the first subtask into a data format suitable for storage and transmission, so as to send it to the second thread.

[0013] In one possible implementation, the frame to be displayed is associated with the current frame, which can include several scenarios. One scenario is that the current frame is used to display a first view of a first page in a first application, and the frame to be displayed is used to display a second view of the first page, where at least one UI component in the second view is different from any UI component in the first view. Another scenario is that the current frame is used to display the first page, and the frame to be displayed is used to display a second page in the first application, where the second page is a subpage of the first page. Yet another scenario is that the current frame is used to display the first page, and the frame to be displayed is used to display a third page in the first application, where the third page and the first page are included in a set of first pages. Based on this implementation, the UI component creation method of this application embodiment can be applied to various display scenarios, thus enabling the pre-creation of UI components by fully utilizing the idle time of the first thread in these display scenarios, while avoiding the problem of frame dropping caused by excessive time spent on pre-creating UI components in the first thread.

[0014] In one possible implementation, any UI component among the UI components required for the UI task to be created satisfies one or more of the following: any UI component is a custom component; or, the time taken to create any UI component is greater than or equal to a second threshold. Based on this implementation, UI components that meet the conditions can be pre-created, for example, more complex UI components can be pre-created, thereby avoiding the problem of frame drops caused by the long creation time of these UI components.

[0015] In one possible implementation, the first thread is the main thread of the first application process, and the second thread is a child thread of the first application process; alternatively, the first thread is the UI thread of the first application process, and the second thread is any thread other than the UI thread. The UI thread or the main thread is the thread in the first application responsible for handling UI tasks, and typically has a higher resource priority. Based on this implementation, the UI thread or the main thread can pre-create UI components during idle time, ensuring that high-priority thread resources are fully utilized while avoiding frame drops caused by excessive time spent pre-creating UI components on the first thread.

[0016] In other examples, this application also provides a method for creating UI components, which can be applied to an electronic device including a first application process of a first application. The method includes: displaying a first frame, where a first thread of the first application process processes a UI task to create UI components for a third frame. The third frame is associated with the first frame and is used to display the user interface corresponding to the first application process. Then, a second frame is displayed, where the first thread sends a first subtask of the UI task to a second thread of the first application process. The first subtask is used to create M UI components, where M are UI components that have not yet been created from the UI components required by the UI task, and M is a positive integer. The third frame is displayed after the second frame, and the second frame is also used to display the user interface corresponding to the first application process. The first and second frames are consecutive, but the second and third frames may or may not be consecutive. Compared to the other solutions mentioned above, this solution triggers the second thread to process the first subtask based on the screen refresh cycle of the electronic device, thus eliminating the need for an evaluation of the first duration.

[0017] In a second aspect, this application provides a computer device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the method as described in any of the first aspects above.

[0018] Thirdly, this application provides a UI component creation apparatus, including modules / units for executing the methods corresponding to any of the designs in the first aspect above. These modules / units can be implemented in hardware or by hardware executing corresponding software.

[0019] Fourthly, this application provides a computer-readable storage medium storing a computer program that, when executed by at least one processor, implements the method as described in any of the first aspects above.

[0020] Fifthly, this application provides a chip including a processor and an interface; the processor is configured to read instructions through the interface to perform the method as described in any of the first aspects above.

[0021] In a sixth aspect, this application provides a chip system, the chip system including a processing circuit and a storage medium, the storage medium storing instructions; when the instructions are executed by the processing circuit, they implement the method of any one of the first aspects above.

[0022] In a seventh aspect, this application provides a computer program product comprising a computer program that, when run on a computer, enables the computer to perform the methods described in any of the first aspects above.

[0023] The beneficial effects of the implementation methods in any of the second to seventh aspects described above can be referred to the beneficial effects of the corresponding implementation methods in the first aspect described above, and this application will not elaborate on them one by one. Attached Figure Description

[0024] Figure 1A An example diagram for updating the component tree;

[0025] Figure 1B and Figure 1C A diagram illustrating UI tasks handled by the UI thread;

[0026] Figure 2A A schematic diagram of the structure of an electronic device provided in an embodiment of this application;

[0027] Figure 2B A software system architecture block diagram of an electronic device provided in this application embodiment;

[0028] Figure 3A An architecture diagram of an application provided for an embodiment of this application;

[0029] Figure 3B A flowchart illustrating the pre-creation task processing procedure provided in this application embodiment;

[0030] Figures 4A to 4C Example diagrams of display scenarios provided in embodiments of this application;

[0031] Figure 5A A system architecture diagram of an electronic device provided in an embodiment of this application;

[0032] Figure 5B A flowchart illustrating a method for creating UI components provided in an embodiment of this application;

[0033] Figure 6 A schematic diagram of UI task processing provided in the embodiments of this application;

[0034] Figure 7 An example diagram of a component tree provided in an embodiment of this application;

[0035] Figure 8 Another flowchart illustrating the UI component creation method provided in the embodiments of this application;

[0036] Figure 9 A schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0037] The following explanations of some terms used in the embodiments of this application are provided to facilitate understanding by those skilled in the art.

[0038] The embodiments of this application involve at least one, including one or more; where "multiple" means two or more. Furthermore, it should be understood that in the description herein, terms such as "first" and "second" are used only for descriptive purposes and should not be construed as indicating or implying relative importance, order, or quantity. Therefore, features specified as "first" or "second" may explicitly or implicitly include one or more of that feature. For example, "first component tree" and "second component tree" do not represent the degree of importance or order of the two, but are merely for descriptive distinction. In the embodiments of this application, "and / or" merely describes an association relationship, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, and B alone. Additionally, the character " / " in this document generally indicates that the preceding and following related objects have an "or" relationship.

[0039] The directional terms mentioned in the embodiments of this application, such as "up", "down", "left", "right", "inner", and "outer", are only for reference to the directions in the accompanying drawings. Therefore, the directional terms used are for better and clearer explanation and understanding of the embodiments of this application, and are not intended to indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the embodiments of this application.

[0040] References to “one embodiment,” “in some examples,” or “some embodiments” as used herein mean that one or more embodiments include the specific features, structures, or characteristics described in connection with that embodiment. Thus, the phrases “in some examples,” “in one embodiment,” “in some embodiments,” “in other embodiments,” “in still other embodiments,” etc., appearing in various places throughout this document, do not necessarily refer to the same embodiment, but rather mean “one or more, but not all, embodiments,” unless otherwise specifically emphasized. The terms “comprising,” “including,” “having,” and variations thereof mean “including, but not limited to,” unless otherwise specifically emphasized.

[0041] For ease of understanding, exemplary descriptions of concepts related to this application are provided for reference.

[0042] (1) Applications, processes, and threads

[0043] Applications are installed on electronic devices and, after running, provide services to users through specific business processes. Applications may be developed by the manufacturer of the electronic device, the supplier of the operating system (OS) of the electronic device, or a third-party application vendor; this application does not limit this. For example, applications may include various drawing applications, calling applications, camera applications, SMS applications, chat applications, video applications, music applications, electronic map applications, or social platform applications, etc.

[0044] A process is a running activity of a program with certain independent functions on a certain set of data. A process is an independent unit in which the operating system allocates and schedules resources (such as memory resources or central processing unit (CPU) resources), and it is an instance of a program that is currently executing. When an application is launched on an electronic device, the electronic device runs the process corresponding to that application. For example, when a user opens a browser, the electronic device runs the browser process; or, when a user opens a camera application, the electronic device runs the camera application process.

[0045] A thread is a unit of execution within a process; it is the smallest unit of program execution. A process can contain one or more threads, and different threads may perform different tasks. For example, in a text editor, one thread might be responsible for user interface responses, while another thread might be responsible for automatically saving the file. Multiple threads within the same process can share the process's resources, making communication between threads more efficient than communication between processes.

[0046] (2) UI and components

[0047] User interface (UI) is the medium through which applications or operating systems interact and exchange information with users. It converts the internal form of information into a form that users can understand. User interfaces can be implemented using source code written in specific computer languages ​​such as Java or Extensible Markup Language (XML). This source code is parsed and rendered on electronic devices, ultimately presenting content that users can recognize. A rich set of visual elements can be displayed to users, such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and controls.

[0048] A component typically refers to a reusable object in software that can interact with other objects. It can be implemented using classes; in other words, a component is a reusable program or module. In this embodiment, the content displayed in the UI consists of components, also known as UI components. A component can be a component with user interface functionality or a visual representation, and it is the basic unit constituting the UI. Each component is typically a reusable, independent part responsible for specific functions or information display. At least one component can be placed within a UI, window, or page. Components that can be used by user actions to trigger specific functions can be called controls; controls are basic interactive elements in the user interface.

[0049] In some examples, components can be categorized into input components, display components, action components, or layout components, depending on their function. Input components may include text boxes, drop-down menus, or checkboxes, which are used for user data input. Display components may include labels, images, or cards, which are used to display information. Action components may include buttons or toggles, which are used to trigger certain actions. Layout components may include grids or containers, which are used to help organize the arrangement of other components.

[0050] In some examples, components directly provided by the UI development framework are called system components, also known as basic or standard components, while those defined by developers are called custom components. For instance, application developers can combine multiple system components to build custom components, creating application interface elements that meet their specific application requirements. Custom components offer more flexible and personalized performance than system components. For example, a custom component can contain multiple components, such as confirmation components, cancellation components, images, or text. Confirmation components can also be called confirmation controls, and cancellation components can be called cancellation controls. It's understandable that some components (such as system components within a custom component) can be nested. For another example, a custom component can be a custom button, which can contain image components, animation components, and button components. When displayed in the UI, this custom button can exhibit the effect of a button with a specific icon and animation effects, rather than simply a standard button control.

[0051] (3) A frame of an electronic device, a frame of an application, the current frame, and the frame to be displayed.

[0052] The most common form of UI is the Graphical User Interface (GUI), which refers to a user interface related to computer operation displayed graphically. Therefore, a frame can be understood as a single image, or one image displayed in the GUI. Similarly, a frame on an electronic device can be understood as the image displayed within one screen refresh cycle. An application's frame can be understood as the image displayed within one update cycle of the application's interface. The duration of a frame displayed on an electronic device is one update cycle of the device's screen, also known as the screen refresh cycle. The duration of a frame displayed on an electronic device is usually related to its screen refresh rate, also called the frame rate. Common screen refresh rates include 30 Hz, 60 Hz, or 120 Hz. For example, when the screen refresh rate is 120 Hz, it means that the electronic device updates 120 frames per second, and the duration of one frame is approximately 8.3 ms. Similarly, the duration of a single frame displayed in an application is the update cycle of its corresponding interface. An application frame is typically the same as a frame on an electronic device. The application's interface can often occupy part or all of the electronic device's UI. When the screen refreshes, the application interface also refreshes. It's important to understand that refreshing can mean moving to the next frame, but it doesn't necessarily mean the displayed content will change. In some scenarios, the application's interface can also be referred to as a window, view, or panel.

[0053] The current frame can refer to the image currently being displayed or rendered and presented to the user, representing the screen the user sees at the current moment. In this embodiment, the current frame of an electronic device represents the UI currently displayed on the screen of the electronic device. The current frame of an application represents the application interface currently being displayed within the current update cycle. Taking a GUI as an example, the user interface of an application is usually displayed on the screen as a bitmap, so the current frame can also be understood as the currently displayed bitmap.

[0054] A frame to be displayed typically refers to the next frame or subsequent image that is about to be displayed; it can also be called a buffer frame, which the user has not yet seen. In this embodiment, the frame to be displayed for an application can represent a frame after the current frame of the application, or it can be understood as the application interface that the user may see in the future. One frame corresponds to one update cycle, and the update cycle of the current frame is the update cycle at the current moment. The update cycle corresponding to the frame to be displayed can be understood as one or more update cycles after the update cycle of the current frame.

[0055] (4) Component tree

[0056] A component tree can be used to manage the relationships between components in an application's front-end framework. It represents or indicates the hierarchical structure or relationships between components, showing how the various components within the application are nested and combined to form a complete application interface. The component tree has a tree-like structure, starting from the root component of the application and expanding layer by layer, containing all child components. Each node in the component tree represents a component, and the edge connecting two nodes in the component tree indicates that the two nodes have a parent-child relationship.

[0057] Components are the basic units that make up a UI. A page within an application typically contains multiple components. When a user opens a page within an application, meaning the components contained in that page need to be displayed on the application's interface, the application's UI thread needs to create these components and add them to the application's component tree. This allows for rendering and display based on the component tree, thus presenting the various components included in that page on the application's interface. When the state or properties of a component change, the component tree triggers a re-render, updating the application interface.

[0058] An application's user interface provides a platform for user interaction. When a user interacts with the application's user interface, the components displayed within the interface may change; for example, new components may appear. Therefore, the application's UI thread needs to continuously create new components and dynamically update the application's component tree.

[0059] See Figure 1A The diagram shown illustrates an example of component tree updates. When a user opens a page in the application, the components needed to be displayed on that page are created and mounted into the application's component tree. For example... Figure 1A As shown, the application can be, for example, a news application, and the page can be, for example, the homepage of the news application. In the component tree before the swipe operation, the root node 100 indicates that the component tree corresponds to the news application. The component tree can include the nodes corresponding to each component in the homepage opened by the user. For example, component 101 corresponds to node 101 in the component tree, component 102 corresponds to node 102 in the component tree, and component 102 includes sub-components 1021 to 1024. Sub-components 1021 to 1024 each have corresponding nodes in the component tree and have a parent-child relationship with component 102. Similarly, component 103 corresponds to node 103 in the component tree, and sub-components 1031 to 1032 contained in component 103 each have corresponding nodes in the component tree and have a parent-child relationship with component 103. Component 104 corresponds to node 104 in the component tree, and sub-components 1041 to 1042 contained in component 104 each have corresponding nodes in the component tree and have a parent-child relationship with component 104.

[0060] As the user swipes, the components displayed on the news application's homepage will change, and the UI thread needs to continuously create new components to display them. For example... Figure 1A As shown, the homepage of the news application also includes components 105 and 106. Component 105 further includes sub-components 1051-1053, and component 106 further includes sub-components 1061-1062. The UI thread needs to create these components and mount them to components such as... Figure 1A The component tree shown is after the sliding operation.

[0061] It should be understood that Figure 1A The component tree shown is for ease of understanding and does not impose any restrictions on the specific structure of the component tree or the relationships between components.

[0062] If an application's pages are complex, such as containing a large number of components or complex components, the UI thread may take a long time to create the components on that page when it is displayed. If the component creation cannot be completed before the next frame update, it will cause the application to drop frames, and the user will perceive that the application is lagging.

[0063] See Figure 1B Scheme (a) illustrates one approach to UI thread processing UI tasks. Taking a 120Hz frame rate for an electronic device as an example, with one frame lasting approximately 8.3ms, the UI thread must complete its processing within 8.3ms to generate the application's interface for each frame. If UI components cannot be created within 8.3ms, frame drops will occur. Figure 1B As shown in scheme (a), in the first and second frames, the UI thread can complete the processing of UI task 1 and UI task 2 within 8.3ms and realize the creation of related components. However, in the third frame, the UI thread takes more than 8.3ms to process UI task 3, and the third frame may not be displayed successfully. In addition, it also occupies the processing time of the UI task in the next frame, which may cause the UI task in the next frame to also fail to complete in time.

[0064] To alleviate the frame dropping issue caused by the long time it takes to create components, a component pre-creation technology is now available. This technology allows some UI components to be pre-created and cached when the UI thread is idle, so that they can be used directly when they are needed to be displayed later.

[0065] See Figure 1BAs shown in scheme (b), in the first frame, after processing the current UI task 1, the UI thread will process pre-creation task 1 during the subsequent idle time. Pre-creation task 1 is used to pre-create components that need to be displayed in subsequent frames of the first frame. For example, pre-creation task 1 can create some components of UI task 2 in scheme (a), effectively dividing UI task 2 in scheme (a) into pre-creation task 1 and UI task 2 in scheme (b). Similarly, in the second frame, after processing the current UI task 2, the UI thread will process pre-creation task 2 during the subsequent idle time. Pre-creation task 2 is used to pre-create components that need to be displayed in subsequent frames of the second frame. For example, pre-creation task 2 can create some components of UI task 3 in scheme (a), effectively dividing UI task 3 in scheme (a) into pre-creation task 3 and UI task 3 in scheme (b). It can be seen that components for the second frame can be created in advance in the first frame, and the creation of the remaining components can be processed quickly in the second frame, thus speeding up the display of the second frame. In the second frame, the components for the third frame can be created in advance. In the third frame, only a small number of components need to be created. Compared with solution (a), solution (b) can complete the processing of UI task 3 within 8.3ms in the third frame, so as to successfully display the third frame on the screen, and will not squeeze the processing time of the next frame.

[0066] However, since UI thread generally processes tasks in a serial manner, when executing tasks to pre-create UI components, and since the pre-creation process of a single custom component is usually uninterrupted, the next task can only be executed after the pre-creation of a single custom component is completed. This may consume the time originally intended for processing UI tasks in the next frame, resulting in insufficient processing time for the next frame and causing frame drops.

[0067] See Figure 1C The diagram illustrates another way the UI thread handles UI tasks. In the second frame, after processing UI task 2, the UI thread processes pre-created task 2 during its idle time. However, due to the high complexity of the components in pre-created task 2, it takes a long time and occupies the UI thread for an extended period. This reduces the processing time for UI task 3, preventing the UI thread from completing the processing of UI task 3 in the third frame in a timely manner, resulting in dropped frames.

[0068] In view of this, embodiments of this application provide a method for creating UI components and an electronic device. In this method, when the duration of the current frame exceeds a threshold, the first thread can send the unprocessed portion of the pre-creation task to the second thread for further processing. The second thread completes the creation of the unfinished component, so the first thread can be used to process the UI task of the next frame. This avoids the frame dropping problem caused by the pre-creation task occupying the first thread for a long time, and the pre-creation task can be continued by the second thread, which also achieves the effect of component pre-creation.

[0069] The UI component creation method provided in this application can be applied to various electronic devices with image display capabilities and requirements. For example, electronic devices include, but are not limited to, those equipped with... Or electronic devices with other operating systems.

[0070] For example, electronic devices can refer to terminal devices with display functions, such as mobile phones, tablets, wearable devices with wireless communication functions (e.g., watches, bracelets), in-vehicle terminal devices, augmented reality (AR) / virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, personal digital assistants (PDAs), smart home devices (e.g., smart TVs, smart speakers), smart robots, workshop equipment, wireless terminals in self-driving vehicles, wireless terminals in remote medical surgery, wireless terminals in smart grids, wireless terminals in transportation safety, wireless terminals in smart cities, or wireless terminals in smart homes, and flying equipment (e.g., smart robots, drones, airplanes). Among these, wearable devices are portable devices that users can wear directly on their bodies or integrate into their clothing or accessories.

[0071] For example, electronic devices can also be portable terminal devices that include other functions, such as portable terminal devices that include personal digital assistant and / or music player functions, or laptops with touch-sensitive surfaces (such as touch panels).

[0072] In some embodiments of this application, the electronic device can be a rich device. For example, a rich device refers to a device with ample memory and storage space. Rich devices generally support remote procedure calls (RPC) / inter-process communication (IPC). For instance, a rich device can be a mobile phone, LCD TV, in-vehicle infotainment system, tablet computer, personal computer, etc.

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

[0074] Processor 110 may include one or more processing units, such as an application processor (AP), 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 / or a neural network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors. The controller may serve as the central nervous system and command center of the electronic device 100. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution. Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that processor 110 has recently used or is repeatedly used. If processor 110 needs to reuse an instruction or data, it can directly retrieve it from the memory. This avoids repeated access, reduces the waiting time of processor 110, and thus improves system efficiency.

[0075] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled LED, a MicroLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, electronic device 100 may include one or N displays 194, where N is a positive integer greater than 1. In this embodiment, display screen 194 can be used to display created UI components, etc.

[0076] Camera 193 is used to capture still images or videos. Camera 193 may include a front-facing camera and a rear-facing camera.

[0077] Internal memory 121 can be used to store computer executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of electronic device 100 by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system and software code for at least one application (e.g., video application, news application, etc.). The data storage area may store data generated during the use of electronic device 100 (e.g., images, videos, etc.). Furthermore, internal memory 121 may include high-speed random access memory and non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. In this embodiment, internal memory 121 may, for example, store data related to creating UI components and the application's component tree.

[0078] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, images, videos, and other files can be saved on the external memory card.

[0079] Touch sensor 180K and display screen 194 constitute a touchscreen, also known as a "touchscreen". Touch sensor 180K is used to detect touch operations applied to or near it. Touch sensor 180K can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180K may also be disposed on the surface of electronic device 200, in a different location than display screen 194. In the embodiments of this application, touch sensor 180K can collect user operations on the interface displayed by electronic device through display screen 194, for example, user operations used to trigger the display interface.

[0080] Understandable Figure 2A The components shown do not constitute a specific limitation on the electronic device. In other embodiments of this application, the electronic device may include components that are larger than those shown. Figure 2A The components may have more or fewer parts, or some parts may be combined, some parts may be separated, or the components may be arranged differently. The components shown in the diagram may be implemented in hardware, software, or a combination of software and hardware.

[0081] The operating system involved in this application is the most basic system software running on electronic devices. The software system of an electronic device can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application uses an operating system employing a layered architecture as an example to exemplify the software system architecture of an electronic device.

[0082] Figure 2B This is a software system architecture block diagram of an electronic device provided as an embodiment of this application. For example... Figure 2B As shown, the software system architecture of an electronic device can be a layered architecture. For example, the software can be divided into several layers, each with a clear role and division of labor. Layers communicate with each other through software interfaces. In some embodiments, the operating system is divided into five layers, from top to bottom: the application layer, the application framework layer (FWK), the system libraries and runtime, the kernel layer, and the hardware layer.

[0083] The application layer can include a series of application packages. For example... Figure 2B As shown, the application layer can include native applications of the operating system and third-party applications. Native applications of the operating system can include settings, music, SMS, camera, calls, etc. Third-party applications can include notes, etc., and this application does not limit the specific implementation. In the embodiments of this application, the applications included in the application layer can generally display an application interface. The method provided in the embodiments of this application can be used to create the UI components required to be displayed on the application interface when the application displays its interface on an electronic device.

[0084] In some embodiments of this application, the application layer can be used to implement the presentation of the application interface. The UI components in the application interface can be created using the methods provided in the embodiments of this application. For example, the application interface can be the interface of any application within an electronic device, such as a video application, news application, short video application, or social platform application.

[0085] In one possible implementation, the application can be developed using any possible language such as Arkts, JavaScript, Objective-C, Swift, Kotlin, or Java, and completes its work by calling the APIs provided by the application framework layer. Developers can use the application framework layer to interact with the underlying operating system (e.g., the kernel layer, hardware layer, etc.) to develop their own applications. This application framework layer primarily consists of a series of services and management systems for the operating system. In this embodiment, the electronic device can detect and respond to events that trigger the display of the user interface within the application layer, calling the corresponding APIs provided by the application framework layer.

[0086] The application framework layer provides application programming interfaces and a programming framework for applications within the application layer. The application framework layer includes some predefined functions. For example... Figure 2B As shown, the application framework layer may include an activity manager; a window manager; a view system; a phone manager; a content provider; a notification manager; a resource manager, etc. For example, the application framework layer may contain a UI framework, which can be used to provide capabilities related to UI processing of the application in the application layer, such as creating UI components.

[0087] The Activity Manager manages the lifecycle of each application and provides commonly used navigation and back functions, offering an interactive interface for all program windows.

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

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

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

[0091] When an application displays a view, it needs to create UI components within the view. To speed up the creation of UI components, a pre-creation technology for UI components is provided. This technology allows UI components for subsequent frames to be displayed to be created during the idle time of the current frame. When these UI components need to be displayed later, they can be drawn directly based on the already created UI components, saving the time of UI component creation. In some embodiments of this application, the application can detect the duration of the current frame when pre-creating UI components on the main thread. If the duration of the current frame is greater than or equal to a first threshold, the task of pre-creating the UI components is sent to a child thread for asynchronous creation of the UI components on another thread. This frees up the main thread to handle the UI tasks of the next frame, avoiding the probability of frame drops caused by excessive time spent pre-creating UI components on the main thread.

[0092] A phone manager is used to provide communication functions for electronic devices. For example, it manages call status (including connection and disconnection).

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

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

[0095] The runtime includes the core libraries and the virtual machine. The runtime is responsible for the scheduling and management of the operating system.

[0096] The core library consists of two parts: one part contains callable functionalities, and the other part is the operating system's core library. The application layer and application framework layer run in a virtual machine. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0097] The system library can include multiple functional modules. For example: surface manager, media framework, 3D graphics processing library (e.g., OpenGLES), 2D graphics engine (e.g., SGL), etc.

[0098] The Surface Manager is used to manage the display subsystem and provides the blending of two-dimensional and three-dimensional layers for multiple applications.

[0099] The media framework supports playback and recording of various commonly used audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, and AMR; and multiple image file formats, such as JPG and PNG.

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

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

[0102] The kernel layer is the layer between hardware and software. The kernel layer contains many drivers related to electronic devices, including at least display drivers, camera drivers, audio drivers, and sensor drivers; this application embodiment does not impose any limitations on these. In this application embodiment, the kernel layer can receive drawing operations from the system rendering process and send them to the display by calling the display driver, that is, display them through the display screen 194.

[0103] The hardware layer can include various types of sensors, such as accelerometers, gravity sensors, and touch sensors.

[0104] Electronic devices can typically run multiple applications simultaneously. In a simpler scenario, one application corresponds to one process; in a more complex scenario, one application corresponds to multiple processes. Each process has a unique process ID.

[0105] It should be noted that, Figure 2A and Figure 2B The structure shown is merely an example of an electronic device provided in this application embodiment and is not intended to limit the electronic device provided in this application embodiment in any way. In specific implementations, the electronic device may have more than Figure 2A or Figure 2B The structure shown may contain more or fewer devices or modules.

[0106] Figure 3A This is an architecture diagram of an application provided in an embodiment of this application. The application can be any application within an electronic device. When the electronic device launches the application, an application process of that application can run within the electronic device. This application process can include multiple threads, such as... Figure 3A The thread 1, thread 2, thread 3, etc., mentioned in the document. In the embodiments of this application, the first thread and the second thread can be any two threads included in the application process, and these two threads are different threads. As an example, such as... Figure 3A As shown, the first thread can be thread 1, and the second thread can be thread 3.

[0107] In one example, one or more of the multiple threads included in the application process are the main thread. The main thread is typically created automatically when the application starts and is responsible for executing the application's entry point and initializing its basic structure. The main thread can create other threads (child threads) to perform concurrent tasks, improving program performance and responsiveness. For example, the first thread could be the main thread, and the second thread could be a child thread.

[0108] In one example, one or more threads within the application process can be used to handle UI update and interaction-related tasks; these threads can be called UI threads. For example, the first thread could be the UI thread. Optionally, the UI thread could be the main thread.

[0109] like Figure 3AAs shown, the application process may include a time threshold detection module 3011, a component creation instruction packaging module 3012, a component creation instruction parsing module 3021, a component creation module 3022, and a UI component tree merging module 3013. Among these, the time threshold detection module 3011, the component creation instruction packaging module 3012, and the UI component tree merging module 3013 can run in the first thread, while the component creation instruction parsing module 3021 and the component creation module 3022 can run in the second thread. It is understood that the roles of the first thread and the second thread are interchangeable, for example... Figure 3A In the example, thread 1 is the first thread and thread 3 is the second thread. In another example, thread 3 can be the first thread and thread 1 can be the second thread.

[0110] Figure 3B This is a schematic flowchart illustrating a pre-created task processing procedure provided in an embodiment of this application. Figure 3B As shown, the time threshold detection module 3011 can determine a first threshold of a first duration based on the current device state of the electronic device. The first duration is the time elapsed since the start of the current frame, i.e., the duration of the current frame. The first threshold can be less than or equal to the duration of a single frame continuously displayed by the electronic device, i.e., the screen refresh cycle of the electronic device. If the first duration is greater than the first threshold, for example, exceeding the screen refresh cycle of the electronic device, and the first thread continues to process the pre-created task, it will squeeze the time for the first thread to process the UI task of the next frame, which may result in insufficient time for the first thread to process the UI task of the next frame, thus causing frame drops. Therefore, by using the first threshold, it can be determined whether the first thread can continue to process the pre-created task, or whether it is necessary to send the pre-created task to the second thread for further processing. The time threshold detection module 3011 can determine whether the first duration is greater than or equal to the first threshold. If the first duration is greater than or equal to the first threshold, it can be determined that the pre-created task can continue to be processed in the second thread. In this way, the first thread can be freed up to process the UI task of the next frame, reducing the probability of frame drops.

[0111] The device state of an electronic device can be characterized by one or more parameters. Different parameter values ​​result in different efficiencies or requirements for the first thread processing UI tasks. Therefore, the first threshold can adaptively change according to the device state, improving resource utilization while meeting UI task processing needs. For example, parameters may include one or more of the following: screen refresh rate, CPU frequency, device load information, or the complexity of the UI components to be created. The screen refresh rate, also known as the frame rate, affects the allowable time for the first thread to process a single frame of UI tasks. A higher frame rate means more screen refreshes per unit time and shorter allowable processing time for each frame. For example, a frame rate of 60Hz results in a frame duration (screen refresh cycle) of approximately 16.67ms, while a frame rate of 120Hz results in a refresh cycle of approximately 8.3ms. CPU frequency refers to the number of instructions a CPU can execute per second. A higher CPU frequency means faster processing speed, resulting in faster UI task processing by the first thread. Load information for electronic devices indicates the current workload they bear, measuring the level of workload. A high workload may prevent an device from allocating sufficient resources for task processing. For example, load information can include CPU utilization, memory usage, and hard drive read / write load, which help determine the device's operating status and performance bottlenecks. Temperature is another important indicator of load; higher loads typically lead to increased temperature, making it a useful parameter for assessing load. For battery-powered devices, excessive load accelerates battery depletion and affects battery life; load information can include battery consumption rate and remaining charge. Furthermore, besides physical parameters, device load can be reflected by operating status, such as whether the device is operating at full capacity or in standby mode. The complexity of components in UI tasks affects their processing time. Highly complex components require longer creation times, increasing the likelihood of them taking up processing time in the next frame. Therefore, component complexity should be considered when setting the first threshold.

[0112] In one example, the first threshold can be configured as a value of the screen refresh cycle. In another example, to allow time for the first thread to process other tasks, the first threshold can be set to a value less than the screen refresh cycle. For example, a hold-up buffer time can be set for the first thread to process other tasks, such as packaging and pre-creating remaining UI components or processing UI tasks for the next frame. In this case, the first threshold can be determined based on the hold-up buffer time, such as the difference between the screen refresh cycle and the hold-up buffer time.

[0113] If the pre-creation task needs to be processed in a second thread, the component creation instruction packaging module 3012 can serialize the remaining code of the pre-creation task into creation instructions and package them for transmission to the second thread. The code in the pre-creation task refers to the UI creation code developed by the application developer, which is executed to create UI components. The code in the pre-creation task can use a first data format. The component creation instruction packaging module 3012 can convert this first data format to a second data format through a serialization operation. The second data format can be a data format used for data storage or transmission to facilitate the transfer of the remaining UI component code between threads.

[0114] For example, such as Figure 3B As shown, the first data format can be ArkTS (ark typeScript), and the second data format can be JavaScript object notation (JSON). JSON is a lightweight data exchange format with the advantages of being simple, easy to understand and parse, and does not require a complex encoding and decoding process.

[0115] For example, a pre-creation task can contain component creation closures corresponding to 10 components, and one component creation closure can be used to create a corresponding UI component. When the time threshold detection module 3011 determines that the duration of the current frame is greater than or equal to the first threshold, the first 5 component creation closures have been processed, and part of the 6th component creation closure has been processed. Then, the component creation instruction packaging module 3012 can serialize the remaining part of the 6th component creation closure and the remaining 4 component creation closures into component creation instructions and send them to the second thread.

[0116] The component creation instruction parsing module 3021 can be used to parse the serialized component creation instructions received by the second thread. For example, the process of parsing the component creation instructions by the component creation instruction parsing module 3021 can be a deserialization process, that is, a process of converting the second data format into a first data format. The component creation module 3022 can be used to continue creating UI components in the second thread based on the parsed UI creation code, and send the created UI components back to the first thread. The UI component tree merging module 3013 can be used to merge the UI components created by the first thread and the second thread respectively into a complete component tree. Figure 3B As shown, the first thread can create some UI components for the pre-created task. These UI components can form a sub-component tree. The component creation module 3022 can create the remaining UI components for the pre-created task. These UI components can also form a sub-component tree. The UI component tree merging module 3013 can merge the two sub-component trees to obtain the component tree corresponding to the pre-created task. In addition, the UI component tree merging module 3013 can also mount the component tree corresponding to the pre-created task onto the main component tree of the application, so that the subsequent UI drawing module can perform drawing operations based on the main component tree.

[0117] The method provided in this application embodiment can be applied to various application interface display scenarios that may involve pre-created UI components. For example, application interface display scenarios may include long view display scenarios of applications on electronic devices, video queue display scenarios of short videos, and related page display scenarios. It should be understood that the application scenarios of the provided method are not limited in this application embodiment, and it can be applied to any scenario that requires the pre-creation of UI components.

[0118] Figure 4A An example of a display scenario according to an embodiment of this application is shown. For example... Figure 4A The image shown illustrates the interface when a long view page is displayed in an application. A long view page is a page that can display a large number of items, which are gradually revealed through page scrolling. Long view pages can be long list pages, paginated list pages, infinite scroll list pages, etc. A long list page displays content in a list format. A paginated list page displays a long list in a paginated format, loading one page of data at a time. An infinite scroll list page supports infinite scrolling, with new content automatically loading to the bottom of the page as the user scrolls. Long view pages can be used on news websites to display a series of articles or news items, on e-commerce platforms to display product lists, or on social media platforms to display user activity and comments, etc. Figure 4A(This will be illustrated as a specific example), or it can also be applied to video platforms to display video lists, etc.

[0119] Understandably, due to the screen size limitations of electronic devices, only a portion of a long-view page can be displayed at a time. This portion may contain some of the UI components within the long-view page. To improve page responsiveness, UI components that are not yet displayed can be pre-created. When the user scrolls to a view that requires the pre-created UI components, drawing and rendering can be performed directly based on these pre-created components, saving the time spent creating UI components and improving page responsiveness. Furthermore, for more complex UI components, creation can be time-consuming. Therefore, utilizing the UI thread's idle time to create these components can improve UI thread utilization and reduce the probability of frame drops caused by the time spent creating these components.

[0120] Figure 4B This illustration shows an example of another display scenario according to an embodiment of this application. In some display scenarios, the application's server can determine a queue of pages to be displayed for the application, and the application in the electronic device can display each page in the queue one by one. Here, the application can be a short video application, and the queue of pages to be displayed can be a video queue recommended by the server to the user, such as... Figure 4A The diagram illustrates the sequential display of a video queue in a short video application. The server recommends N videos to the user. After the short video application displays video 1, the user can swipe to watch the next video, allowing the application to continue displaying video 2, and so on.

[0121] Understandably, since the videos in the video queue are predetermined—meaning the videos to be displayed after the current one are known—UI components for subsequent video displays can be pre-created to improve responsiveness. This way, when the user swipes to display the next video, drawing and rendering can be done directly based on these pre-created UI components, saving time spent creating them and improving video display responsiveness. Similarly, this reduces the probability of frame drops caused by the UI thread spending too much time creating these UI components.

[0122] Figure 4CThis illustration shows another example of a display scenario according to an embodiment of this application. In this scenario, the currently displayed page within the application may have related pages, and the user is likely to continue browsing these related pages after viewing the current page. For example, a page within the application may contain links to one or more subpages, which can be understood as related pages to this page. As another example, a page within the application may also contain links to successor or predecessor pages, which can be understood as related pages to this page. Figure 4C As shown, taking a reading page as an example, when a user is reading the current page, the current page usually contains a "next page" or "previous page" link. The "next page" or "previous page" can be considered as a related page of the current page.

[0123] Since the associated pages are predetermined, the UI components for these associated pages can be created in advance, such as... Figure 4C In this way, while the current reading page is being displayed, the UI components for subsequent pages can be created during idle time. When these related pages need to be displayed, they can be drawn and rendered directly based on the already created UI components. This helps improve the response speed when related pages are displayed and reduces the probability of frame drops caused by the UI thread taking too long to create these UI components.

[0124] exist Figures 4A to 4C In the examples shown, the process of pre-creating UI components may be involved. During the pre-creation of UI components, a situation may arise where the duration of the current frame is about to exceed the total duration of a single frame. If the pre-creation task of the UI component is not yet completed, the UI thread cannot continue processing the UI task of the next frame. The pre-creation task will then consume the processing time of the UI task of the next frame, potentially leading to dropped frames. However, in the method provided in this application embodiment, asynchronous pre-creation of UI components can be performed based on a time threshold. Specifically, when processing the pre-creation task, the UI thread can detect the duration of the current frame. If the duration of the current frame is greater than or equal to a first threshold, the UI thread can send the unfinished portion of the pre-creation task to a sub-thread for processing. This allows the UI thread sufficient time to process the UI task of the next frame, reducing the probability of dropped frames due to the long processing time of the pre-creation task. Simultaneously, the pre-creation task can be processed asynchronously in a sub-thread, and the processing results of the UI thread and the sub-thread can be merged afterward, ensuring timely completion of the pre-creation task and improving the response speed of subsequent page display.

[0125] In the above introduction, the electronic device can process the pre-created task based on a time threshold. The following will describe the implementation principle of the UI component creation method provided in the embodiments of this application with reference to the accompanying drawings.

[0126] Figure 5A This application provides a system architecture diagram for an electronic device. The electronic device includes a first application. The electronic device may include one or more applications, and the first application can be any of these applications. For example, the first application may be an application that comes pre-installed with the electronic device, or an application that the user installs on the electronic device. Alternatively, the first application may be a system application provided by the operating system, such as an application provided by the electronic device manufacturer, or an application provided by a third party. The first application may be installed and run on the electronic device as a client, or it may be run on the electronic device as a mini-program, a lightweight application, or a parasitic application (an application that relies on a host program to provide a runtime environment). In this form, the user does not need to manually click to confirm the installation of the application, making it more convenient and faster.

[0127] like Figure 5A As shown, after launching the first application in an electronic device, the device can create a first application process corresponding to the first application. The first application process can include at least one thread. Threads can share the resources of the first application process, but each thread has its own execution path. Each thread can be used to execute a portion of the tasks within the first application process. For example... Figure 5A As shown, the first application process may include a first thread and a second thread. The first thread and the second thread can be any two threads included in the first application process, and these two threads are different threads.

[0128] In one example, one or more threads within the first application process are designated as the main thread. The main thread is typically created automatically when the first application starts and is responsible for executing the application's entry point and initializing its basic structure. The main thread can create other threads (child threads) to perform concurrent tasks, thereby improving program performance and responsiveness. For example, ... Figure 5A As shown, the first thread can be the main thread, and the second thread can be a child thread.

[0129] In one example, one or more threads from the multiple threads included in the first application process can be used to handle UI update and interaction-related tasks; these threads can be called UI threads. For example, the first thread can be the UI thread included in the first application process, and the second thread can be any other thread included in the first application process besides the UI thread. Optionally, the functionality performed by the UI thread can be implemented through the main thread; that is, the UI thread can be the main thread of the first application process.

[0130] See Figure 5B The diagram shown is a flowchart illustrating a method for creating a UI component according to an embodiment of this application. This method can be applied to... Figure 5A In the system architecture shown. For example... Figure 5B As shown, the process includes:

[0131] Step 501: The first thread processes the UI task. This UI task is used to create UI components for the frame to be displayed in the first application process, which is associated with the current frame of the first application process displayed on the electronic device.

[0132] The current frame refers to the image currently displayed by the first application process, or the current application interface of the first application process. The frame to be displayed typically refers to the next frame or subsequent image that is about to be displayed, or the application interface that may be displayed soon, but has not yet been shown to the user. In this embodiment, the frame to be displayed for the first application process can represent a frame after the current frame of the first application process. For example, the frame to be displayed can be the next frame or the frame after that of the current frame. Optionally, the current frame and the frame to be displayed can be two consecutive frames, for example, the current frame is the i-th frame and the frame to be displayed is the (i+1)-th frame; or, the current frame and the frame to be displayed can be two non-consecutive frames, for example, the current frame is the i-th frame and the frame to be displayed is the (i+a)-th frame, where a is greater than 1.

[0133] It is understandable that the UI task in step 501 is used to create UI components for the frame to be displayed, rather than creating UI components for the current frame. Therefore, this UI task can also be called a pre-creation task or a pre-creation UI task.

[0134] The frame to be displayed is related to the current frame; this can also be understood as the page displayed in the frame to be displayed being related to the page displayed in the current frame. This relationship between the frame to be displayed and the current frame can have several possible scenarios.

[0135] One possible scenario is that both the current frame and the frame to be displayed show the first page of the first application. The current frame displays the first view of the first page, and the frame to be displayed shows a second view of the first page. At least one UI component in the second view differs from any UI component in the first view. In other words, both the current frame and the frame to be displayed show only a portion of the content from the first page. For example, in... Figure 4A In the long view display scenario shown, the content displayed in the current frame is the part of the first page located on the screen of the electronic device. After the user performs a swipe operation, the remaining content of the first page will be gradually displayed. The frame to be displayed is the other part of the content in the first page.

[0136] Another possible scenario is that the current frame and the frame to be displayed are used to show different pages in the first application; that is, the current frame is used to display the first page, and the frame to be displayed is used to display a second page in the first application, which can be a subpage of the first page. As an example, the first page can contain a link to the second page. For example, in... Figure 4CIn the associated page display scenario shown, after the user clicks "Next Page", the first application will display the content of the next page, and the second page to be displayed in the next frame is the next page after the first page displayed in the current frame.

[0137] Another possible scenario is that the current frame and the frame to be displayed are used to show different pages in the first application. The current frame is used to display the first page, and the frame to be displayed is used to display a third page in the first application. The third page and the second page are included in the first page set. As an example, the first page set could be a set of recommended pages given to the user in the first application, containing various pages recommended to that user. For example, in... Figure 4C In the video queue display scenario shown, the first application will display each video in the video queue one by one. The content displayed in the current frame may be one of the videos, and the content displayed in the frame to be displayed may be the next video.

[0138] In some embodiments, a UI task can be used to create at least one UI component included in a frame to be displayed. This at least one UI component can be some or all of the UI components included in the frame to be displayed. In one example, the at least one UI component can be a UI component among the UI components included in the frame to be displayed that meets certain conditions.

[0139] In one implementation, the first UI component among at least one UI component can be a custom component. The first UI component can be any one of the at least one UI components. A custom component is defined relative to system components. The operating system of an electronic device typically provides multiple system components to meet basic application display needs. A custom component is a component built by the developer of the first application using system components, and a custom component can contain multiple system components. Generally, creating a custom component takes more time than creating a system component. Therefore, custom components can be pre-created to reduce the time required for them to be displayed.

[0140] In another implementation, the decision to pre-create a UI component can be based on the time required to create it. If the time required to create the first UI component is greater than or equal to a second threshold, then the first UI component can be pre-created, thus reducing the time spent displaying the UI component subsequently. The second threshold can be set according to actual needs. As an example, the second threshold can be less than the subsequent first threshold.

[0141] Alternatively, to determine whether a UI component needs to be pre-created, one can combine the two methods mentioned above, or use other methods to determine it; no specific restrictions are imposed on this.

[0142] As mentioned above, the first thread can be either the main thread of the first application process or the UI thread. When the first thread has finished processing the UI task of the current frame (which is used to create UI components in the current frame), and there is still idle time in the first thread, it can be used to pre-create UI components for the frame to be displayed.

[0143] Step 502: The first thread determines that the first duration is greater than or equal to the first threshold. Here, the first duration is the duration since the start of the current frame, that is, the duration or time elapsed since the start of the current frame. The first threshold can be less than or equal to the screen refresh cycle of the electronic device, that is, less than or equal to the duration of one frame displayed by the electronic device.

[0144] Combination Figure 1C As shown, the first thread pre-creates UI components during idle time. While this can speed up the response time when subsequent frames are displayed, it may result in the pre-created UI components crowding out the processing time of UI tasks in the next frame. Figure 1C The pre-creation task 2 in the middle frame occupies the processing time of the UI task 3 corresponding to the third frame, causing the UI task 3 to fail to complete in time, resulting in frame drops. Therefore, this application embodiment proposes to set a time threshold, namely a first threshold. When the first time is greater than or equal to the first threshold, the task used for pre-creating UI components can be sent to other threads for processing. Then, the first thread can be freed up to process the UI task of the next frame.

[0145] The frame rate of the electronic device can also be replaced with the frame rate of the first application. Typically, the frame rate of the first application is the same as the frame rate of the electronic device. The duration of one frame of the electronic device can be determined based on its frame rate. For example, when the frame rate of the electronic device is set to 60Hz, the duration of one frame is approximately 16.67ms, or when the frame rate of the electronic device is set to 120Hz, the duration of one frame is approximately 8.3ms. In this embodiment, the first threshold can be configured to be a value not greater than the duration of one frame. In one example, to reserve time for the first thread to handle other tasks, the first threshold can be set to a value less than the duration of one frame. For example, a buffer time can be set for the first thread to handle other tasks, such as packaging and pre-creating remaining UI components, or processing UI tasks for the next frame; in this case, the first threshold can be determined based on this buffer time.

[0146] In one possible implementation, the first threshold may be determined based on first information, which is any information capable of affecting the processing task of the first application process (or the first thread). For example, the first information may indicate (or include) one or more of the following:

[0147] (1) The screen refresh rate of the electronic device, i.e., the frame rate of the electronic device. When the frame rate is different, the allowable time for the first thread to process the UI task corresponding to one frame is different. The higher the frame rate, the more times the screen of the electronic device refreshes per unit time, and the shorter the allowable time to process each frame. Therefore, the first threshold should be configured to be smaller accordingly. For example, the upper limit of the first threshold is the duration of one frame of the electronic device.

[0148] Understandably, some electronic devices have adjustable frame rates. In such cases, the first threshold can be set to a fixed value. For example, the duration of a frame can be determined based on the highest frame rate allowed by the electronic device, and the first threshold can be determined based on the duration of that frame. Alternatively, the first threshold can be configured as an adaptive value that changes with the frame rate. When the frame rate is higher, the first threshold can be configured to a smaller value, and when the frame rate is lower, the first threshold can be configured to a larger value.

[0149] (2) CPU frequency of electronic devices. CPU frequency refers to the number of instructions that the CPU can execute per second. The higher the CPU frequency, the faster the processing speed, which means that the first thread processes the task faster. Therefore, the buffer time can be set to be smaller, and the first threshold can be configured to be larger accordingly.

[0150] (3) Load information of electronic devices. The load information of electronic devices is used to indicate the current workload of the electronic device. When the workload of the electronic device is high, more time should be reserved for the processing of other tasks. That is, the buffer time can be set to be larger, and the first threshold can be configured to be smaller accordingly.

[0151] Load information for electronic devices can include CPU utilization, memory usage, hard drive read / write load, operating temperature, battery consumption rate, and remaining power. In addition to these physical parameters, device load information can also be reflected by its operating status, such as whether the device is operating at full capacity or in standby mode.

[0152] In some embodiments, the load information of the electronic device can also be replaced by the load information of the first application process. When the first application process is running, the electronic device allocates resources to the first application process. These resources can be shared among threads within the first application process. Therefore, the load of the first application process may affect the processing tasks of the first thread. Thus, the first threshold can be configured with reference to the load of the first application process.

[0153] (4) The complexity of the UI components required for the UI task. The complexity of a UI component can refer to the complexity of any single UI component, the complexity of one or more UI components, or the average complexity of all UI components. The complexity of UI components in a UI task can affect the processing time of the UI task. When a UI component has high complexity, its creation will take longer, increasing the probability of it occupying the processing time of the next frame. Therefore, the complexity of the UI components required for the UI task should also be considered when setting the first threshold. When the complexity of a UI component is high, the retention buffer time should be set larger, and correspondingly, the first threshold can be configured smaller.

[0154] In addition to the information mentioned above, the first information may also indicate other information, and the setting of the first threshold may also refer to other information indicated by the first information, without any specific restrictions.

[0155] In this embodiment, the purpose of setting a first threshold is to reduce the probability of squeezing the processing time of the next frame. Therefore, the main determining factor of the first threshold is the duration of a frame. The first duration refers to the duration of the current frame. The end time of the current frame is the start time of the next frame. Therefore, when the first thread determines that the first duration is greater than or equal to the first threshold, it can also be understood as the first thread determining whether it is about to enter the duration range of the next frame. For example, determining that the first duration is greater than or equal to the first threshold can also be described as determining that the second duration is less than or equal to the second threshold. The second duration is the duration from the end time of the current frame (or the start time of the next frame), and the second threshold is the difference between the duration of a frame and the first threshold.

[0156] As an example, Figure 6 This is a schematic diagram of UI task processing provided in an embodiment of this application. Taking a frame rate of 120Hz on an electronic device as an example, the duration of one frame is approximately 8.3ms. Therefore, the first threshold can be set to t = 8.3 - 0.5 = 7.8ms, where 0.5ms is the buffer time. Figure 6 As shown, in the second frame, the first thread processes pre-created task 2-1, which is... Figure 1C As shown in the pre-created task 2 section, the first thread will also check whether the first duration is greater than or equal to 7.8ms. When 7.8ms is reached, the first thread will no longer continue to process the remaining part of pre-created task 2, i.e., pre-created task 2-2, but will send pre-created task 2-2 to the second thread for further processing.

[0157] Step 503: The first thread sends the first subtask of the UI task to the second thread of the first application process.

[0158] When the first thread determines that the first duration is greater than or equal to the first threshold, it can send the unfinished first subtask to the second thread for further processing. This frees up the first thread to handle the UI tasks for the next frame, preventing frame drops caused by excessive time spent on pre-creating UI tasks. The first subtask refers to the unfinished portion of a UI task; in other words, the first subtask is used to create M UI components, which are the UI components that the UI task requires to be created but have not yet been completed.

[0159] In some embodiments, the first thread handles UI tasks, which can be understood as the first thread executing the component creation code corresponding to the UI task. Generally speaking, the first thread executes the code sequentially. Therefore, the first thread can determine the code that has been completed and then determine the code that has not yet been executed, so as to send the code that has not yet been executed to the second thread for the second thread to continue execution.

[0160] In one possible implementation, the first thread can generate a first instruction set based on an unprocessed first subtask in the UI task and send the first instruction set to the second thread. The first instruction set instructs the second thread to process the first subtask; for example, it may indicate which UI components need to be created, the properties of the UI components, and the nesting relationships between the UI components.

[0161] This can be understood as follows: the first thread originally needs to handle UI tasks, but when it is determined that the first duration is greater than or equal to the first threshold, the first thread will interrupt the processing of the UI task and package the unprocessed first subtask into the first instruction set. This is equivalent to downgrading the original component creation process to the first instruction set so that the first instruction set can be sent to the second thread for processing.

[0162] The first unprocessed subtask in a UI task can contain at least one closure. A closure, also known as a component creation closure or subtree creation closure, can be used to create one or more UI components. Correspondingly, each closure contains component creation code to create the corresponding UI component. For example, a developer's custom component can consist of multiple system components, and a closure can be used to create one custom component. It's understandable that the closure contained in the first subtask can be a complete closure (meaning a completely unprocessed closure), or it can be a part of a closure. For instance, if the first thread is executing UI component creation code within a closure, and it's determined that the first duration is greater than or equal to a first threshold, then some code within that closure has not yet been executed. The first thread can then send only the remaining component creation code to the second thread.

[0163] As an example, the first thread can serialize the component creation code corresponding to the first subtask to obtain a first instruction set, which can then be sent to the second thread. For instance, the first thread's serialization could involve converting at least one closure corresponding to the first subtask from a first data format to a second data format to obtain the first instruction set. The first instruction set includes the converted at least one closure; in other words, the first instruction set contains the instructions after the component creation code has undergone format conversion.

[0164] The first data format is the original format of the component creation code, which is the native programming language provided by the electronic device's operating system. The second data format can be a data format used for data storage or transmission, facilitating the transfer of remaining UI component code between threads. Furthermore, by generating the first instruction set, the execution method of the UI component's code being created is essentially transformed, ensuring that the remaining code of the UI component appears to have been executed completely from the perspective of the first thread, thus resolving the issue of uninterrupted creation of a single UI component.

[0165] As an example, with the first data format being ArkTS and the second data format being JSON, the following shows an example of the component creation code before conversion and the first instruction set after conversion.

[0166] See the example below for code creation for a "row" component that contains a "text" component and an "image" component. The "row" component has a total height of 200, the "image" component displays the image "src.jpg" with a height and width of 100, and the font size in the "text" component is 20.

[0167]

[0168] See the example below for the result of formatting the code created for the components. After conversion, each component is described in JSON format. For example, the "row" component is converted into a node with "id" of 100, "type" of "row", and a node attribute description of height of 200. The parent node of this 100 node has an "id" of 99.

[0169]

[0170] Through the above format conversion, the component creation code can be converted into a format that is easy to transmit and store, thus facilitating the transfer of the first instruction set between the first thread and the second thread. It is understood that, in addition to the ArkTS and JSON formats mentioned above, the first and second data formats can also be other possible formats, and this application embodiment does not impose any limitations on them.

[0171] In one possible implementation, since the first thread and the second thread share the memory resources of the first application process, the first thread can send the first instruction set to the second thread by sending the memory address storing the first instruction set to the second thread. For example, the first thread can send a pointer to the first instruction set to the second thread, and the second thread can retrieve the first instruction set from the corresponding storage location based on the pointer.

[0172] In this embodiment, the first application process may include multiple threads, and the second thread may be any thread other than the first thread. In some embodiments, the first thread may submit a first subtask to a thread pool, and an idle thread in the thread pool may retrieve and execute the task; in this case, the second thread may be that idle thread. Optionally, there may be one or more second threads. When there are multiple second threads, the first thread may divide the remaining part of the UI task into multiple first subtasks and send them to the respective second threads for processing.

[0173] Step 504: The second thread processes the first subtask to create M UI components corresponding to the first subtask. Where M is a positive integer.

[0174] This can be understood as the second thread taking over from the first thread to continue processing the unfinished first subtask and creating the M UI components corresponding to the first subtask. In this way, the first thread can be freed up to execute the UI task of the next frame, avoiding the problem of frame dropping caused by the pre-creating UI task occupying too much time of the first thread.

[0175] Specifically, the second thread can parse the first subtask and create the aforementioned M UI components based on the parsed component creation code. In some embodiments, after obtaining the first instruction set, the second thread can deserialize the first instruction set to obtain the corresponding component creation code, and then create the corresponding UI components by executing this component creation code.

[0176] As an example, the M UI components created by the second thread can form a sub-component tree. Figure 7 As an example of a component tree, Figure 7 Following the code example above, the resulting "text" component, "image" component, and "row" component are as follows: Figure 7 As shown in the sub-component tree, the Row component contains two sub-components: the "text" component and the "image" component.

[0177] It is understood that the UI components involved in the embodiments of this application, in addition to the "text" component, "image" component and "row" component mentioned above, can also be any component that the operating system can support, such as button component, column component or list component, etc., and the embodiments of this application do not limit them.

[0178] Step 505: The second thread sends M UI components to the first thread.

[0179] For example, the second thread can store M UI components in memory and send a pointer to the memory storing the M UI components to the first thread.

[0180] Step 506: The first thread generates the first component tree corresponding to the frame to be displayed based on the M UI components and the N UI components. The N UI components are created by the first thread when processing UI tasks, and N is a positive integer.

[0181] See Figure 7 As shown, the first thread can merge its own created sub-component tree with the sub-component tree created by the second thread to obtain the complete first component tree corresponding to the UI task. The first component tree contains M UI components and N nodes corresponding to those UI components, which can be used to subsequently draw the aforementioned M and N UI components to display them on the screen. In one example, the nodes in the sub-component tree have nested relationships with other nodes; therefore, based on this nesting relationship, the root node of the sub-component tree can be connected to its parent node to merge the two sub-component trees. For example... Figure 7 As shown, the root node of the sub-component tree created by the second thread has an ID of 100 and its parent node has an ID of 99. Therefore, the root node of the sub-component tree can be connected to the node with an ID of 99 to obtain the first component tree.

[0182] Step 507: The first thread mounts the first component tree to the second component tree corresponding to the first application process. The second component tree is used to draw the application interface corresponding to the first application process.

[0183] The first component tree is the component tree obtained after the UI task (i.e., the pre-created task) is completed. It contains the UI components that the UI task needs to create. The second component tree is the main component tree of the first application process. The root node of the main component tree indicates that the component tree corresponds to the first application process. The first thread can also attach the first component tree to the second component tree. In this way, the UI drawing module can perform drawing operations based on the UI components in the second component tree, so that these UI components can be displayed on the electronic screen.

[0184] It is understandable that steps 504 to 506 above are optional steps, therefore in Figure 5B It is shown in dashed lines.

[0185] The technical solution of this application embodiment will now be described using a specific example. See also... Figure 8 The diagram shown is another flowchart illustrating the UI component creation method provided in this application embodiment.

[0186] Step 801: The main thread begins executing the component creation closure. The main thread can also be replaced by the UI thread.

[0187] For example, if the main thread has some free time after processing the UI tasks of the current frame, it can process pre-creation tasks to create UI components for the frame to be displayed. The component creation closure is the closure corresponding to one of the UI components in the pre-creation task.

[0188] Step 802: The main thread determines whether the duration of the current frame exceeds the first threshold. For example, taking an electronic device with a frame rate of 120Hz as an example, the duration of one frame is 8.3ms. When reserving 0.5ms as a buffer time, the first threshold can be 7.8ms. Then, the main thread can determine whether the duration of the current frame has exceeded 7.8ms.

[0189] Step 803: If the result of step 802 is yes, then the main thread generates the first instruction set. The first instruction set is obtained by serializing the closures created by components that have not yet been processed.

[0190] Step 804: If the result of step 802 is negative, then the main thread continues to execute the component creation closure and creates the UI component.

[0191] Step 805: The main thread determines whether the creation of the closure for the current component has been completed. If the result of step 805 is negative, proceed to step 804.

[0192] Step 806: If the result of step 805 is yes, then the main thread determines whether there is another component creation closure to be executed. That is, it determines whether all component creation closures for the pre-creation task have been executed. If the result of step 806 is yes, the pre-creation component process ends.

[0193] Step 807: If the result of step 806 is negative, i.e., when a next component to be executed creates a closure, determine whether a first instruction set exists. If the result of step 807 is negative, proceed to step 804 for execution.

[0194] Step 808: If the result of step 807 is yes, the main thread sends the first instruction set to the child thread, which then creates the remaining UI components.

[0195] It is understandable that the process of step 802 can be continuous, that is, it does not need to be executed after other steps. When step 802 determines that the duration of the current frame exceeds the first threshold, it can interrupt the currently processed component creation closure, or wait for the currently processed component creation closure to finish executing, and then stop executing the next component creation closure, and send the remaining component creation closures to the child thread to continue execution.

[0196] In summary, this application addresses the problem of excessive creation time for complex custom components, which leads to prolonged main thread usage and frame drops in the next frame. It provides a method for asynchronously creating UI components. In this method, when the time taken for the current frame exceeds a predetermined threshold, the UI component pre-creation task is downgraded to generating creation instructions. This allows the component creation closure defined in the JS front-end to execute quickly, and the generated creation instructions are packaged and sent to a child thread to complete the creation of the remaining components. This avoids the frame drops caused by excessive main thread usage during the pre-creation phase and allows UI component pre-creation to occur when the main thread is idle, ensuring full utilization of high-priority main thread resources.

[0197] In other examples, embodiments of this application also provide a method for creating UI components. This method can be applied to an electronic device, which includes a first application process of a first application. The method includes: displaying a first frame, where a first thread of the first application process processes a UI task, which is used to create UI components for a third frame. The third frame is associated with the first frame and is used to display the user interface corresponding to the first application process. Displaying a second frame, where the first thread sends a first subtask of the UI task to a second thread of the first application process. The first subtask is used to create M UI components, where M are UI components that have not yet been created from the UI components required by the UI task, and M is a positive integer. The third frame is displayed after the second frame, and the second frame is also used to display the user interface corresponding to the first application process. The first and second frames are consecutive, but the second and third frames may or may not be consecutive. Compared to the other solutions described above, this solution triggers the second thread to process the first subtask based on the screen refresh cycle of the electronic device, thus eliminating the need for an evaluation of the first duration.

[0198] Figure 9 This is a schematic diagram of the structure of a computer device 900 provided in an embodiment of this application. The computer device 900 may be the electronic device described above. For example... Figure 9As shown, computer device 900 may include: one or more processors 901; one or more memories 902; a communication interface 903; and one or more computer programs 904. These components can be connected via one or more communication buses 905. The one or more computer programs 904 are stored in the memory 902 and configured to be executed by the one or more processors 901. The one or more computer programs 904 include instructions. For example, when computer device 900 is an electronic device as described above, the instructions can be used to perform relevant steps of the electronic device as in the corresponding embodiments above, such as performing relevant steps of the processes in the foregoing embodiments. The communication interface 903 is used to enable communication between computer device 900 and other devices; for example, the communication interface may be a transceiver.

[0199] This application also provides a computer program product, including a computer program that, when run on a computer, causes the computer to perform the methods described in the above embodiments.

[0200] This application also provides a graphical user interface for an electronic device, the electronic device having a display screen, a memory, and a processor, the processor being used to execute one or more computer programs stored in the memory, the graphical user interface including the graphical user interface displayed when the electronic device performs the methods in the above embodiments.

[0201] This application also provides a chip system including a processor and an interface, wherein the processor is configured to call and execute instructions from the interface to enable the chip system to implement the methods described in the above embodiments.

[0202] The methods provided in the embodiments of this application above are described from the perspective of an electronic device as the executing entity. To implement the functions of the methods provided in the embodiments of this application above, the electronic device may include hardware structures and / or software modules, implementing the above functions in the form of hardware structures, software modules, or a combination of hardware structures and software modules. Whether a particular function is executed in the form of hardware structures, software modules, or a combination of hardware structures and software modules depends on the specific application and design constraints of the technical solution.

[0203] As used in the above embodiments, depending on the context, the term "when..." can be interpreted as meaning "if..." or "after...". Similarly, depending on the context, the phrases "when it is determined" or "if (the stated condition or event) is interpreted as meaning "if it is determined..." or "in response to determining..." or "when (the stated condition or event) is detected" or "in response to detecting (the stated condition or event)".

[0204] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. A computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the flow or function according to the embodiments of this application is generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. 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 integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., a solid-state disk (SSD)). Where there is no conflict, the solutions in the above embodiments can be combined.

[0205] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0206] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in one or more blocks of the flowchart illustrations and / or one or more blocks of the block diagrams.

[0207] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means that implement the functions specified in one or more flowcharts and / or one or more block diagrams.

[0208] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, such that the instructions, which execute on the computer or other programmable apparatus, provide steps for implementing the functions specified in one or more flowcharts and / or one or more block diagrams.

[0209] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A method for creating a user interface (UI) component, characterized in that, The method is applied to an electronic device, the electronic device including a first application process of a first application, the method comprising: The first thread of the first application process processes a UI task, which is used to create a UI component for a frame to be displayed in the first application process. The frame to be displayed is associated with the current frame of the first application process displayed by the electronic device. When the first duration is greater than or equal to the first threshold, the first thread sends the first subtask of the UI task to the second thread of the first application process; wherein, the first duration is the duration from the start time of the current frame, the first subtask is used to create M UI components, the M UI components are the UI components that have not been created among the UI components that the UI task needs to create, M is a positive integer, and the first threshold is less than the screen refresh cycle of the electronic device.

2. The method according to claim 1, characterized in that, The method further includes: The second thread creates the M UI components; The second thread sends the M UI components to the first thread; The first thread generates a first component tree corresponding to the frame to be displayed based on the M UI components and N UI components. The first component tree is used to draw the M UI components and the N UI components. The N UI components are created by the first thread when processing the UI task, and N is a positive integer.

3. The method according to claim 1 or 2, characterized in that, The method further includes: The first thread attaches the first component tree to the second component tree corresponding to the first application process, and the second component tree is used to draw the application interface corresponding to the first application process.

4. The method according to any one of claims 1 to 3, characterized in that, The first threshold is determined based on one or more of the following information: The screen refresh rate of the electronic device; The CPU frequency of the electronic device; The load information of the electronic device; or, The complexity of the UI components required to be created for the UI task.

5. The method according to any one of claims 1 to 4, characterized in that, The first thread sends the first subtask of the UI task to the second thread of the first application process, including: The first thread generates a first instruction set based on the first subtask, and the first instruction set is used to instruct the second thread to process the first subtask; The first thread sends the first instruction set to the second thread.

6. The method according to claim 5, characterized in that, The first thread generates a first instruction set based on the first subtask, including: The first thread converts at least one closure corresponding to the first subtask from a first data format to a second data format. The first instruction set includes the converted at least one closure. The second data format is a data format used for data storage or transmission. Each closure in the at least one closure is used to create at least one UI component.

7. The method according to any one of claims 1 to 6, characterized in that, The frame to be displayed is associated with the current frame of the first application process displayed on the electronic device, including any one of the following: The current frame is used to display a first view of a first page in the first application, and the frame to be displayed is used to display a second view of the first page, wherein at least one UI component in the second view is different from any UI component in the first view; or, The current frame is used to display the first page, and the frame to be displayed is used to display a second page in the first application, wherein the second page is a subpage of the first page; or... The current frame is used to display the first page, and the frame to be displayed is used to display the third page in the first application. The third page and the first page are included in the first page set.

8. The method according to any one of claims 1 to 7, characterized in that, Any UI component that the UI task requires to create satisfies one or more of the following: Any of the UI components mentioned is a custom component; or... The time taken to create any of the UI components is greater than or equal to the second threshold.

9. The method according to any one of claims 1 to 8, characterized in that, The first thread is the main thread of the first application process, and the second thread is a child thread of the first application process; or, The first thread is the UI thread of the first application process, and the second thread is any thread other than the UI thread.

10. An electronic device, characterized in that, It includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the computer program, implements the method as described in any one of claims 1 to 9.

11. A chip system, characterized in that, The chip system includes a processing circuit and a storage medium, wherein the storage medium stores instructions; when the instructions are executed by the processing circuit, they implement the method as described in any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store a computer program that, when run on a computer, causes the computer to perform the method as described in any one of claims 1 to 9.

13. A computer program product, characterized in that, The computer program product includes a computer program that, when run on a computer, causes the computer to perform the method as described in any one of claims 1 to 9.

Images