A method for rendering web pages based on virtual DOM

Abstract

The present invention discloses a method for rendering a webpage based on a virtual DOM, characterized by comprising: S1. obtaining image and webpage data and determining the number of virtual DOM columns (Col); S2. placing the image data into the columns of the virtual DOM based on dynamic programming; S3. rendering the virtual DOM image data onto the webpage based on the positions of two pointers; and S4. clearing the DOM structure of the rendered image. The technical solution provided by the present invention can expand the network nodes of the basic network, improve the aesthetics of the waterfall layout, and enhance the efficiency of the layout process.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method for rendering a web page based on a virtual DOM. Background Art

[0002] Current websites are flooded with pages displaying lists of images, text, and videos. A waterfall layout approach, often implemented using virtual DOM-based web page rendering, is the preferred layout approach for these lists due to its aesthetically pleasing UI, user-friendly operation, and ease of use. However, existing waterfall layout techniques suffer from the following drawbacks: 1. Layout algorithm flaws: Traditional greedy algorithms prioritize filling the shortest columns, resulting in excessively high standard deviations in column heights and prone to layout collapse when encountering extremely long elements. 2. Rendering performance bottlenecks: For example, when the number of Document Object Model (DOM) elements exceeds 500, memory usage exceeds 800MB and the scrolling frame rate (FPS) drops below 20. 3. Computational inefficiency: Traditional traversal queries have a time complexity of O(n²), resulting in initial rendering delays exceeding 5 seconds for tens of thousands of data items. 4. Poor visual experience: Uneven element distribution creates gaps, significantly impacting visual integrity. Summary of the Invention

[0003] The purpose of this application is to provide a method for rendering web pages based on virtual DOM, aiming to solve the technical problem that the standard deviation of the height of images in the traditional greedy algorithm is too high, which easily leads to layout collapse.

[0004] To achieve the above objectives, the present application proposes a method for rendering a web page based on a virtual DOM, characterized in that the method includes:

[0005] S1. Get the image and web page data and get the number of columns in the virtual DOM (Col);

[0006] S2. Place the image data into a column of the virtual DOM based on dynamic programming;

[0007] S3. Render the virtual DOM image data to the web page according to the double pointer position;

[0008] S4. Clear the virtual DOM structure of the rendered image.

[0009] Preferably, the step S1 includes:

[0010] The number of columns Col is the largest positive integer that is less than or equal to the ratio of the width of the web page to the width of the image.

[0011] Preferably, the step S2 includes:

[0012] Determine whether the number of columns Col is greater than 1. When Col=1, all images are placed directly into the DOM column. When col≥2, unassigned images are placed into the current DOM column sequentially until all DOM columns meet the following conditions:

[0013] The sum of the heights of the images placed in the current DOM column (ColHeight) is less than or equal to the average global image height (avg), and the sum of the heights of the images placed in the current DOM column (ColHeight) plus the height of the next image to be placed (P_N_Height) is greater than the average global image height (Avg).

[0014] Traverse the height Pctr_Hight of the remaining pictures and the height of all pictures placed in the current DOM column, and find the ColHeight deviation value delta = |colHeight-Pctr_Hight|. Select the picture with the smallest delta and put it into the current column.

[0015] Preferably, the global average image height avg = (Σ(each image height) + Σ(DOM column height)) / Col, where the DOM column height is the sum of the heights of all images placed in the DOM column. Upon initialization, the DOM column height is zero.

[0016] Preferably, the step S3 includes:

[0017] S31. Get the image element information of the DOM column;

[0018] S32. Confirm the rendering interval using a double-pointer algorithm based on the image element information;

[0019] S33. Render the image data of the DOM column to the web page based on the range of the rendering interval.

[0020] Preferably, the step S31 includes:

[0021] Get the DOM column image information including: Pctr_NY{Height, Y_HeadOffeset, Y_Tailoffset}, where Pctr_NY refers to the Nth column, the Yth image, Height refers to the image height, Y_HeadOffeset refers to the position of the head of the Yth image, and Y_Tailoffsett refers to the position of the tail of the Yth image.

[0022] Preferably, the step S32 includes:

[0023] S321. Get the element information of the picture pointed to by the current head pointer and tail pointer;

[0024] S322. Get the offset M of the user behavior, set the head pointer to the head position of the element of the T-th picture T_HeadOffeset+M, and set the tail pointer to the head position of the element of the X-th picture X_HeadOffeset+M;

