A web-based data rendering optimization method and device
By dynamically rendering user-visible data as the parent container scrolls, the performance bottleneck of traditional web interfaces when rendering large amounts of data is solved, achieving efficient data display.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- BEIJING TELIXIN ELECTRONICS TECH
- Filing Date
- 2023-02-03
- Publication Date
- 2026-06-23
AI Technical Summary
Traditional web interface data rendering methods are prone to lag and performance issues when processing large amounts of data, while pagination or pull-to-load methods can only display a small amount of data, leading to performance bottlenecks.
By dynamically calculating as the parent container scrolls, only the user-visible data is rendered, while unseen data is temporarily stored in memory, rendered into the DOM tree when scrolling to a position, and destroyed when scrolling out of a position. This data rendering is achieved by combining JS files and components.
It achieves high-performance rendering of large amounts of data, making it appear to the user that all data has been rendered, thus solving the performance problem.
Smart Images
Figure CN116304415B_ABST
Abstract
Description
Technical Field
[0001] This invention belongs to the field of computer data rendering technology, and specifically relates to a web-based data rendering optimization method and apparatus. Background Technology
[0002] With the rapid development of the internet, the web has become one of the main ways people obtain information. When a web interface needs to display a large amount of data, such as a list of thousands or tens of thousands of orders, interface performance issues become very prominent, often resulting in lag or even complete freezing. Traditional rendering methods typically have the following problems: 1) Obtaining the data to be rendered and directly handing it to the browser or terminal for rendering. This method often results in lag and unresponsiveness after reaching a certain data volume, depending on the user's computer performance. 2) Using pagination to retrieve a small amount of data for the current page number. This method solves the lag problem, but can only display a small amount of data at a time. 3) Using pull-to-load rendering on mobile devices. This method also suffers from the problem of only being able to display a small amount of data, and performance issues still arise when loading large amounts of data. Summary of the Invention
[0003] This invention provides a web-based data rendering optimization method, aiming to solve at least one of the technical problems existing in the prior art. This invention allows web developers to render large amounts of data to the web interface with high performance simply by inputting the data to be rendered. Specifically, before rendering the data, developers import the JS file used in web development and then apply the method provided by this invention to complete the data rendering. Based on the original data to be rendered and the height of the parent container, this invention enables the parent container to generate a real scrollbar. The scrollbar is dynamically calculated as the parent container scrolls, ensuring that the interface always renders the data the user needs to see. Data items not visible to the user are only stored in memory and not rendered into the DOM tree. They are only rendered into the DOM tree when scrolling to a specific position and destroyed from the DOM tree when scrolling out of that position. This gives the user the perception that all data has been rendered, thus solving the performance problem.
[0004] The technical solution of this invention relates to a web-based data rendering optimization method, the method comprising the following steps:
[0005] S100. Obtain the original data to be rendered, and determine whether the height of each data item in the original data is fixed.
[0006] S200. If the height of each data item in the original data is fixed, the original data is rendered to the interface for the first time. When the parent container scrolls, the original data is updated and rendered to the interface.
[0007] S300. If the height of each data item in the original data is not fixed, the original data is initially rendered to the interface. When the parent container scrolls, the original data is updated and rendered to the interface.
[0008] Furthermore, step S200 includes:
[0009] S210. Based on the number of rows in the original data and the height of the data item, initialize the parent container and generate a placeholder variable and a scrollbar for the parent container.
[0010] S220. Based on the height of the parent container and the height of each data item, calculate the number of data items that the parent container can display;
[0011] S230. Create a new dataset to be rendered. Starting from the first starting index of the original data, extract the number of data items that the parent container can display and put them into the dataset to be rendered. Then, render the data of the dataset to be rendered to the placeholder variable for the first time. The dataset to be rendered is the dataset to be rendered to the placeholder variable. The first starting index is the index of the first data item of the original data.
[0012] Furthermore, step S200 also includes:
[0013] S240. When the scroll bar of the parent container scrolls, the second starting index is updated according to the scrolling distance of the parent container. The second starting index is the data index of the first data in the dataset to be rendered after the parent container has finished scrolling.
[0014] S250. Based on the second starting index, extract the data from the original data from the data at the second starting index to the data number of data items that the parent container can display by incrementing the second starting index and put it into the dataset to be rendered. Then, update the data of the dataset to be rendered to the placeholder variable to complete the data update during scrolling.
[0015] S260. When the scroll bar of the parent container continues to scroll, return to steps S240 and S250 until the scroll bar of the parent container scrolls to the bottom of the original data.
[0016] Further, step 210 includes: the height of the placeholder variable is the number of original data entries multiplied by the height of the data item; the number of data items is the height of the parent container divided by the height of the data item and then rounded down.
[0017] Further, step S240 includes the second starting index being the distance the parent container scrolls divided by the height of the data item and then rounded down.
[0018] Furthermore, step S300 includes,
[0019] S310. Starting from the first item of the original data, traverse the original data, and determine whether the current data item has an estimated height. If the current data item has no estimated height, render the current data item outside the interface, calculate the actual height of the current data item, write the actual height of the current data item into the current data item, and clear the data outside the interface.
[0020] S320. Starting from the first item of the original data, traverse the original data and calculate the cumulative position value of the current data item for each piece of the original data based on the estimated height or actual height of the current data item.
[0021] S330. Based on the sum of the estimated height or actual height of all data items in the original data, the parent container generates placeholder variables and scrollbars.
[0022] S340. Based on the height of the parent container, find the index of the first data item whose cumulative position value is greater than the height of the parent container from the original data to obtain the first end index of the initial rendered data.
[0023] S350. The data from the first starting index to the first ending index in the original data is placed into the dataset to be rendered, and the data of the dataset to be rendered is initially rendered into the placeholder variable. The dataset to be rendered is the dataset that needs to be rendered into the placeholder variable, and the first starting index is the index of the first data in the original data.
[0024] Furthermore, step S300 also includes,
[0025] S360. When the parent container scrolls, based on the scrolling distance of the parent container, a third starting index and a second ending index are searched from the original data. The third starting index is the index of the first data item whose cumulative position value is greater than the scrolling distance of the parent container, and the second ending index is the index of the first data item whose cumulative position value minus the third starting index is greater than the height of the parent container.
[0026] S370. Based on the third starting index and the second ending index, data items from the third starting index to the second ending index in the original data are placed into the dataset to be rendered, and the data of the dataset to be rendered is updated and rendered into the placeholder variable. The dataset to be rendered is the dataset that needs to be rendered into the placeholder variable.
[0027] Furthermore, step S320 also includes that the cumulative position value of each piece of original data is the sum of the cumulative position value of the previous piece of original data and the estimated height or actual height of the current data item.
[0028] The present invention also proposes a web-based data rendering optimization device, which is used to implement the above-mentioned web-based data rendering optimization method.
[0029] The present invention also proposes a computer-readable storage medium having program instructions stored thereon, which, when executed by a processor, perform the method described above.
[0030] Compared with existing technologies, the present invention has the following characteristics.
[0031] The web-based data rendering optimization method and apparatus described in this invention enable web developers to render large amounts of data to the web interface with high performance simply by inputting the data to be rendered. Before rendering the data, developers import a JavaScript file provided by this invention for use in web development, and then call the component provided by this invention. This component accepts the data to be rendered and the estimated height of the data items to complete the data rendering. Based on the original data to be rendered and the height of the parent container, this invention generates a scrollbar in the parent container. The scrollbar is dynamically calculated as the parent container scrolls, ensuring that the interface always renders the data the user needs to see. Data items not visible to the user are only stored in memory and not rendered into the DOM tree. They are only rendered into the DOM tree when scrolling to a specific position and destroyed from the DOM tree when scrolling out of that position. This gives the user the perception that all data has been rendered, thus solving the performance problem. Attached Figure Description
[0032] Figure 1 A flowchart for optimizing web-based data rendering methods.
[0033] Figure 2 A flowchart illustrating a web-based data rendering optimization method with fixed data item heights.
[0034] Figure 3 A flowchart illustrating the process of optimizing web-based data rendering methods where the height of data items is not fixed. Detailed Implementation
[0035] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.
[0036] The following will provide a clear and complete description of the concept, specific structure, and technical effects of the present invention in conjunction with the embodiments and accompanying drawings, so as to fully understand the purpose, solution, and effects of the present invention.
[0037] It should be noted that, unless otherwise specified, when a feature is referred to as "fixed" or "connected" to another feature, it can be directly fixed or connected to the other feature, or indirectly fixed or connected to the other feature. The singular forms "a," "described," and "the" used herein are also intended to include the plural forms, unless the context clearly indicates otherwise. Furthermore, unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art. The terminology used in this specification is for the purpose of describing particular embodiments only and not for limiting the invention. The term "and / or" as used herein includes any combination of one or more of the associated listed items.
[0038] It should be understood that although the terms first, second, third, etc., may be used in this disclosure to describe various elements, these elements should not be limited to these terms. These terms are only used to distinguish elements of the same type from each other. For example, a first element may also be referred to as a second element without departing from the scope of this disclosure, and similarly, a second element may also be referred to as a first element. Any and all instances or exemplary language (“e.g.,” “such as,” etc.) used herein are intended only to better illustrate embodiments of the invention and, unless otherwise required, do not impose a limitation on the scope of the invention. Furthermore, the industry term “pose” as used herein refers to the position and orientation of an element relative to a spatial coordinate system.
[0039] Reference Figures 1 to 3 This invention provides a web-based data rendering optimization method, which includes the following steps:
[0040] S100. Obtain the original data to be rendered, and determine whether the height H of each data item in the original data is fixed.
[0041] S200. If the height H of each data item in the original data is fixed, the original data is rendered to the interface for the first time. When the parent container scrolls, the original data is updated and rendered to the interface.
[0042] S300. If the height H of each data item in the original data is not fixed, the original data is rendered to the interface for the first time. When the parent container scrolls, the original data is updated and rendered to the interface.
[0043] In some specific embodiments, if the height H of the data item is fixed, then the height of each data item in the original data is consistent. The number of rows in the original data is A, the index of the original data is from startIndex to endIndex, and the height of each data item in the original data is H. Specifically, when H=1, the height of each data item in the original data is 1, such as in common table data; when H=2, the height of each data item in the original data is 2.
[0044] In some specific embodiments, if the height H of the data item is not fixed, then the height of each data item in the original data is not fixed. The number of rows in the original data is A, and the index of the original data is from startIndex to endIndex. For example, for an original data with a number of rows A of 3, the data with index 1 has a height of 1, the data with index 2 has a height of 2, the data with index 3 has a height of 3, and the cumulative position value currentSize of the original data is 6.
[0045] The web-based data rendering optimization method and apparatus described in this invention enable web developers to render large amounts of data to the web interface with high performance simply by inputting the data to be rendered. Before rendering the data, developers import a JavaScript file provided by this invention for use in web development, and then call the component provided by this invention. This component accepts the data to be rendered and the estimated height of the data items to complete the data rendering. Based on the original data to be rendered and the height of the parent container, this invention generates a scrollbar in the parent container. The scrollbar is dynamically calculated as the parent container scrolls, ensuring that the interface always renders the data the user needs to see. Data items not visible to the user are only stored in memory and not rendered into the DOM tree. They are only rendered into the DOM tree when scrolling to a specific position and destroyed from the DOM tree when scrolling out of that position. This gives the user the perception that all data has been rendered, thus solving the performance problem.
[0046] Furthermore, refer to Figure 2 Step S200 includes:
[0047] S210. Based on the number of rows A of the original data and the height H of each data item, initialize the parent container and generate the parent container placeholder variable dom and scrollbar;
[0048] S220. Based on the height H0 of the parent container and the height H of each data item, calculate the number N of data items that the parent container can display;
[0049] S230. Create a new dataset B to be rendered. Starting from the first starting index startIndex of the original data, extract the number of data items that the parent container can display, i.e., N data items, and put them into the dataset B to be rendered. Then, render the data of the dataset B to be rendered to the placeholder variable dom for the first time. The dataset B to be rendered is the dataset to be rendered into the placeholder variable dom. The first starting index is the index of the first data item of the original data.
[0050] Furthermore, refer to Figure 2 Step S200 further includes:
[0051] S240. When the scroll bar of the parent container scrolls, the second starting index new_startIndex is updated according to the scroll distance scrollTop of the parent container; the second starting index new_startIndex is the data index of the first data in the dataset B to be rendered after the parent container finished scrolling last time.
[0052] S250. Based on the second starting index new_startIndex, extract the data from the original data up to the number of data items N that the parent container can display by incrementing the second starting index new_startIndex and put it into the dataset B to be rendered. Then, update the data of the dataset B to be rendered and render it to the placeholder variable dom, thus completing the data update during scrolling.
[0053] Specifically, the data from the second starting index new_startIndex to the second starting index new_startIndex+N is placed into the dataset B to be rendered, and the data of the dataset B to be rendered is updated and rendered into the placeholder variable dom, thus completing the data update during scrolling.
[0054] S260. When the scroll bar of the parent container continues to scroll, return to steps S240 and S250 until the scroll bar of the parent container scrolls to the bottom of the original data.
[0055] Furthermore, refer to Figure 2 Step 210 includes: the height of the placeholder variable is the number of original data entries multiplied by the height of the data item; the number of data items is the height of the parent container divided by the height of the data item and then rounded down.
[0056] Specifically, the height of the placeholder variable dom is:
[0057] A*H,
[0058] Where A is the number of original data entries, and H is the height of the data item;
[0059] The number of data items N is:
[0060] N = H0 / H,
[0061] Where H0 is the height of the parent container, and H is the height of the data item.
[0062] Furthermore, refer to Figure 2 Step S240 includes the following: the second starting index new_startIndex is the distance scrollTop of the parent container scroll divided by the height H of the data item and then rounded down.
[0063] Specifically, the second starting index new_startIndex is:
[0064] new_startIndex=scrollTop / H,
[0065] Where scrollTop is the scroll distance of the parent container, and H is the height of the data item.
[0066] Furthermore, refer to Figure 3 Step S300 includes,
[0067] S310. Starting from the first item of the original data, traverse the original data, and determine whether the current data item has an estimated height passed in. If the current data item has not a predicted height forecastSize passed in, render the current data item outside the interface, calculate the actual height itemSize of the current data item, write the actual height itemSize of the current data item into the current data item, and clear the data outside the interface.
[0068] S320. Starting from the first item of the original data, traverse the original data and calculate the cumulative position value currentSize of the current data item for each piece of the original data based on the estimated height forecastSize or the actual height itemSize of the current data item.
[0069] S330. Based on the sum of the estimated height forecastSize or the actual height itemSize of all data items in the original data, the parent container generates a placeholder variable dom and a scrollbar.
[0070] S340. Based on the height H0 of the parent container, find the index of the first data item whose cumulative position value currentSize is greater than the height H0 of the parent container from the original data, and obtain the first end index endIndex of the initial rendered data.
[0071] S350. The data from the first starting index startIndex to the first ending index endIndex in the original data is put into the dataset B to be rendered, and the data of the dataset B to be rendered is initially rendered into the placeholder variable dom. The dataset B to be rendered is the dataset that needs to be rendered into the placeholder variable, and the first starting index startIndex is the index of the first data in the original data.
[0072] Specifically, in one specific embodiment, for a set of original data with a data item count A of 3, the data item with index 1 has an actual height itemSize of 1 and a current cumulative position value currentSize of 1; the data item with index 2 has an actual height of 2 and a current cumulative position value currentSize of 3; the data item with index 3 has an actual height of 3 and a current cumulative position value currentSize of 6. Therefore, the current cumulative position value currentSize of the original data is 6.
[0073] Furthermore, refer to Figure 3 Step S300 also includes,
[0074] S360. When the parent container scrolls, based on the scroll distance scrollTop of the parent container, a third start index and a second end index are found from the original data. The third start index is the index of the first data item whose accumulated position value currentSize is greater than the scroll distance scrollTop of the parent container. The second end index is the index of the first data item whose accumulated position value currentSize minus the third start index is greater than the height H0 of the parent container.
[0075] endIndex.currentSize-startIndex.currentSize>=H0.
[0076] S370. Based on the third starting index and the second ending index, data items from the third starting index to the second ending index in the original data are placed into the dataset B to be rendered, and the data of the dataset B to be rendered is updated and rendered to the placeholder variable dom. The dataset B to be rendered is the dataset that needs to be rendered into the placeholder variable.
[0077] Furthermore, refer to Figure 3Step S320 further includes that the cumulative position value currentSize of each piece of the original data is the sum of the cumulative position value currentSize of the previous piece of the original data and the estimated height forecastSize or the actual height itemSize of the current data item.
[0078] Specifically,
[0079] currentSize=currentSize_pre+forecastSize,
[0080] Where currentSize is the accumulated position value of the current data item, currentSize_pre is the accumulated position value of the original data mentioned in the previous item, and forecastSize is the estimated height of the current data item.
[0081] or,
[0082] currentSize=currentSize_pre+itemSize,
[0083] Where currentSize is the cumulative position value of the current data item, currentSize_pre is the cumulative position value of the original data mentioned in the previous item, and itemSize is the actual height of the current data item.
[0084] In some embodiments, the cumulative position value currentSize of each original data item is the sum of the cumulative position value currentSize of the previous original data item and the actual height itemSize of the current data item. The actual height itemSize of the current data item is calculated regardless of whether the current data item contains an estimated height forecastSize.
[0085] The present invention also proposes a web-based data rendering optimization device, which is used to implement the above-mentioned web-based data rendering optimization method.
[0086] The present invention also proposes a computer-readable storage medium having program instructions stored thereon, which, when executed by a processor, perform the method described above.
[0087] It should be understood that the method steps in the embodiments of the present invention can be implemented or carried out by computer hardware, a combination of hardware and software, or by computer instructions stored in a non-transitory computer-readable storage medium. The method can use standard programming techniques. Each program can be implemented in a high-level procedural or object-oriented programming language to communicate with the computer system. However, if necessary, the program can be implemented in assembly or machine language. In any case, the language can be a compiled or interpreted language. Furthermore, for this purpose, the program can run on a programmed application-specific integrated circuit (ASIC).
[0088] Furthermore, the procedures described herein may be performed in any suitable order unless otherwise indicated herein or otherwise clearly contradicted by the context. The procedures described herein (or variations and / or combinations thereof) may be executed under the control of one or more computer systems configured with executable instructions, and may be implemented by hardware or a combination thereof as code (e.g., executable instructions, one or more computer programs, or one or more applications) that commonly executes on one or more processors. The computer program comprises a plurality of instructions executable by one or more processors.
[0089] Furthermore, the method can be implemented in any suitable type of computing platform, including but not limited to personal computers, minicomputers, mainframes, workstations, networked or distributed computing environments, standalone or integrated computer platforms, or in communication with charged particle tools or other imaging devices. Aspects of the invention can be implemented as machine-readable code stored on a non-transitory storage medium or device, whether removable or integrated into a computing platform, such as a hard disk, optical read and / or write storage medium, RAM, ROM, etc., such that it is readable by a programmable computer, and when the storage medium or device is read by the computer, it can be used to configure and operate the computer to perform the processes described herein. Furthermore, the machine-readable code, or portions thereof, can be transmitted via wired or wireless networks. The invention described herein includes these and other different types of non-transitory computer-readable storage media when such media comprises instructions or programs that implement the steps described above in conjunction with a microprocessor or other data processor. When programmed according to the methods and techniques described in the invention, the invention may also include the computer itself.
[0090] A computer program can be applied to input data to perform the functions described herein, thereby transforming the input data to generate output data stored in non-volatile memory. The output information can also be applied to one or more output devices, such as a display. In a preferred embodiment of the invention, the transformed data represents physical and tangible objects, including specific visual depictions of physical and tangible objects generated on the display.
[0091] The above description is merely a preferred embodiment of the present invention. The present invention is not limited to the above-described embodiments. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention, as long as they achieve the technical effects of the present invention by the same means, should be included within the scope of protection of the present invention. Within the scope of protection of the present invention, the technical solutions and / or implementation methods can have various modifications and variations.
Claims
1. A web-based data rendering optimization method, characterized in that, The method includes the following steps: S100. Obtain the original data to be rendered, and determine whether the height of each data item in the original data is fixed. S200. If the height of each data item in the original data is fixed, the original data is rendered to the interface for the first time. When the parent container scrolls, the original data is updated and rendered to the interface. S300. If the height of each data item in the original data is not fixed, the original data is rendered to the interface for the first time. When the parent container scrolls, the original data is updated and rendered to the interface. Step S300 includes, S310. Starting from the first item of the original data, traverse the original data, and determine whether the current data item has an estimated height. If the current data item has no estimated height, render the current data item outside the interface, calculate the actual height of the current data item, write the actual height of the current data item into the current data item, and clear the data outside the interface. S320. Starting from the first item of the original data, traverse the original data, and calculate the cumulative position value of the current data item for each piece of original data based on the estimated height or actual height of the current data item; step S320 further includes that the cumulative position value currentSize of each piece of original data is the sum of the cumulative position value currentSize of the previous piece of original data and the estimated height forecastSize or actual height itemSize of the current data item: currentSize = currentSize_pre +forecastSize, Where currentSize is the accumulated position value of the current data item, currentSize_pre is the accumulated position value of the original data mentioned in the previous item, and forecastSize is the estimated height of the current data item; or, currentSize = currentSize_pre + itemSize, Where currentSize is the accumulated position value of the current data item, currentSize_pre is the accumulated position value of the original data mentioned in the previous item, and itemSize is the actual height of the current data item; The cumulative position value currentSize of each piece of original data is the sum of the cumulative position value currentSize of the previous piece of original data and the actual height itemSize of the current data item. The actual height itemSize of the current data item is calculated regardless of whether the current data item contains the estimated height forecastSize. S330. Based on the sum of the estimated height or actual height of all data items in the original data, the parent container generates placeholder variables and scrollbars. S340. Based on the height of the parent container, find the index of the first data item whose cumulative position value is greater than the height of the parent container from the original data to obtain the first end index of the initial rendered data. S350. The data from the first starting index to the first ending index in the original data is placed into the dataset to be rendered, and the data of the dataset to be rendered is initially rendered into the placeholder variable. The dataset to be rendered is the dataset that needs to be rendered into the placeholder variable, and the first starting index is the index of the first data in the original data.
2. The web-based data rendering optimization method according to claim 1, characterized in that, Step S200 includes: S210. Based on the number of rows in the original data and the height of the data item, initialize the parent container and generate a placeholder variable and a scrollbar for the parent container. S220. Based on the height of the parent container and the height of each data item, calculate the number of data items that the parent container can display; S230. Create a new dataset to be rendered. Starting from the first starting index of the original data, extract the number of data items that the parent container can display and put them into the dataset to be rendered. Then, render the data of the dataset to be rendered to the placeholder variable for the first time. The dataset to be rendered is the dataset to be rendered to the placeholder variable. The first starting index is the index of the first data item of the original data.
3. The web-based data rendering optimization method according to claim 2, characterized in that, Step S200 also includes: S240. When the scroll bar of the parent container scrolls, the second starting index is updated according to the scrolling distance of the parent container. The second starting index is the data index of the first data in the dataset to be rendered after the parent container has finished scrolling. S250. Based on the second starting index, extract the data from the original data from the data at the second starting index to the data number of data items that the parent container can display by incrementing the second starting index and put it into the dataset to be rendered. Then, update the data of the dataset to be rendered to the placeholder variable to complete the data update during scrolling. S260. When the scroll bar of the parent container continues to scroll, return to steps S240 and S250 until the scroll bar of the parent container scrolls to the bottom of the original data.
4. The web-based data rendering optimization method according to claim 2, characterized in that, Step 210 includes the following: the height of the placeholder variable is the number of original data entries multiplied by the height of the data item; the number of data items is the height of the parent container divided by the height of the data item and then rounded down.
5. The web-based data rendering optimization method according to claim 3, characterized in that, Step S240 includes the second starting index being the distance the parent container scrolls divided by the height of the data item and then rounded down.
6. The web-based data rendering optimization method according to claim 1, characterized in that, Step S300 also includes, S360. When the parent container scrolls, based on the scrolling distance of the parent container, a third starting index and a second ending index are searched from the original data. The third starting index is the index of the first data item whose cumulative position value is greater than the scrolling distance of the parent container, and the second ending index is the index of the first data item whose cumulative position value minus the third starting index is greater than the height of the parent container. S370. Based on the third starting index and the second ending index, data items from the third starting index to the second ending index in the original data are placed into the dataset to be rendered, and the data of the dataset to be rendered is updated and rendered into the placeholder variable. The dataset to be rendered is the dataset that needs to be rendered into the placeholder variable.
7. A computer-readable storage medium having stored thereon program instructions that, when executed by a processor, perform the method as described in any one of claims 1 to 6.