Methods, apparatuses, devices, and media for rendering elements in an interface

Abstract

The present disclosure provides methods, apparatus, computing devices, computer storage media, and computer program products for rendering elements in an interface. A method includes determining a plurality of elements in an interface to be rendered, processing, by a first thread of a plurality of threads, a first rendering stage for a first element of the plurality of elements, and in response to the first rendering stage for the first element being processed to completion, processing, by a second thread of the plurality of threads, a second rendering stage for the first element and processing, by the first thread, a first rendering stage for a second element.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and more particularly, to a method, apparatus, computing device, computer storage medium, and computer program product for rendering elements in an interface. Background Art

[0002] With the rapid development of electronic devices, the complexity and functionality of applications are also increasing. Rendering technology, as the core of user interface graphics display, affects user experience, application performance, and device resource consumption. Due to the limitations of device performance, rendering technology is extremely important.

[0003] Long lists are useful for displaying large amounts of data on electronic devices, such as a continuous stream of information. They can load and render data on the page based on user needs, effectively reducing the initial loading time of the app and improving its startup speed. Summary of the Invention

[0004] Embodiments of the present disclosure provide a method, apparatus, computing device, computer storage medium, and computer program product for rendering elements in an interface.

[0005] According to a first aspect of the present disclosure, a method for rendering elements in an interface is provided, comprising determining a plurality of elements to be rendered in the interface. The method further comprises processing, by a first thread among a plurality of threads, a first rendering phase for a first element of the plurality of elements. The method further comprises processing, by a second thread among the plurality of threads, a second rendering phase for the first element in response to completion of the first rendering phase for the first element, and processing, by the first thread, the first rendering phase for the second element.

[0006] According to a second aspect of the present disclosure, there is provided an apparatus for rendering elements in an interface, comprising: a determining unit configured to determine a plurality of elements to be rendered in the interface. The apparatus further comprises a first processing unit configured to process a first rendering phase for a first element of the plurality of elements through a first thread among a plurality of threads. The apparatus further comprises a second processing unit configured to process a second rendering phase for the first element through a second thread among the plurality of threads in response to completion of the first rendering phase for the first element, and to process the first rendering phase for the second element through the first thread.

[0007] According to a third aspect of the present disclosure, a computing device is provided, comprising: at least one processing unit; and at least one memory, the at least one memory being coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions, when executed by the at least one processing unit, causing the computing device to execute the method as described in the first aspect of the present disclosure.

[0008] According to a fourth aspect of the present disclosure, a non-transitory computer storage medium is provided, comprising machine-executable instructions, which, when executed by a device, cause the device to perform the method according to the first aspect of the present disclosure.

[0009] According to a fifth aspect of the present disclosure, a computer program product is provided, comprising machine-executable instructions, which, when executed by a device, cause the device to perform the method according to the first aspect of the present disclosure.

[0010] It should be understood that the summary of the invention is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become readily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The above and other objects, features and advantages of the embodiments of the present disclosure will become more readily understood through the following detailed description with reference to the accompanying drawings, in which several embodiments of the present disclosure are illustrated by way of example and not limitation, in which:

[0012] Figure 1A A schematic diagram illustrating an example environment in which embodiments according to the present disclosure may be implemented;

[0013] Figure 1B A schematic diagram illustrating a process associated with an embodiment of the present disclosure;

[0014] Figure 2 A schematic flow chart of a method for rendering elements in an interface according to an embodiment of the present disclosure is shown;

[0015] Figure 3 A schematic flow chart of a process for batch rendering elements in an interface according to an embodiment of the present disclosure is shown;

[0016] Figure 4 A schematic diagram illustrating a process for allocating rendering tasks according to an embodiment of the present disclosure is shown;

[0017] Figure 5 A schematic diagram illustrating a process for allocating tasks to a thread pool according to an embodiment of the present disclosure is shown;

[0018] Figure 6 A schematic diagram illustrating a process for executing a task by an engine thread according to an embodiment of the present disclosure is shown;

[0019] Figure 7 A schematic diagram illustrating a process for splitting tasks according to an embodiment of the present disclosure is shown;

[0020] Figure 8 A schematic block diagram of an apparatus for rendering elements in an interface according to an embodiment of the present disclosure is shown; and

