CN116028735A

CN116028735A - Page rendering method and device

Info

Publication number: CN116028735A
Application number: CN202111245798.2A
Authority: CN
Inventors: 苟亚明
Original assignee: Tencent Technology Shenzhen Co Ltd
Current assignee: Tencent Technology Shenzhen Co Ltd
Priority date: 2021-10-26
Filing date: 2021-10-26
Publication date: 2023-04-28

Abstract

The application provides a page rendering method and device; the method comprises the following steps: acquiring page element data of a target application; determining rendering data corresponding to at least one page element to be updated in a target application based on the page element data, and acquiring rendering parameters of each page element to be updated; determining image color blocks to which page elements to be updated belong, wherein the image color blocks and view levels in a page to be displayed are in one-to-one correspondence; and rendering page elements to be updated in each image color block based on rendering data and rendering parameters by taking the image color block as a rendering unit aiming at each view level of the page to be displayed so as to display the page to be displayed. According to the page optimization method and device, the page optimization process can be simplified, and the loading efficiency of the page to be updated is improved.

Description

Page rendering method and device

Technical Field

The present disclosure relates to internet technologies, and in particular, to a method and apparatus for rendering a page.

Background

The rapid development of the Internet, especially the mobile Internet, has been widely used as a carrier of information to be displayed. Because of the diversity of information, in a page display scene, the page state or data will generally change in real time, and thus the display after the page update will be involved. In the prior art, page clamping phenomenon is sometimes generated in the process of displaying updated pages, and different operating systems can perform targeted optimization on page clamping generated in different platforms (Android and iOS), wherein the optimization is limited to a business level only, for example, a plurality of interfaces are required to be requested in one page, and after data of each interface is returned, the whole refreshing is performed, and the optimized refreshing is modified to be based on local refreshing of page controls. However, the local refreshing mode based on the page control can cause the page optimization process to be complicated, so that the loading efficiency is low when the page to be updated is displayed.

Disclosure of Invention

The embodiment of the application provides a page rendering method, device, equipment, a computer readable storage medium and a computer program product, which can simplify a page optimization process and improve the loading efficiency of a page to be updated.

The technical scheme of the embodiment of the application is realized as follows:

the embodiment of the application provides a page rendering method, which comprises the following steps:

acquiring 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 acquiring rendering parameters of each page element to be updated;

determining image color blocks to which page elements to be updated belong, wherein the image color blocks and view levels in a page to be displayed are in one-to-one correspondence;

and rendering page elements to be updated in each image color block based on the rendering data and the rendering parameters by taking the image color block as a rendering unit for each view level of the page to be displayed so as to display the page to be displayed.

The embodiment of the application provides a page rendering device, which comprises:

the first acquisition module is used for acquiring page element data of the target application;

The second acquisition module is used for determining rendering data corresponding to at least one page element to be updated in the target application based on the page element data, and acquiring rendering parameters of each page element to be updated;

the determining module is used for determining image color blocks to which the page elements to be updated belong, wherein the image color blocks and view levels in the page to be displayed are in one-to-one correspondence;

and the rendering module is used for rendering page elements to be updated in each image color block by taking the image color block as a rendering unit according to each view level of the page to be displayed, and 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.

In the above scheme, the second obtaining module is further configured to parse the page element data to obtain a tree structure of the page to be displayed; 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 for the node corresponding to each page element to be updated, determining attribute data of at least two attribute dimensions corresponding to the node as the rendering data.

In the above scheme, the second obtaining module is further configured to obtain element identifiers of page elements to be updated in the target application; traversing from the root node of the tree structure, and matching the element identifier with the node identifier of the node in the tree structure in the traversing process to obtain a matching result; and when the matching result represents successful matching, the corresponding node is used as the node corresponding to the page element to be updated.

In the above scheme, the second obtaining module is further configured to obtain element identifiers of page elements to be updated in the target application; and according to the element identification, aiming at each page element to be updated, acquiring rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension.

In the above scheme, the determining module is further configured to determine a view level at which each page element to be updated is located, and an image color block corresponding to each view level; for each view level, determining the page element to be updated in the view level as belonging to an image color block corresponding to the view level.

In the above scheme, the rendering module is further configured to create a first rendering thread; for each view level of the page to be displayed, rendering page elements to be updated in the image color block by taking the image color block as a rendering unit through the first rendering thread; the rendering module is further used for acquiring rendering data and rendering parameters of page elements which do not need to be updated in the page to be displayed; creating a second rendering thread; and rendering the page elements which do not need to be updated in the page to be displayed through the second rendering thread based on the rendering data and the rendering parameters of the page elements which do not need to be updated.

In the above scheme, the device further includes a display module, where the display module is configured to determine a first time corresponding to completion of rendering of the page element to be updated by the first rendering thread, and a second time corresponding to completion of rendering of the page element that does not need to be updated by the second rendering thread; determining page display time based on the time sequence of the first time and the second time; and displaying the page to be displayed based on the page display time.

In the above solution, the apparatus further includes a monitoring module, where the monitoring module is configured to determine, when the rendering completion signal sent by the first rendering thread is monitored, a receiving time as the first time; and when the rendering completion signal sent by the second rendering thread is monitored, determining the receiving time as the second time.

In the above scheme, the device further comprises a multiplexing module, wherein the multiplexing module is used for receiving a page switching instruction aiming at the target application, and the page switching instruction is used for indicating the page to be displayed to be switched to the target page; determining image color blocks corresponding to each view level of the target page in response to the page switching instruction; and when the target page has the same image color block as the page to be displayed, multiplexing the same image color block, and performing page rendering based on the multiplexed image color block to display the target page.

An embodiment of the present application provides an apparatus, including:

a memory for storing executable instructions;

and the processor is used for realizing the page rendering method provided by the embodiment of the application when executing the executable instructions stored in the memory.

The embodiment of the application provides a computer readable storage medium, which stores executable instructions for implementing the page rendering method provided by the embodiment of the application when the executable instructions are executed by a processor.

The embodiment of the application provides a computer program product, which comprises a computer program, and when the computer program is executed by a processor, the page rendering method provided by the embodiment of the application is realized.

The embodiment of the application has the following beneficial effects:

in the process of rendering the page, rendering parameters and rendering data corresponding to page elements to be updated, which belong to the same image color block in the page to be displayed, are acquired for each view level of the page to be displayed, so that the page elements to be updated in each image color block are respectively rendered, and further the page to be displayed is displayed.