[0025] S323. Re-point the head pointer to the picture Ptr_NZ where Z_HeadOffeset≤(T_HeadOffeset+M)≤Z_Tailoffset, and the tail pointer to the picture Ptr_DZ where D_HeadOffeset≤(X_HeadOffeset+M)≤D_Tailoffset;

[0026] S324. The rendering interval is for pictures whose head positions are between the head positions pointed to by the head pointer and the tail pointer.

[0027] Preferably, the step S321 includes:

[0028] During initialization, the head pointer points to the element of the first picture in each column of the DOM, that is, 1_HeadOffeset=0, and the tail pointer points to the picture Pctr_NZ, whose picture element information satisfies Z_HeadOffeset≤window height WH≤Z_Tailoffsett.

[0029] One or more technical solutions proposed in this application have at least the following technical effects:

[0030] When loading image data into the virtual DOM, the traditional greedy algorithm prioritizes filling the shortest column, resulting in an excessively high standard deviation of column heights. This can easily cause layout collapse when encountering overly long elements. The dynamic programming method of the present invention can improve the regularity and aesthetics of the waterfall layout.

[0031] The double pointer algorithm is used to calculate the position of the corresponding image elements, reducing the computational complexity and number of operations, improving computational efficiency and lowering equipment requirements. Compared with common traversal queries, the efficiency is significantly improved.

[0032] By using virtual DOM technology, the real DOM structure only retains the DOM elements within the user's visible range, and the remaining real DOM elements can be deleted, avoiding the problems of freezes and white screens caused by excessive data volume in common waterfall flow algorithms. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the structures shown in these drawings without paying any creative work.

[0034] Figure 1 This is a flowchart of a method for rendering a web page based on a virtual DOM according to an embodiment of the present invention;

[0035] Figure 2 This is a schematic diagram of rendering of a DOM structure image when initialized for the first time according to an embodiment of the present invention;

[0036] Figure 3 This is a schematic diagram of rendering of a DOM structure image when a user slides a certain distance according to an embodiment of the present invention;

[0037] The purpose, features and advantages of the present invention will be further described with reference to the accompanying drawings and in conjunction with the embodiments. DETAILED DESCRIPTION

[0038] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making any creative efforts shall fall within the scope of protection of the present invention.

[0039] It should be noted that if the embodiments of the present invention involve directional indications (such as up, down, left, right, front, back...), the directional indications are only used to explain the relative position relationship, movement status, etc. between the components in a certain specific posture. If the specific posture changes, the directional indications will also change accordingly.

[0040] In addition, if there are descriptions involving "first", "second", etc. in the embodiments of the present invention, the descriptions of "first", "second", etc. are only for descriptive purposes and cannot be understood as indicating or suggesting their relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features limited to "first" and "second" may explicitly or implicitly include at least one of such features. In addition, if "and / or" or "and / or" appears in the full text, its meaning includes three parallel solutions. Taking "A and / or B" as an example, it includes solution A, solution B, or solutions that satisfy both A and B. In addition, the technical solutions between the various embodiments can be combined with each other, but it must be based on the ability of ordinary technicians in this field to implement. When the combination of technical solutions is mutually contradictory or cannot be implemented, it should be deemed that such a combination of technical solutions does not exist and is not within the scope of protection required by the present invention.

[0041] The present invention provides a method for rendering web pages based on virtual DOM, aiming to solve the technical problem of large standard deviation of image heights in traditional greedy algorithms.

[0042] Example 1:

[0043] like Figure 1 As shown in the flowchart of a method for rendering a web page based on a virtual DOM, in order to solve the technical problem of large standard deviation of DOM column image height in the traditional greedy algorithm, this embodiment provides a method for rendering a web page based on a virtual DOM, including the following steps:

[0044] When displaying images on a web page, if there is too much data, a white screen or freezes are likely to occur, whether it is rendered all at once or scrolled through. This is because when the list data is large, the page renders too many nodes, and these nodes contain sub-nodes, which will consume a huge amount of performance. In the mini program, it may also cause a crash due to insufficient memory.

[0045] Therefore, the present invention adopts a virtual list, that is, a virtual DOM to render the web page to realize the waterfall flow layout.

[0046] S1. Get the image and web page data and get the number of columns in the virtual DOM (Col);

[0047] First, we retrieve the image data from the cloud server and store it in the array tempList = [{url1:"image link", height:"image height"},{url2:"image link", height:"image height"},...{urlZ:"image link", height:"image height"}], where z is a positive integer. Since the acquired images vary in size and ratio, we process the acquired images and unify their widths to the same fixed width imgWidth. We use the browser's built-in functions window.innerHeight and window.innerWidth to obtain the height and width of the webpage, defining them as innerHeight and innerWidth, respectively.