[0021] Figure 9 A block diagram of an electronic device according to an embodiment of the present disclosure is shown.

[0022] Throughout the drawings, the same or similar reference numbers denote the same or similar elements. DETAILED DESCRIPTION

[0023] The following describes embodiments of the present disclosure in more detail with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as limited to the embodiments described herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are for illustrative purposes only and are not intended to limit the scope of protection of the present disclosure.

[0024] In the description of the embodiments of the present disclosure, the term "including" and similar terms should be understood as open inclusion, that is, "including but not limited to". The term "based on" should be understood as "based at least in part on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The terms "first", "second", etc. can refer to different or the same objects, unless explicitly stated otherwise. Other explicit and implicit definitions may also be included below.

[0025] The basic principles and implementations of the present disclosure will be described with reference to the accompanying drawings. It should be understood that the exemplary embodiments given are only intended to enable those skilled in the art to better understand and implement the embodiments of the present disclosure, and are not intended to limit the scope of the present disclosure in any way.

[0026] Figure 1A Schematic diagram of an environment 100a in which various embodiments of the present disclosure can be implemented is shown. Figure 1A In the environment 100a shown, when a user opens an application through an electronic device 102, the application can load data from a database or server through a long list. In some embodiments, the long list can display information in the form of a grid layout or a waterfall layout. There can be multiple sub-containers or nodes (such as, sub-node 104) in the long list for carrying information or elements. The sizes of these nodes can be the same or different. In some scenarios, multiple sub-nodes or nodes can include content such as images, text, videos, etc. For example, some sub-nodes can include shopping information for user personalized recommendations, such as product name, price, description, etc. Some sub-nodes can include information about nearby takeout restaurants. Some sub-nodes can also be used to display information such as electronic products, car advertisements, social media, etc.

[0027] In some embodiments, when the user scrolls down the electronic device 102, the long list can lazily load the next content to be displayed based on the current scroll position, thereby displaying more child nodes for carrying more data or views. In some scenarios, the long list is displayed on the display screen of the electronic device 102 by sequentially rendering each of the multiple child nodes on the screen, which may result in excessively long loading times, slow rendering efficiency, and a poor user experience.

[0028] In view of this, an embodiment of the present disclosure provides a method for rendering elements in an interface, including determining multiple elements to be rendered in the interface. The method also includes processing a first rendering stage for a first element of the multiple elements by a first thread among multiple threads. The method also includes processing a second rendering stage for the first element by a second thread among multiple threads in response to the first rendering stage for the first element being processed, and processing the first rendering stage for the second element by the first thread. The rendering method according to an embodiment of the present disclosure can split the rendering pipeline in a more fine-grained manner, and flexibly schedule the rendering tasks of sub-nodes, further improving the rendering performance of long lists, realizing parallel rendering of multiple elements, and thus improving the user experience.

[0029] Figure 1B A schematic diagram of process 100b associated with an embodiment of the present disclosure is shown. When an application renders a long list, a difference comparison can be performed using list difference data 106 to determine the difference between the new list and the old list. For example, when a long list is updated (such as adding, deleting, or modifying a list item), the application may not re-render the entire list, but instead determine which list items have changed and perform a partial update on these list items. The application can then determine the position and size of each list item through list layout 108 and determine the layout of the list items on the mobile terminal device.

[0030] The list items are then rendered by the engine thread in the application for rendering. For example, the engine thread may first render list item 0 (118). In the rendering phase 110, the engine thread may perform the rendering function to generate a complete element tree. The element tree is a data structure for representing and storing interface elements. Each node in the long list may represent an element in the interface, such as a button, a text box, an image, etc. The relationships in the element tree may represent the hierarchy, parent-child relationships, and arrangement between elements and one or more child elements in the element.

[0031] In the parsing phase 112, the engine thread can parse the constructed element tree and set the attribute set for each element. For example, the parsed attribute set may include style (such as color, font, margin, etc.), attributes (such as width, height, position), events (such as click, touch), and gestures (such as sliding, zooming, etc.). The engine thread can then process the parsed results again, calculate and adjust the tree structure, and generate a series of corresponding UI operations, such as specific instructions for layout, rendering, etc.