Drawings

FIG. 1 is a schematic diagram of an alternative architecture of a page rendering system 100 provided in an embodiment of the present application;

fig. 2 is a schematic structural diagram of an electronic device according to an embodiment of the present application;

fig. 3 is a flow chart of a page rendering method provided in an embodiment of the present application;

fig. 4 is an optional schematic diagram of an application scenario of the page rendering method provided in the embodiment of the present application;

FIG. 5 is a schematic flow chart of an alternative method for rendering a page according to an embodiment of the present disclosure;

FIG. 6 is an alternative flow chart for determining rendering data corresponding to a page element to be updated according to an embodiment of the present application;

FIG. 7 is an alternative schematic diagram of XML data parsing in a page rendering method according to an embodiment of the present application;

FIG. 8 is an alternative schematic diagram of a data format conversion of the page rendering method provided in an embodiment of the present application;

FIG. 9 is an alternative schematic diagram of image color block determination in a page rendering method according to an embodiment of the present application;

FIG. 10 is a schematic flow chart of an alternative method for rendering page elements that need not be updated according to an embodiment of the present application;

FIG. 11 is a schematic flow chart of an alternative method for rendering a page according to an embodiment of the present disclosure;

FIG. 12 is a schematic flow chart of an alternative method for rendering a page according to an embodiment of the present disclosure;

FIG. 13 is a schematic flow chart of an alternative method for rendering a page according to an embodiment of the present disclosure;

fig. 14 is a schematic flowchart of an alternative page rendering method according to an embodiment of the present application.

Detailed Description

For the purpose of making the objects, technical solutions and advantages of the present application more apparent, the present application will be described in further detail with reference to the accompanying drawings, and the described embodiments should not be construed as limiting the present application, and all other embodiments obtained by those skilled in the art without making any inventive effort are within the scope of the present application.

In the following description, reference is made to "some embodiments" which describe a subset of all possible embodiments, but it is to be understood that "some embodiments" can be the same subset or different subsets of all possible embodiments and can be combined with one another without conflict.

In the following description, the terms "first", "second", "third" and the like are merely used to distinguish similar objects and do not represent a particular ordering of the objects, it being understood that the "first", "second", "third" may be interchanged with a particular order or sequence, as permitted, to enable embodiments of the application described herein to be practiced otherwise than as illustrated or described herein.

Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of the present application only and is not intended to be limiting of the present application.

Before further describing embodiments of the present application in detail, the terms and expressions that are referred to in the embodiments of the present application are described, and are suitable for the following explanation.

1) View: is a view capable of scrolling through the displayed pages for displaying the distribution of all the contents of the pages throughout the page and the display positions of all the contents of the pages on each page.

2) Tree structure: is a non-linear data structure, and intuitively, a tree structure is a structure in which data elements (referred to as nodes in the tree structure) are organized in branching relation.

3) Hierarchy: the number of branches on a path taken from a root node of a tree structure to a node in the tree structure is referred to as the level of that node. For example, in the tree structure, the level at which the root node of the tree structure is located is a first level, the level at which the child node of the root node of the tree structure is located is a second level, the level at which the child node of the root node of the tree structure is located is a third level, and the level at which the leaf node of the tree structure is located is an end level of the tree structure.

4) OpenGL ES: openGL (english: open Graphics Library, translated name: an open graphics library or "open graphics library") is a cross-language, cross-platform Application Programming Interface (API) for rendering 2D, 3D vector graphics. This interface consists of nearly 350 different function calls, used to draw a scene from simple graphics bits to complex three dimensions. OpenGL ES (OpenGL for Embedded Systems) is a subset of OpenGL three-dimensional graphics APIs designed for embedded devices such as cell phones, PDAs, and game hosts.

5) XML parsing: and extracting key information in the XML. XML refers to an extensible markup language (eXtensible Markup Language) designed to transfer and store data. XML is a set of rules defining semantic tags that divide a document into many parts and identify those parts. It is also a meta-markup language, i.e. a syntactic language defining other domain-specific, semantic, structured markup languages.

6) Signal quantity: is a facility used in a multi-threaded environment that can be used to ensure that two or more critical code segments are not invoked concurrently. Before entering a critical code segment, the thread must acquire a semaphore; once the critical code segment is complete, the thread must release the semaphore.

The embodiment provides a page rendering method, device, equipment, a computer readable storage medium and a computer program product, which can simplify a page optimization process and improve loading efficiency of a page to be updated. The exemplary application of the page rendering device provided in the embodiments of the present application is described below, and the page rendering device provided in the embodiments of the present application may be implemented as a notebook computer, a tablet computer, a desktop computer, a set-top box, a mobile device (for example, a mobile phone, a portable music player, a personal digital assistant, a dedicated messaging device, a portable game device), a voice interaction device, an intelligent home appliance, a vehicle-mounted terminal, and other various types of user terminals, and may also be implemented as a server.

Referring to fig. 1, fig. 1 is an optional architecture schematic diagram of a page rendering system 100 provided in an embodiment of the present application, in order to implement an application scenario of page rendering (for example, the application scenario of rendering a page may be a page display scenario in a page browser, for example, page content is displayed in the page browser in a page view after being rendered, a content display scenario of a social network, content of the social network is displayed in an APP in a page view after being rendered, for example, a social dynamic display, a news page display, a short video display, etc.), where a terminal (illustrated by an example, the terminal 400) is connected to the server 200 through a network 300, and the network 300 may be a wide area network or a local area network, or a combination of both.

The terminal 400 is configured for display on a graphical interface 401-1 (graphical interface 401-1 is shown for example) for use by a user using a client 401. The terminal 400 and the server 200 are connected to each other through a wired or wireless network.

The terminal 400 is configured to obtain page element data of a target application in response to an operation of a user on the graphical interface 401-1; determining rendering data corresponding to at least one page element to be updated in a target application based on the page element data, and acquiring rendering parameters of each page element to be updated; and the rendering data corresponding to each page element to be updated and the corresponding rendering parameters are sent to the server 200;

The server 200 is configured to receive rendering data and corresponding rendering parameters, which are sent by the terminal and correspond to each page element to be updated; determining image color blocks to which page elements to be updated belong, wherein the image color blocks and view levels in a page to be displayed are in one-to-one correspondence; for each view level of the page to be displayed, taking the image color blocks as rendering units, and respectively rendering page elements to be updated in each image color block based on rendering data and rendering parameters to obtain a page to be displayed after rendering, and sending the page to the terminal 400;

