Page display method and device, computer equipment, storage medium and program product
By detecting page update events and determining the rendering method according to the layout level of the target page elements, using virtual canvas for partial or full rendering, the problem of slow web page loading is solved, and faster loading speed and lower memory footprint are achieved.
Patent Information
- Application Number
- CN202411772581.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-04
- Publication Date
- 2025-03-04
AI Technical Summary
When dealing with complex graphics and large amounts of data, web pages are loading too slowly, mainly due to interaction matrix creation and excessive memory usage.
By detecting page update events, obtain the layout level of the target page elements, and determine the page rendering method based on the level. Use virtual canvas for partial or full rendering, redrawing only affected areas, reducing unnecessary redrawing and memory usage.
This has achieved an improvement in page loading speed, reduced the overhead and memory usage of page updates, and improved interactive effects and visual performance.
Smart Images
Figure CN119557529A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the technical field of front-end Web development, and in particular to a page display method, device, computer equipment, storage medium and program product. Background Art
[0002] Web canvas rendering technology refers to the use of the HTML5 canvas API of modern browsers, combined with some front-end technologies, to achieve richer and more efficient graphics drawing and animation effects.
[0003] However, when dealing with complex graphics and large amounts of data, the creation of a large number of interactive matrices and memory usage make web pages load too slowly. Summary of the invention
[0004] Based on this, it is necessary to provide a page display method, device, computer equipment, storage medium and program product to address the above technical problems, which can quickly realize page loading.
[0005] In a first aspect, the present application provides a page display method, the method comprising:
[0006] When an update event for the current page is detected, the target page element corresponding to the update event is obtained;
[0007] Determine the page rendering method based on the layout level of the target page elements;
[0008] Using page rendering, draw the target screen on the virtual canvas corresponding to the current page; wherein the target screen is the display screen after executing the update event;
[0009] The target screen is displayed in the display area of the current page.
[0010] In one embodiment, determining a page rendering method according to a layout level of a target page element includes:
[0011] When the layout level of the target page element is greater than the level threshold, the local rendering mode is determined as the page rendering mode; when the layout level of the target page element is less than or equal to the level threshold, the full rendering mode is determined as the page rendering mode.
[0012] In one embodiment, when the page rendering mode is a full rendering mode, the page rendering mode is adopted to draw a target screen on a virtual canvas corresponding to the current page, including:
[0013] Traverse the nodes in the document object model DOM tree of the page application corresponding to the current page, and when traversing to the node corresponding to the element in the current page, draw the target picture on the current corresponding virtual canvas according to the attribute data corresponding to the node in the DOM tree; wherein the attribute data includes element layout information; the elements in the current page include target page elements, and the element layout information of the node corresponding to the target element data includes the updated layout information of the target page elements.
[0014] In one embodiment, when the page rendering mode is a local rendering mode, the page rendering mode is adopted to draw a target picture on a virtual canvas corresponding to the current page, including:
[0015] Draw the current screen corresponding to the current page on the virtual canvas corresponding to the current page; determine the enclosing area corresponding to the target page element according to the original position of the target page element on the virtual canvas and the updated position of the original target page on the virtual canvas after executing the update event; obtain the element layout information of other page elements of the current page from the DOM tree of the page application corresponding to the current page; determine the elements to be redrawn according to the enclosing area and the element layout information of other elements; redraw the elements to be redrawn on the current screen to obtain the target screen.
[0016] In one embodiment, determining the element to be redrawn according to the element layout information of the surrounding area and other elements includes:
[0017] According to the element layout information of other elements, the elements overlapping with the enclosing area are determined; the target page element and the elements overlapping with the enclosing area are determined as elements to be redrawn.
[0018] In one embodiment, obtaining a target page element corresponding to an update event includes:
[0019] Determine the target position of the current page affected by the update event; and determine the target page element in the current page corresponding to the target position based on the correspondence between each candidate position and the page element in the current page.
[0020] In a second aspect, the present application further provides a page display device, the device comprising:
[0021] An acquisition module, used for acquiring a target page element corresponding to an update event when an update event for the current page is detected;
[0022] A determination module is used to determine the page rendering method according to the layout level of the target page elements;
[0023] A drawing module, used to draw a target screen on a virtual canvas corresponding to the current page by using a page rendering method; wherein the target screen is a display screen after executing an update event;
[0024] The display module is used to display the target image in the display area of the current page.
[0025] In a third aspect, the present application further provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the following steps are implemented:
[0026] When an update event for the current page is detected, the target page element corresponding to the update event is obtained;
[0027] Determine the page rendering method based on the layout level of the target page elements;
[0028] Using page rendering, draw the target screen on the virtual canvas corresponding to the current page; wherein the target screen is the display screen after executing the update event;
[0029] The target screen is displayed in the display area of the current page.
[0030] In a fourth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the following steps are implemented:
[0031] When an update event for the current page is detected, the target page element corresponding to the update event is obtained;
[0032] Determine the page rendering method based on the layout level of the target page elements;
[0033] Using page rendering, draw the target screen on the virtual canvas corresponding to the current page; wherein the target screen is the display screen after executing the update event;
[0034] The target screen is displayed in the display area of the current page.
[0035] In a fifth aspect, the present application further provides a computer program product, including a computer program, which implements the following steps when executed by a processor:
[0036] When an update event for the current page is detected, the target page element corresponding to the update event is obtained;
[0037] Determine the page rendering method based on the layout level of the target page elements;
[0038] Using page rendering, draw the target screen on the virtual canvas corresponding to the current page; wherein the target screen is the display screen after executing the update event;
[0039] The target screen is displayed in the display area of the current page.
[0040] The above-mentioned page display method, device, computer equipment, storage medium and program product, by obtaining the target page element corresponding to the update event when an update event for the current page is detected, lays a foundation for the subsequent determination of the page rendering method; further, the page rendering method can be determined according to the layout level of the target page element, providing an idea of determining the page rendering method according to the layout level; then, the page rendering method can be used to draw the target screen on the virtual canvas corresponding to the current page, that is, the display screen after the update event; finally, the target screen is displayed in the display area of the current page. This solution achieves better interactive effects and visual effects by introducing a virtual canvas; furthermore, by introducing the layout level of the target page element, it provides an idea for determining the page rendering method suitable for the update event, reduces the overhead of page updates, reduces memory usage, and ultimately achieves an increase in loading speed. BRIEF DESCRIPTION OF THE DRAWINGS
[0041] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the related technologies, the drawings required for use in the embodiments or the related technical descriptions are briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.
[0042] FIG1 is a schematic diagram of a flow chart of a page display provided in an embodiment of the present application;
[0043] FIG2 is a schematic diagram of a process for determining a page rendering method provided in an embodiment of the present application;
[0044] FIG3 is a schematic diagram of a process of drawing a target screen provided in an embodiment of the present application;
[0045] FIG4 is a schematic diagram of determining an element to be redrawn provided in an embodiment of the present application;
[0046] FIG5 is a schematic diagram of a flow chart of another page display method provided in an embodiment of the present application;
[0047] FIG6 is a structural block diagram of a page display device provided in an embodiment of the present application;
[0048] FIG. 7 is an internal structure diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0049] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.
[0050] The page display method provided in the embodiment of the present application, the terminal can display the picture in the display area of the current page. The terminal can be a mobile phone, a tablet computer, a television, a wearable device or a computer, etc., and the page can be a news page, a live page, a game page and a shopping page, etc. The type of the page can be a html5 (Hypertext Markup Language 5, Hypertext Markup Language 5) page and an ASP (Active Server Page, Dynamic Server Page) page, etc. The page can be provided by the operating system of the terminal, or by an application installed by the terminal, such as a Web (World Wide Web, World Wide Web) browser application, a news application, a microblog application, a live application, a social application and a shopping application, etc., or provided by a component installed by the terminal, such as a Webview (network view) component, etc. When the terminal is in full-screen working mode, the display area is the entire area of the page, and when the terminal is in non-full-screen working mode, the display area is a local area of the page, and the local area can be a square area formed by the center of the page and the side length of the specified distance, etc.
[0051] In an exemplary embodiment, as shown in FIG1 , a page display method is provided, which is described by taking the method applied to a terminal as an example, and may include the following steps:
[0052] S101, when an update event for the current page is detected, obtaining a target page element corresponding to the update event.
[0053] Among them, the update event can be any event that causes changes to the current page, such as adding graphics, removing graphics, or modifying canvas properties on the current web page; the target page element can represent the element with the smallest layout level among all the elements that have changed in the update event; optionally, the update event may involve multiple page elements, and the target page element (i.e., the element with the smallest layout level) is determined among these multiple page elements.
[0054] It should be noted that in web design, the layout of page elements is organized in layers. For example, each web application (i.e., page application) contains an application instance. For each application, container instances can be added to the application. A canvas node will be created inside each container. By creating multiple container instances, the web page canvas can be layered and optimized. Each container content also contains many child nodes and decorators (such as decorators of the type of event listeners, decorators of the type of canvas nodes, and decorators of the type of image resource download and acquisition), such as drawing the shape of the canvas through an interactive matrix. In the embodiment of the present application, the web application is the root node, that is, the layout level is 0, and the container instance inside the web application is the child node of the web application, that is, the layout level is 1; it can be understood that the smaller the number of layout levels, the closer to the root node, and the more child nodes are included.
[0055] Optionally, the update event of the current page can be monitored through a document object model DOM event listener or an observation mechanism, and the target page element corresponding to the update event can be obtained.
[0056] S102: Determine a page rendering method according to the layout level of the target page element.
[0057] Among them, page rendering methods include full rendering method and partial rendering method.
[0058] Optionally, the impact scope of the update event on the entire page can be determined based on the layout level of the target page element corresponding to the update event, that is, the page rendering method corresponding to the update event can be determined based on the impact scope of the update event on the entire page.
[0059] Exemplarily, the layout level of the target page element may be input into the rendering mode model, and the rendering mode model analyzes the layout level of the target page element and ultimately determines the page rendering mode.
[0060] S103, using a page rendering method to draw a target picture on a virtual canvas corresponding to the current page.
[0061] The virtual canvas is used to simulate the current page, that is, the position of the virtual canvas matches the position of the current page, the width of the virtual canvas is equal to the width of the current page, and the height of the virtual canvas is equal to the height of the current page; the target screen is the display screen after executing the update event.
[0062] Optionally, the terminal can extract the width, height and position of the current page (i.e., the display area) through javascript, so as to directly obtain information such as the width, height and position of the current page (i.e., the display area); and create a virtual canvas based on the information such as the width, height and position of the current page (i.e., the display area).
[0063] Exemplarily, the display effect after the current page executes the update event may be simulated on the virtual canvas in a full rendering mode and / or a partial rendering mode to obtain a display screen after the page executes the update event, that is, a target screen.
[0064] S104, displaying the target picture in the display area of the current page.
[0065] Exemplarily, the content of the virtual canvas may be rendered to the display area of the current page by using a graphics rendering technology. Optionally, it may be implemented by using JavaScript and an application developed using WPF (Windows Presentation Foundation).
[0066] The above-mentioned page display method, by obtaining the target page element corresponding to the update event when an update event for the current page is detected, lays a foundation for the subsequent determination of the page rendering method; further, the page rendering method can be determined according to the layout level of the target page element, providing an idea of determining the page rendering method according to the layout level; then, the page rendering method can be used to draw the target screen on the virtual canvas corresponding to the current page, that is, the display screen after the update event; finally, the target screen is displayed in the display area of the current page. This solution achieves better interactive and visual effects by introducing a virtual canvas; furthermore, by introducing the layout level of the target page element, it provides an idea for determining the page rendering method suitable for the update event, reduces the overhead of page updates, reduces memory usage, and ultimately achieves an increase in loading speed.
[0067] Based on the above embodiment, the present application embodiment explains the above embodiment S202 in detail. Specifically, the process of determining the page rendering mode in the present application embodiment, as shown in FIG2, specifically includes the following steps:
[0068] S201: When the layout level of the target page element is greater than the level threshold, determine the local rendering mode as the page rendering mode.
[0069] Among them, the level threshold can be determined according to the maximum number of levels of the application instance corresponding to the current page. For example, the level threshold can be determined as 50% of the maximum number of levels of the application instance corresponding to the current page. The local rendering method can represent a rendering method for redrawing elements related to the update event in the current page.
[0070] Exemplarily, if the layout level of the target page element is greater than the level threshold, it indicates that the target page element is at a lower position in the hierarchical structure (such as a tree structure), that is, the target page element changes in the page and the impact on the page will not be significant. In this case, the local rendering mode can be determined as the page rendering mode, and other page elements in the page will not be adjusted.
[0071] S202: When the layout level of the target page element is less than or equal to the level threshold, determine the full rendering mode as the page rendering mode.
[0072] Among them, the full rendering method refers to a rendering method of re-rendering the entire application instance corresponding to the current page, that is, starting from the root node of the application instance corresponding to the current page, traversing and gradually redrawing the page elements corresponding to the update event.
[0073] Exemplarily, if the layout level of the target page element is less than or equal to the level threshold, it indicates that the target page element is at a higher position in the hierarchical structure, that is, changes in the target page element in the page will cause changes in many page elements at lower positions in the hierarchical structure, that is, the impact on the page may be large, then the full rendering mode can be determined as the page rendering mode.
[0074] In an embodiment of the present application, by comparing the layout level of the target page element with the level threshold and determining the page rendering method according to the comparison result, a method is provided for achieving page update with minimum CPU (Central Processing Unit, Chinese name: central processing unit) expenditure.
[0075] Based on the above embodiment, the embodiment of the present application explains the above embodiment S203 in detail. Specifically, the embodiment of the present application involves the process of drawing the target screen on the virtual canvas corresponding to the current page when the page rendering mode is the full rendering mode, which specifically includes:
[0076] The nodes in the document object model DOM tree of the page application corresponding to the current page are traversed, and when the node corresponding to the element in the current page is traversed, the target screen is drawn on the current corresponding virtual canvas according to the attribute data corresponding to the node in the DOM tree.
[0077] The page application is a web application; the attribute data includes element layout information; the elements in the current page include target page elements, and the element layout information of the node corresponding to the target element data includes update layout information of the target page elements.
[0078] It should be noted that the DOM tree describes HTML or XML documents as document objects and organizes these objects into a tree structure, so that programming languages such as JavaScript can be used to dynamically access, modify, add or delete parts of the document. Optionally, when a browser loads an HTML or XML document (such as the document of a web application corresponding to the current page), the browser will parse the content of the document, such as identifying tags, attributes and text in the document, and converting them into nodes in the DOM tree.
[0079] Exemplarily, when the page rendering mode is the full rendering mode, the terminal will obtain the root node of the DOM tree of the page application corresponding to the current page, and then use a recursive or iterative method to traverse all nodes of the DOM tree and check the node types (including element nodes, attribute nodes, text nodes, and comment nodes, etc.); when it is determined that the currently traversed node is the node corresponding to the element in the current page, the attribute data of the element node is determined according to the tag name, ID (Identity document), class name or other attributes of the element node, and then the element node is drawn on the virtual canvas, and finally the drawing of the target screen is achieved.
[0080] In the embodiment of the present application, by introducing the DOM tree, a foundation is laid for obtaining information such as attribute data of each page element in the current page.
[0081] Based on the above embodiment, the embodiment of the present application explains the above embodiment S203 in detail. Specifically, the embodiment of the present application involves a process of drawing a target screen on a virtual canvas corresponding to the current page when the page rendering mode is a local rendering mode, as shown in FIG3, specifically including the following steps:
[0082] S301, drawing a current picture corresponding to the current page on a virtual canvas corresponding to the current page.
[0083] Exemplarily, based on the DOM tree of the page application corresponding to the current page, the effect of drawing the current page corresponding to the current screen on the virtual canvas can be achieved through HTML5 and JavaScript.
[0084] S302 : determining an enclosing area corresponding to the target page element according to the original position of the target page element on the virtual canvas and the updated position of the target page element on the virtual canvas after executing the update event.
[0085] Among them, the original position can represent the position of the target page element in the current page before the update event occurs; the updated position can represent the position of the target page element in the current page after the update event is executed; the enclosing area can include a rectangular area including the original position and the updated position of the target page element.
[0086] Exemplarily, the position of the target page element in the current page before the update event occurs can be expressed as: {x:0, y:0, width:100, height:100}. In the update event, the target page element is moved 50px to the right, that is, the position of the target page element in the current page is updated to: {x:50, y:0, width:100, height:100}, then the enclosing area corresponding to the target page element can be determined as: {x:0, y:0, width:150, height:100}.
[0087] S303: Obtain element layout information of other page elements of the current page from the DOM tree of the page application corresponding to the current page.
[0088] The element layout information may include but is not limited to information such as position, shape, background, and animation.
[0089] S304: Determine the element to be redrawn according to the element layout information of the surrounding area and other elements.
[0090] The elements to be redrawn may represent page elements that need to be re-rendered in the web application corresponding to the current page.
[0091] Exemplarily, the position information of the enclosing area and the element layout information of other elements may be directly input into the redrawing model, which analyzes and calculates them and finally determines the elements to be redrawn.
[0092] In one achievable method, elements overlapping with the enclosing area are determined according to element layout information of other elements; and target page elements and elements overlapping with the enclosing area are determined as elements to be redrawn.
[0093] Exemplarily, as shown in Figure 4, in the current page before the update event, the matrix 2 page element and the circle 1 page element partially overlap in the current page (i.e., the original position); after the update event is executed, the matrix 2 page element is moved to the lower right, and the matrix 2 page element after the update event partially overlaps with the matrix 3 page element in the current page (i.e., the updated position); based on the original position and updated position of the matrix 2 page element, the enclosing area corresponding to the matrix 2 page element can be determined (i.e., the dotted frame area-redrawing area); further, the element layout information of all page elements except the target page element in the current page can be compared with the position of the enclosing area (i.e., the dotted frame area), and the page elements (i.e., the circle 1 page element, the matrix 2 page element, the circle 2 page element and the matrix 3 page element) that overlap or partially overlap with the position corresponding to the enclosing area (i.e., the dotted frame area) are determined as elements to be redrawn.
[0094] Another possible implementation method is to appropriately adjust the enclosing area (such as expanding the enclosing area by 2 times) based on the element layout information of the target page element (such as animation effects and background color, etc.), and appropriately adjust the element layout information of the target page element in combination with the element layout information of the page element overlapping with the enclosing area (such as ensuring that the background color of the matrix 2 page element is different from the background color of the matrix 2 page element; if the background colors are the same, the background color of the matrix 2 page element can be appropriately adjusted to distinguish different page elements).
[0095] S305: redraw the elements to be redrawn on the current screen to obtain a target screen.
[0096] Exemplarily, based on the DOM tree and other information of the page application corresponding to the current page, the elements to be redrawn on the current screen can be redrawn through HTML5 and JavaScript to obtain the target screen.
[0097] In the embodiment of the present application, by introducing the enclosing area, the calculation scope for determining the elements to be redrawn is reduced, thereby laying a foundation for realizing local rendering and ultimately improving the display and update speed of the page.
[0098] Based on the above embodiment, the present embodiment of the application explains the above embodiment S201 in detail. Specifically, the process of obtaining the target page element corresponding to the update event in the present embodiment of the application specifically includes:
[0099] Determine the target position of the current page affected by the update event; and determine the target page element in the current page corresponding to the target position based on the correspondence between each candidate position and the page element in the current page.
[0100] Optionally, the update event may be triggered by mouse click, mouse movement, keyboard input and / or timer triggering, etc.; the correspondence between the page element and the page element boundary box may be saved in advance.
[0101] Exemplarily, if an update event is triggered by a mouse click, the coordinates of the click position relative to the current page can be obtained from the update event; the coordinates can also be converted into coordinates relative to a document or a container element; further, the correspondence between each page element in the current page and the page bounding box of each page element in the current page can be determined as the correspondence between each candidate position and the page element in the current page; further, the target position can be compared with each candidate position in the current page, and if there is a candidate position that is the same as the target position, the page element corresponding to the candidate position is determined as the target page element.
[0102] In the embodiment of the present application, by comparing the target position with each candidate position, the target page element in the update event can be quickly and accurately positioned.
[0103] Based on the above embodiment, this embodiment provides an optional example of a page display method. As shown in FIG5 , the specific implementation process is as follows:
[0104] S501: When an update event for a current page is detected, determine a target position of the current page to which the update event acts.
[0105] S502: Determine a target page element corresponding to the target position in the current page based on the correspondence between each candidate position and the page element in the current page.
[0106] S503, determine whether the layout level of the target page element is greater than the level threshold; if so, execute S504-S510; if not, execute S511.
[0107] S504: Determine the local rendering mode as the page rendering mode.
[0108] S505: Draw the current picture corresponding to the current page on the virtual canvas corresponding to the current page.
[0109] S506 , determining an enclosing area corresponding to the target page element according to the original position of the target page element on the virtual canvas and the updated position of the target page element on the virtual canvas after executing the update event.
[0110] S507: Obtain element layout information of other page elements of the current page from the DOM tree of the page application corresponding to the current page.
[0111] S508: Determine the elements overlapping the enclosing area according to the element layout information of other elements.
[0112] S509: Determine the target page element and the element overlapping with the enclosing area as elements to be redrawn.
[0113] S510: Redraw the elements to be redrawn on the current screen to obtain a target screen.
[0114] The target screen is the display screen after the update event is executed.
[0115] S511, traverse the nodes in the document object model DOM tree of the page application corresponding to the current page, and when traversing to the node corresponding to the element in the current page, draw the target picture on the current corresponding virtual canvas according to the attribute data corresponding to the node in the DOM tree.
[0116] The attribute data includes element layout information; the elements in the current page include target page elements, and the element layout information of the node corresponding to the target element data includes update layout information of the target page elements.
[0117] S512: Display the target picture in the display area of the current page.
[0118] The specific process of S501-S512 can refer to the description of the above method embodiment, and its implementation principle and technical effect are similar, which will not be repeated here.
[0119] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.
[0120] Based on the same inventive concept, the embodiment of the present application also provides a page display device for implementing the page display method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in one or more page display device embodiments provided below can refer to the limitations on the page display method above, and will not be repeated here.
[0121] In an exemplary embodiment, as shown in FIG6 , a page display device 1 is provided, comprising: an acquisition module 10, a determination module 20, a drawing module 30 and a display module 40, wherein:
[0122] The acquisition module 10 is used to acquire the target page element corresponding to the update event when an update event for the current page is detected.
[0123] The determination module 20 is used to determine the page rendering mode according to the layout level of the target page element.
[0124] The drawing module 30 is used to draw a target picture on a virtual canvas corresponding to the current page by using a page rendering method; wherein the target picture is a display picture after executing an update event.
[0125] The display module 40 is used to display the target picture in the display area of the current page.
[0126] In one embodiment, the determination module 20 is specifically configured to:
[0127] When the layout level of the target page element is greater than the level threshold, the local rendering mode is determined as the page rendering mode; when the layout level of the target page element is less than or equal to the level threshold, the full rendering mode is determined as the page rendering mode.
[0128] In one embodiment, the drawing module 30 is specifically used for:
[0129] Traverse the nodes in the document object model DOM tree of the page application corresponding to the current page, and when traversing to the node corresponding to the element in the current page, draw the target picture on the current corresponding virtual canvas according to the attribute data corresponding to the node in the DOM tree; wherein the attribute data includes element layout information; the elements in the current page include target page elements, and the element layout information of the node corresponding to the target element data includes the updated layout information of the target page elements.
[0130] In one embodiment, the drawing module 30 is further used for:
[0131] Draw the current screen corresponding to the current page on the virtual canvas corresponding to the current page; determine the enclosing area corresponding to the target page element according to the original position of the target page element on the virtual canvas and the updated position of the original target page on the virtual canvas after executing the update event; obtain the element layout information of other page elements of the current page from the DOM tree of the page application corresponding to the current page; determine the elements to be redrawn according to the enclosing area and the element layout information of other elements; redraw the elements to be redrawn on the current screen to obtain the target screen.
[0132] In one embodiment, the drawing module 30 is further used for:
[0133] According to the element layout information of other elements, the elements overlapping with the enclosing area are determined; the target page element and the elements overlapping with the enclosing area are determined as elements to be redrawn.
[0134] In one embodiment, the acquisition module 10 is specifically used for:
[0135] Determine the target position of the current page affected by the update event; and determine the target page element in the current page corresponding to the target position based on the correspondence between each candidate position and the page element in the current page.
[0136] Each module in the above page display device can be implemented in whole or in part by software, hardware or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute operations corresponding to each module.
[0137] In an exemplary embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be shown in FIG7. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit, and an input device. The processor, the memory, and the input / output interface are connected via a system bus, and the communication interface, the display unit, and the input device are connected to the system bus via the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner may be implemented through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a page display method is implemented. The display unit of the computer device is used to form a visually visible picture, which may be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device shell, or an external keyboard, touchpad or mouse.
[0138] Those skilled in the art will understand that the structure shown in FIG. 7 is merely a block diagram of a partial structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.
[0139] In an exemplary embodiment, a computer device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the following steps are implemented:
[0140] When an update event for the current page is detected, the target page element corresponding to the update event is obtained;
[0141] Determine the page rendering method based on the layout level of the target page elements;
[0142] Using page rendering, draw the target screen on the virtual canvas corresponding to the current page; wherein the target screen is the display screen after executing the update event;
[0143] The target screen is displayed in the display area of the current page.
[0144] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0145] When the layout level of the target page element is greater than the level threshold, the local rendering mode is determined as the page rendering mode; when the layout level of the target page element is less than or equal to the level threshold, the full rendering mode is determined as the page rendering mode.
[0146] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0147] Traverse the nodes in the document object model DOM tree of the page application corresponding to the current page, and when traversing to the node corresponding to the element in the current page, draw the target picture on the current corresponding virtual canvas according to the attribute data corresponding to the node in the DOM tree; wherein the attribute data includes element layout information; the elements in the current page include target page elements, and the element layout information of the node corresponding to the target element data includes the updated layout information of the target page elements.
[0148] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0149] Draw the current screen corresponding to the current page on the virtual canvas corresponding to the current page; determine the enclosing area corresponding to the target page element according to the original position of the target page element on the virtual canvas and the updated position of the original target page on the virtual canvas after executing the update event; obtain the element layout information of other page elements of the current page from the DOM tree of the page application corresponding to the current page; determine the elements to be redrawn according to the enclosing area and the element layout information of other elements; redraw the elements to be redrawn on the current screen to obtain the target screen.
[0150] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0151] According to the element layout information of other elements, the elements overlapping with the enclosing area are determined; the target page element and the elements overlapping with the enclosing area are determined as elements to be redrawn.
[0152] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:
[0153] Determine the target position of the current page affected by the update event; and determine the target page element in the current page corresponding to the target position based on the correspondence between each candidate position and the page element in the current page.
[0154] In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:
[0155] When an update event for the current page is detected, the target page element corresponding to the update event is obtained;
[0156] Determine the page rendering method based on the layout level of the target page elements;
[0157] Using page rendering, draw the target screen on the virtual canvas corresponding to the current page; wherein the target screen is the display screen after executing the update event;
[0158] The target screen is displayed in the display area of the current page.
[0159] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0160] When the layout level of the target page element is greater than the level threshold, the local rendering mode is determined as the page rendering mode; when the layout level of the target page element is less than or equal to the level threshold, the full rendering mode is determined as the page rendering mode.
[0161] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0162] Traverse the nodes in the document object model DOM tree of the page application corresponding to the current page, and when traversing to the node corresponding to the element in the current page, draw the target picture on the current corresponding virtual canvas according to the attribute data corresponding to the node in the DOM tree; wherein the attribute data includes element layout information; the elements in the current page include target page elements, and the element layout information of the node corresponding to the target element data includes the updated layout information of the target page elements.
[0163] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0164] Draw the current screen corresponding to the current page on the virtual canvas corresponding to the current page; determine the enclosing area corresponding to the target page element according to the original position of the target page element on the virtual canvas and the updated position of the original target page on the virtual canvas after executing the update event; obtain the element layout information of other page elements of the current page from the DOM tree of the page application corresponding to the current page; determine the elements to be redrawn according to the enclosing area and the element layout information of other elements; redraw the elements to be redrawn on the current screen to obtain the target screen.
[0165] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0166] According to the element layout information of other elements, the elements overlapping with the enclosing area are determined; the target page element and the elements overlapping with the enclosing area are determined as elements to be redrawn.
[0167] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0168] Determine the target position of the current page affected by the update event; and determine the target page element in the current page corresponding to the target position based on the correspondence between each candidate position and the page element in the current page.
[0169] In one embodiment, a computer program product is provided, comprising a computer program, which, when executed by a processor, implements the following steps:
[0170] When an update event for the current page is detected, the target page element corresponding to the update event is obtained;
[0171] Determine the page rendering method based on the layout level of the target page elements;
[0172] Using page rendering, draw the target screen on the virtual canvas corresponding to the current page; wherein the target screen is the display screen after executing the update event;
[0173] The target screen is displayed in the display area of the current page.
[0174] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0175] When the layout level of the target page element is greater than the level threshold, the local rendering mode is determined as the page rendering mode; when the layout level of the target page element is less than or equal to the level threshold, the full rendering mode is determined as the page rendering mode.
[0176] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0177] Traverse the nodes in the document object model DOM tree of the page application corresponding to the current page, and when traversing to the node corresponding to the element in the current page, draw the target picture on the current corresponding virtual canvas according to the attribute data corresponding to the node in the DOM tree; wherein the attribute data includes element layout information; the elements in the current page include target page elements, and the element layout information of the node corresponding to the target element data includes the updated layout information of the target page elements.
[0178] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0179] Draw the current screen corresponding to the current page on the virtual canvas corresponding to the current page; determine the enclosing area corresponding to the target page element according to the original position of the target page element on the virtual canvas and the updated position of the original target page on the virtual canvas after executing the update event; obtain the element layout information of other page elements of the current page from the DOM tree of the page application corresponding to the current page; determine the elements to be redrawn according to the enclosing area and the element layout information of other elements; redraw the elements to be redrawn on the current screen to obtain the target screen.
[0180] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0181] According to the element layout information of other elements, the elements overlapping with the enclosing area are determined; the target page element and the elements overlapping with the enclosing area are determined as elements to be redrawn.
[0182] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:
[0183] Determine the target position of the current page affected by the update event; and determine the target page element in the current page corresponding to the target position based on the correspondence between each candidate position and the page element in the current page.
[0184] It should be noted that the information (including but not limited to page information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.
[0185] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.
[0186] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.
[0187] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.
Claims
1. A page display method, characterized in that: The method comprises: When an update event for the current page is detected, obtaining a target page element corresponding to the update event; Determining a page rendering method according to the layout level of the target page element; Using the page rendering method, drawing a target screen on the virtual canvas corresponding to the current page; wherein the target screen is the display screen after executing the update event; The target screen is displayed in a display area of the current page.
2. The method according to claim 1, characterized in that The determining of the page rendering mode according to the layout level of the target page element includes: When the layout level of the target page element is greater than the level threshold, determining the local rendering mode as the page rendering mode; When the layout level of the target page element is less than or equal to the level threshold, the full rendering mode is determined as the page rendering mode.
3. The method according to claim 1 or 2, characterized in that: In the case where the page rendering mode is a full rendering mode, the page rendering mode is adopted to draw a target picture on a virtual canvas corresponding to the current page, including: Traversing the nodes in the document object model DOM tree of the page application corresponding to the current page, and when traversing to the node corresponding to the element in the current page, drawing the target picture on the current corresponding virtual canvas according to the attribute data corresponding to the node in the DOM tree; The attribute data includes element layout information; the elements in the current page include the target page elements, and the element layout information of the node corresponding to the target element data includes updated layout information of the target page elements.
4. The method according to claim 1 or 2, characterized in that: In the case where the page rendering mode is a local rendering mode, the page rendering mode is adopted to draw a target picture on a virtual canvas corresponding to the current page, including: Drawing a current picture corresponding to the current page on a virtual canvas corresponding to the current page; Determine an enclosing area corresponding to the target page element according to an original position of the target page element on the virtual canvas and an updated position of the target page element on the virtual canvas after executing the update event; Obtaining element layout information of other page elements of the current page from the DOM tree of the page application corresponding to the current page; Determine the element to be redrawn according to the enclosing area and the element layout information of the other elements; The elements to be redrawn on the current screen are redrawn to obtain a target screen.
5. The method according to claim 4, characterized in that The determining the element to be redrawn according to the element layout information of the enclosing area and the other elements includes: Determining, according to the element layout information of the other elements, elements overlapping with the enclosing area; The target page element and the element overlapping with the enclosing area are determined as elements to be redrawn.
6. The method according to claim 1, characterized in that The obtaining of the target page element corresponding to the update event includes: Determining a target position of the current page to which the update event applies; Based on the correspondence between each candidate position and the page element in the current page, a target page element corresponding to the target position in the current page is determined.
7. A page display device, characterized in that: The device comprises: An acquisition module, used for acquiring a target page element corresponding to an update event when an update event for the current page is detected; A determination module, used to determine a page rendering mode according to a layout level of the target page element; A drawing module, used to draw a target picture on the virtual canvas corresponding to the current page by using the page rendering method; wherein the target picture is a display picture after executing the update event; A display module is used to display the target picture in a display area of the current page.
8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.
10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.