[0048] The number of columns of the virtual DOM, Col, is calculated based on the webpage width and the image width, and is the largest positive integer that is less than or equal to the ratio of the webpage width to the image width, innerWidth / imgWidth.

[0049] Based on the obtained image data, the number of DOM columns Col is obtained and named m_1, m_2, ..., m_Col in sequence. The height of each column is initialized to 0. Because the number of waterfall flow columns is equal to the number of DOM columns, it actually corresponds to the number of columns in the waterfall flow layout.

[0050] S2. Place the image data into a virtual DOM column based on dynamic programming;

[0051] The greedy algorithm prioritizes filling the shortest column, resulting in an excessively high standard deviation of column heights, which can easily cause layout collapse when encountering overlong elements. The present invention adopts a dynamic programming method in the process of filling virtual columns, resulting in a more beautiful shape and a more reasonable layout.

[0052] The image data obtained in step S1 needs to be organized into regular DOM columns, specifically including:

[0053] First, determine whether the number of columns Col is greater than 1. When Col=1, all images can be placed directly into the DOM column;

[0054] Traditional dynamic programming is only applicable to two-column layouts due to its computational complexity. The present invention reduces the time complexity to 0(n log n) through a divide-and-conquer iterative method, supporting complex scenarios with 10+ columns.

[0055] When Col ≥ 2, calculate the global average height (avg) = (Σ(each image height) + Σ(DOM column height)) / Col. The height of each DOM column is the sum of the heights of all images placed in the column. Initially, each DOM column is zero. This global average height (avg) serves as the target padding height for each column, or the dynamic programming target. Because when DOM image data is rendered to a webpage, as the webpage scrolls, image data (DOM elements) in the current DOM column may remain and not be fully displayed. Therefore, the height of the current DOM column must be considered during subsequent rendering.

[0056] First, fill in the basic structure of DOM.

[0057] Sequentially place unassigned images into the current DOM column until all DOM columns meet the following conditions:

[0058] The sum of the heights of the images placed in the current DOM column (ColHeight) is less than or equal to the global average image height (avg), and the sum of the heights of the images placed in the current DOM column (ColHeight) plus the height of the next image to be placed (P_N_Height) is greater than the global average image height (Avg).

[0059] Finally, perform an exact match on each column until all DOM columns meet the following conditions:

[0060] Traverse the height Pctr_Hight of the remaining pictures and the height of all pictures placed in the current DOM column, and find the ColHeight deviation value delta = |colHeight-Pctr_Hight|. Select the picture with the smallest delta and put it into the current column.

[0061] Compared with the common single-pointer method of confirming the rendering interval, the dual-pointer solution is faster and less prone to white screen.

[0062] S3. Render the virtual DOM image data to the web page according to the double pointer position;

[0063] S31. Get the image element information of the DOM column;

[0064] In a virtual DOM column, each image has its own coordinate information, represented by its head position, tail position, and height. The DOM column image element information obtained includes: Pctr_NY{Height, Y_HeadOffeset, Y_Tailoffset}, where Pctr_NY refers to the Nth column, the Yth image, Height refers to the image height, Y_HeadOffeset refers to the Yth image's head position, and Y_Tailoffset refers to the Yth image's tail position.

[0065] S32. Confirm the rendering interval using a double-pointer algorithm based on the image element information;

[0066] S321. Get the element information of the pictures pointed to by the current head pointer and tail pointer; during initialization, the head pointer points to the element of the first picture in each column of the DOM, that is, 1_HeadOffeset=0, and the tail pointer points to the picture Pctr_NZ. The picture element information needs to satisfy Z_HeadOffeset≤window height WH≤Z_Tailoffsett.

[0067] S322. Get the offset M of the user behavior, which is negative when the user slides up and positive when the user slides down. Set the head pointer to the head position of the element of the T-th picture, T_HeadOffeset+M, and the tail pointer to the head position of the element of the X-th picture, X_HeadOffeset+M.

[0068] S323. Re-point the head pointer to the picture Ptr_NZ where Z_HeadOffeset≤(T_HeadOffeset+M)≤Z_Tailoffset, and the tail pointer to the picture Ptr_DZ where D_HeadOffeset≤(X_HeadOffeset+M)≤D_Tailoffset;

[0069] Specifically, for example, there is the image element information of the DOM column Col=1:

[0070] Pctr_11{

[0071] Height:300, / / Height

[0072] 1_headOffset:0, / / head position

[0073] 1_tailOffset: 300 / / Tail position

[0074] },