the terminal 400 is further configured to display the received rendered page to be displayed in the graphical interface 401-1.

In some embodiments, the server 200 may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDNs, and basic cloud computing services such as big data and artificial intelligence platforms. The terminal 400 may be, but is not limited to, a smart phone, a tablet computer, a notebook computer, a desktop computer, a set-top box, and a mobile device (e.g., a mobile phone, a portable music player, a personal digital assistant, a dedicated messaging device, a portable game device, a smart speaker, and a smart watch), etc. The terminal device and the server may be directly or indirectly connected through wired or wireless communication, which is not limited in the embodiments of the present application.

Referring to fig. 2, fig. 2 is a schematic structural diagram of an electronic device provided in an embodiment of the present application, in an actual application, the electronic device may be the server 200 or the terminal 400 shown in fig. 1, referring to fig. 2, and the electronic device shown in fig. 2 includes: at least one processor 410, a memory 450, at least one network interface 420, and a user interface 430. The various components in terminal 400 are coupled together by a bus system 440. It is understood that the bus system 440 is used to enable connected communication between these components. The bus system 440 includes a power bus, a control bus, and a status signal bus in addition to the data bus. But for clarity of illustration the various buses are labeled in fig. 2 as bus system 440.

The processor 410 may be an integrated circuit chip having signal processing capabilities such as a general purpose processor, such as a microprocessor or any conventional processor, or the like, a digital signal processor (DSP, digital Signal Processor), or other programmable logic device, discrete gate or transistor logic, discrete hardware components, or the like.

The user interface 430 includes one or more output devices 431, including one or more speakers and/or one or more visual displays, that enable presentation of the media content. The user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

Memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid state memory, hard drives, optical drives, and the like. Memory 450 optionally includes one or more storage devices physically remote from processor 410.

Memory 450 includes volatile memory or nonvolatile memory, and may also include both volatile and nonvolatile memory. The nonvolatile Memory may be a Read Only Memory (ROM), and the volatile Memory may be a random access Memory (RAM, random Access Memory). The memory 450 described in the embodiments herein is intended to comprise any suitable type of memory.

In some embodiments, memory 450 is capable of storing data to support various operations, examples of which include programs, modules and data structures, or subsets or supersets thereof, as exemplified below.

An operating system 451 including system programs, e.g., framework layer, core library layer, driver layer, etc., for handling various basic system services and performing hardware-related tasks, for implementing various basic services and handling hardware-based tasks;

network communication module 452 for reaching other computing devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 include: bluetooth, wireless compatibility authentication (WiFi), and universal serial bus (USB, universal Serial Bus), etc.;

A presentation module 453 for enabling presentation of information (e.g., a user interface for operating peripheral devices and displaying content and information) via one or more output devices 431 (e.g., a display screen, speakers, etc.) associated with the user interface 430;

an input processing module 454 for detecting one or more user inputs or interactions from one of the one or more input devices 432 and translating the detected inputs or interactions.

In some embodiments, the page rendering device provided in the embodiments of the present application may be implemented in software, and fig. 2 shows the page rendering device 455 stored in the memory 450, which may be software in the form of a program and a plug-in, and includes the following software modules: the first acquisition module 4551, the second acquisition module 4552, the determination module 4553, the rendering module 4554 are logical, and thus may be arbitrarily combined or further split according to the functions implemented.

In other embodiments, the page rendering apparatus provided in the embodiments of the present application may be implemented in hardware, and by way of example, the page rendering apparatus provided in the embodiments of the present application may be a processor in the form of a hardware decoding processor that is programmed to perform the page rendering method provided in the embodiments of the present application, for example, the processor in the form of a hardware decoding processor may employ one or more application specific integrated circuits (ASIC, application Specific Integrated Circuit), DSP, programmable logic device (PLD, programmable Logic Device), complex programmable logic device (CPLD, complex Programmable Logic Device), field programmable gate array (FPGA, field-Programmable Gate Array), or other electronic components.

In some embodiments, the terminal or the server may implement the page rendering method provided in the embodiments of the present application by running a computer program. For example, the computer program may be a native program or a software module in an operating system; the Application program can be a local (Native) Application program (APP), namely a program which can be installed in an operating system to run, such as an instant messaging APP and a web browser APP; the method can also be an applet, namely a program which can be run only by being downloaded into a browser environment; but also an applet that can be embedded in any APP. In general, the computer programs described above may be any form of application, module or plug-in.

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 is described below. In practical implementation, the page rendering method provided in the embodiment of the present application may be implemented by a terminal or a server alone, or implemented by the terminal and the server cooperatively, and the page rendering method provided in the embodiment of the present invention is illustrated by the terminal 400 in fig. 1 alone. Referring to fig. 3, fig. 3 is a flowchart of a page rendering method provided in an embodiment of the present application, and will be described with reference to the steps shown in fig. 3.

And step 101, the terminal acquires page element data of the target application.

In actual implementation, responding to the operation of a user on a display page on an interface presented by a target application, and acquiring page element data of the target application by the terminal. Here, the operation for the presentation page may be an input operation by the user in the target application, or may be a page switching operation, a previous page/next page operation, or the like. The presentation page may include multiple pages, such as multiple historical pages and current pages.

As an example, when the operation for the presentation page is an input operation of the user in the target application, that is, the user inputs a uniform resource locator (Uniform Resource Locator, URL) address in the target application, so that the terminal acquires page element data related to the updated page,

as an example, when the operation for the presentation page is the previous page operation, the current page is updated to the previous page of the current page every time the previous page operation is triggered (it should be noted that the current page and the history page are relative time concepts, it may be understood that after the update, the current page is converted to the history page, and the previous page of the current page is converted to the current page), so that the terminal acquires the page element data related to the updated page.

In actual implementation, the page element data related to the updated page acquired by the terminal may be page content expressed in extensible markup language (eXtensible Markup Language, XML) or hypertext markup language (HyperText Markup Language, HTML). The page content includes data that needs to be updated at regular time, such as news, advertisement, animation, video, etc. that is scrolled, and the presentation needs to be updated at regular time in a specific area of the page. After acquiring the contents, the terminal stores the contents in a database, acquires corresponding contents from the database and displays the contents when the page is required to be updated, for example, a certain specific area of the page is used for scrolling and playing a group of news, the group of news comprises 5 news, and after acquiring the contents of the group of news and storing the contents in the database, in the page rendering process, when the page contents are required to be updated, the terminal acquires corresponding data from the database to render and display.

