Method and device for loading page waterfall flow layout based on DOM (Document Object Model) recovery
By dynamically calculating layout and DOM recycling mechanisms, monitoring page scrolling events, and optimizing waterfall flow layout, we solved the problems of frequent reflow and high memory usage, and achieved a smooth layout and interactive experience on different devices and screens.
Patent Information
- Application Number
- CN202510888114.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-06-30
- Publication Date
- 2025-10-17
AI Technical Summary
The existing waterfall flow layout frequently triggers reflow when the user scrolls quickly, resulting in performance degradation, inaccurate calculation of dynamic content height, and high memory usage, which is especially obvious in scenarios with large amounts of data.
By dynamically calculating the layout, listening to page scroll events, obtaining fragmented data in advance and placing DOM nodes that leave the visible area into the cache pool, using the DOM recycling mechanism to release memory, dynamically adjusting the number of columns and element widths, and optimizing the layout to reduce reflow and memory usage.
It achieves smooth layout changes under different devices and screen widths, optimizes visual effects, reduces space waste caused by height differences, and provides better interactive experience and resource utilization.
Smart Images
Figure CN120804449A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of computers, and in particular to a page waterfall layout loading method and device based on DOM recycling, a computing device, and a computer readable storage medium. BACKGROUND
[0002] Masonry Layout is a common layout method in web page and application design, which allows elements of non-fixed height to be arranged in a close manner on the page to make the best use of available space. This layout is usually used to display irregularly sized content such as pictures, articles, or products to achieve visual balance and filling. In the interaction of a page with a waterfall layout, data is requested and loaded when the user scrolls to the bottom of the page, and after loading is completed, all loaded DOM structures are redrawn and rearranged to obtain the waterfall layout effect of the entire page. However, this solution has several problems, such as frequent triggering of rearrangement when the user quickly scrolls to load, resulting in poor performance, inaccurate calculation of dynamic content height in multi-column layout, which can easily produce blank gaps, and too many DOM nodes in large data volume scenarios, resulting in high memory usage. SUMMARY
[0003] Therefore, the embodiments of the present application provide a page waterfall layout loading method and device based on DOM recycling, a computing device, and a computer readable storage medium to solve the technical defects in the prior art.
[0004] According to a first aspect of the embodiments of the present application, a page waterfall layout loading method based on DOM recycling is provided, comprising:
[0005] dynamically obtaining the width of the visible area of the current page, and calculating the number of rendering columns of the current page according to the minimum width of the element;
[0006] obtaining the shard data, and rendering the shard data to the minimum height column of the current page in sequence, and updating the height data of all columns;
[0007] monitoring the scrolling event of the page, obtaining the shard data in advance, and putting the DOM node that leaves the visible area into the cache pool; when new shard data is displayed, querying whether there is a DOM node of the same type in the cache pool, and if there is, updating the properties of the DOM node of the same type according to the new shard data and setting it to be visible.
[0008] According to a second aspect of the embodiments of the present application, a page waterfall layout loading device based on DOM recycling is provided, comprising:
[0009] a computing unit configured to dynamically obtain the width of the visible area of the current page, and calculate the number of rendering columns of the current page according to the minimum width of the element;
[0010] a rendering unit, configured to acquire the piece data and render the piece data to a minimum height column of the current page in sequence, and update height data of all columns;
[0011] a caching unit, configured to monitor a scroll event of the page and put a DOM node leaving a visible area into a cache pool;
[0012] a loading unit, configured to monitor a scroll event of the page and acquire the piece data in advance; when new piece data is displayed, the loading unit is configured to query whether there is a same type of DOM node in the cache pool, and if there is, update attributes of the same type of DOM node according to the new piece data and set the same type of DOM node to be visible.
[0013] According to a third aspect of the embodiments of the present application, a computing device is provided, which includes a memory, a processor, and computer instructions stored in the memory and executable on the processor, and the processor implements the steps of the above-mentioned page waterfall layout loading method based on DOM recycling when executing the instructions.
[0014] According to a fourth aspect of the embodiments of the present application, a computer readable storage medium is provided, which stores computer instructions, and the instructions implement the steps of the above-mentioned page waterfall layout loading method based on DOM recycling when executed by a processor.
[0015] The embodiments of the present application overcome the problem of performance degradation caused by loading all contents and rearranging each time in the css3 scheme by dynamically calculating the layout through a script language. It ensures that the webpage can dynamically adjust the number of columns and the width of elements to achieve smooth layout changes and provide better visual effects and interactive experience under different devices or screen widths. Further, when acquiring piece data, the height data is returned while the piece data is acquired in cooperation with the server side, and the piece data is placed in the column with the minimum height one by one, which provides a method for filling content adaptively when resources are asynchronously loaded, helps to optimize the visual effect of the entire layout, and reduces the "jumping" or uneven space waste caused by too large height difference. The present application also uses a DOM recycling mechanism to release memory and computing resources by periodically removing elements that are no longer focused or not visible to the user, and reloads the same type of cached nodes when needed, to ensure that the webpage maintains a smooth interactive experience on various devices. BRIEF DESCRIPTION OF DRAWINGS
[0016] Figure 1 is a structural block diagram of a computing device provided by the embodiments of the present application;
[0017] Figure 2 is a flowchart of a page waterfall layout loading method based on DOM recycling provided by the embodiments of the present application;
[0018] Figure 3 is a structural schematic diagram of a page waterfall layout loading device based on DOM recycling provided by an embodiment of the present application. DETAILED DESCRIPTION
[0019] In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present application. However, the present application can be practiced without the specific details. In other instances, well-known methods have not been described in detail in order not to unnecessarily obscure aspects of the present application.
[0020] The terminology used in this disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of one or more embodiments of the present application. As used in one or more embodiments of the present application and the accompanying claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It will be further understood that the terms "comprises" and / or "comprising," when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and / or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.
[0021] It will be understood that, although the terms first, second, etc. can be used herein to describe various information, these terms are not intended to denote a temporal or chronological order. Rather, these terms are used solely to distinguish one from another only. For example, without departing from the scope of one or more embodiments of the present application, first can be termed second, and similarly, second can be termed first. The term "if' as used herein can be interpreted as meaning "in response to a determination" depending on the context.
[0022] In the present application, a page waterfall layout loading method and device based on DOM recycling, a computing device and a computer readable storage medium are provided, which will be described in detail one by one in the following embodiments.
[0023] Figure 1 A structural block diagram of a computing device 100 according to an embodiment of the present application is shown. The components of the computing device 100 include, but are not limited to, a memory 110 and a processor 120. The processor 120 is connected to the memory 110 through a bus 130, and a database 150 is used to save data.
[0024] The computing device 100 also includes an access device 140 that enables the computing device 100 to communicate via one or more networks 160. Examples of these networks include a public switched telephone network (PSTN), a local area network (LAN), a wide area network (WAN), a personal area network (PAN), or a combination of networks such as the Internet. The access device 140 can include one or more of any type of network interface (e.g., network interface card (NIC)), wired or wireless, such as an IEEE 802.11 wireless local area network (WLAN) wireless interface, a Worldwide Interoperability for Microwave Access (Wi-MAX) interface, an Ethernet interface, a Universal Serial Bus (USB) interface, a cellular network interface, a Bluetooth interface, a near field communication (NFC) interface, and the like.
[0025] In one embodiment of the present application, the above-mentioned components of the computing device 100, as well as other components not shown in the figure, can be connected to each other, for example, through a bus. It should be understood that, Figure 1 Figure 1 The computing device structure diagram shown is only for the purpose of example, and is not a limitation on the scope of the present application. Other components can be added or replaced as needed by those skilled in the art.
[0026] The computing device 100 can be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., a tablet computer, a personal digital assistant, a laptop computer, a notebook computer, a netbook, etc.), a mobile phone (e.g., a smartphone), a wearable computing device (e.g., a smartwatch, smart glasses, etc.), or other type of mobile device, or a stationary computing device such as a desktop computer or PC. The computing device 100 can also be a mobile or stationary server.
[0027] Figure 2 A flowchart of a DOM recycling-based page waterfall layout loading method provided by the present application is shown in the figure, which includes steps 202 to 206.
[0028] Step 202: Dynamically obtain the width of the visible area of the current page, and calculate the number of rendering columns according to the minimum width of the element.
[0029] In an embodiment of the present application, the width of the visible area is dynamically obtained and the number of rendering columns is calculated to determine how many columns of content should be displayed in the page layout, so that the page maintains the best visual effect under different devices and window sizes, and realizes adaptive responsive layout. Mainly includes:
[0030] (1) Obtain the width of the visible area
[0031] In response to changes in device characteristics (screen size, orientation), JavaScript is used to get the width of the current browser window. This width determines the number of columns that can be displayed in the current view. window.innerWidth is typically used to get the width of the browser's viewable area.
[0032] (2) Define the minimum width of a single element and the column spacing
[0033] To ensure that the content in each column is displayed correctly, the minimum width of each content item and the column spacing need to be defined, which affect the calculation of the number of columns.
[0034] For example, assume that the minimum width of a single element is 150 pixels and the column spacing is 10 pixels.
[0035] (3) Calculate the number of rendered columns
[0036] The viewable area width, the minimum width of a single element, and the column spacing are used to calculate the number of columns that can be rendered in the page. The formula is as follows:
[0037] Number of columns = floor(viewable area width / (minimum width of a single element + column spacing))
[0038] (4) Set the layout
[0039] The layout of the page content is set according to the calculated number of columns, and the height of each column is saved in the first array. Assume that the current page can accommodate 4 columns after calculation through this step, then the initial height of each column is 0. The first array columnHeights is used to save the current height of each column, for example: [0, 0, 0, 0].
[0040] Step 204: Get the slice data and render the slice data to the minimum height column in turn, and update the height of the column.
[0041] In the embodiments of the present application, data slice rendering refers to inserting the obtained dynamic data element by element in batches into the existing waterfall layout. This step aims to optimize the loading process, so that data can be smoothly filled into the layout, while selecting appropriate columns when inserting to maintain the balance and beauty of the entire layout.
[0042] In a feasible implementation, a batch of slice data such as pictures is obtained from the server in this step, and each picture has its own height and content. This data can be a JSON array, from which element attributes such as [{id: 1, height: 200}, {id: 2, height: 180},...] are extracted.
[0043] Further, render pictures one by one, for each picture element, determine which column should be placed. Specifically, traverse the columnHeights array, select the column with the smallest current height for placement, which guarantees that the picture placement causes the overall layout height to grow the smallest. For example, if the current columnHeights array content is [150, 120, 180, 200], then the 2nd column (height 120 is the column with the smallest height) should be selected.
[0044] Further, place the picture and update the height, place the picture element in the determined column, and update the height of the selected column. If the picture height is 180, place it in the 2nd column, and columnHeights is updated to [150, 300, 180, 200].
[0045] Repeat the above process, continue to process each newly obtained element until the entire rendering of the current data slice is completed. Each operation adjusts the value of the columnHeights array in real time to ensure the uniformity of the layout during data rendering.
[0046] If a data slice cannot fill the current page, continue to perform this step until the current page is filled. Specifically, when the user enters the page, the initial data slice is loaded into the page. This data slice can be 10, 20 data items, the specific number and type are determined according to the design.
[0047] Further, detect whether the page is filled to a scrollable state. This detection needs to judge whether the height of the content block covers the height of the page. If the loaded content is not enough to fill the current page, the page may be displayed as incomplete, and the user cannot scroll down to view more content. If it is detected that the existing data cannot fill the entire page, more data slices will be loaded. This needs to repeat the process of this step: load the next data slice, for example, load another 10 data items.
[0048] Step 206: Monitor the scroll event of the page, and pre-fetch the data slice and put the DOM node that leaves the visible area into the cache pool; when displaying the new data slice, query whether there is a DOM node of the same type in the cache pool, if there is, directly update the attributes of the DOM node of the same type, and set it to visible.
[0049] In the embodiment of the present application, by monitoring the user's scroll position, predicting the part that the user may access next, and loading it before the content enters the visible area, this preloading mechanism reduces the perceived waiting time of the user.
[0050] Specifically, the user's scroll event is monitored, the user's scroll position (viewport position) is determined and the position that is likely to be reached soon is estimated. When the user's scroll position is close to the bottom of the page or a certain specified threshold from the bottom, an additional data request is initiated to obtain the content that is about to be displayed. The code includes:
[0051] window.addEventListener('scroll',()=>{
[0052] const scrollPosition=window.scrollY+window.innerHeight;
[0053] const pageHeight=document.documentElement.scrollHeight;
[0054] / / The threshold for preloading is set to 500 pixels from the bottom
[0055] if(scrollPosition>=pageHeight-500){
[0056] prefetchNextContent(); / / Request the next set of data in advance
[0057] }
[0058] });
[0059] Further, when the user scrolls the page, new content will constantly enter the window, while the existing content leaves the window. Using the scroll event, it can be detected which DOM nodes are no longer in the visible area. These DOM nodes that have left the visible area no longer need to be continuously rendered, and thus can be cached and recycled.
[0060] Specifically, the DOM nodes that are no longer displayed are placed in a cache pool, which is used to store potentially reusable nodes. Since these nodes may need to be displayed again when the user continues to scroll, they are saved for quick re-rendering. At the same time, the DOM elements in the page are retained, but the heavy content inside them is emptied or replaced with lightweight placeholder content, reducing memory usage, for example:
[0061] element.innerHTML=' <div class＝"placeholder">Loading... '
[0062] Further, when new slice data needs to be displayed, instead of directly creating a new DOM node, the system first checks the cache pool for a DOM node of the same type that can be reused. If one is found, the system uses the DOM node directly and updates its attributes, such as content, style, position, etc., to display the new data information.
[0063] Further, the modified node is marked as visible and its position in the page is adjusted to meet the user's current viewing needs.
[0064] In some embodiments, the same type of DOM node refers to a DOM node with the same structure, purpose, and style, etc., which can be used interchangeably, such as list items, cards, image containers, etc. These nodes exhibit consistent data presentation and interaction characteristics in a specific context, and therefore can be reused by updating their content and attributes. For example, in an illustrative scheme, two types of schemes are implemented:
[0065] <!-- Type 1: pure text and graphics -->
[0066] <div class＝"feed-card"data-type＝"image-text">
[0067] <p class＝"content">...
[0068] <div class＝"gallery"> ...
[0069] <div class＝"action-bar">
[0070] <button class＝"like-btn">...< / button>
[0071] <button class＝"comment-btn">...< / button>
[0072]
[0073]
[0074] <!-- Type 2: video -->
[0075] <div class＝"feed-card"data-type＝"video">
[0076] <video class＝"video-player"controls>< / video>
[0077] <div class＝"video-info"> ...
[0078]
[0079] Preferably, when the cache pool is full, the least recently used node is removed according to the LRU mechanism. Specifically, to avoid the pool being too large and consuming too many resources, the LRU (Least Recently Used) mechanism is used to determine the order of node removal in the cache pool: the least recently used node is removed to make room for new nodes. This mechanism ensures that the cache pool can efficiently use system resources while retaining elements that may be used again to improve access speed.
[0080] In the embodiments of the present application, in order to realize a high-performance page waterfall layout, the layout is dynamically calculated by a script language, overcoming the problem of performance decline caused by the css3 scheme of loading all content and rearranging each time scrolling. It ensures that the webpage can realize smooth layout changes by dynamically adjusting the number of columns and element width under different devices or screen widths, providing better visual effects and interactive experience. Further, when obtaining the fragment data, the server side is cooperated to obtain the fragment data while returning the height data, and the fragment data is placed in the column with the smallest height one by one, providing a method for filling content adaptively when resources are asynchronously loaded, which helps to optimize the visual effect of the entire layout and reduce the "jumping" or uneven space waste caused by too large height difference. The present application also uses a DOM recycling mechanism to release memory and computing resources by periodically removing elements that are no longer focused or invisible by the user, and reloads nodes of the same type when needed, ensuring that the webpage maintains a smooth interactive experience on various devices.
[0081] Corresponding to the above method embodiments, the present application also provides an embodiment of a page waterfall layout loading device based on DOM recycling, as shown in Figure 3 The device comprises:
[0082] A calculation unit is configured to obtain the width of the visible area of the current page, and calculate the number of rendering columns of the current page according to the minimum width of the element.
[0083] A rendering unit is configured to obtain the fragment data, and render the fragment data to the column with the smallest height of the current page in sequence, and update the height data of all columns.
[0084] A cache unit is configured to monitor the scrolling event of the page, and put the DOM node that leaves the visible area into the cache pool.
[0085] A loading unit is configured to monitor the scrolling event of the page, and obtain the fragment data in advance; when new fragment data is displayed, query whether there is a DOM node of the same type in the cache pool, and if there is, update the attributes of the DOM node of the same type according to the new fragment data, and set it to be visible.
[0086] The above is a schematic scheme of a page waterfall layout loading device based on DOM recycling according to the present embodiment. It should be noted that the technical scheme of the page waterfall layout loading device based on DOM recycling belongs to the same concept as the technical scheme of the page waterfall layout loading method based on DOM recycling described above. The technical scheme of the page waterfall layout loading device based on DOM recycling, which is not described in detail, can be referred to the description of the technical scheme of the page waterfall layout loading method based on DOM recycling.
[0087] An embodiment of the present application further provides a computing device, comprising a memory, a processor, and computer instructions stored in the memory and executable on the processor, wherein the processor executes the instructions to implement the steps of the method for loading page waterfall layout based on DOM recycling.
[0088] The above is a schematic solution of the computing device of the embodiment. It should be noted that the technical solution of the computing device and the technical solution of the method for loading page waterfall layout based on DOM recycling belong to the same concept, and the details of the technical solution of the computing device not described in detail can be referred to the description of the technical solution of the method for loading page waterfall layout based on DOM recycling.
[0089] An embodiment of the present application further provides a computer readable storage medium, which stores computer instructions, wherein the instructions are executed by a processor to implement the steps of the method for loading page waterfall layout based on DOM recycling.
[0090] The above is a schematic solution of the computer readable storage medium of the embodiment. It should be noted that the technical solution of the storage medium and the technical solution of the method for loading page waterfall layout based on DOM recycling belong to the same concept, and the details of the technical solution of the storage medium not described in detail can be referred to the description of the technical solution of the method for loading page waterfall layout based on DOM recycling.
[0091] The specific embodiments of the present application are described above. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims can be performed in a different order and still achieve desirable results. In addition, the process depicted in the figures does not necessarily require the particular order shown or sequential order to achieve desirable results. In certain implementations, multitasking and parallel processing can be advantageous.
[0092] The computer readable medium can include any entity or apparatus capable of carrying the computer program code, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signal, telecommunication signal, software distribution medium, etc. It should be noted that the computer readable medium can include appropriate additions or subtractions according to the requirements of legislation and patent practice in the jurisdiction, for example, in some jurisdictions, according to legislation and patent practice, the computer readable medium does not include electrical carrier signals and telecommunication signals.
[0093] It should be noted that for the foregoing method embodiments, for the sake of simple description, they are all expressed as a combination of a series of actions, but those skilled in the art should know that the present application is not limited by the order of the described actions, because according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to the present application.
[0094] In the above embodiments, the description of each embodiment has its own focus, and the parts not described in detail in a certain embodiment can be referred to the related description of other embodiments.
[0095] The preferred embodiments of the present application disclosed above are only used to help explain the present application. The alternative embodiments do not describe all the details and do not limit the application to the specific embodiments described. Obviously, according to the content of the present application, many modifications and changes can be made. The present application selects and describes these embodiments in order to better explain the principles and practical applications of the present application, so that those skilled in the art can well understand and utilize the present application. The present application is limited by the claims and their entire scope and equivalents.
Claims
1. A page waterfall layout loading method based on DOM recycling, characterized in that: include: Dynamically obtain the width of the visible area of the current page, and calculate the number of rendering columns of the current page based on the minimum width of the element; Obtain the slice data, and render the slice data to the minimum height column of the current page in sequence, and update the height data of all columns; Listen to the scrolling events of the page, obtain the fragmented data in advance, and put the DOM nodes that leave the visible area into the cache pool; When displaying new fragment data, the cache pool is queried to see whether there is a DOM node of the same type. If there is, the attributes of the DOM node of the same type are updated according to the new fragment data and the node is set to be visible.
2. The method according to claim 1, wherein The method of obtaining the width of the visible area of the current page and calculating the number of rendering columns of the current page according to the minimum width of the element includes: The width of the visible area of the current page is dynamically calculated according to the script, and the number of rendering columns of the current page is obtained by dividing the width of the visible area by the preset minimum width of the element and the column spacing, and the height of each column is saved in the first array.
3. The method according to claim 2, wherein: The obtaining of the slice data and sequentially rendering the slice data to the minimum height column of the current page includes: Traverse the first array, select the column with the smallest current height, and render the current slice data into the column on the page.
4. The method according to claim 3, wherein: The obtaining of the slice data and sequentially rendering the slice data to the minimum height column of the current page includes: The slice data is obtained from a server, where the slice data includes a height attribute; after the rendering of the current slice data is completed, the first array is updated according to the height attribute.
5. The method according to claim 1, wherein The monitoring of the scrolling event of the page and obtaining the fragment data in advance includes: Monitor the scrolling state of the page and continuously determine the user's scrolling position; when the scrolling position reaches a specified threshold from the bottom of the page, initiate a new data request.
6. The method according to claim 1, wherein The monitoring of the scrolling event of the page, obtaining the fragmented data in advance, and placing the DOM nodes that leave the visible area into the cache pool includes: As the page scrolls, the DOM nodes that leave the visible area are placed in a cache pool; and the DOM node content of the page is replaced with lightweight content.
7. The method according to claim 1, wherein The same type of DOM nodes include: DOM nodes with the same structure.
8. The method according to claim 1, wherein The method further includes: judging whether the height of the displayed slice data covers the height of the page according to the height data of the column, and if so, starting to monitor the scrolling event of the page.
9. A page waterfall layout loading device based on DOM recycling, characterized in that: include: The calculation unit is used to dynamically obtain the width of the visible area of the current page and calculate the number of rendering columns of the current page based on the minimum width of the element; A rendering unit is used to obtain the slice data, and sequentially render the slice data to the minimum height column of the current page, and update the height data of all columns; The cache unit is used to monitor the scrolling events of the page and put the DOM nodes that leave the visible area into the cache pool; The loading unit is used to listen to the scrolling event of the page and obtain the fragment data in advance; when displaying new fragment data, it queries whether there is a DOM node of the same type in the cache pool. If so, it updates the properties of the DOM node of the same type according to the new fragment data and sets it to be visible.
10. A computing device comprising a memory, a processor, and computer instructions stored in the memory and executable on the processor, wherein: When the processor executes the instructions, the steps of the method according to any one of claims 1 to 8 are implemented.
11. A computer-readable storage medium storing computer instructions, characterized in that: When the instruction is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.