[0032] In the layout phase 114, the engine thread may layout the entire element tree constructed previously. For example, the specific layout of each element is determined based on the element's size, parent element constraints, and other properties. In some embodiments, the layout phase 114 may be the third rendering phase.

[0033] In the drawing phase 116, the engine thread may perform UI operations to draw the interface content onto the screen of the mobile terminal device. After completing the drawing of list item 0, the engine thread may draw list item 1 (120) and repeatedly perform the same or similar operations as in list item 0 (such as the rendering phase 122, the parsing phase 124, the layout phase 126, and the drawing phase 128) to complete the drawing of list item 1 (120). In some embodiments, the drawing phase 116 may be the fourth rendering phase. In some embodiments, there may be a dependency relationship between the layout phase 114 and the drawing phase 116, and they are executed sequentially by the engine thread.

[0034] Next, we will refer to Figures 2 to 9 Exemplary embodiments of the present disclosure are described in detail.

[0035] Figure 2 FIG. 2 shows a schematic flow chart of a method 200 for rendering elements in an interface according to an embodiment of the present disclosure. Figure 2 As shown, in block 210, multiple elements to be rendered in the interface are determined. For example, in some embodiments, the application can determine the data elements (such as text or images) to be rendered read from the database based on the screen size of the mobile terminal device.

[0036] At block 220, a first rendering phase for a first element among the multiple elements is processed by a first thread among the multiple threads. For example, according to some embodiments of the present disclosure, a main thread among the multiple threads in an engine for processing long list content of an application may first perform the first rendering phase on one of the multiple elements to be rendered, such as constructing an element tree between the element and its child elements in the first rendering phase.

[0037] In block 230, in response to the first rendering phase for the first element being processed, the second rendering phase for the first element is processed by a second thread among the multiple threads, and the first rendering phase for the second element is processed by the first thread. In some embodiments, after the main thread completes the first rendering phase of the first element, the main thread can select another thread (secondary thread) in the thread pool to process the subsequent rendering phase of the first element, and the main thread can simultaneously start processing the first rendering phase task of another element. The method implemented by the present disclosure can realize batch rendering of elements in the interface, save rendering time, improve rendering performance, and improve user experience.

[0038] Figure 3 A schematic flow chart of a process 300 for batch rendering elements in an interface according to an embodiment of the present disclosure is shown. Figure 3 The process 300 shown is implemented.

[0039] like Figure 3 As shown, during the batch rendering process, it may not be possible to synchronously obtain the true width and height of each child node, so it is impossible to determine whether the visual space of the screen is filled. Therefore, pre-typesetting or pre-layout can be performed first at 302. For example, the layout anchor position can be determined first based on the difference result. In some embodiments, the list item elements can be pre-layout based on the preset width and height, and the nodes on the electronic device display screen are updated to perform batch rendering, triggering batch rendering of all list items within the visual range. For example, the list item placeholder 0 to the list item placeholder 3 can be determined according to the preset width and height. In some embodiments, the list elements in the list can also be notified after the layout of all nodes in the batch rendering is completed.

[0040] In some embodiments, a unique operation_id may be generated for each list item in this batch rendering, and the operation_id may be determined.<operation_id,List Item> The binding relationship is then stored in the list component cache 304. The determined binding relationship<operation_id,List Item> The component index callback may be passed to the front-end framework 306. The front-end framework 306 may execute a rendering function based on the binding relationship to create an element tree.

[0041] In some embodiments, the long list component can determine the corresponding list item from the mapping based on the created element tree and operation_id to complete the binding, thereby obtaining the real height of each list item. At box 308, after updating the real width and height of all nodes rendered in this batch, the long list can be rearranged by calling the list element interface. In some embodiments, if there is still unfilled visual space in the interface, more list items or child nodes can be triggered to render, for example, item placeholder 4 (310) can be inserted.

[0042] Item placeholder 4 (310) and its associated operation_id can be passed to the list component cache 314 for caching and then passed to the front-end framework 312 for completing the binding of the list item and the placeholder and determining the actual height of the list item 4. In some embodiments, the cached node can be obtained from the list component cache 314 first. If it can be directly obtained, the corresponding element layout information can be directly used. Otherwise, the bound item placeholder rendering node can be re-called.