For example, referring to fig. 4, fig. 4 is an optional schematic diagram of an application scenario of the page rendering method provided in the embodiment of the present application, as an example, the current page is a page corresponding to an account option in the frame 4-1 in fig. 4, where the page switching operation may be clicking of an amount option or a life option in the frame 4-1, that is, converting the current account page into an amount page or a life page, and the terminal obtains page element data about the amount page or the life page from a database or the internet to perform rendering presentation of the corresponding page.

Step 102, determining rendering data corresponding to at least one page element to be updated in the target application based on the page element data, and acquiring rendering parameters of each page element to be updated.

In practical implementation, after acquiring page element data of a target application, a terminal firstly analyzes the acquired page element data, inversely sequences the page element data into data objects, and then gives corresponding data object attribute information based on a preset template, wherein the preset template can be a function module, a class template, a member template, a nested class template and the like, and the attribute information can be a page itemType element type (video, audio and file), text information (displaying title and text), text attribute (word size, font and shadow), picture address (Url value) and the like.

As an example, when the preset Template is a class Template, an abstract class Template (for example, abstract Class Template) is declared, where the abstract class Template includes at least one common element and an externally provided interface method (for example, objWithXMLData), so that the method is used to receive externally transmitted common page element data, parse the common page element data, thereby generating a specific instance corresponding to the abstract class Template, and then adhere to a Template protocol, and attribute is given to the specific instance generated by parsing, where fig. 5 is an optional flowchart of the page rendering method provided in the embodiment of the application, specifically, by transmitting XML data into an XML data receiver, and then performing deserialization on the XML data through a Template protocol, determining rendering data and rendering parameters corresponding to at least one page element ItemA, itemB, itemC, … to be updated and ItemN in a target application.

In some embodiments, referring to fig. 6 for a process for determining rendering data corresponding to at least one page element to be updated in a target application, fig. 6 is an optional flowchart for determining rendering data corresponding to a page element to be updated according to an embodiment of the present application, and based on fig. 3, step 102 may be further implemented as follows:

and 1021, analyzing the page element data to obtain the tree structure of the page to be displayed.

In practical implementation, there may be different parsing modes for the acquired page element data, when the acquired page element data is an XML data file, corresponding information is taken out according to elements in the XML file and XML parsing is performed in time, the XML parsing is performed by two parsing modes, namely DOM parsing and SAX parsing, see fig. 7, fig. 7 is an optional schematic diagram of XML data parsing in the page rendering method provided in the embodiment of the present application, an XML receiver is created and is built in a client, and the received XML file is parsed, so that a corresponding process is performed on a data object obtained after parsing.

In practical implementation, the received page element data is inversely sequenced into a set of object models by the data receiver, the information is stored by using a data structure such as a tree, for example, referring to fig. 8, fig. 8 is an optional schematic diagram of data format conversion of the page rendering method provided in the embodiment of the present application, the received data is parsed into a DOM tree according to the Template protocol by the data receiver and a preset Template protocol, that is, attribute information stored by each node in the tree structure is determined according to the Template protocol, and the determined attribute information is given to the corresponding page element.

Step 1022, 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.

In practical implementation, firstly, element identifiers of page elements to be updated in a target application are acquired, then, traversing is started by taking a level of a root node of a tree structure as an initial level and a level of a leaf node of the tree structure as a final level, and the acquired element identifiers of the page elements to be updated are matched with node identifiers of nodes in the tree structure according to the direction from the initial level to the final level, so that a matching result is obtained, and when the matching result represents successful matching, the corresponding node is used as a node corresponding to the page element to be updated.

As an example, with continued reference to fig. 8, document represents the whole XML data, and is represented as the root of the whole DOM tree, that is, the entry of the tree structure, and the page element 1 is taken as the starting node, the element identifier of the obtained page element to be updated is matched with the node identifier of each node of each level step by step, such as the node ID value, and when the matching is successful, it is determined that the node is the node corresponding to the page element to be updated.

Step 1023, determining attribute data of at least two attribute dimensions corresponding to the nodes as rendering data for the nodes corresponding to each page element to be updated.

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

As an example, when the element identifier of each page element to be updated in the target application is 100, attribute data corresponding to a node with an ID of 100 is obtained as rendering data, for example, < title id= "100" > title, that is, according to an ID value of 100, attribute information corresponding to a node with an ID of 100 is regarded as the title content to be updated.

It should be noted that, when determining 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 may also be obtained.

In practical implementation, the process of obtaining the rendering parameters of each page element to be updated specifically includes firstly obtaining the element identifier of each page element to be updated in the target application, and obtaining, for each page element to be updated, the rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension, where the rendering parameters include, for example, 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, and the like.

It should be noted that, the process of obtaining the rendering parameters of each page element to be updated may be when determining rendering data corresponding to at least one page element to be updated in the target application, or may be after determining an image color block to which each page element to be updated belongs, and the process of obtaining the rendering parameters of each page element to be updated after determining an image color block to which each page element to be updated belongs is described in detail in step 103.

And step 103, determining image color blocks to which page elements to be updated belong, wherein the image color blocks and view levels in the page to be displayed are in one-to-one correspondence.

In actual implementation, after determining each page element to be updated, determining a view level at which each page element to be updated is located and an image color block corresponding to each view level, and then determining the page elements to be updated at the same view level as belonging to the image color block corresponding to the view level for each view level.

As an example, with continued reference to fig. 5, after determining the page elements ItemA, itemB, itemC, …, and ItemN of each page to be updated in the target application, the view levels to which the page elements ItemA, itemB, itemC, …, and ItemN correspond, and the image color blocks to which each level corresponds, such as the start level corresponding color block a, the end level corresponding color block B, and the ItemA and ItemB corresponding start level, and the ItemC and ItemN corresponding end level, the ItemA and ItemB corresponding color block a, itemC, and ItemN corresponding color block B, are determined, and thus, the page elements to be updated of the same level are assigned to the same color block to determine the image color block to which each page element to be updated belongs.

