Method and device for rendering elements in interface, equipment and medium

Abstract

The invention provides a method and device for rendering elements in an interface, computing equipment, a computer storage medium and a computer program product. The method comprises the following steps: determining a plurality of elements to be rendered in an interface; processing, by a first thread of the 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 completely, processing a second rendering stage for the first element through a second thread of the plurality of threads, and processing the first rendering stage for the second element through the first thread.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and more specifically, 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. As the core of user interface graphics display, rendering technology affects user experience, application performance and device resource consumption. Due to the limitations of device performance, rendering technology is very important.

[0003] Long lists can be used to display large amounts of data on electronic devices, such as an uninterrupted stream of information. Long lists can load and render data in the page according to user needs, thereby effectively reducing the initialization loading time of the application and increasing the startup speed of the application. 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, including determining a plurality of elements to be rendered in the interface. The method further includes processing a first rendering stage for a first element of the plurality of elements by a first thread among a plurality of threads. The method further includes processing a second rendering stage for the first element by a second thread among a plurality of threads in response to the first rendering stage for the first element being processed to completion, and processing the first rendering stage for the second element by the first thread.

[0006] According to a second aspect of the present disclosure, there is provided a device for rendering elements in an interface, comprising: a determination unit configured to determine a plurality of elements to be rendered in the interface. The device further comprises a first processing unit configured to process a first rendering stage for a first element of the plurality of elements through a first thread among a plurality of threads. The device further comprises a second processing unit configured to process a second rendering stage for the first element through a second thread among a plurality of threads in response to the first rendering stage for the first element being processed to completion, and to process the first rendering stage 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, wherein the at least one memory is coupled to the at least one processing unit and stores instructions for execution by the at least one processing unit, wherein the instructions, when executed by the at least one processing unit, enable 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 as described in 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 as described in the first aspect of the present disclosure.

[0010] It should be understood that the invention summary 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 easily 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 easily understood through the following detailed description with reference to the accompanying drawings. In the accompanying drawings, various embodiments of the present disclosure will be described in an exemplary and non-limiting manner, in which:

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

[0013] Figure 1B A schematic diagram showing 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 showing a process for allocating rendering tasks according to an embodiment of the present disclosure is shown;

[0017] Figure 5 A schematic diagram showing 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 showing 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 showing a process for splitting tasks according to an embodiment of the present disclosure is shown;

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

[0021] Fig. 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] Embodiments of the present disclosure will be described in more detail below 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 being limited to the embodiments described herein, which are instead provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes 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. may refer to different or the same objects, unless explicitly stated. Other explicit and implicit definitions may also be included below.

[0025] The basic principle and implementation of the present disclosure will be described with reference to the accompanying drawings. It should be understood that the exemplary embodiments given are only 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 FIG. 1 is a schematic diagram of an environment 100a in which various embodiments of the present disclosure can be implemented. Figure 1A In the environment 100a shown, when the user opens the application through the electronic device 102, the application can load data from the 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 scenes, 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 names, prices, descriptions, etc. Some sub-nodes can include nearby takeaway restaurant information. 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 content to be displayed next based on the current scroll position, thereby displaying more sub-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 sub-nodes on the screen, which may cause excessively long loading time, slow rendering efficiency, and 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, in response to the first rendering stage for the first element being processed to completion, processing a second rendering stage for the first element by a second thread among multiple threads, 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, and realizing parallel rendering of multiple elements, thereby improving the user experience.

[0029] Figure 1B A schematic diagram of a 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 through the 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 list items), the application may not re-render the entire list, but instead determine which list items have changed and locally update these list items. The application can then determine the position and size of each list item through the list layout 108 and determine the layout of the list items on the mobile terminal device.

[0030] The list items are then rendered by an engine thread for rendering in the application. For example, the engine thread may first render list item 0 (118). In the rendering phase 110, the engine thread may perform a 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 an element and one or more child elements in the element.

[0031] In the parsing stage 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 before the layout. For example, the specific layout of each element is determined based on the size of the element, the constraints of the parent element, and other attributes. In some embodiments, the layout phase 114 may be the third rendering phase.

[0033] In the drawing stage 116, the engine thread can perform UI operations to draw the interface content on the screen of the mobile terminal device. After completing the drawing of list item 0, the engine thread can draw list item 1 (120), and repeat the same or similar operations as in list item 0 (such as rendering stage 122, parsing stage 124, layout stage 126, and drawing stage 128) to complete the drawing of list item 1 (120). In some embodiments, the drawing stage 116 can be the fourth rendering stage. In some embodiments, there can be a dependency relationship between the layout stage 114 and the drawing stage 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 is 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] In 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 multiple threads in an engine for processing long list content of an application may first process an element among the multiple elements to be rendered in the first rendering phase, for example, constructing an element tree between the element and its child elements in the first rendering phase.

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

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

