Page rendering method and device

Abstract

The present application provides a page rendering method and apparatus; the method includes: obtaining page element data of a target application; determining rendering data corresponding to at least one page element to be updated in the target application based on the page element data, and obtaining rendering parameters of each page element to be updated; determining the image color blocks to which each page element to be updated belongs, where the image color blocks have a one-to-one correspondence with the view hierarchy in the page to be displayed; for each view hierarchy of the page to be displayed, taking the image color blocks as rendering units, and respectively rendering the page elements to be updated in each image color block based on the rendering data and the rendering parameters, so as to display the page to be displayed. Through the present application, the page optimization process can be simplified, and the loading efficiency of the page to be updated can be improved.

Description

Technical Field

[0001] This application relates to Internet technologies, and in particular, to a page rendering method and apparatus. Background Art

[0002] With the rapid development of the Internet, especially mobile Internet, pages, as carriers for information to be displayed, have been widely used. Due to the diversification of information, in the page display scenario, usually the page state or data changes in real time, which involves the display after page updates. In the prior art, page lags sometimes occur during the display of updated pages. Different operating systems perform targeted optimizations for page lags that occur on different platforms (Android and iOS). However, such optimizations are only limited to the business level. For example, in a page, multiple interfaces need to be requested, and the whole page is refreshed after the data of each interface is returned. The optimized refresh is changed to partial refresh based on page controls. However, such a partial refresh method based on page controls makes the page optimization process rather cumbersome, resulting in low loading efficiency when displaying the page to be updated. Summary of the Invention

[0003] Embodiments of this application provide a page rendering method, apparatus, device, computer-readable storage medium, and computer program product, which can simplify the page optimization process and improve the loading efficiency of the page to be updated.

[0004] The technical solution of the embodiments of this application is implemented as follows:

[0005] Embodiments of this application provide a page rendering method, including:

[0006] Obtain the page element data of a target application;

[0007] Based on the page element data, determine the rendering data corresponding to at least one page element to be updated in the target application, and obtain the rendering parameters of each page element to be updated;

[0008] Determine the image color blocks to which each page element to be updated belongs, where the image color blocks have a one-to-one correspondence with the view hierarchy in the page to be displayed;

[0009] For each view hierarchy of the page to be displayed, using the image color blocks as the rendering units, based on the rendering data and the rendering parameters, render the page elements to be updated in each image color block respectively to display the page to be displayed.

[0010] Embodiments of this application provide a page rendering apparatus, including:

[0011] A first acquisition module, configured to obtain the page element data of a target application;

[0012] A second acquisition module, configured to determine rendering data corresponding to at least one page element to be updated in the target application based on the page element data, and acquire rendering parameters of each page element to be updated;

[0013] A determination module, configured to determine an image color block to which each page element to be updated belongs, where the image color block has a one-to-one correspondence with the view hierarchy in the page to be displayed;

[0014] A rendering module, configured to, for each view hierarchy of the page to be displayed, use the image color block as a rendering unit, and based on the rendering data and the rendering parameters, respectively render the page elements to be updated in each image color block, so as to display the page to be displayed.

[0015] In the above solution, the second acquisition module is further configured to parse the page element data to obtain a tree structure of the page to be displayed; start traversing from the root node of the tree structure to determine a node corresponding to a page element to be updated in the target application; for each node corresponding to a page element to be updated, determine attribute data of at least two attribute dimensions corresponding to the node as the rendering data.

[0016] In the above solution, the second acquisition module is further configured to acquire an element identifier of each page element to be updated in the target application; start traversing from the root node of the tree structure, and during the traversing process, match the element identifier with a node identifier of a node in the tree structure to obtain a matching result; when the matching result indicates a successful match, use the corresponding node as the node corresponding to the page element to be updated.

[0017] In the above solution, the second acquisition module is further configured to acquire an element identifier of each page element to be updated in the target application; according to the element identifier, for each page element to be updated, acquire rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension.

[0018] In the above solution, the determination module is further configured to determine a view hierarchy in which each page element to be updated is located, and an image color block corresponding to each view hierarchy; for each view hierarchy, determine the page element to be updated in the view hierarchy as belonging to the image color block corresponding to the view hierarchy.

[0019] In the above solution, the rendering module is further configured to create a first rendering thread; for each view level of the page to be displayed, through the first rendering thread, using the image color block as the rendering unit, render the page elements to be updated in the image color block; the rendering module is further configured to obtain the rendering data and rendering parameters of the page elements that do not need to be updated in the page to be displayed; create a second rendering thread; and based on the rendering data and rendering parameters of the page elements that do not need to be updated, through the second rendering thread, render the page elements that do not need to be updated in the page to be displayed.

[0020] In the above solution, the device further includes a display module, and the display module is configured to determine a first time corresponding to the completion of the rendering of the page elements to be updated by the first rendering thread, and a second time corresponding to the completion of the rendering of the page elements that do not need to be updated by the second rendering thread; determine the page display time based on the time sequence of the first time and the second time; and display the page to be displayed based on the page display time.

[0021] In the above solution, the device further includes a monitoring module, and the monitoring module is configured to, when detecting the rendering completion signal sent by the first rendering thread, determine the reception time as the first time; and when detecting the rendering completion signal sent by the second rendering thread, determine the reception time as the second time.

[0022] In the above solution, the device further includes a reuse module, and the reuse module is configured to receive a page switching instruction for the target application, where the page switching instruction is used to indicate switching from the page to be displayed to the target page; in response to the page switching instruction, determine the image color blocks corresponding to the view levels of the target page; when there are image color blocks in the target page that are the same as those in the page to be displayed, reuse the same image color blocks, and perform page rendering based on the reused image color blocks to display the target page.

[0023] An embodiment of the present application provides a device, including:

[0024] A memory for storing executable instructions;

[0025] A processor, when executing the executable instructions stored in the memory, implements the page rendering method provided by the embodiment of the present application.

[0026] An embodiment of the present application provides a computer-readable storage medium storing executable instructions, which are used to cause a processor to implement the page rendering method provided by the embodiment of the present application when executed.

[0027] An embodiment of the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the page rendering method provided by the embodiment of the present application.

[0028] The embodiment of the present application has the following beneficial effects:

[0029] During the process of rendering a page, for each view hierarchy of the page to be displayed, by obtaining the rendering parameters and rendering data corresponding to the page elements to be updated that belong to the same image color block in the page to be displayed, the page elements to be updated in each image color block are respectively rendered, and then the page to be displayed is displayed. In this way, when there are multiple page elements to be updated in an image color block, taking the image color block as the rendering unit, these multiple page elements to be updated can be rendered as a whole, effectively simplifying the process of rendering the page and improving the loading efficiency of the page to be updated. Description of the Drawings

[0030] Figure 1 is an optional schematic structural diagram of a page rendering system 100 provided by an embodiment of the present application;

[0031] Figure 2 is a schematic structural diagram of an electronic device provided by an embodiment of the present application;

[0032] Figure 3 is a schematic flowchart of a page rendering method provided by an embodiment of the present application;

[0033] Figure 4 is an optional schematic diagram of an application scenario of a page rendering method provided by an embodiment of the present application;