It should be noted that, for the determination of the image color blocks, the composition of each page may be regarded as a plurality of image color blocks, which are spliced and rendered, different image color blocks may be carried by various basic controls, for example, a picture control, a button control and a text control, and finally, the bottom layer of the image color block is rendered by a GPU, only the page elements to be updated in the color block, where, each page element to be updated is in the same hierarchy, there may be multiple forms of the page elements contained in the same image color block, see fig. 9 below, fig. 9 is an optional schematic diagram of the image color block determination in the page rendering method provided in the embodiment of the present application, as shown in fig. 9, the text elements in the frame 9-2 may be regarded as one image color block, and the image elements in the frame 9-1 may also be regarded as one image color block, where, the same image color block may also include both text elements and image elements, and the page elements to be updated included in the same image color block may only be satisfied in the same hierarchy.

In actual implementation, after determining the image color blocks to which each page element to be updated belongs, rendering data corresponding to the image color blocks of the same page are stored into a page set in the form of pages, wherein the page set comprises different pages, each page comprises a plurality of image color blocks, and each image color block comprises rendering data of at least one page element to be updated.

As an example, with continued reference to fig. 5, after determining the Page element ItemA, itemB, itemC to be updated and the image color block corresponding to the ItemN, the Page element ItemA, itemB, itemC to be updated and the rendering data corresponding to the ItemN are stored in the Page set in the form of color blocks, where, with continued reference to fig. 4, the Page set includes different pages that may be account pages, monetary pages, and life pages in fig. 4, and the color blocks included in each Page may be carried by various basic controls, such as a picture control, a button control, and a text control, for example, if the Page elements in the portion of fig. 4-1 are all Page elements to be updated in the same hierarchy, the Page elements may be regarded as the same color block, that is, the same color block includes rendering data of all Page elements to be updated in the corresponding hierarchy.

In actual implementation, after determining the image color block to which each page element to be updated belongs, the rendering parameters of the page element to be updated can be obtained, and specifically, the element identifier of each page element to be updated in the target application is obtained; and according to the element identification, aiming at each page element to be updated, acquiring rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension.

In the above example, after the Page element ItemA, itemB, itemC to be updated and the rendering data corresponding to the ItemN are stored in the Page set in the form of a color block, the OpenGL environment is initialized first, then the rendering parameters of the OpenGL are determined, that is, the OpenGL rendering parameters of a single element are obtained in the Page set according to the ID value, including 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, and the like, specifically, the context environment is started first, then GLKVIew is created as the basic view, and the color buffer, the depth buffer and the default background color are set.

Step 104, for each view level of the page to be displayed, rendering the page element to be updated in each image color block based on the rendering data and the rendering parameters by taking the image color block as a rendering unit, so as to display the page to be displayed.

In actual implementation, a first rendering thread is firstly created, and page elements to be updated in an image color block are rendered by taking the image color block as a rendering unit through the first rendering thread aiming at each view level of a page to be displayed. That is, through the created first rendering thread, based on the same page, rendering data corresponding to page elements to be updated are acquired from the page set by taking the image color block as a rendering unit, so that a rendered view level is determined, and then rendering is performed based on the acquired corresponding rendering parameters.

As an example, a first rendering thread is created first, then, the image color block is used as a unit to acquire the picture, text and button data to be updated from the page set, a rendered view level is determined, parameters such as a glBufferData vertex buffer area, the number of bytes where the data is located and the like are called, vertex data are copied from a memory to a GPU, a vertex coordinate data channel is opened to read the vertex data, a texture coordinate data channel is opened to read the texture data, the size of a view port is set, perspective projection is generated, and finally, glDrawrArys is called to be transferred to GL_ TRIANGLES to start rendering.

It should be noted that, the above-mentioned process of rendering the page element to be updated further includes a page element that does not need to be updated in the process of rendering the page, when the page element that needs to be updated is rendered, the page element that needs to be updated is parsed to the rendering parameters of OpenGL by taking the image color block as a unit, and the page element that does not need to be updated is rendered by the native mechanism, and then unified rendering callback loading is implemented. Here, the region occupying the main thread may be asynchronously drawn with OpenGL.

Next, a process of rendering page elements that do not need updating will be described in detail. Referring to fig. 10, fig. 10 is a schematic flow chart of an alternative procedure for rendering a page element that does not need to be updated according to an embodiment of the present application, and referring to fig. 10, a procedure for rendering a page element that does not need to be updated includes:

In step 201, the terminal obtains rendering data and rendering parameters of page elements in the page to be displayed, which do not need to be updated.

In practical implementation, in the process of acquiring a tree structure of a page to be displayed and traversing the tree structure to determine a node corresponding to a page element to be updated in a target application, a node corresponding to the page element to be updated in the target application is also determined, specifically, the acquired element identifier of each page element to be updated is matched with the node identifier of each node in the tree structure to obtain a matching result, when the matching result represents that the matching is successful, the corresponding node is used as the node corresponding to the page element to be updated, and when the matching result represents that the matching is unsuccessful, the corresponding node is used as the node corresponding to the page element to be updated. And for each node corresponding to the page element which does not need to be updated, acquiring rendering data and rendering parameters corresponding to the corresponding node.

Step 202, a second rendering thread is created.

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.

Step 203, based on the rendering data and the rendering parameters of the page elements that need not to be updated, rendering the page elements that need not to be updated in the page to be displayed through the second rendering thread.

In practical implementation, based on rendering data and rendering parameters of page elements which do not need to be updated, a process of rendering the page elements which do not need to be updated in a page to be displayed is to render the page control as a unit through a second rendering thread, specifically, based on the acquired rendering data and rendering parameters, a control of a corresponding type is created, the control is initialized, for example, if the control type is a button, a button picture is initialized, a button type is created according to an initialization method, corresponding parameters, a display area of the picture and the like are set according to a picture space, then corresponding data is modified, and a basic occupation map is changed into a network picture, namely the network picture is added to a background view for displaying.

It should be noted that, since the rendering mechanisms are different, the rendering end times are also different, so that it is necessary to uniformly determine the rendering end time, that is, the bitMap display time, where, referring to fig. 11, fig. 11 is an optional flowchart of the page rendering method provided in the embodiment of the present application, based on fig. 3, after step 104, the display time of the page to be displayed is determined by executing steps 301 to 303.

In step 301, the terminal determines a first time corresponding to the rendering completion of the page element to be updated by the first rendering thread, and a second time corresponding to the rendering completion of the page element which does not need to be updated by the second rendering thread.

In actual implementation, the rendering completion signal may be monitored first; when a rendering completion signal sent by a first rendering thread is monitored, determining a receiving time as the first time; and when the rendering completion signal sent by the second rendering thread is monitored, determining the receiving time as a second time.