[0075] Pctr_12{

[0076] Height: 400,

[0077] 2_headOffset: 300,

[0078] 2_tailOffset: 700

[0079] },

[0080] Pctr_13 {

[0081] Height: 500,

[0082] 3_headOffset: 700,

[0083] 3_tailOffset: 1200

[0084] },

[0085] Pctr_14 {

[0086] Height: 200,

[0087] 4_headOffset: 1200,

[0088] 4_tailOffset: 1400

[0089] },

[0090] Pctr_15 {

[0091] Height: 300, [[ID=z56]]

[0092] 5_headOffset: 1400,

[0093] 5_tailOffset: 1700

[0094] },

[0095] Pctr_16 {

[0096] Height: 400,

[0097] 6_headOffset: 1700,

[0098] 6_tailOffset: 2100

[0099] }。[[ID=z79]]

[0100] Unit: mm.

[0101] The innerHeight of the current page is obtained as 1080, which is the viewport height WH. Initially, the user behavior offset M is 0. First, the head and tail pointers point to the first element. The head pointer points to the element of the first image in each DOM column, that is, 1_HeadOffset=0, that is, Pctr_11. The tail pointer points to the image Pctr_NZ element with Z_HeadOffeset≤viewport height WH≤Z_Tailoffsett. According to the condition, the search is Pitr_13,3_headOffset:700. <WH=1080<3_tailOffset:1200 。

[0102] Therefore, the tail pointer points to the third element Pitr_13; and the interval between the head pointer and the tail pointer, that is, the three elements Pctr_11, Pctr_12, and Pctr_13 are the image elements rendered this time;

[0103] Dynamically, when the user is acquired and the subsequent user slides down 400 distance, that is, M=400, then it can be known that the head pointer needs to be dynamically positioned to Z_HeadOffeset≤(T_HeadOffeset+M)≤Z_Tailoffset, starting from the head position T_HeadOffeset of the element Pitr_11 (the first element) pointed by the head pointer, T=1, 1_HeadOffeset+M=400, traverse downward in sequence, and find the second element Pitr_12: 2_headOffset:300, 2_tailOffset:700 The picture element conditions of the top head height of the picture element <= 400 and the bottom position of the element >= 400 are met, so the head pointer points to the second element again; similarly, the tail pointer needs to be dynamically positioned to the picture element whose head height is <= 1080+400 and whose bottom position is >= 1080+400. Starting from the element Pitr_13 (the third element) pointed by the tail pointer, traverse downward to find the fifth element Pitr_15, 5_headOffset: 1400, 5_tailOffset: 1700. The above conditions are met, so the head pointer points to the fifth element Pitr_15. At this time, the interval between the head and tail pointers, that is, the second, third, fourth, and fifth elements are the element intervals that need to be rendered.

[0104] Compared to the common single-pointer rendering interval confirmation method, the dual-pointer solution is faster and less prone to white screens. The single-pointer rendering interval confirmation method uses a single pointer to point to the index of the image element currently rendered on the screen in the DOM column. For example, if the third, fourth, and fifth elements in the virtual column are rendered on the screen, the single pointer points to the fifth element. When the screen scrolls, the element pointed to by the single pointer is checked upwards and downwards based on the conditions to determine whether it should be displayed. Compared to this method, the dual-pointer solution is faster. For example, in a common scenario, a screen displays about six elements. In most cases, each scroll is about a quarter of the screen, meaning that each scroll requires rendering one or two elements to the screen. In this case, the dual-pointer method only needs to check the index of one element near the pointer, while the single-pointer method requires traversing up and down seven to eight times, a sixfold performance difference.

[0105] S324. The rendering interval is for pictures whose head positions are between the head positions pointed to by the head pointer and the tail pointer.

[0106] S33. Render the image data of the DOM column to the web page based on the range of the rendering interval.

[0107] Call the browser Document API to batch generate DOM elements within the pointer range, convert the image coordinates into actual web page screen coordinates through the absolute positioning algorithm, and complete efficient drawing based on the browser API.

[0108] like Figure 2 The figure shows the first initialization of the virtual DOM structure. Numbers 1 to 13 represent image elements, with Col = 3 vertically. White represents image elements that have been rendered to the webpage. Head-1 refers to the column element pointed to by the double pointer, and Tail-3 refers to the element pointed to by the double pointer. Head-6, Tail-8, Head-10, and Tail-10 refer to the image elements pointed to by the double pointers in the second and third columns of the DOM structure, respectively. Gray represents unrendered image elements.