[0039] like Figure 3 As shown, during the batch rendering process, the real width and height of each child node may not be obtained synchronously, so it is impossible to determine whether the visible space of the screen is filled. Therefore, pre-typesetting or pre-layout can be performed first at 302. For example, the layout anchor point position can be determined based on the difference result first. 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 visible 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 rendered in batch is completed.

[0040] In some embodiments, a unique operation_id may be generated for each list item in the 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 visible 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] The item placeholder 4 (310) and the operation_id associated therewith may 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 real height of the list item 4. In some embodiments, the cached nodes may be obtained from the list component cache 314 first, and if they can be obtained directly, the corresponding element layout information may be used directly, otherwise the bound item placeholder rendering node may be re-invoked.

[0043] It should be understood that the front-end framework 306 and the front-end framework 312, the list component cache 304 and the list component cache 314 can be the same or different components, and the present disclosure does not impose any limitation on this. At box 316, the list item 4 can be laid out on the long list based on the real 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, 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. The 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, and the template can have data format, column name, layout or other setting information. The application can then compare list difference data 404 between the template and the current list data, such as detecting newly added, deleted or modified elements. The application can determine a list layout 406 based on the list difference data 404.

[0045] In some embodiments, the engine thread 408 or Tasm thread in the application can perform the first rendering stage on the child node 0 or element 0, thereby generating an element tree. After the first rendering of the child node 0 is completed. The engine thread 408 can assign or throw the task of preparing to parse the child node 0 to the worker thread 410, and the engine thread 408 can simultaneously turn to start performing the first rendering stage on the 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 distributes (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 the first rendering of child node 1 is completed, 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 to perform the first rendering phase on 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 the child node 2 is completed, the engine thread 408 may assign or throw the task of preparing to parse the child node 2 to the worker thread 410, and the engine thread 408 may in turn wait for the work of the worker thread 410 to be completed.

[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 the first rendering stage tasks for child nodes 0 to 2 are completed (for example, the child nodes in List begin to execute ParallelFlushAsRoot), the engine thread 408 may serially execute the remaining tasks (reduce tasks) for the child nodes based on the list items. In some embodiments, for example, there may be a dependency relationship between the remaining tasks for child node 0, the remaining tasks for child node 1, and the remaining tasks for child node 2, and thus they may be executed sequentially.

[0052] Additionally or alternatively, in some embodiments, the engine thread 408 may sequentially execute the parsing element tree task for child node 0, the parsing element tree task for child node 1, and the parsing element tree task for child node 2. There may also be dependencies between these tasks, so they can 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 box 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 attributes, thereby realizing the asynchronous parsing attributes of the subtree, thereby ensuring that the parsing attributes of the current list item and the rendering task of the next list item are executed concurrently in parallel.

[0054] Figure 5 A 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 exists 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 can determine that a time-consuming task in a task exceeds a predetermined threshold (for example, the main thread is occupied for too long), the task can be processed by other threads in the multiple 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 a task 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 to execute the parsing task 614 for element 2, and the engine thread may directly start to execute the parsing task 614 for element 2. At block 618, the engine thread may continue to execute the subsequent remaining tasks based on the result. In this way, the engine thread can remain busy and avoid being idle due to waiting for the task to be completed, thereby ensuring the load balancing of the thread pool and improving the overall operating efficiency.

[0060] Figure 7 FIG. 7 is a schematic diagram of a process 700 for splitting tasks according to an embodiment of the present disclosure. Figure 7 As shown in 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 parsing tasks for child node 0 into the 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 distribute the task to thread 1 717 in the thread pool for asynchronous execution.

[0062] In some embodiments, the engine thread 702 may also split the remaining tasks of parsing the child node 2 into the parsing element tree task 708 for the child node 2 and assign it to the 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, there may be a dependency relationship - the parsing element tree task should wait for the execution of the parsing attribute task to end.

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

[0064] The above referenced Figures 1 to Figure 7 The described exemplary embodiment provides a method for rendering elements in an interface. Compared to the rendering idea of ​​using single sub-node rendering as the smallest sub-task in previous implementations, the method implemented in the present disclosure can achieve batch rendering by pre-layout, thereby determining the index of the node that should be rendered on the first screen. The method implemented in 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 capabilities, 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 device 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 stage for a first element of the plurality of elements through a first thread among a plurality of threads; and a second processing unit 830, configured to process a second rendering stage for the first element through a second thread among the plurality of threads in response to the first rendering stage for the first element being processed and completed, and process the first rendering stage for the second element through 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 attributes of the parsed 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, have the first thread sequentially process the third rendering stage for the first element and the third rendering stage for the second element.

[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 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 being 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-laying out the interface; and determine the multiple elements to be rendered by re-laying out the interface in response to the presence of a blank area 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] Fig. 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] A number of 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 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 through a computer network such as the Internet and / or various telecommunication networks.

[0077] The computing unit 901 may be a variety of general and / or special 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 running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 901 performs the various methods and processes described above, such as method 200. For example, in some embodiments, method 200 may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 908. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 900 via ROM 902 and / or communication unit 909. When the computer program is loaded into RAM 903 and executed by the computing unit 901, one or more steps of the method 200 described above may be performed. Alternatively, in other embodiments, the computing unit 901 may be configured to perform 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 may be a tangible device that can hold and store instructions used by an instruction execution device. A computer-readable storage medium may 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 of the foregoing. More specific examples of computer-readable storage media (a non-exhaustive list) 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 disk 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 of the foregoing. As used herein, a computer-readable storage medium is not to be interpreted 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 a 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 transmissions, wireless transmissions, 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 for storage in the computer-readable storage medium in each computing / processing device.

[0081] The computer program instructions for performing the disclosed operation may be assembler instructions, instruction set architecture (ISA) instructions, machine instructions, machine-related instructions, microcode, firmware instructions, state setting data, or source code or object code written in any combination of one or more programming languages, including object-oriented programming languages, and conventional procedural programming languages. Computer-readable program instructions may be executed completely on a user's computer, partially on a user's computer, executed as an independent software package, partially on a user's computer, partially on a remote computer, or completely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., utilizing an Internet service provider to connect via the Internet). In certain embodiments, by utilizing the state information of a computer-readable program instruction to customize an electronic circuit, such as a programmable logic circuit, a field programmable gate array (FPGA), or a programmable logic array (PLA), the electronic circuit may execute a computer-readable program instruction, 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, so that when these instructions are executed by the processing unit of the computer or other programmable data processing device, a device that implements the functions / actions specified in one or more boxes in the flowchart and / or block diagram is generated. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause the computer, programmable data processing device, and / or other equipment to work in a specific manner, so that the computer-readable medium storing the instructions includes a manufactured product, which includes instructions for implementing various aspects of the functions / actions specified in one or more boxes 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 operating 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 boxes in the flowchart and / or block diagram.

[0084] The flow chart and block diagram in the accompanying drawings show the possible architecture, function and operation of the equipment, method and computer program product according to multiple embodiments of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a part of a module, program segment or instruction, and a part of the module, program segment or instruction includes one or more executable instructions for realizing the specified logical function. In some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two continuous square 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 square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or action, or can be implemented with a combination of special hardware and computer instructions.

[0085] The embodiments of the present disclosure have been described above, and the above description is exemplary, not exhaustive, and is not limited to the disclosed embodiments. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The choice of terms used herein is intended to best explain the principles of the embodiments, practical applications, or technical improvements to the technology in the market, or to enable other persons of ordinary skill 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 of the plurality of threads, a first rendering phase for a first element of the plurality of elements; as well as In response to the first rendering stage for the first element being processed to completion, the second rendering stage for the first element is processed by a second thread among the plurality of threads, and the first rendering stage for the second element is processed by the first thread.

2. The method of claim 1, wherein the plurality of rendering stages for the plurality of elements comprises: A first rendering stage for generating an element tree for an element; A second rendering phase for parsing attributes of the element tree; 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 processed to completion and the second rendering stage for the second element being processed to completion, 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 according to claim 1, wherein processing the second rendering stage 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 of a second rendering stage of the first element to the second thread.

5. The method according to claim 4, further comprising: The fourth rendering stage for the first element and the fourth rendering stage for the second element are sequentially processed by the first thread, and there is a dependency relationship between the third rendering stage and the fourth rendering stage.

6. The method according to claim 1, further comprising: During processing of the 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 of the multiple rendering stages to the idle thread.

7. The method according to claim 6, further comprising: In response to 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 starting to process the one or more tasks and the first thread is 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 the processing of the one or more tasks to be completed.

8. The method according to claim 1, further comprising: Determine time-out tasks in which the time consumption in the tasks 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 of claim 1, wherein the interface comprises a long list, and wherein the element is a list item in the long list; and The element includes 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 among the plurality of elements through a first thread among the plurality of threads; as well as The second processing unit is configured to process the second rendering stage for the first element through a second thread among the multiple threads in response to the first rendering stage for the first element being processed and completed, and process the first rendering stage for the second element through the first thread.

12. A computing device comprising: at least one processing unit; 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 perform the method as claimed in 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 of any one of claims 1 to 10.

Images