The method for monitoring the signals after the rendering is completed may specifically be to monitor the rendering processes of the first rendering thread and the second rendering thread by a function call, for example, may be to synchronize the processes of the first rendering thread and the second rendering thread by a semaphore method, that is, when the first rendering thread and the second rendering thread are entered, each semaphore is obtained respectively, once the two threads end the rendering process, each of the two threads release its own semaphore, so, by monitoring whether the two threads release the semaphore, the monitoring of the signals after the rendering is completed is realized.

As an example, a semaphore is created, semaphore.wait () is called to start simultaneous rendering before rendering, and a renderClose method is introduced into the glutisplay func method to perform the interception of the end of redrawing. After Native layer page loading is completed, a layoutsubview method is called, the layoutsubview method is rewritten, semaphore signal () is set in render close, and after two rendering threads are completed, two signaling is received.

In practical implementation, the semaphore creation process may be completed by the first rendering thread and the second rendering thread, that is, the first rendering thread and the second rendering thread complete the creation of the semaphore of their own threads respectively, or the creation of the semaphore may be completed by a unified module, and the embodiment of the present application does not limit the manner of creating the semaphore.

Step 302, determining a page display time based on the time sequence of the first time and the second time.

In actual implementation, comparing the time sequence of the first time and the second time, and taking the lagged time as the page display time according to the comparison result. For example, native and OpenGL rendering end times are acquired, and the rendering end time of the process in which the rendering time takes a long time is taken as the bitMap display time.

Step 303, displaying the page to be displayed based on the page display time.

In actual implementation, after the bitMap display time is determined, generating and displaying the bitMap based on rendering results of the two rendering threads.

In some embodiments, after the current page is presented, a page switching process is involved, for example, with continued reference to fig. 4, that is, a process of switching an account page to a raw page or a financial page, referring to fig. 12, where fig. 12 is an optional flowchart of a page rendering method provided in an embodiment of the present application, based on fig. 3, after step 104, the page switching process is determined by performing steps 401 to 403.

In step 401, the terminal receives a page switching instruction for a target application, where the page switching instruction is used to instruct switching from a page to be displayed to a target page.

In practical implementation, firstly, a page switching instruction for a target application, which is used for indicating that a page to be displayed is switched to a target page, is received, and for example, the page switching instruction here may be triggered by a page turning operation of a page presented by a client by a user, for example, referring to fig. 4, when the current page is an account page, a Tab key of "life" or "finance" displayed in a frame 4-1 is clicked, so that switching of the page is realized.

In response to the page switch instruction, an image color block corresponding to each view level of the target page is determined, step 402.

In actual implementation, in response to a page switching instruction, acquiring a tree structure of a target page and element identifiers of page elements to be updated in the target page, traversing from a root node of the tree structure, determining a node corresponding to the page elements to be updated in the target page for each level of the target page, determining a view level in which the page elements to be updated in the target page are located and image color blocks corresponding to the view levels based on the node corresponding to the page elements to be updated in each level, and determining the page elements to be updated in the same view level as belonging to the image color blocks corresponding to the view level for each view level, so that the image color blocks corresponding to the view level of the target page are determined.

And step 403, multiplexing the same image color blocks when the target page has the same image color blocks as the page to be displayed, and performing page rendering based on the multiplexed image color blocks to display the target page.

In practical implementation, when the target page has the same image color block as the page to be displayed, multiplexing the same image color block, namely acquiring rendering data corresponding to the image color block stored in the previous page from the page set, further determining corresponding rendering parameters, and then performing page rendering based on the rendering data corresponding to the multiplexed image color block and the rendering parameters, thereby displaying the target page.

In this way, in the page switching process, based on multiplexing of the same image color blocks, the repeated process of acquiring the corresponding rendering data of the same image color blocks and storing the corresponding rendering data of the same image color blocks into the page set is effectively avoided, the time delay generated by acquiring the corresponding rendering data of the same image color blocks is effectively saved, and the loading efficiency is improved; meanwhile, the repeated storage process of the same rendering data is avoided, and the memory pressure is reduced.

By applying the embodiment of the invention, in the process of rendering the page, the rendering parameters and the rendering data corresponding to the page elements to be updated, which belong to the same image color block in the page to be displayed, are obtained for each view level of the page to be displayed, so that the page elements to be updated in each image color block are respectively rendered, and the page to be displayed is displayed, therefore, when a plurality of page elements to be updated exist in the image color block, the image color block is taken as a rendering unit, the whole of the plurality of page elements to be updated can be rendered, the process of rendering the page is effectively simplified, and the loading efficiency of the page to be updated is improved.

In the following, an exemplary application of the embodiments of the present application in an application scenario of a client will be described.

Referring to fig. 13, fig. 13 is an optional flowchart of a page rendering method provided in the embodiment of the present application, where XML data is parsed, a page is rendered based on two rendering threads of an OpenGL ES rendering mechanism and a Native rendering mechanism, and finally a render callback is determined according to the two different rendering threads of the OpenGL ES and the Native. Specifically, referring to fig. 14, fig. 14 is an optional flowchart of a page rendering method provided in an embodiment of the present application, and referring to fig. 14, the page rendering method provided in the embodiment of the present application is cooperatively implemented by a client and a server. Referring to fig. 14, the page rendering method provided in the embodiment of the present application includes:

in step 501, the client obtains page element data of the target application.

In actual implementation, in the process of loading the page, responding to the page switching operation of the user on the interface presented by the target application, the client side can acquire XML data from the server, or can acquire the XML data stored locally.

Illustratively, an XML receiver is created and built in the client, and when the user performs a page switch operation on the interface presented by the target application, the XML receiver receives the incoming XML data, i.e. declares an abstract class template (e.g. Abstract Class Template), which includes at least one common element and an externally provided interface method (e.g. obj withxmldata), so as to receive externally transmitted common page element data by using the method.

Step 502, the acquired page element data of the target application is de-sequenced into data objects.

In actual implementation, the received common page elements are parsed, so that a concrete instance corresponding to the abstract class template is generated.

Following the above example, the received XML data is de-sequenced into a collection of object models, and the information is stored in a data structure such as a tree.

In step 503, attribute information of the corresponding data object is given based on the class template protocol.

Here, the class template is used to indicate attribute information corresponding to each node in a tree structure of a preset page of the target application, and the attribute information may be a page itemType element type (video, audio, file), text information (displaying a title text), a text attribute (font size, font, shading), a picture address (Url value), and the like.