[0109] like Figure 3 As shown, it is a schematic diagram of the virtual DOM structure when the user slides, that is, when the scroll is offset by a certain distance, wherein the virtual boxes 1 and 6 are the DOM structures of the rendered images.

[0110] S4. Clear the DOM structure of the rendered image;

[0111] After each rendering event is triggered, the actual DOM structure on the webpage continues to occupy page rendering time, consuming performance. Because the present invention uses virtual DOM technology, information such as image position and column height is continuously stored in memory, eliminating the need to permanently store the actual DOM structure. Therefore, the actual DOM structure corresponding to the displayed data outside the double pointer interval can be deleted and cleared. For example, in step S232, when the user scrolls, the DOM structures of the first and second image elements that have already been displayed are deleted to avoid memory usage.

[0112] The above description is merely an exemplary embodiment of the present invention and does not limit the patent scope of the present invention. Any equivalent structural transformation made by utilizing the contents of the present invention's description and drawings under the technical concept of the present invention, or directly / indirectly applied in other related technical fields, is included in the patent protection scope of the present invention.

Claims

1. A method for rendering a web page based on virtual DOM, characterized in that: The method comprises: S1. Get the image and web page data and get the number of columns in the virtual DOM (Col); S2. Place the image data into the columns of the virtual DOM based on dynamic programming, specifically including: Determine whether the number of columns Col is greater than 1. When Col=1, all images are placed directly into the DOM column. When col≥2, unassigned images are placed into the current DOM column sequentially until all DOM columns meet the following conditions: The sum of the heights of the images placed in the current DOM column (ColHeight) is less than or equal to the average global image height (avg), and the sum of the heights of the images placed in the current DOM column (ColHeight) plus the height of the next image to be placed (P_N_Height) is greater than the average global image height (Avg). Traverse the height Pctr_Hight of the remaining pictures and the height of all pictures placed in the current DOM column. The ColHeight deviation value delta = |colHeight-Pctr_Hight| is selected and placed in the current column; S3. Render the virtual DOM image data to the web page according to the double pointer position; S4. Clear the virtual DOM structure of the rendered image.

2. A method for rendering a web page based on a virtual DOM according to claim 1, characterized in that: The step S1 comprises: The number of columns Col is the largest positive integer that is less than or equal to the ratio of the width of the web page to the width of the image.

3. The method for rendering a web page based on a virtual DOM according to claim 1, wherein: The global average image height avg = (Σ(each image height) + Σ(DOM column height)) / Col. The height of each DOM column is the sum of the heights of all placed images in the DOM column. During initialization, the height of each DOM column is zero.

4. The method for rendering a web page based on a virtual DOM according to claim 1, wherein: The step S3 comprises: S31. Get the image element information of the DOM column; S32. Confirm the rendering interval using a double-pointer algorithm based on the image element information; S33. Render the image data of the DOM column to the web page based on the range of the rendering interval.

5. A method for rendering a web page based on a virtual DOM as claimed in claim 4, characterized in that: The step S31 includes: Get the DOM column image information including: Pctr_NY{Height, Y_HeadOffeset, Y_Tailoffset}, where Pctr_NY refers to the Nth column, the Yth image, Height refers to the image height, Y_HeadOffeset refers to the position of the head of the Yth image, and Y_Tailoffsett refers to the position of the tail of the Yth image.

6. A method for rendering a web page based on a virtual DOM as claimed in claim 4, characterized in that: The step S32 includes: S321. Get the element information of the picture pointed to by the current head pointer and tail pointer; S322. Get the offset M of the user behavior, set the head pointer to the head position of the element of the T-th picture T_HeadOffeset+M, and set the tail pointer to the head position of the element of the X-th picture X_HeadOffeset+M; S323. Re-point the head pointer to the picture Ptr_NZ where Z_HeadOffeset≤(T_HeadOffeset+M)≤Z_Tailoffset, and the tail pointer to the picture Ptr_DZ where D_HeadOffeset≤(X_HeadOffeset+M)≤D_Tailoffset; S324. The rendering interval is for pictures whose head positions are between the head positions pointed to by the head pointer and the tail pointer.

7. A method for rendering a web page based on a virtual DOM according to claim 6, characterized in that: The step S321 includes: During initialization, the head pointer points to the element of the first picture in each column of the DOM, that is, 1_HeadOffeset=0, and the tail pointer points to the picture Pctr_NZ, whose picture element information satisfies Z_HeadOffeset≤window height WH≤Z_Tailoffsett.

Images