[0043] It should be understood that front-end framework 306 and front-end framework 312, list component cache 304 and list component cache 314 can be the same or different components, and this disclosure does not impose any limitations on this. At block 316, list item 4 can be laid out on the long list based on its actual height. When the visible space of the interface is filled, each list item or node can be drawn on the device as a platform view 318 through the platform layer API (such as the list item drawing node).

[0044] Figure 4 A schematic diagram of a process 400 for allocating rendering tasks according to an embodiment of the present disclosure is shown. This process can be used to concurrently batch render multiple nodes, thereby improving rendering efficiency. According to an embodiment of the present disclosure, an application can load a template 402, which can have data format, column names, layout, or other setting information. The application can then compare list difference data 404 between the template and the current list data, for example, to detect newly added, deleted, or modified elements. The application can determine the list layout 406 based on the list difference data 404.

[0045] In some embodiments, the engine thread 408 or Tasm thread in the application may execute the first rendering phase for child node 0 or element 0, thereby generating an element tree. After completing the first rendering of child node 0, the engine thread 408 may assign or throw a task to prepare to parse child node 0 to a worker thread 410. The engine thread 408 may simultaneously start executing the first rendering phase for child node 1 or element 1.

[0046] In some embodiments, the worker thread 410 recursively traverses the subtree of the element tree for child node 0 and assigns (multiple) subtasks of parsing attributes for child node 0 to one or more other threads in the thread pool (such as, thread 0 (412), thread 1 (414), and thread 2 (416)) for execution.

[0047] Similarly, in some embodiments, after completing the first rendering of child node 1, the engine thread 408 may assign or throw the task of preparing to parse child node 1 to the worker thread 410, and the engine thread 408 may simultaneously start executing the first rendering phase for child node 2.

[0048] In some embodiments, the worker thread 410 recursively traverses the subtree of the element tree for child node 1 and assigns (multiple) subtasks of parsing attributes for child node 1 to one or more other threads in the thread pool (such as, thread 0 (412), thread 1 (414), and thread 2 (416)) for execution.

[0049] Similarly, in some embodiments, after the first rendering of child node 2 is completed, the engine thread 408 may assign or throw the task of preparing to parse child node 2 to the worker thread 410, and the engine thread 408 may in turn wait for the completion of the work of the worker thread 410.

[0050] In some embodiments, the worker thread 410 recursively traverses the subtree of the element tree for child node 2, and assigns (multiple) subtasks of parsing attributes for child node 2 to one or more other threads in the thread pool (such as, thread 0 (412), thread 1 (414), and thread 2 (416)) for execution.

[0051] In some embodiments, after completing the first rendering phase tasks for child nodes 0 through 2 (e.g., the child nodes in the List begin executing ParallelFlushAsRoot ), the engine thread 408 may serially execute the remaining tasks (reduce tasks) for the child nodes, using the list items as the dimension. In some embodiments, for example, the remaining tasks for child node 0, the remaining tasks for child node 1, and the remaining tasks for child node 2 may have dependencies and thus may be executed sequentially.

[0052] Additionally or alternatively, in some embodiments, the engine thread 408 may sequentially execute the task of parsing the element tree for child node 0, the task of parsing the element tree for child node 1, and the task of parsing the element tree for child node 2. These tasks may also have dependencies and thus may be executed sequentially. Additionally or alternatively, in some embodiments, the engine thread 408 may also sequentially determine the layout for child node 0, the layout for child node 1, and the layout for child node 2. Finally, at block 418, batch rendering is completed.

[0053] In this way, through the method implemented in the present disclosure, the preparation parsing task of the current list item can be initiated asynchronously, and then the thread pool can be used to directly start executing the parsing properties, realizing the asynchronous parsing properties of the subtree, thereby ensuring that the parsing properties of the current list item and the rendering task of the next list item are executed concurrently and in parallel.

[0054] Figure 5 Schematic diagram of a process 500 for assigning tasks to a thread pool according to an embodiment of the present disclosure is shown. According to some embodiments of the present disclosure, each child node in a long list may be stored in a queue form, and a mapping table 502 is provided for mapping child node identifiers (such as 504) and their corresponding tasks.

[0055] In some embodiments, the multiple tasks for list item 0 may include element 0 task 506 (e.g., image processing task), element 1 task 508 (e.g., image processing task), and element 2 task 510 (e.g., text processing task). After these multiple tasks are determined, these tasks can be asynchronously assigned or thrown into one or more threads in the thread pool 512 for concurrent loop execution, thereby maximizing the efficiency of task processing. For example, in some embodiments, the engine thread can traverse and check other threads in the multiple threads to determine an idle thread in the multiple threads. Subsequently, the engine thread can assign one or more subtasks in the tasks of multiple rendering stages to the idle thread.

[0056] Additionally or alternatively, in some embodiments, when the engine thread determines that a task has timed out (e.g., occupying the main thread for too long) and that the task has consumed more time than a predetermined threshold, the task can be processed by another thread in the plurality of threads without blocking the engine thread. In some embodiments, the results can also be collected after the task is executed and returned to the calling thread to ensure the correctness and integrity of the data.

[0057] Figure 6A schematic diagram of a process 600 for executing tasks by an engine thread according to an embodiment of the present disclosure is shown. In some embodiments, when the engine thread is idle, the engine thread can detect the thread state of the processing task. In some embodiments, at block 604, the engine thread can determine that a thread in the thread pool has completed the parsing task 602 for element 0. At block 606, the engine thread can continue to execute subsequent remaining tasks based on the result of the parsing task 602.

[0058] In some embodiments, at block 610 , the engine thread may determine that a thread in the thread pool is executing the parsing task 608 for element 1. At block 612 , the engine thread may wait for the result of the parsing task 608 and continue to execute subsequent remaining tasks based on the result.

[0059] In some embodiments, at block 616, the engine thread may determine that a thread in the thread pool has not yet started executing the parsing task 614 for element 2. The engine thread may then directly start executing the parsing task 614 for element 2. At block 618, the engine thread may continue executing the remaining tasks based on this result. In this way, the engine thread can remain busy and avoid being idle while waiting for tasks to complete, thereby ensuring load balancing of the thread pool and improving overall operational efficiency.

[0060] Figure 7 FIG. 7 is a schematic diagram showing a process 700 for splitting tasks according to an embodiment of the present disclosure. Figure 7 As shown in the reference Figures 2 to 6 The engine thread 702 after the described process can further split the tasks in its thread. For example, in some embodiments, the engine thread 702 can split the remaining task of parsing child node 0 into a parsing element tree task 704 for child node 0 and assign it to thread 0 712 in the thread pool for asynchronous execution.

[0061] In some embodiments, the engine thread 702 may split the remaining parsing task for child node 1 into a parsing element tree task 706 for child node 1 and assign the task to thread 1 717 in the thread pool for asynchronous execution.

[0062] In some embodiments, the engine thread 702 may further split the remaining parsing tasks for child node 2 into a parse element tree task 708 for child node 2 and assign the task to thread 2 716 in the thread pool for asynchronous execution. In some embodiments, the remaining tasks that must be returned to the engine thread 702 for serial execution may also be collected. In some embodiments, a dependency relationship may exist—the parse element tree task must wait for the completion of the parse attribute task.

[0063] In some embodiments, after the task of parsing the element tree of all list items rendered in a batch is completed, the remaining tasks can be serially executed in the engine thread 702 based on the list items.

[0064] The above reference figures 1 to Figure 7 The described exemplary embodiment provides a method for rendering elements in an interface. Compared to the rendering idea of ​​the previous implementation in which the rendering of a single sub-node is the smallest sub-task, the method implemented by the present disclosure can determine the index of the node that should be rendered on the first screen through pre-typesetting, thereby achieving batch rendering. The method implemented by the present disclosure can also further split the rendering tasks of a single node in the list, and combined with the independence of the rendering tasks of the sub-nodes of the list, the tasks without dependencies can be fully executed concurrently through the thread pool capability, and the scheduling of those tasks with dependencies can be completed in the engine thread, further improving the list rendering performance. Figure 8 FIG. 8 is a schematic block diagram of an apparatus 800 for rendering elements in an interface according to an embodiment of the present disclosure. The apparatus 800 may be used to implement reference Figures 1A to 7 Describe the method or steps.

[0065] like Figure 8 As shown, the apparatus 800 includes: a determining unit 810 configured to determine a plurality of elements to be rendered in the interface; a first processing unit 820 configured to process a first rendering phase for a first element of the plurality of elements via a first thread among a plurality of threads; and a second processing unit 830 configured to process a second rendering phase for the first element via a second thread among the plurality of threads in response to completion of the first rendering phase for the first element, and to process the first rendering phase for the second element via the first thread.

[0066] In some embodiments, multiple rendering stages for multiple elements include: a first rendering stage for generating an element tree for the elements; a second rendering stage for parsing attributes of the element tree; a third rendering stage for determining the layout of the interface based on the parsed attributes of the element tree; and a fourth rendering stage for drawing the elements on the interface based on the layout.

[0067] In some embodiments, the first processing unit 820 is configured to, in response to the second rendering stage for the first element being processed to completion and the second rendering stage for the second element being processed to completion, sequentially process the third rendering stage for the first element and the third rendering stage for the second element by the first thread.

[0068] In some embodiments, the second processing unit 830 is configured to process the second rendering stage for the first element through the second thread among the multiple threads, including, in response to the first thread determining that the processing of the first rendering stage of the first element is completed, assigning the task of starting processing the second rendering stage of the first element to the second thread by the first thread.

[0069] In some embodiments, the first processing unit 820 is configured to process the fourth rendering stage for the first element and the fourth rendering stage for the second element in sequence by the first thread, and there is a dependency relationship between the third rendering stage and the fourth rendering stage.

[0070] In some embodiments, the first processing unit 820 is configured to, during processing of the multiple rendering stages for the first element, have the first thread traverse and check other threads in the multiple threads to determine an idle thread in the multiple threads; and have the first thread assign one or more subtasks of the tasks of the multiple rendering stages to the idle thread.

[0071] In some embodiments, the first processing unit 820 is configured to, in response to the thread processing completing the one or more tasks, have the first thread process subsequent tasks associated with the one or more tasks; in response to the thread processing not yet starting to process the one or more tasks and the first thread is in an idle state, have the first thread process the one or more tasks; and in response to the thread being processing the one or more tasks, have the first thread wait for the processing of the one or more tasks to be completed.

[0072] In some embodiments, the first processing unit 820 is configured to determine a timed-out task whose time consumption exceeds a predetermined threshold among the tasks; and distribute the timed-out task to the plurality of threads by the first thread.

[0073] In some embodiments, the determining unit 810 is configured to determine the multiple elements to be rendered by pre-layouting the interface; and determine the multiple elements to be rendered by re-layouting the interface in response to the presence of blank areas in the interface.

[0074] In some embodiments, the interface includes a long list, and wherein the element is a list item in the long list; the element includes one or more of text, image, and video.

[0075] Figure 9A schematic block diagram of an example device 900 that can be used to implement an embodiment of the present disclosure is shown. As shown, the device 900 includes a computing unit (CPU) 901, which can perform various appropriate actions and processes according to computer program instructions stored in a read-only memory (ROM) 902 or loaded from a storage unit 906 into a random access memory (RAM) 903. In the RAM 903, various programs and data required for the operation of the device 900 can also be stored. The computing unit 901, the ROM 902, and the RAM 903 are connected to each other via a bus 904. An input / output (I / O) interface 905 is also connected to the bus 904.

[0076] Various components in the device 900 are connected to the I / O interface 905, including an input unit 906, such as a keyboard, a mouse, etc.; an output unit 907, such as various types of displays, speakers, etc.; a storage unit 908, such as a magnetic disk, an optical disk, etc.; and a communication unit 909, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 909 allows the device 900 to exchange information / data with other devices via a computer network such as the Internet and / or various telecommunication networks.

[0077] The computing unit 901 can be a variety of general-purpose and / or specialized processing components with processing and computing capabilities. Some examples of the computing unit 901 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units that run machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The computing unit 901 performs the various methods and processes described above, such as method 200. For example, in some embodiments, method 200 can be implemented as a computer software program that is tangibly contained in a machine-readable medium, such as a storage unit 908. In some embodiments, part or all of the computer program can be loaded and / or installed on the device 900 via the ROM 902 and / or the communication unit 909. When the computer program is loaded into the RAM 903 and executed by the computing unit 901, one or more steps of the method 200 described above can be performed. Alternatively, in other embodiments, the computing unit 901 can be configured to perform the method 200 in any other appropriate manner (e.g., by means of firmware).

[0078] In some embodiments, the methods and processes described above may be implemented as a computer program product. The computer program product may include a computer-readable storage medium carrying computer-readable program instructions for executing various aspects of the present disclosure.

[0079] A computer-readable storage medium can be a tangible device that can hold and store instructions for use by an instruction execution device. A computer-readable storage medium can be, for example, but not limited to, an electrical storage device, a magnetic storage device, an optical storage device, an electromagnetic storage device, a semiconductor storage device, or any suitable combination thereof. More specific examples (a non-exhaustive list) of computer-readable storage media include: a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a static random access memory (SRAM), a portable compact disc read-only memory (CD-ROM), a digital versatile disk (DVD), a memory stick, a floppy disk, a mechanical encoding device, such as a punch card or a raised structure in a groove on which instructions are stored, and any suitable combination thereof. As used herein, a computer-readable storage medium is not to be construed as a transient signal per se, such as a radio wave or other freely propagating electromagnetic wave, an electromagnetic wave propagating through a waveguide or other transmission medium (e.g., a light pulse through a fiber optic cable), or an electrical signal transmitted through an electrical wire.

[0080] The computer-readable program instructions described herein can be downloaded from a computer-readable storage medium to each computing / processing device, or downloaded to an external computer or external storage device via a network, such as the Internet, a local area network, a wide area network, and / or a wireless network. The network can include copper transmission cables, optical fiber transmission, wireless transmission, routers, firewalls, switches, gateway computers, and / or edge servers. The network adapter card or network interface in each computing / processing device receives the computer-readable program instructions from the network and forwards the computer-readable program instructions to be stored in the computer-readable storage medium in each computing / processing device.

[0081] The computer program instructions for performing the disclosed operation can be assembly instructions, instruction set architecture (ISA) instructions, machine instructions, machine-related instructions, microcode, firmware instructions, state setting data or source code or the object code written in any combination of one or more programming languages, wherein the programming languages ​​include object-oriented programming languages, and conventional procedural programming languages.Computer-readable program instructions can be performed completely on the user's computer, partially on the user's computer, performed as an independent software package, partly on the user's computer and partly on a remote computer, or performed completely on a remote computer or server. In the case of a remote computer, the remote computer can be connected to the user's computer by any type of network-including local area network (LAN) or wide area network (WAN), or can be connected to an external computer (such as utilizing an Internet service provider to connect by the Internet). In certain embodiments, by utilizing the state information of computer-readable program instructions to carry out personalized customization electronic circuits, such as programmable logic circuits, field programmable gate arrays (FPGAs) or programmable logic arrays (PLA), this electronic circuit can perform computer-readable program instructions, thereby realizing various aspects of the present disclosure.

[0082] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing device, thereby producing a machine such that when these instructions are executed by the processing unit of the computer or other programmable data processing device, a device is generated that implements the functions / actions specified in one or more blocks in the flowchart and / or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium, where these instructions cause the computer, programmable data processing device, and / or other device to operate in a specific manner. Thus, the computer-readable medium storing the instructions comprises an article of manufacture that includes instructions for implementing various aspects of the functions / actions specified in one or more blocks in the flowchart and / or block diagram.

[0083] Computer-readable program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other device so that a series of operational steps are performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions executed on the computer, other programmable data processing apparatus, or other device to implement the functions / actions specified in one or more blocks in the flowchart and / or block diagram.

[0084] The flow charts and block diagrams in the accompanying drawings show the possible architecture, functions and operations of the devices, methods and computer program products according to multiple embodiments of the present disclosure. In this regard, each box in the flow chart or block diagram can represent a part of a module, program segment or instruction, and the part of the module, program segment or instruction contains one or more executable instructions for realizing the prescribed logical function. In some alternative implementations, the functions marked in the box can also occur in a sequence different from that marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart, can be implemented by a dedicated hardware-based system that performs the prescribed function or action, or can be implemented by a combination of dedicated hardware and computer instructions.

[0085] While various embodiments of the present disclosure have been described above, the foregoing description is intended to be illustrative, non-exhaustive, and not limited to the disclosed embodiments. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described embodiments. The terminology used herein is selected to best explain the principles of the embodiments, their practical applications, or technical improvements to existing technologies, or to enable others skilled in the art to understand the embodiments disclosed herein.

Claims

1. A method for rendering an element in an interface, comprising: Determining a plurality of elements to be rendered in the interface; Processing, by a first thread among the plurality of threads, a first rendering phase for a first element among the plurality of elements, wherein the first rendering phase is used to generate an element tree for the element; In response to the first rendering phase for the first element being completed, processing a second rendering phase for the first element by a second thread among the plurality of threads, and processing the first rendering phase for the second element by the first thread, wherein the second rendering phase is used to parse attributes of the element tree; and The interface includes a long list, and the element is a list item in the long list.

2. The method of claim 1 , wherein the plurality of rendering stages for the plurality of elements comprises: a third rendering phase for determining a layout of the interface based on the parsed attributes of the element tree; as well as A fourth rendering stage is used to draw the element on the interface based on the layout.

3. The method according to claim 2, further comprising: In response to the second rendering stage for the first element being completed and the second rendering stage for the second element being completed, the first thread sequentially processes the third rendering stage for the first element and the third rendering stage for the second element.

4. The method of claim 1 , wherein processing the second rendering phase for the first element by the second thread among the plurality of threads comprises: In response to the first thread determining that processing of the first rendering stage of the first element is completed, the first thread assigns a task of starting processing a second rendering stage of the first element to the second thread.

5. The method according to claim 2, further comprising: The first thread sequentially processes the fourth rendering stage for the first element and the fourth rendering stage for the second element, wherein a dependency relationship exists between the third rendering stage and the fourth rendering stage.

6. The method according to claim 1, further comprising: During processing of a plurality of rendering stages for the first element, the first thread traverses and checks other threads in the plurality of threads to determine an idle thread in the plurality of threads; as well as The first thread allocates one or more subtasks of the tasks in the multiple rendering stages to the idle thread.

7. The method according to claim 6, further comprising: In response to the thread processing completing the one or more tasks, processing subsequent tasks associated with the one or more tasks by the first thread; In response to the thread processing not yet starting to process the one or more tasks and the first thread being in an idle state, processing the one or more tasks by the first thread; as well as In response to the thread processing the one or more tasks, the first thread waits for completion of processing of the one or more tasks.

8. The method according to claim 1, further comprising: Identify timed tasks where the time consumption in the task exceeds a predetermined threshold; as well as The first thread distributes the timeout task to the multiple threads.

9. The method of claim 1 , wherein determining a plurality of elements to be rendered in the interface comprises: Determining the multiple elements to be rendered by pre-layouting the interface; as well as In response to a blank area existing in the interface, the plurality of elements to be rendered are determined by rearranging the interface.

10. The method according to claim 1, wherein the element comprises one or more of text, image, and video.

11. A device for rendering elements in an interface, comprising: a determining unit, configured to determine a plurality of elements to be rendered in the interface; a first processing unit configured to process a first rendering phase for a first element of the plurality of elements through a first thread of the plurality of threads, wherein the first rendering phase is used to generate an element tree for the element; a second processing unit configured to, in response to the first rendering phase for the first element being completed, process a second rendering phase for the first element through a second thread among the plurality of threads, and process the first rendering phase for the second element through the first thread, wherein the second rendering phase is used to parse attributes of the element tree; and The interface includes a long list, and the element is a list item in the long list.

12. A computing device comprising: at least one processing unit; At least one memory coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions, when executed by the at least one processing unit, causing the computing device to perform the method of any one of claims 1 to 10.

13. A computer storage medium comprising machine-executable instructions which, when executed by a device, cause the device to perform the method of any one of claims 1 to 10.

14. A computer program product comprising machine-executable instructions which, when executed by a device, cause the device to perform the method according to any one of claims 1 to 10.

Images