After the XML data receiver analyzes the received data into a DOM tree according to the Template protocol, determining attribute information stored by each node in the tree structure according to the Template protocol, and giving the determined attribute information to the corresponding page element.

Step 504, 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 determining the attribute data of the corresponding node as rendering data.

In actual implementation, firstly, element identifiers of page elements to be updated in a target application are acquired, then, the hierarchy in which the root node of the tree structure is located is taken as an initial hierarchy, the hierarchy in which the leaf node of the tree structure is located is taken as a termination hierarchy, the acquired element identifiers of the page elements to be updated are matched with node identifiers of nodes of each hierarchy step by step, such as node ID values, and when the matching is successful, the node is determined to be the node corresponding to the page element to be updated. Meanwhile, after determining the node corresponding to the page element to be updated, determining attribute data corresponding to the corresponding node based on the node identifier of the node corresponding to the page element to be updated as rendering data, for example, 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 identifier of 100, i.e. the ID of 100, is obtained as rendering data, for example < title id= "100" > title, i.e. according to the ID value of 100, the attribute information corresponding to the node with the ID of 100 is taken as the title content to be updated.

Step 505, determining an image color block to which each page element to be updated belongs, and storing rendering data corresponding to each page element to be updated into a page set in the form of the image color block.

In actual implementation, after determining each page element to be updated, determining a view level at which each page element to be updated is located and an image color block corresponding to each view level, and then determining the page elements to be updated at the same view level as belonging to the image color block corresponding to the view level for each view level. And then, after determining the image color blocks to which each page element to be updated belongs, storing rendering data corresponding to the image color blocks of the same page into a page set in the form of pages.

Step 506, determining rendering parameters of each page element to be updated based on rendering data corresponding to each page element to be updated in the page set.

In actual implementation, determining rendering parameters of OpenGL according to rendering data corresponding to element Identifications (IDs) of page elements to be updated in a page set, wherein the rendering parameters comprise the number of rendering textures, vertex buffer addresses, vertex coordinate data, an area where a drawing element is located, a basic view of the element and the like.

Step 507, sending rendering data corresponding to each page element to be updated in the page set and corresponding rendering parameters to the server

In step 508, the server creates a first rendering thread, and renders, by using the first rendering thread and the image color block as a rendering unit, based on the obtained rendering data corresponding to the updated page element and the corresponding rendering parameters, for each view level of the page to be displayed.

In practical implementation, the server firstly creates a first rendering thread, then acquires the picture, text and button data to be updated from the page set by taking the image color block as a unit, determines the rendering view level, calls parameters such as a glBufferData afferent vertex buffer area, the byte number where the data is located and the like, copies the vertex data from the memory to the GPU, opens a vertex coordinate data channel to read the vertex data, opens a texture coordinate data channel to read the texture data, sets the size of a view port, generates perspective projection, and finally calls a glDrawArrays afferent GL_ TRIANGLES to begin rendering.

Step 509, creating a second rendering thread, and rendering the page elements needing no update in the page to be displayed through the second rendering thread based on the acquired rendering data and rendering parameters of the page elements needing no update in the page to be displayed.

In actual implementation, the server firstly acquires rendering data and rendering parameters of page elements which do not need to be updated in the page to be displayed, then creates a second rendering thread, and renders the page elements which do not need to be updated in the page to be displayed through a native rendering mechanism by the second rendering thread.

Step 510, determining a first time corresponding to the rendering completion of the page element to be updated by the first rendering thread, and a second time corresponding to the rendering completion of the page element not to be updated by the second rendering thread.

In actual implementation, firstly, monitoring a rendering completion signal; when a rendering completion signal sent by a first rendering thread is monitored, determining a receiving time as the first time; and when the rendering completion signal sent by the second rendering thread is monitored, determining the receiving time as a second time.

Illustratively, a semaphore is created, semaphore.wait () is called to start simultaneous rendering before rendering, and a renderClose method is introduced into the glutisplay func method to perform the redrawing ending interception. After Native layer page loading is completed, a layoutreviews method is called, the layoutreviews method is rewritten, semaphore.signal () is set in render close, then Native and OpenGL rendering end opportunities are respectively obtained, namely, after two rendering threads are completed, two semaphore notifications can be received, and thus, the time for the completion of the two rendering threads is determined.

In step 511, the time sequence of the first time and the second time is compared, and the page display time is determined according to the comparison result.

Step 512, based on the page showing time, a page to be shown is generated.

And step 513, sending the page to be displayed to the client.

In step 514, the client displays the received page to be displayed.

Continuing with the description below of an exemplary architecture of the page rendering device 455 implemented as a software module provided by embodiments of the present application, in some embodiments, as shown in fig. 2, the software modules stored in the page rendering device 455 of the memory 440 may include:

a first obtaining module 4551, configured to obtain page element data of a target application;

a second obtaining module 4552, 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 obtain rendering parameters of each page element to be updated;

the determining module 4553 determines an image color block to which each page element to be updated belongs, wherein the image color blocks and the view levels in the page to be displayed are in one-to-one correspondence;

and the rendering module 4554 is configured to render, for each view level of the page to be displayed, page elements to be updated in each image color block with the image color block as a rendering unit, based on the rendering data and the rendering parameters, so as to display the page to be displayed.

In some embodiments, the second obtaining module 4552 is further configured to parse the page element data to obtain a tree structure of the page to be displayed; 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 for the node corresponding to each page element to be updated, determining attribute data of at least two attribute dimensions corresponding to the node as the rendering data.

In some embodiments, the second obtaining module 4552 is further configured to obtain an element identifier of each page element to be updated in the target application; traversing from the root node of the tree structure, and matching the element identifier with the node identifier of the node in the tree structure in the traversing process to obtain a matching result; and when the matching result represents successful matching, the corresponding node is used as the node corresponding to the page element to be updated.

In some embodiments, the second obtaining module 4552 is further configured to obtain an element identifier of each page element to be updated in the target application; and according to the element identification, aiming at each page element to be updated, acquiring rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension.

In some embodiments, the determining module 4553 is further configured to determine a view level at which each page element to be updated is located, and an image color block corresponding to each view level; for each view level, determining the page element to be updated in the view level as belonging to an image color block corresponding to the view level.