[0034] Figure 5 is an optional flowchart of a page rendering method provided by an embodiment of the present application;

[0035] Figure 6 is an optional flowchart of determining the rendering data corresponding to the page elements to be updated provided by an embodiment of the present application;

[0036] Figure 7 is an optional schematic diagram of XML data parsing in a page rendering method provided by an embodiment of the present application;

[0037] Figure 8 is an optional schematic diagram of data format conversion in a page rendering method provided by an embodiment of the present application;

[0038] Figure 9 is an optional schematic diagram of image color block determination in a page rendering method provided by an embodiment of the present application;

[0039] Figure 10It is an optional process schematic diagram for rendering page elements that do not need to be updated provided by an embodiment of the present application;

[0040] Figure 11 It is an optional process schematic diagram of the page rendering method provided by an embodiment of the present application;

[0041] Figure 12 It is an optional process schematic diagram of the page rendering method provided by an embodiment of the present application;

[0042] Figure 13 It is an optional process schematic diagram of the page rendering method provided by an embodiment of the present application;

[0043] Figure 14 It is an optional process schematic diagram of the page rendering method provided by an embodiment of the present application. Detailed implementation manners

[0044] In order to make the objectives, technical solutions and advantages of the present application clearer, the present application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be construed as limitations on the present application. All other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the scope of protection of the present application.

[0045] In the following description, reference is made to "some embodiments", which describe a subset of all possible embodiments. However, it can be understood that "some embodiments" can be the same subset or different subsets of all possible embodiments, and can be combined with each other without conflict.

[0046] In the following description, the terms "first / second / third" are only used to distinguish similar objects and do not represent a specific order for the objects. It can be understood that "first / second / third" can be interchanged with a specific order or sequence when allowed, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein.

[0047] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those of ordinary skill in the technical field to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0048] Before further elaborating on the embodiments of the present application, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are applicable to the following explanations.

[0049] 1) View: It is a view that can scroll to display a page and is used to show the distribution of all contents in the page throughout the page and the display positions of all contents in the page on each page.

[0050] 2) Tree structure: It is a non-linear data structure. Intuitively, a tree structure is a structure in which data elements (referred to as nodes in the tree structure) are organized according to the branching relationship.

[0051] 3) Level: The number of branches on the path from the root node of the tree structure to a certain node in the tree structure is called the level of that node. For example, in a tree structure, the level where the root node of the tree structure is located is the first level, the level where the child nodes of the root node of the tree structure are located is the second level, the level where the child nodes of the child nodes of the root node of the tree structure are located is the third level, and the level where the leaf nodes of the tree structure are located is the terminal level of the tree structure.

[0052] 4) OpenGL ES: OpenGL (English: Open Graphics Library, Chinese translation: Open Graphics Library or "Open Graphics Library") is a cross-language and cross-platform application programming interface (API) for rendering 2D and 3D vector graphics. This interface consists of nearly 350 different function calls for drawing from simple graphic bits to complex 3D scenes. OpenGL ES (OpenGL for Embedded Systems) is a subset of the OpenGL 3D graphics API, designed for embedded devices such as mobile phones, PDAs, and game consoles.

[0053] 5) XML parsing: Extract the key information in XML. XML refers to Extensible Markup Language, which is designed to transmit and store data. XML is a set of rules for defining semantic tags that divide a document into many parts and identify these parts. It is also a meta-markup language, that is, a syntactic language that defines the syntax for defining other domain-specific, semantic, and structured markup languages.

[0054] 6) Semaphore: It is a facility used in a multi-threaded environment and can be used to ensure that two or more critical code segments are not called concurrently. Before entering a critical code segment, a thread must acquire a semaphore; once the critical code segment is completed, the thread must release the semaphore.

[0055] This embodiment provides a page rendering method, apparatus, device, computer-readable storage medium, and computer program product, which can simplify the page optimization process and improve the loading efficiency of the page to be updated. The following describes an exemplary application of the page rendering device provided in the embodiments of the present application. The page rendering device provided in the embodiments of the present application can be implemented as various types of user terminals such as laptop computers, tablet computers, desktop computers, set-top boxes, mobile devices (for example, mobile phones, portable music players, personal digital assistants, dedicated messaging devices, portable game devices), voice interaction devices, smart home appliances, vehicle terminals, etc., or can be implemented as a server.

[0056] Refer to Figure 1 , Figure 1 FIG. is an optional schematic architecture diagram of the page rendering system 100 provided in the embodiments of the present application. To implement the application scenario of page rendering (for example, the application scenario of rendering a page can be a page display scenario in a page browser. For example, after the page content is rendered, it is displayed in the page browser in the form of a page view; a content display scenario of a social network. After the content of the social network is rendered, it is displayed in the APP in the form of a page view, such as the display of social dynamics, the display of news pages, the display of short videos, etc.), the terminal (exemplarily shows the terminal 400) is connected to the server 200 through the network 300. The network 300 can be a wide area network, a local area network, or a combination of the two.

[0057] The terminal 400 is used for the user to use the client 401 and is displayed on the graphical interface 401-1 (exemplarily shows the graphical interface 401-1). The terminal 400 and the server 200 are connected to each other through a wired or wireless network.

[0058] Among them, the terminal 400 is used to, in response to the user's operation on the graphical interface 401-1, obtain the page element data of the target application; based on the page element data, determine the rendering data corresponding to at least one page element to be updated in the target application, and obtain the rendering parameters of each page element to be updated; and send the rendering data corresponding to each page element to be updated and the corresponding rendering parameters to the server 200;

[0059] The server 200 is used to receive the rendering data corresponding to each page element to be updated sent by the terminal and the corresponding rendering parameters; determine the image color blocks to which each page element to be updated belongs. Here, the image color blocks and the view levels in the page to be displayed are in a one-to-one correspondence relationship; for each view level of the page to be displayed, taking the image color block as the rendering unit, based on the rendering data and the rendering parameters, render the page elements to be updated in each image color block respectively to obtain the rendered page to be displayed and send it to the terminal 400;

[0060] The terminal 400 is further configured to display the received to-be-displayed page that has been rendered in the graphical interface 401-1.

[0061] In some embodiments, the server 200 may be an independent physical server, or a server cluster or a distributed system composed of multiple physical servers. It may also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The terminal 400 may be a smart phone, a tablet computer, a laptop computer, a desktop computer, a set-top box, and mobile devices (such as mobile phones, portable music players, personal digital assistants, dedicated messaging devices, portable game devices, smart speakers, and smart watches), etc., but is not limited thereto. The terminal device and the server may be directly or indirectly connected through wired or wireless communication methods, which are not limited in the embodiments of the present application.

[0062] See Figure 2 , Figure 2 is a schematic structural diagram of an electronic device provided by an embodiment of the present application. In practical applications, the electronic device may be Figure 1 the server 200 or the terminal 400 shown in Figure 2 , Figure 2 The electronic device shown in includes: at least one processor 410, a memory 450, at least one network interface 420, and a user interface 430. Each component in the terminal 400 is coupled together through a bus system 440. It can be understood that the bus system 440 is used to realize the connection and communication between these components. In addition to the data bus, the bus system 440 also includes a power bus, a control bus, and a status signal bus. However, for the sake of clarity, in Figure 2 all kinds of buses are labeled as the bus system 440.

[0063] The processor 410 may be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP, Digital Signal Processor), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or any conventional processor, etc.

[0064] The user interface 430 includes one or more output devices 431 that enable the presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as keyboards, mice, microphones, touch screen displays, cameras, and other input buttons and controls.

[0065] The memory 450 can be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state memory, hard disk drives, optical disc drives, etc. The memory 450 optionally includes one or more storage devices that are physically remote from the processor 410.

[0066] The memory 450 includes volatile memory or non-volatile memory, or can also include both volatile and non-volatile memory. The non-volatile memory can be read-only memory (ROM), and the volatile memory can be random access memory (RAM). The memory 450 described in the embodiments of the present application is intended to include any suitable type of memory.

[0067] In some embodiments, the memory 450 is capable of storing data to support various operations. Examples of such data include programs, modules, and data structures, or subsets or supersets thereof, which are illustrated below.

[0068] The operating system 451, including system programs for handling various basic system services and performing hardware-related tasks, such as the framework layer, core library layer, driver layer, etc., for implementing various basic services and handling hardware-based tasks;

[0069] The network communication module 452 is used to reach other computing devices via one or more (wired or wireless) network interfaces 420. Exemplary network interfaces 420 include: Bluetooth, Wi-Fi (Wireless Fidelity), and USB (Universal Serial Bus), etc.;

[0070] The presentation module 453 is used to enable the presentation of information (such as a user interface for operating peripheral devices and displaying content and information) via one or more output devices 431 associated with the user interface 430 (such as a display screen, speaker, etc.).

[0071] The input processing module 454 is used to detect and translate one or more user inputs or interactions from one of one or more input devices 432.

[0072] In some embodiments, the page rendering device provided by the embodiments of the present application can be implemented in software. Figure 2The page rendering device 455 stored in the memory 450 is shown. It can be software in the form of programs and plugins, etc., and includes the following software modules: a first acquisition module 4551, a second acquisition module 4552, a determination module 4553, and a rendering module 4554. These modules are logical, so they can be combined arbitrarily or further split according to the implemented functions.

[0073] In some other embodiments, the page rendering device provided in the embodiments of the present application can be implemented in a hardware manner. As an example, the page rendering device provided in the embodiments of the present application can be a processor in the form of a hardware decoding processor, which is programmed to execute the page rendering method provided in the embodiments of the present application. For example, the processor in the form of a hardware decoding processor can adopt one or more application specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field programmable gate arrays (FPGAs) or other electronic components.

[0074] In some embodiments, the terminal or the server can implement the page rendering method provided in the embodiments of the present application by running a computer program. For example, the computer program can be a native program or software module in the operating system; it can be a native application (APP), that is, a program that needs to be installed in the operating system to run, such as an instant messaging APP or a web browser APP; it can also be a small program, that is, a program that only needs to be downloaded to the browser environment to run; it can also be a small program that can be embedded in any APP. In short, the above computer program can be any form of application program, module or plugin.

[0075] Based on the above description of the page rendering system and the electronic device provided in the embodiments of the present application, the page rendering method provided in the embodiments of the present application will be described below. In actual implementation, the page rendering method provided in the embodiments of the present application can be implemented by the terminal or the server alone, or by the cooperation of the terminal and the server, taking Figure 1 the terminal 400 in as an example to execute the page rendering method provided in the embodiments of the present invention. Refer to Figure 3 , Figure 3 which is a schematic flowchart of the page rendering method provided in the embodiments of the present application, and will be described in combination with the steps shown in Figure 3 .

[0076] Step 101, the terminal obtains the page element data of the target application.

[0077] In actual implementation, in response to the user's operation on the interface presented by the target application for the display page, the terminal obtains the page element data of the target application. Here, the operation on the display page can be the user's input operation in the target application, or can be a page switching operation and a previous page / next page operation, etc. The display page can include multiple pages, such as multiple historical pages and the current page.

[0078] As an example, when the operation on the display page is the user's input operation in the target application, that is, the user enters a Uniform Resource Locator (URL) address in the target application, so that the terminal obtains the page element data related to the updated page.

[0079] As an example, when the operation on the display page is a previous page operation, each time the previous page operation is triggered, the current page is updated to the previous page of the current page (it should be noted that the current page and the historical page are relative time concepts. It can be understood that after the update, the above current page is converted into a historical page, and the previous page of the above current page is converted into the current page), so that the terminal obtains the page element data related to the updated page.

[0080] In actual implementation, the page element data related to the updated page obtained by the terminal can be page content represented in Extensible Markup Language (XML) or HyperText Markup Language (HTML). Among them, the page content includes data that needs to be updated regularly, such as rolling news, advertisements, animations, videos, etc., and needs to be updated and displayed regularly in a specific area of the page. Here, after the terminal obtains this content, it saves this content in the database, and when the page needs to be updated, it obtains the corresponding content from the database and displays it. For example, a specific area of the page is used to roll play a group of news, and this group of news includes 5 news items. After the terminal obtains the content of this group of news and saves it in the database, during the page rendering process, when the page content needs to be updated, it obtains the corresponding data from the database for rendering and display.

[0081] Exemplarily, see Figure 4 , Figure 4 is an optional schematic diagram of the application scenario of the page rendering method provided by the embodiments of the present application. As an example, the current page is Figure 4The page corresponding to the account option in the middle frame 4-1. The page switching operation here can be a click on the amount option or the life option in the frame 4-1, that is, the current account page is converted into an amount page or a life page, and the terminal obtains the page element data of the amount page or the life page from the database or the Internet to perform the rendering display of the corresponding page.

[0082] Step 102: Based on the page element data, determine the rendering data corresponding to at least one page element to be updated in the target application, and obtain the rendering parameters of each page element to be updated.

[0083] In actual implementation, after the terminal obtains the page element data of the target application, it first parses the obtained page element data, deserializes the page element data into a data object, and then assigns corresponding attribute information to the data object based on a preset template. Here, the preset template can be a function module, a class template, a member template, a nested class template, etc., and the attribute information can be the page itemType element type (video, audio, file), text information (display title text), text attributes (font size, font, shadow), picture address (Url value), etc.

[0084] As an example, when the preset template is a class template, declare an abstract class template (such as AbstractClass Template), which includes at least one common element and an externally provided interface method (such as objWithXMLData), so as to use this method to receive the common page element data transmitted externally, parse the common page element data, generate a specific instance corresponding to the abstract class template, and then, in accordance with the template protocol, assign attributes to the parsed specific instance. Here, see Figure 5 , Figure 5 is an optional flowchart of the page rendering method provided by the embodiment of the present application. Specifically, by passing the XML data into the XML data receiver, and then through the Template protocol, the XML data is deserialized to determine the rendering data and rendering parameters corresponding to at least one page element ItemA, ItemB, ItemC,..., and ItemN to be updated in the target application.

[0085] In some embodiments, the process of determining the rendering data corresponding to at least one page element to be updated in the target application can be seen in Figure 6 , Figure 6 is an optional flowchart of determining the rendering data corresponding to the page element to be updated provided by the embodiment of the present application. Based on Figure 3 ,Step 102 can also be implemented in the following manner:

[0086] Step 1021: Parse the page element data to obtain the tree structure of the page to be displayed.

[0087] In actual implementation, there can be different parsing methods for the obtained page element data. When the obtained page element data is an XML data file, the corresponding information is retrieved according to the elements in the XML file and XML parsing is performed. There are two XML parsing methods, one is DOM parsing and the other is SAX parsing. Refer to Figure 7 , Figure 7 is an optional schematic diagram of XML data parsing in the page rendering method provided by the embodiments of the present application. An XML receiver is built into the client to parse the received XML file, and then corresponding processing is performed on the data object obtained after parsing. It should be noted that here, the Android system and the iOS system share a set of logics.

[0088] In actual implementation, the received page element data is deserialized into a set of object models through a data receiver, and the information is stored in a tree data structure. Exemplarily, refer to Figure 8 , Figure 8 is an optional schematic diagram of data format conversion in the page rendering method provided by the embodiments of the present application. Through the data receiver and a pre-set Template protocol, the received data is parsed into a DOM tree according to the Template protocol, that is, according to the Template protocol, the attribute information stored in each node of the tree structure is determined, and the determined attribute information is assigned to the corresponding page elements.

[0089] Step 1022: Start traversing from the root node of the tree structure to determine the nodes corresponding to the page elements to be updated in the target application.

[0090] In actual implementation, first obtain the element identifiers of each page element to be updated in the target application, and then start traversing with the level where the root node of the tree structure is located as the starting level and the level where the leaf node of the tree structure is located as the ending level. In the direction from the starting level to the ending level, match the obtained element identifiers of each page element to be updated with the node identifiers of each node in the tree structure to obtain a matching result. When the matching result indicates a successful match, the corresponding node is used as the node corresponding to the page element to be updated.

[0091] As an example, continue to refer to Figure 8, here, "Document" represents the entire XML data, expressed as the root of the entire DOM tree, which is the entry point of the tree structure. Starting from page element 1, the element identifiers of the page elements to be updated obtained are gradually matched with the node identifiers of each node at each level, such as the node ID value. When the match is successful, it is determined that the node is the node corresponding to the page element to be updated.

[0092] Step 1023, for each node corresponding to a page element to be updated, determine the attribute data of at least two attribute dimensions corresponding to the node as rendering data.

[0093] In actual implementation, after determining the node corresponding to the page element to be updated, based on the node identifier of the node corresponding to the page element to be updated, determine the attribute data of at least two attribute dimensions corresponding to the corresponding node as rendering data.

[0094] As an example, when the element identifier of each page element to be updated in the target application is 100, obtain the attribute data corresponding to the node with the node identifier of 100, that is, ID of 100, as the rendering data. For example <title id＝"100">Title< / title> , that is, according to the ID value of 100, the attribute information corresponding to the node with ID of 100 is the title content to be updated.

[0095] It should be noted that when determining the rendering data corresponding to at least one page element to be updated in the target application, the rendering parameters of each page element to be updated can also be obtained.

[0096] In actual implementation, the process of obtaining the rendering parameters of each page element to be updated is specifically as follows: First, obtain the element identifiers of each page element to be updated in the target application. For each page element to be updated, obtain the rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension. Exemplarily, the rendering parameters here include the number of rendering textures, the vertex buffer address, the vertex coordinate data, the area where the drawing element is located, the basic view of the element, etc.

[0097] It should be noted that the process of obtaining the rendering parameters of each page element to be updated can be when determining the rendering data corresponding to at least one page element to be updated in the target application, or when determining the image color blocks to which each page element to be updated belongs. And the process of obtaining the rendering parameters of the page element to be updated after determining the image color blocks to which each page element to be updated belongs is described in detail in step 103.

[0098] Step 103, determine the image color blocks to which each page element to be updated belongs, where the image color blocks have a one-to-one correspondence with the view hierarchy in the page to be displayed.

[0099] In actual implementation, after determining each page element to be updated, determine the view hierarchy where each page element to be updated is located, and the image color block corresponding to each view hierarchy. Then, for each view hierarchy, determine the page elements to be updated that are at the same view hierarchy as belonging to the image color block corresponding to the view hierarchy.

[0100] As an example, continue to refer to Figure 5 , after determining the page elements ItemA, ItemB, ItemC,..., and ItemN to be updated in each page of the target application, determine the view hierarchy corresponding to the page elements ItemA, ItemB, ItemC,..., and ItemN, and the image color block corresponding to each level. For example, the starting level corresponds to color block A, the ending level corresponds to color block B, while ItemA and ItemB correspond to the starting level, and ItemC and ItemN correspond to the ending level. Then ItemA and ItemB correspond to color block A, and ItemC and ItemN correspond to color block B. In this way, the page elements to be updated at the same level are attributed to the same color block to determine the image color block to which each page element to be updated belongs.

[0101] It should be noted that for the determination of the image color block, the composition of each page can be regarded as being spliced and rendered by multiple image color blocks. Different image color blocks can be carried by various basic controls, such as picture controls, button controls, and text controls. Ultimately, when drawn and displayed on the mobile phone, it is all rendered by the GPU at the bottom layer. There are only page elements to be updated in the color block. Here, the page elements to be updated are at the same level. There can be various forms of page elements included in the same image color block. Refer to the following Figure 9 , Figure 9 is an optional schematic diagram of the determination of the image color block in the page rendering method provided by the embodiment of the present application. As Figure 9 shown, the text element in frame 9-2 can be regarded as an image color block, and the image element in frame 9-1 can also be regarded as an image color block. Here, a same image color block can also include a text element and an image element at the same time. For the page elements to be updated included in the same image color block, as long as they are at the same level, the embodiment of the present application does not make other restrictions on this.

[0102] In actual implementation, after determining the image color block to which each page element to be updated belongs, store the rendering data corresponding to the image color block of the same page in the page set in the form of a page. Here, the page set includes different pages, each page includes multiple image color blocks, and each image color block includes the rendering data of at least one page element to be updated.

[0103] As an example, continue to refer to Figure 5, after determining the image color blocks corresponding to the page elements ItemA, ItemB, ItemC, and ItemN to be updated, store the rendering data corresponding to the page elements ItemA, ItemB, ItemC, and ItemN to be updated in the Page set in the form of color blocks. Here, continue to refer to Figure 4 , the Page set contains different pages, which can be Figure 4 the account page, amount page, and life page in Figure 4 If all the page elements in the part of the picture frame 4-1 in the figure are page elements to be updated at the same level, they can be regarded as the same color block, that is, the same color block contains the rendering data of all the page elements to be updated at the corresponding level.

[0104] In actual implementation, after determining the image color blocks to which the page elements to be updated belong, the rendering parameters of the page elements to be updated can also be obtained. Specifically, obtain the element identifiers of the page elements to be updated in the target application; according to the element identifiers, for each page element to be updated, obtain the rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension.

[0105] Continuing with the above example, after storing the rendering data corresponding to the page elements ItemA, ItemB, ItemC, and ItemN to be updated in the Page set in the form of color blocks, first initialize the OpenGL environment, and then determine the rendering parameters of OpenGL, that is, obtain the OpenGL rendering parameters of a single element according to the ID value in the Page set, including the number of rendering textures, the address of the vertex buffer, vertex coordinate data, the area where the drawing element is located, the basic view of the element, etc. Specifically, first enable the context environment, and then create a GLKView as the basic view, and set the color buffer, depth buffer, and default background color.

[0106] Step 104, for each view level of the page to be displayed, using the image color block as the rendering unit, based on the rendering data and rendering parameters, render the page elements to be updated in each image color block respectively to display the page to be displayed.

[0107] In actual implementation, first create a first rendering thread. For each view level of the page to be displayed, through the first rendering thread, use the image color block as the rendering unit to render the page elements to be updated in the image color block. That is, through the created first rendering thread, based on the same page, use the image color block as the rendering unit to obtain the rendering data corresponding to the page elements to be updated from the Page set, so as to determine the view level to be rendered, and then perform rendering based on the obtained corresponding rendering parameters.

[0108] As an example, first create a first rendering thread, then obtain the pictures, texts, and button data to be updated from the page set in units of image color blocks, determine the rendering view hierarchy, call glBufferData and pass in parameters such as the vertex buffer and the number of bytes where the data is located, copy the vertex data from memory to the GPU, open the vertex coordinate data channel to read the vertex data, and open the texture coordinate data channel to read the texture data, set the viewport size, generate a perspective projection, and finally call glDrawArrays and pass in GL_TRIANGLES to start rendering.

[0109] It should be noted that the above is the process of rendering the page elements to be updated. During the process of rendering the page, there are also page elements that do not need to be updated. When rendering the page elements that need to be updated, the page elements that need to be updated are parsed into the rendering parameters of OpenGL in units of image color blocks, while the page elements that do not need to be updated are rendered through the native mechanism, and then a unified rendering callback is loaded. Here, the area that occupies the main thread can be drawn asynchronously by OpenGL.

[0110] Next, the process of rendering the page elements that do not need to be updated will be described in detail. See Figure 10 , Figure 10 is an optional process schematic diagram for rendering the page elements that do not need to be updated provided by the embodiments of the present application. See Figure 10 , the process of rendering the page elements that do not need to be updated includes:

[0111] Step 201, the terminal obtains the rendering data and rendering parameters of the page elements that do not need to be updated in the page to be displayed.

[0112] In actual implementation, during the process of obtaining the tree structure of the page to be displayed and traversing the tree structure to determine the nodes corresponding to the page elements to be updated in the target application, the nodes corresponding to the page elements that do not need to be updated in the target application will also be determined. Specifically, the element identifiers of the obtained page elements to be updated are matched with the node identifiers of each node in the tree structure to obtain a matching result. When the matching result indicates a successful match, the corresponding node is used as the node corresponding to the page element to be updated, and when the matching result indicates an unsuccessful match, the corresponding node is used as the node corresponding to the page element that does not need to be updated. For each node corresponding to a page element that does not need to be updated, the corresponding rendering data and rendering parameters are obtained.

[0113] Step 202, create a second rendering thread.

[0114] It should be noted that the second rendering thread created here and the first thread created above are two threads that are processed in parallel.

[0115] Step 203: Based on the rendering data and rendering parameters of the page elements that do not need to be updated, render the page elements that do not need to be updated in the page to be displayed through the second rendering thread.

[0116] In actual implementation, the process of rendering the page elements that do not need to be updated in the page to be displayed through the second rendering thread based on the rendering data and rendering parameters of the page elements that do not need to be updated is to render by page control unit. Specifically, based on the obtained rendering data and rendering parameters, create a control of the corresponding type, initialize the control. For example, if the control type is a button, initialize a button image, create a button type according to the initialization method, set corresponding parameters and the display area of the image, etc., and then modify the corresponding data, change the base placeholder image to a network image, that is, add the network image to the background view for display.

[0117] It should be noted that due to different rendering mechanisms, the rendering end times are also different. Therefore, it is necessary to uniformly determine the rendering end time, that is, the display time of the bitMap. Here, refer to Figure 11 , Figure 11 is an optional process schematic diagram of the page rendering method provided by the embodiment of the present application. Based on Figure 3 , after step 104, determine the display time of the page to be displayed by executing steps 301 to 303.

[0118] Step 301: The terminal determines the first time corresponding to the completion of the rendering of the page elements to be updated by the first rendering thread, and the second time corresponding to the completion of the rendering of the page elements that do not need to be updated by the second rendering thread.

[0119] In actual implementation, the rendering completion signal can be monitored first; when the rendering completion signal sent by the first rendering thread is detected, the reception time is determined as the first time; when the rendering completion signal sent by the second rendering thread is detected, the reception time is determined as the second time.

[0120] It should be noted that the way to monitor the rendering completion signal can specifically be to monitor the rendering processes of the first rendering thread and the second rendering thread through function calls. For example, it can be to synchronize the processes of the first rendering thread and the second rendering thread through semaphores. That is, when entering the first rendering thread and the second rendering thread, respectively obtain a semaphore. Once the two threads end the rendering process, respectively release their own semaphores. In this way, by monitoring whether the two threads release the semaphores, the monitoring of the rendering completion signal is achieved.

[0121] As an example, create a semaphore. Call semaphore.wait() before rendering to start simultaneous rendering. Pass the renderClose method into the glutDisplayFunc method to listen for the end of redrawing. When the page loading in the Native layer is completed, the layoutSubviews method will be called. Override the layoutSubviews method and set semaphore.signal() in renderClose. When the two rendering threads are completed, two signal notifications will be received.

[0122] In actual implementation, the creation process of the semaphore can be completed by the first rendering thread and the second rendering thread, that is, the first rendering thread and the second rendering thread respectively complete the creation of the semaphores for their own threads. Or the creation of the semaphore can be completed by a unified module. The embodiments of the present application do not limit the creation method of the semaphore.

[0123] Step 302: Determine the page display time based on the time sequence of the first time and the second time.

[0124] In actual implementation, compare the time sequence of the first time and the second time. According to the comparison result, use the lagging time as the page display time. For example, obtain the rendering end times of Native and OpenGL, and use the rendering end time of the process with the longer rendering time as the display time of the bitMap.

[0125] Step 303: Display the page to be displayed based on the page display time.

[0126] In actual implementation, after determining the bitMap display time, generate and display the bitMap based on the rendering results of the two rendering threads.

[0127] In some embodiments, after displaying the current page, a page switching process will be involved. Exemplarily, continue to refer to Figure 4 , that is, the process of switching the account page to the life page or the financial page. Here, refer to Figure 12 , Figure 12 is an optional process schematic diagram of the page rendering method provided by the embodiments of the present application. Based on Figure 3 , after step 104, determine the page switching process by executing steps 401 to 403.

[0128] Step 401: The terminal receives a page switching instruction for the target application, where the page switching instruction is used to indicate switching from the page to be displayed to the target page.

[0129] In actual implementation, first, a page switching instruction for indicating switching from the page to be displayed to the target page for the target application is received. Exemplarily, here the page switching instruction can be triggered by a paging operation of the user on the page presented by the client. For example, see Figure 4 , when the current page is the account page, click on the "Life" or "Finance" Tab key shown in Figure 4-1 to achieve page switching.

[0130] Step 402, in response to the page switching instruction, determine the image color blocks corresponding to each view hierarchy of the target page.

[0131] In actual implementation, in response to the page switching instruction, obtain the tree structure of the target page and the element identifiers of each page element to be updated in the target page, and then start traversing from the root node of the tree structure. For each hierarchy of the target page, determine the node corresponding to the page element to be updated in the target page. Based on the nodes corresponding to the page elements to be updated in each hierarchy, determine the view hierarchy where each page element to be updated in the target page is located, and the image color block corresponding to each view hierarchy. Then, for each view hierarchy, determine the page elements to be updated at the same view hierarchy as belonging to the image color block corresponding to the view hierarchy. In this way, the image color blocks corresponding to each view hierarchy of the target page are determined.

[0132] Step 403, when there are image color blocks in the target page that are the same as those in the page to be displayed, reuse the same image color blocks and perform page rendering based on the reused image color blocks to display the target page.

[0133] In actual implementation, when there are image color blocks in the target page that are the same as those in the page to be displayed, reuse the same image color blocks, that is, obtain the rendering data corresponding to the image color blocks stored in the previous page from the page set, and then determine the corresponding rendering parameters. Then perform page rendering based on the rendering data and rendering parameters corresponding to the reused image color blocks, so as to display the target page.

[0134] In this way, during the page switching process, based on the reuse of the same image color blocks, the process of repeatedly obtaining the rendering data corresponding to the same image color blocks and storing the rendering data corresponding to the same image color blocks in the page set is effectively avoided, effectively saving the time delay generated by obtaining the rendering data corresponding to the same image color blocks and improving the loading efficiency; at the same time, the process of repeatedly storing the same rendering data is avoided, reducing the memory pressure.

[0135] Applying the above embodiments of the present application, during the process of rendering a page, for each view hierarchy of the page to be displayed, by obtaining the rendering parameters and rendering data corresponding to the page elements to be updated that belong to the same image color block in the page to be displayed, and then rendering the page elements to be updated in each image color block respectively, and further displaying the page to be displayed. In this way, when there are multiple page elements to be updated in an image color block, taking the image color block as the rendering unit, the multiple page elements to be updated can be rendered as a whole, effectively simplifying the process of rendering the page and improving the loading efficiency of the page to be updated.

[0136] Next, an exemplary application of the embodiments of the present application in the application scenario of the client will be described.

[0137] See Figure 13 , Figure 13 is an optional flowchart of the page rendering method provided by the embodiments of the present application. Here, the XML data is parsed, and the page is rendered based on two rendering threads, namely the OpenGL ES rendering mechanism and the Native rendering mechanism. Finally, the render callback is determined jointly by the OpenGL ES and Native rendering threads. Specifically, see Figure 14 , Figure 14 is an optional flowchart of the page rendering method provided by the embodiments of the present application. See Figure 14 , the page rendering method provided by the embodiments of the present application is implemented collaboratively by the client and the server. See Figure 14 , the page rendering method provided by the embodiments of the present application includes:

[0138] Step 501, the client obtains the page element data of the target application.

[0139] In actual implementation, during the process of page loading, in response to the user's page switching operation for the page to be displayed on the interface presented by the target application, the client will obtain XML data from the server, or it can also be XML data stored locally.

[0140] Exemplarily, an XML receiver is created and built into the client. When the user performs a page switching operation on the interface presented by the target application, the XML receiver receives the incoming XML data, that is, an abstract class template (such as Abstract ClassTemplate) is declared, and the abstract class template includes at least one common element and an externally provided interface method (such as objWithXMLData), so as to use this method to receive the common page element data transmitted externally.

[0141] Step 502, deserializing the obtained page element data of the target application into a data object.

[0142] In actual implementation, the received common page elements are parsed to generate a specific instance corresponding to the abstract class template.

[0143] Continuing with the above example, the received XML data is deserialized into a collection of object models, and the information is stored using the tree data structure.

[0144] Step 503: Assign corresponding data object attribute information based on the class template protocol.

[0145] Here, the class template is used to indicate the attribute information corresponding to each node in the tree structure of the page of a preset target application, and the attribute information can be the page itemType element type (video, audio, file), text information (display title text), text attributes (font size, font, shadow), image address (Url value), etc.

[0146] Continuing with the above example, after the XML data receiver parses the received data into a DOM tree according to the Template protocol, according to the Template protocol, the attribute information stored in each node of the tree structure is determined, and the determined attribute information is assigned to the corresponding page element.

[0147] Step 504: Start traversing from the root node of the tree structure to determine the node corresponding to the page element to be updated in the target application, and determine the attribute data of the corresponding node as the rendering data.

[0148] In actual implementation, first, the element identifier of each page element to be updated in the target application is obtained. Then, starting from the level where the root node of the tree structure is located as the starting level and the level where the leaf node of the tree structure is located as the ending level, the element identifier of the page element to be updated obtained is gradually matched with the node identifier of each node at each level, such as the node ID value. When the match is successful, it is determined that this node is the node corresponding to the page element to be updated. At the same time, after determining the node corresponding to the page element to be updated, based on the node identifier of the node corresponding to the page element to be updated, the corresponding attribute data of the node is determined as the rendering data. Exemplarily, when the element identifier of each page element to be updated in the target application is 100, the attribute data corresponding to the node with the node identifier of 100, that is, the node with ID 100, is obtained as the rendering data. For example <title id＝"100">Title< / title> , that is, according to the ID value of 100, the attribute information corresponding to the node with ID 100 is used as the title content to be updated.

[0149] Step 505: Determine the image color block to which each page element to be updated belongs, and store the rendering data corresponding to each page element to be updated in the form of an image color block in the page set.

[0150] In actual implementation, after determining each page element to be updated, determine the view hierarchy where each page element to be updated is located, and the corresponding image color blocks for each view hierarchy. Then, for each view hierarchy, determine the page elements to be updated that are at the same view hierarchy as belonging to the image color block corresponding to the view hierarchy. Then, after determining the image color blocks to which each page element to be updated belongs, store the rendering data corresponding to the image color blocks of the same page into the page set in the form of a page.

[0151] Step 506: Based on the rendering data corresponding to each page element to be updated in the page set, determine the rendering parameters of each page element to be updated.

[0152] In actual implementation, determine the OpenGL rendering parameters according to the rendering data corresponding to the element identifier (i.e., ID) of the page elements to be updated in the page set. Here, the rendering parameters include the number of rendering textures, the vertex buffer address, the vertex coordinate data, the area where the drawing element is located, the basic view of the element, etc.

[0153] Step 507: Send the rendering data and the corresponding rendering parameters corresponding to each page element to be updated in the page set to the server.

[0154] Step 508: The server creates a first rendering thread. For each view hierarchy of the page to be displayed, through the first rendering thread, using the image color block as the rendering unit, perform rendering based on the obtained rendering data and the corresponding rendering parameters of the updated page elements.

[0155] In actual implementation, the server first creates a first rendering thread, and then takes the image color block as the unit to obtain the pictures, texts, and button data to be updated from the page set, determines the view hierarchy to be rendered, calls glBufferData to pass in parameters such as the vertex buffer and the number of bytes of the data, copies the vertex data from the memory to the GPU, opens the vertex coordinate data channel to read the vertex data, and opens the texture coordinate data channel to read the texture data, sets the viewport size, generates a perspective projection, and finally calls glDrawArrays to pass in GL_TRIANGLES to start rendering.

[0156] Step 509: Create a second rendering thread. Based on the rendering data and rendering parameters of the page elements that do not need to be updated in the page to be displayed obtained, through the second rendering thread, render the page elements that do not need to be updated in the page to be displayed.

[0157] In actual implementation, the server first obtains the rendering data and rendering parameters of the page elements that do not need to be updated in the page to be displayed, and then creates a second rendering thread. Through the second rendering thread, render the page elements that do not need to be updated in the page to be displayed with the native rendering mechanism.

[0158] Step 510, determine the first time corresponding to the completion of rendering of the page elements to be updated by the first rendering thread, and the second time corresponding to the completion of rendering of the page elements that do not need to be updated by the second rendering thread.

[0159] In actual implementation, first monitor the rendering completion signal; when the rendering completion signal sent by the first rendering thread is detected, determine the reception time as the first time; when the rendering completion signal sent by the second rendering thread is detected, determine the reception time as the second time.

[0160] Exemplarily, create a semaphore semaphore, call semaphore.wait() before rendering to start rendering simultaneously, and pass the renderClose method in the glutDisplayFunc method to listen for the end of redrawing. When the Native layer page loading is completed, the layoutSubviews method will be called. Rewrite the layoutSubviews method and set semaphore.signal() in renderClose, and then obtain the end times of Native and OpenGL rendering respectively. That is, when the two rendering threads are completed, two semaphore notifications can be received. In this way, determine the completion times of the two rendering threads.

[0161] Step 511, compare the sequence of the first time and the second time, and determine the page display time according to the comparison result.

[0162] In actual implementation, compare the sequence of the first time and the second time. According to the comparison result, use the later time as the page display time. For example, obtain the end times of Native and OpenGL rendering, and use the end time of the process with the longer rendering time as the bitMap display time.

[0163] Step 512, generate the page to be displayed based on the page display time.

[0164] In actual implementation, after determining the bitMap display time, generate a bitMap and display it based on the rendering results of the two rendering threads.

[0165] Step 513, send the page to be displayed to the client.

[0166] Step 514, the client displays the received page to be displayed.

[0167] Applying the above embodiments of the present application, during the process of rendering a page, for each view hierarchy of the page to be displayed, by obtaining the rendering parameters and rendering data corresponding to the page elements to be updated that belong to the same image color block in the page to be displayed, and then rendering the page elements to be updated in each image color block respectively, and further displaying the page to be displayed. In this way, when there are multiple page elements to be updated in an image color block, taking the image color block as the rendering unit, the multiple page elements to be updated can be rendered as a whole, effectively simplifying the process of rendering the page and improving the loading efficiency of the page to be updated.

[0168] The following continues to describe the exemplary structure of the software module implementation of the page rendering device 455 provided by the embodiments of the present application. In some embodiments, as Figure 2 shown, the software module in the page rendering device 455 stored in the memory 440 may include:

[0169] A first acquisition module 4551, configured to acquire page element data of a target application;

[0170] A second acquisition module 4552, configured to determine, based on the page element data, rendering data corresponding to at least one page element to be updated in the target application, and acquire rendering parameters of each of the page elements to be updated;

[0171] A determination module 4553, configured to determine the image color blocks to which the page elements to be updated belong, and there is a one-to-one correspondence between the image color blocks and the view hierarchies in the page to be displayed;

[0172] A rendering module 4554, configured to, for each view hierarchy of the page to be displayed, taking the image color block as the rendering unit, based on the rendering data and the rendering parameters, render the page elements to be updated in each of the image color blocks respectively to display the page to be displayed.

[0173] In some embodiments, the second acquisition module 4552 is further configured to parse the page element data to obtain the tree structure of the page to be displayed; start traversing from the root node of the tree structure to determine the nodes corresponding to the page elements to be updated in the target application; for each node corresponding to a page element to be updated, determine the attribute data of at least two attribute dimensions corresponding to the node as the rendering data.

[0174] In some embodiments, the second acquisition module 4552 is further configured to acquire the element identifiers of the page elements to be updated in the target application; start traversing from the root node of the tree structure, and during the traversal, match the element identifiers with the node identifiers of the nodes in the tree structure to obtain a matching result; when the matching result indicates a successful match, use the corresponding node as the node corresponding to the page element to be updated.

[0175] In some embodiments, the second acquisition module 4552 is further configured to acquire the element identifiers of the page elements to be updated in the target application; according to the element identifiers, for each of the page elements to be updated, acquire the rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension.

[0176] In some embodiments, the determination module 4553 is further configured to determine the view hierarchy where each of the page elements to be updated is located, and the image color blocks corresponding to each view hierarchy; for each view hierarchy, determine the page elements to be updated in the view hierarchy as belonging to the image color block corresponding to the view hierarchy.

[0177] In some embodiments, the rendering module 4554 is further configured to create a first rendering thread; for each view hierarchy of the page to be displayed, through the first rendering thread, use the image color block as the rendering unit to render the page elements to be updated in the image color block; the rendering module 4554 is further configured to acquire the rendering data and rendering parameters of the page elements that do not need to be updated in the page to be displayed; create a second rendering thread; based on the rendering data and rendering parameters of the page elements that do not need to be updated, through the second rendering thread, render the page elements that do not need to be updated in the page to be displayed.

[0178] In some embodiments, the apparatus further includes a display module, and the display module is configured to determine a first time corresponding to the completion of the rendering of the page elements to be updated by the first rendering thread, and a second time corresponding to the completion of the rendering of the page elements that do not need to be updated by the second rendering thread; based on the time sequence of the first time and the second time, determine the page display time; based on the page display time, display the page to be displayed.

[0179] In some embodiments, the apparatus further includes a monitoring module, and the monitoring module is configured to, when monitoring the rendering completion signal sent by the first rendering thread, determine the reception time as the first time; when monitoring the rendering completion signal sent by the second rendering thread, determine the reception time as the second time.

[0180] In some embodiments, the device further includes a multiplexing module, which is configured to receive a page switching instruction for the target application, where the page switching instruction is used to indicate switching from the page to be displayed to the target page; in response to the page switching instruction, determine image color blocks corresponding to each view hierarchy of the target page; when there are image color blocks on the target page that are the same as those on the page to be displayed, multiplex the same image color blocks and perform page rendering based on the multiplexed image color blocks to display the target page.

[0181] Embodiments of the present application provide a computer program product or a computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the page rendering method described above in the embodiments of the present application.

[0182] Embodiments of the present application provide a computer-readable storage medium storing executable instructions, where the executable instructions, when executed by a processor, will cause the processor to execute the page rendering method provided in the embodiments of the present application. For example, Figure 3 the page rendering method shown.

[0183] In some embodiments, the computer-readable storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disc, or CD-ROM; or it may be various devices including one or any combination of the above memories.

[0184] In some embodiments, the executable instructions may be in the form of a program, software, software module, script, or code, and may be written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including being deployed as an independent program or being deployed as a module, component, subroutine, or other unit suitable for use in a computing environment.

[0185] As an example, the executable instructions may or may not correspond to a file in a file system, and may be stored as part of a file that stores other programs or data. For example, they may be stored in one or more scripts in a Hyper Text Markup Language (HTML) document, stored in a single file dedicated to the program being discussed, or stored in multiple cooperating files (such as files storing one or more modules, subroutines, or code portions).

[0186] As an example, the executable instructions can be deployed to execute on one computing device, or on multiple computing devices located at one location, or on multiple computing devices distributed at multiple locations and interconnected by a communication network.

[0187] In summary, the embodiments of the present application have the following beneficial effects:

[0188] (1) For each view hierarchy of the page to be displayed, by obtaining the rendering parameters and rendering data corresponding to the page elements to be updated that belong to the same image color block in the page to be displayed, and then rendering the page elements to be updated in each image color block respectively, and then displaying the page to be displayed. In this way, the process of rendering the page is effectively simplified, and the loading efficiency of the page to be updated is improved.

[0189] (2) During the page switching process, the rendering data of the image color blocks that need to be optimized is preprocessed and extracted. The selected color blocks can be determined by the server during loading / redrawing. Based on the reuse of the same image color blocks, the process of repeatedly obtaining the rendering data corresponding to the same image color blocks and storing the rendering data corresponding to the same image color blocks in the page set is effectively avoided, effectively saving the time delay generated by obtaining the rendering data corresponding to the same image color blocks, improving the loading efficiency. At the same time, the process of repeatedly storing the same rendering data is avoided, reducing the memory pressure. In this way, the page fluency of the application program is improved, and the user experience is enhanced.

[0190] (3) Optimized rendering is performed based on OpenGL ES, and Android and iOS systems share the same set of logics. Therefore, this solution can be used for rendering on both Android and iOS.

[0191] The above is only the embodiments of the present application and is not used to limit the protection scope of the present application. Any modifications, equivalent replacements, and improvements made within the spirit and scope of the present application are included in the protection scope of the present application.

Claims

1. A page rendering method, characterized in that, The method includes: Obtaining page element data of a target application; Based on the page element data, determining rendering data corresponding to at least one page element to be updated in the target application, and obtaining rendering parameters of each page element to be updated; Determining the image color blocks to which each page element to be updated belongs, where the image color blocks have a one-to-one correspondence with the view hierarchy in the page to be displayed; For each view hierarchy of the page to be displayed, using the image color block as the rendering unit, and based on the rendering data and the rendering parameters, rendering the page elements to be updated in each image color block respectively to display the page to be displayed.

2. The method according to claim 1, characterized in that The determining the rendering data corresponding to at least one page element to be updated in the target application based on the page element data includes: Parsing the page element data to obtain the tree structure of the page to be displayed; Starting from the root node of the tree structure for traversal to determine the nodes corresponding to the page elements to be updated in the target application; For each node corresponding to a page element to be updated, determining the attribute data of at least two attribute dimensions corresponding to the node as the rendering data.

3. The method according to claim 2, wherein The starting from the root node of the tree structure for traversal to determine the nodes corresponding to the page elements to be updated in the target application includes: Obtaining the element identifiers of each page element to be updated in the target application; Starting from the root node of the tree structure for traversal, and during the traversal, matching the element identifier with the node identifier in the tree structure to obtain a matching result; When the matching result indicates a successful match, taking the corresponding node as the node corresponding to the page element to be updated.

4. The method according to claim 2, wherein The obtaining the rendering parameters of each page element to be updated includes: Obtaining the element identifiers of each page element to be updated in the target application; According to the element identifier, for each page element to be updated, obtaining the rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension.

5. The method according to claim 1, wherein The determining the image color blocks to which each page element to be updated belongs includes: Determining the view hierarchy where each page element to be updated is located, and the image color blocks corresponding to each view hierarchy; For each view hierarchy, determining the page elements to be updated at the view hierarchy as belonging to the image color block corresponding to the view hierarchy.

6. The method according to claim 1, characterized in that, The for each view hierarchy of the page to be displayed, using the image color block as the rendering unit, and based on the rendering data and the rendering parameters, rendering the page elements to be updated in each image color block respectively includes: Creating a first rendering thread; For each view hierarchy of the page to be displayed, through the first rendering thread, using the image color block as the rendering unit, rendering the page elements to be updated in the image color block; The method further includes: Obtaining the rendering data and rendering parameters of the page elements that do not need to be updated in the page to be displayed; Creating a second rendering thread; Based on the rendering data and rendering parameters of the page elements that do not need to be updated, the page elements that do not need to be updated in the page to be displayed are rendered through the second rendering thread.

7. The method according to claim 6, characterized in that, The method further includes: Determining a first time corresponding to the completion of the rendering of the page elements to be updated by the first rendering thread, and a second time corresponding to the completion of the rendering of the page elements that do not need to be updated by the second rendering thread; Based on the time sequence of the first time and the second time, determining the page display time; Based on the page display time, displaying the page to be displayed.

8. The method according to claim 7, wherein The determining the first time corresponding to the completion of the rendering of the page elements to be updated by the first rendering thread, and the second time corresponding to the completion of the rendering of the page elements that do not need to be updated by the second rendering thread includes: When detecting the rendering completion signal sent by the first rendering thread, determining the reception time as the first time; When detecting the rendering completion signal sent by the second rendering thread, determining the reception time as the second time.

9. The method according to claim 1, characterized in that, After displaying the page to be displayed, the method further includes: Receiving a page switching instruction for the target application, where the page switching instruction is used to indicate switching from the page to be displayed to a target page; In response to the page switching instruction, determining image color blocks corresponding to each view hierarchy of the target page; When there are image color blocks in the target page that are the same as those in the page to be displayed, reusing the same image color blocks and performing page rendering based on the reused image color blocks to display the target page.

10. A page rendering device, characterized in that, The device includes: A first acquisition module, configured to acquire page element data of a target application; A second acquisition module, configured to determine rendering data corresponding to at least one page element to be updated in the target application based on the page element data, and acquire rendering parameters of each of the page elements to be updated; A determination module, determining the image color blocks to which each of the page elements to be updated belongs, where the image color blocks have a one-to-one correspondence with the view hierarchies in the page to be displayed; A rendering module, configured to, for each view hierarchy of the page to be displayed, using the image color blocks as the rendering units, based on the rendering data and the rendering parameters, respectively render the page elements to be updated in each of the image color blocks to display the page to be displayed.

Images