In some embodiments, the rendering module 4554 is further configured to create a first rendering thread; for each view level of the page to be displayed, rendering page elements to be updated in the image color block by taking the image color block as a rendering unit through the first rendering thread; the rendering module 4554 is further configured to obtain rendering data and rendering parameters of a page element that does not need to be updated in the page to be displayed; creating a second rendering thread; and rendering the page elements which do not need to be updated in the page to be displayed through the second rendering thread based on the rendering data and the rendering parameters of the page elements which do not need to be updated.

In some embodiments, the apparatus further includes a presentation module configured to determine a first time corresponding to completion of rendering the page element to be updated by the first rendering thread, and a second time corresponding to completion of rendering the page element that does not need to be updated by the second rendering thread; determining page display time based on the time sequence of the first time and the second time; and displaying the page to be displayed based on the page display time.

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

In some embodiments, the apparatus further includes a multiplexing module, configured to receive a page switching instruction for the target application, where the page switching instruction is configured to instruct switching from the page to be presented to a target page; determining image color blocks corresponding to each view level of the target page in response to the page switching instruction; and when the target page has the same image color block as the page to be displayed, multiplexing the same image color block, and performing page rendering based on the multiplexed image color block to display the target page.

Embodiments of the present application provide a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the 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 according to the embodiment of the present application.

The embodiments of the present application provide a computer-readable storage medium storing executable instructions that, when executed by a processor, cause the processor to perform a page rendering method provided by the embodiments of the present application, for example, a page rendering method as shown in fig. 3.

In some embodiments, the computer readable storage medium may be FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; but may be a variety of devices including one or any combination of the above memories.

In some embodiments, the executable instructions may be in the form of programs, software modules, scripts, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and they may be deployed in any form, including as stand-alone programs or as modules, components, subroutines, or other units suitable for use in a computing environment.

As an example, the executable instructions may, but need not, correspond to files in a file system, may be stored as part of a file that holds other programs or data, for example, in one or more scripts in a hypertext markup language (HTML, hyper Text Markup Language) document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files that store one or more modules, sub-programs, or portions of code).

As an example, executable instructions may be deployed to be executed on one computing device or on multiple computing devices located at one site or, alternatively, distributed across multiple sites and interconnected by a communication network.

In summary, the embodiment of the application has the following beneficial effects:

(1) Aiming at each view level of the page to be displayed, rendering parameters and rendering data corresponding to page elements to be updated, which belong to the same image color block, in the page to be displayed are obtained, so that the page elements to be updated in each image color block are respectively rendered, and the page to be displayed is displayed, and therefore, the process of rendering the page is effectively simplified, and the loading efficiency of the page to be updated is improved.

(2) In the page switching process, the rendering data of the image color blocks to be optimized are preprocessed and extracted, the selected color blocks can be determined by the server during loading/redrawing, and multiplexing of the same image color blocks is based, so that repeated processes of acquiring the corresponding rendering data of the same image color blocks and storing the corresponding rendering data of the same image color blocks to a page set are effectively avoided, time delay generated by acquiring the corresponding rendering data of the same image color blocks is effectively saved, loading efficiency is improved, simultaneously, repeated storage of the same rendering data is avoided, memory pressure is reduced, page smoothness of an application program is improved, and user experience is improved.

(3) Based on OpenGL ES, the Android system and the iOS system share one set of logic, so that the scheme can be used for rendering in both Android and iOS.

The foregoing is merely exemplary embodiments of the present application and is not intended to limit the scope of the present application. Any modifications, equivalent substitutions, improvements, etc. that are within the spirit and scope of the present application are intended to be included within the scope of the present application.

Claims

1. A method of page rendering, the method comprising:

acquiring page element data of a target application;

2. The method according to claim 1, wherein determining rendering data corresponding to at least one page element to be updated in the target application based on the page element data comprises:

analyzing the page element data to obtain a tree structure of the page to be displayed;

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 for the node corresponding to each page element to be updated, determining attribute data of at least two attribute dimensions corresponding to the node as the rendering data.

3. The method according to claim 2, wherein 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 comprises:

acquiring element identifiers of page elements to be updated in the target application;

traversing from the root node of the tree structure, and matching the element identifier with the node identifier of the node in the tree structure in the traversing process to obtain a matching result;

and when the matching result represents successful matching, the corresponding node is used as the node corresponding to the page element to be updated.

4. The method of claim 2, wherein the obtaining rendering parameters of each of the page elements to be updated comprises:

and according to the element identification, aiming at each page element to be updated, acquiring rendering parameters corresponding to the attribute data of the page element to be updated in each attribute dimension.

5. The method of claim 1, wherein determining the image color block to which each of the page elements to be updated belongs comprises:

determining a view level of each page element to be updated and an image color block corresponding to each view level;

for each view level, determining the page element to be updated in the view level as belonging to an image color block corresponding to the view level.

6. The method according to claim 1, wherein for each view level of the page to be displayed, rendering page elements to be updated in each image color block with the image color block as a rendering unit based on the rendering data and the rendering parameters, respectively, includes:

Creating a first rendering thread;

for each view level of the page to be displayed, rendering page elements to be updated in the image color block by taking the image color block as a rendering unit through the first rendering thread;

the method further comprises the steps of:

acquiring rendering data and rendering parameters of page elements which do not need to be updated in the page to be displayed;

creating a second rendering thread;

and rendering the page elements which do not need to be updated in the page to be displayed through the second rendering thread based on the rendering data and the rendering parameters of the page elements which do not need to be updated.

7. The method of claim 6, wherein the method further comprises:

determining a first time corresponding to the completion of the rendering of the page element to be updated by the first rendering thread and a second time corresponding to the completion of the rendering of the page element without updating by the second rendering thread;

determining page display time based on the time sequence of the first time and the second time;

and displaying the page to be displayed based on the page display time.

8. The method of claim 7, wherein the determining a first time corresponding to the first rendering thread completing the rendering of the page element to be updated and a second time corresponding to the second rendering thread completing the rendering of the page element without updating comprises:

When the rendering completion signal sent by the first rendering thread is monitored, determining a receiving time as the first time;

and when the rendering completion signal sent by the second rendering thread is monitored, determining the receiving time as the second time.

9. The method of claim 1, wherein after displaying the page to be displayed, the method further comprises:

receiving a page switching instruction aiming at the target application, wherein the page switching instruction is used for indicating that the page to be displayed is switched to a target page;

determining image color blocks corresponding to each view level of the target page in response to the page switching instruction;

and when the target page has the same image color block as the page to be displayed, multiplexing the same image color block, and performing page rendering based on the multiplexed image color block to display the target page.

10. A page rendering apparatus, the apparatus comprising: