A Mini Program Rendering Method Based on Bias Binary Search and Dynamic Buffer

Abstract

This application discloses a WeChat Mini Program rendering method based on biased binary search and dynamic buffer, comprising: obtaining background list data; the background list data includes multiple list items, each list item having list item parameters; constructing a prefix sum array based on the list item parameters corresponding to the multiple list items; obtaining actual rendering requirements, and determining a target rendering interval from the prefix sum array based on the actual rendering requirements; the target rendering interval is used to determine at least one list item to be rendered; performing page rendering on at least one list item to be rendered, and generating view data on the display interface. By setting the above technical features, the stability and smoothness of page rendering can be improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically, to a rendering method and apparatus for mini-program view data. Background Technology

[0002] In mini-programs, the page is driven by an architecture that separates the logic layer and the view layer. List data is passed from the logic layer to the view layer for rendering through a data binding mechanism. When displaying long lists with large amounts of data, rendering performance becomes a key factor affecting user experience.

[0003] In related technologies, a common approach is to render long lists in full, loading all list data into the logic layer at once and then passing all the data to the view layer for rendering via data binding. When the list is too long, the sheer number of rendering nodes can cause page scrolling to lag, slow initial loading, and concentrate rendering pressure on the mini-program's view layer, thus affecting rendering smoothness and stability. Summary of the Invention

[0004] In view of the above-mentioned deficiencies in the related technologies, the technical problems to be solved by this application include at least how to improve the stability and smoothness of page rendering.

[0005] To address at least one of the aforementioned technical problems, this application proposes a rendering method and apparatus for mini-program view data.

[0006] According to one aspect of this application, a rendering method for view data in a mini-program is provided, the method comprising:

[0007] Retrieve backend list data; the backend list data includes multiple list items, each with list item parameters.

[0008] Construct a prefix sum array based on the list item parameters corresponding to multiple list items;

[0009] Obtain the actual rendering requirements, and determine the target rendering range from the prefix sum array based on the actual rendering requirements; the target rendering range is used to determine at least one list item to be rendered;

[0010] Render at least one list item to be rendered and generate view data on the display interface.

[0011] In some embodiments, the prefix and array correspond to array length information, and the prefix and array includes multiple elements, which include at least a start element and a stop element.

[0012] Obtain the actual rendering requirements, and determine the target rendering range from the prefix sum array based on the actual rendering requirements, including:

[0013] Based on actual rendering requirements, starting element, ending element, and array length information, the estimated search position is determined from the prefix sum array;

[0014] A binary search is performed on the prefix sum array based on the estimated search position to determine the initial rendering range;

[0015] Calculate the number of list items corresponding to the dynamic buffer, and determine the target rendering range based on the number of list items and the initial rendering range.

[0016] In some embodiments, the actual rendering requirements include the current scroll offset and the current viewport height corresponding to the current frame; the initial rendering range includes a first start index and a first end index;

[0017] A binary search is performed on the prefix sum array based on the estimated search position to determine the initial rendering interval, including:

[0018] Starting from the estimated search position, and based on the current scroll offset and multiple elements, determine the first starting index; and,

[0019] Based on the current scroll offset, the current viewport height, and multiple elements, determine the first end index to obtain the initial rendering range.

[0020] In some embodiments, the actual rendering requirements also include the current scrolling direction and the current scrolling speed; the target rendering range includes a second start index and a second end index;

[0021] Calculate the number of list items corresponding to the dynamic buffer, and based on the number of list items and the initial rendering range, determine the target rendering range, including:

[0022] Calculate the number of buffer list items based on the current scrolling direction and current scrolling speed;

[0023] Based on the first starting index, the first ending index, and the number of buffer list items, the second starting index and the second ending index are determined to obtain the target rendering range.

[0024] In some embodiments, the target rendering range corresponds to the current frame, and the target rendering range includes a second starting index;

[0025] The method also includes:

[0026] Get the historical rendering range corresponding to the previous frame of the current frame. The historical rendering range includes the third starting index.

[0027] If the second starting index is different from the third starting index, the rendering offset is determined; the rendering offset is used to correct the visual display position of the view data on the display interface.

[0028] In some embodiments, the list item parameter includes an item index parameter;

[0029] Rendering the page for at least one list item to be rendered, before generating view data for the display interface, includes the following methods:

[0030] Based on the item index parameter, at least one list item to be rendered is determined from the background list data.

[0031] In some embodiments, the list item parameter includes an item height parameter;

[0032] Construct a prefix sum array based on the list item parameters corresponding to multiple list items, including:

[0033] Based on the order of each list item in the backend list data, the item height parameter corresponding to each list item is summed to obtain multiple cumulative height values.

[0034] Use the cumulative height values ​​obtained from each summation as array elements to construct a prefix sum array.

[0035] According to a second aspect of this application, a rendering apparatus for mini-program view data is provided, the apparatus comprising:

[0036] The data acquisition module is used to acquire backend list data; the backend list data includes multiple list items, each of which has list item parameters.

[0037] The array building module is used to construct prefix sum arrays based on list item parameters corresponding to multiple list items;

[0038] The region positioning module is used to obtain the actual rendering requirements and determine the target rendering region from the prefix sum array based on the actual rendering requirements; the target rendering region is used to determine at least one list item to be rendered.

[0039] The page rendering module is used to render at least one list item to be rendered and generate view data on the display interface.

[0040] According to a third aspect of this application, an electronic device is provided, comprising a processor and a memory, wherein the memory stores at least one instruction and at least one program, the at least one instruction and at least one program being loaded and executed by the processor to implement the rendering method applied to mini-program view data as described above.

[0041] According to a fourth aspect of this application, a computer storage medium is provided that stores at least one instruction and at least one program, wherein the at least one instruction and at least one program are loaded and executed by a processor to implement the rendering method applied to applet view data as described above.

[0042] Implementing this application will have the following beneficial effects:

[0043] In this application, a prefix sum array is first constructed based on the list item parameters corresponding to each list item in the background list data. Then, a binary search is performed on the prefix sum array according to the actual rendering requirements to determine the target rendering range. This improves the positioning efficiency of the rendering range, thereby enhancing the smoothness of list data rendering. Simultaneously, determining at least one list item to be rendered based on the target rendering range before page rendering reduces the number of list items involved in page rendering, thus reducing the memory usage and rendering pressure of the view layer. This avoids problems such as page scrolling stuttering and slow first-screen loading caused by excessive background list data and rendering nodes, thereby improving rendering smoothness and stability. Attached Figure Description

[0044] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0045] Figure 1 A flowchart illustrating the rendering method for mini-program view data provided in this embodiment of the application;

[0046] Figure 2 This is a schematic diagram illustrating the growth trend of the prefix and sum arrays provided in the embodiments of this application.

[0047] Figure 3 This is a schematic diagram illustrating the process of determining the target rendering range in the embodiments of this application.

[0048] Figure 4 This is a schematic diagram of the function image corresponding to the buffer change function provided in the embodiments of this application;

[0049] Figure 5 This is a schematic diagram showing the display interface and configuration provided in the embodiments of this application;

[0050] Figure 6 This is a schematic diagram of the structure of the rendering device for mini-program view data provided in the embodiments of this application. Detailed Implementation

[0051] The technical solutions in the embodiments of this specification will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this specification, and not all embodiments. Based on the embodiments in this specification, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0052] It should be noted that the terms "first," "second," etc., in this application specification, claims, and the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or server that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to these processes, methods, products, or devices.

[0053] Various exemplary embodiments, features, and aspects of this application will now be described in detail with reference to the accompanying drawings. The same reference numerals in the drawings denote elements that have the same or similar functions. Although various aspects of the embodiments are shown in the drawings, they are not necessarily drawn to scale unless specifically indicated otherwise.

[0054] The term “exemplary” as used herein means “serving as an example, embodiment, or illustration.” Any embodiment illustrated herein as “exemplary” is not necessarily to be construed as superior to or better than other embodiments.

[0055] In this document, the term "and / or" describes a relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent three cases: A exists alone, A and B exist simultaneously, and B exists alone. Additionally, the term "at least one" in this document means any combination of at least two of any one or more elements. For example, including at least one of A, B, and C can mean including any one or more elements selected from the set consisting of A, B, and C.

[0056] Furthermore, to better illustrate this application, numerous specific details are provided in the following detailed description. Those skilled in the art should understand that this application can be implemented without certain specific details. In some instances, methods, means, components, and circuits well-known to those skilled in the art have not been described in detail in order to highlight the main points of this application.

[0057] In related technologies, the conventional approach to rendering long lists in full loads all list data at once into the logic layer, and then passes all the data to the view layer for rendering through data binding. When there are many list items, developers typically use pagination or pull-to-load methods, adding a portion of the data to the list each time. However, regardless of the loading method used, all currently loaded list items will participate in the rendering, meaning the view layer will create a corresponding rendering node for each loaded list item. Due to the massive number of rendering nodes, this leads to page scrolling stutters, slow initial page load, and the rendering pressure concentrated on the mini-program's view layer, severely degrading the user experience.

[0058] Furthermore, because the mini-program development framework has a clear upper limit on the memory data associated with rendering content on a single page, such as 1MB, binding a large amount of list data to the view layer at once can easily trigger this memory limit, leading to a blank screen or abnormal operation. Therefore, under the premise of strictly meeting the single-page memory limit of mini-programs, the solutions in related technologies cannot guarantee the stability and smoothness of rendering.

[0059] In view of the aforementioned technical problems existing in related technologies, the method proposed in this application will be described below in conjunction with specific technical features and accompanying drawings.

[0060] Figure 1 This is a flowchart illustrating the rendering method for mini-program view data provided in an embodiment of this application. Figure 1 As shown, the method includes:

[0061] Step S101: Obtain the background list data; the background list data includes multiple list items, each list item has list item parameters.

[0062] In some embodiments, the background list data, due to its large number of list items, may also be referred to as a long list. The background list data can be stored in the logic layer of the mini-program. Each list item includes list item data and corresponding list item parameters. The list item parameters may include at least an item height parameter and an item index parameter. The item height parameter can be the actual pixel size occupied by each list item in the vertical direction of the display interface, and the unit can be pixels (px). The item index parameter can represent the sequential position of each list item in the long list. For example, a list item that actually occupies 50 pixels in the vertical direction of the display interface and is located in the 6th position in the background list data will have an item height parameter of 50px and an item index parameter of 6.

[0063] In some possible embodiments, the item height parameter of each list item can be considered fixed and can be calculated in advance. Alternatively, the item height parameter can also be obtained by estimation, first-screen measurement, etc. This application does not limit the specific method of determining this parameter.

[0064] Step S102: Construct a prefix sum array based on the list item parameters corresponding to each of the multiple list items.

[0065] In some embodiments, Figure 2 As a diagram illustrating the growth trend of a prefix sum array, the vertical axis represents the number of list items, and the horizontal axis represents the cumulative height of the first n list items. See also... Figure 2 We can see that the prefix sum array exhibits a monotonically increasing property. Furthermore, in practical business applications, since the differences in the item height parameters of each list item are usually not significant, the prefix sum array can also exhibit an approximately uniform growth property. The construction of the prefix sum array provides a data structure foundation for subsequent biased binary search.

[0066] Specifically, step S102 involves constructing a prefix sum array based on the list item parameters corresponding to multiple list items, including:

[0067] Based on the order of each list item in the backend list data, the item height parameter corresponding to each list item is summed to obtain multiple cumulative height values.

[0068] Use the cumulative height values ​​obtained from each summation as array elements to construct a prefix sum array.

[0069] In some embodiments, the prefix sum array `prefixSum` may correspond to array length information. The prefix sum array includes multiple elements and the index of each element. The multiple elements include at least a start element and a stop element.

[0070] Specifically, the backend data list can be set to include k list items. The sum of the item height parameters of the first 1, 2, ..., k list items is calculated sequentially to obtain the cumulative height value for each item. These cumulative height values ​​can then be used as multiple elements of a prefix sum array.

[0071] The prefix sum array also includes the cumulative height values ​​corresponding to the first 0 elements. `prefixSum[0]` is the 0th element of this prefix sum array, representing the starting element. 0 can be the index of the element corresponding to the starting element `prefixSum[0]`. The element `prefixSum[i]` can represent the cumulative height value corresponding to the height parameters of the first `i` list items out of `k` list items, where `i` is the index of the element `prefixSum[i]`. Furthermore, the array length of this prefix sum array is `k+1`, and `prefixSum[k]` is the terminating element in the prefix sum array.

[0072] In other embodiments, if the item height parameter corresponding to one or more list items changes dynamically, the affected elements in the prefix sum array can be incrementally updated. For example, if the background list data includes 3 list items with corresponding item height parameters of 10, 20 and 30, then the prefix sum array corresponding to the background list data can be represented as: prefixSum[0]=0, prefixSum[1]=10, prefixSum[2]=30, prefixSum[3]=60. When the height parameter of the second item changes from 20 to 15, the affected elements, namely prefixSum[2] and prefixSum[3], can be incrementally updated. The increment during this change is 15-20=-5, so the updated prefixSum[2] and prefixSum[3] are: prefixSum[2]=prefixSum[2]+(-5)=25; prefixSum[3]=prefixSum[3]+(-5)=55; For prefix sum arrays, incremental updates are used for affected elements. This reduces the impact of changes in the item height parameter on the construction of the prefix sum array and the positioning of the rendering range, thus reducing computational pressure and ensuring rendering stability.

[0073] Step S103: Obtain the actual rendering requirements and determine the target rendering range from the prefix sum array based on the actual rendering requirements. The target rendering range is used to determine at least one item in the list to be rendered.

[0074] In some embodiments, the actual rendering requirements can be determined based on user actions or pre-defined rules. For example, when a user clicks a button on the display interface, or performs actions such as pulling down or swiping up, corresponding actual rendering requirements can be generated. Alternatively, it can be pre-defined that after the display interface jumps from page A to page B, corresponding actual rendering requirements will be generated to display the interactive interface and data information to the user.

[0075] In some embodiments, the actual rendering requirements can be adjusted accordingly with the operation of each frame. During a rendering process, the actual rendering requirements may include the current scroll offset scrollTop corresponding to the current frame, and the current viewport height viewportHeight, and the target rendering range determined therefrom also corresponds to the current frame.

[0076] Please see Figure 3 Step S103 involves obtaining the actual rendering requirements and determining the target rendering range from the prefix sum array based on these requirements. This may include:

[0077] Step S301: Based on the actual rendering requirements, the starting element, the ending element, and the array length information, determine the estimated search position from the prefix sum array.

[0078] In some embodiments, since the prefix sum array has an approximately uniform growth characteristic, the estimated search position is calculated proportionally based on the actual rendering requirements, the starting element, the ending element, and the array length information, and is used as the bias starting point. This estimated search position is very close to the true solution, thereby significantly reducing the number of search iterations. Compared to the time complexity of O(logn) for locating from the middle using classic binary search in related technologies, the rendering interval positioning method disclosed in this embodiment can achieve an approximate time complexity of O(1) in practice. In long list and high-frequency scrolling scenarios, it can locate the rendering interval faster, reducing the computational pressure on the logic layer. At the same time, by improving search efficiency, the smoothness of rendering is improved.

[0079] For example, in some experimental data of biased binary search, the target element can be determined in 2 searches for 1000 data points, in 2-3 searches for 10000 data points, and in 3 searches for 100000 data points. In scenarios with millions of data points, the search can be completed in a fixed 3 searches, reducing the time complexity to O(1).

[0080] Step S302: Perform a binary search on the prefix sum array based on the estimated search position to determine the initial rendering range.

[0081] Step S303: Calculate the number of list items corresponding to the dynamic buffer, and determine the target rendering range based on the number of list items and the initial rendering range.

[0082] In some embodiments, the initial rendering range is a rendering range located based on actual rendering requirements. However, in practical applications, when a user quickly swipes on the display interface, simply rendering the list items corresponding to the initial rendering range may not be sufficient to respond to user actions. Therefore, a dynamic buffer needs to be set up in conjunction with the initial rendering range; the two together constitute the target rendering range, ensuring that content not yet displayed on the display interface is prepared in advance, achieving a seamless visual transition and improving the user experience. The initial rendering range includes a first start index and a first end index. The target rendering range includes a second start index and a second end index.

[0083] In some embodiments, step S302 may include:

[0084] Starting from the estimated search position, determine the first starting index based on the current scroll offset and multiple elements; and determine the first ending index based on the current scroll offset, the current viewport height, and multiple elements to obtain the initial rendering range.

[0085] Specifically, the biased binary search starts at the estimated search position and searches within the prefix sum array. Among the elements in the prefix sum array that satisfy the condition prefixSum[x] ≤ scrollTop, the maximum index is used as the first starting index, startIndex. Similarly, among the elements that satisfy the condition prefixSum[y] ≥ scrollTop + viewportHeight, the minimum index is used as the first ending index, endIndex. [startIndex, endIndex] constitutes the initial rendering range.

[0086] In some embodiments, since the display interface can be quickly or slowly pulled down and swiped up, the scrolling direction and scrolling speed also need to be considered when calculating the dynamic buffer. Therefore, the actual rendering requirements may also include the current scrolling direction and the current scrolling speed. Specifically, the current scrolling offset, current scrolling direction, and current scrolling speed in the actual rendering requirements can all be obtained by listening to the scrolling event of the scrolling container. Specifically, step S303 may include:

[0087] Calculate the number of buffer list items based on the current scroll direction and current scroll speed. The number of buffer list items can include either the number of the first list items or the number of the second list items.

[0088] Based on the first starting index, the first ending index, and the number of buffer list items, the second starting index and the second ending index are determined to obtain the target rendering range.

[0089] In some embodiments, if the number of buffer list items included in the buffer is fixed, when the user scrolls quickly in a certain direction, the number of buffer list items in that direction may be insufficient, resulting in a white screen or flickering because the list items about to enter the display interface or viewport have not yet been rendered. Therefore, this embodiment of the application uses a dynamic buffer, the number of buffer list items of which can be adaptively adjusted according to the current scrolling direction and current scrolling speed corresponding to the current frame. For example, when the user scrolls down quickly, the lower buffer of the initial rendering interval can be appropriately increased and the upper buffer can be decreased to ensure that there are always enough buffer list items in the scrolling direction; when the user scrolls up quickly, the upper buffer can be appropriately increased and the lower buffer can be decreased. By setting a dynamic buffer, the problems of insufficient forward and wasteful reverse scrolling caused by a fixed buffer can be avoided while ensuring smooth scrolling, thereby improving scrolling continuity and user experience.

[0090] The current scrolling direction can be divided into upward scrolling and downward scrolling, and the current scrolling speed can be the scrolling displacement per unit time or the scrolling event frequency.

[0091] In some embodiments, the number of items in the first list and the number of items in the second list can be calculated using a buffer transformation function. The buffer transformation function is as follows: ; Where Y represents the number of buffer list items; RENDER_BUFFER indicates the default number of buffer list items before and after the initial rendering interval, with a default value of 10, which can be adjusted adaptively according to different application scenarios and rendering requirements; velocity is the user's scrolling speed, i.e., the current scrolling speed, in pixels per second, such as 800px / s; MAX_VELOCITY represents the maximum scrolling speed, such as 1500px / s. When the current scrolling speed is greater than the maximum scrolling speed, the value of velocity is equal to MAX_VELOCITY in the calculation of the number of buffer list items.

[0092] In some embodiments, please refer to Figure 4 Since the current scrolling direction is either upward or downward, velocity has positive and negative values, meaning it can be divided into a first list item count and a second list item count. When the user swipes up on the screen, i.e., the page scrolls down, velocity can take a positive value, and the calculated Y value is also positive; this Y value is the first list item count. At this point, the first list item count and the default buffer list item count can be added to the first end index of the initial rendering interval to obtain the second end index; simultaneously, the difference between the first start index of the initial rendering interval and the first item count (the default buffer list item count minus the first item count) is used to obtain the second start index; the second start index and the second end index constitute the target rendering interval.

[0093] Correspondingly, when the user swipes down on the screen, i.e., the page scrolls up, velocity can take a negative value, and the calculated Y value can also be negative. This Y value is the number of second list items. At this time, the number of second list items and the number of default buffer list items can be added to the first end index of the initial rendering interval to obtain the second end index; at the same time, the difference between the number of default buffer list items and the number of second list items can be added to the first start index of the initial rendering interval to obtain the second start index.

[0094] For example, the initial rendering range has a first start index of 50 and a first end index of 100, with a default buffer list size of 10. If the first list has 5 items, the target rendering range has a second start index of 45 and a second end index of 115. If the second list has -3 items, the second start index is 37 and the second end index is 107.

[0095] As the user scrolls faster, i.e., the current scroll speed gradually increases, the number of dynamic buffers can vary between -RENDER_BUFFER and +RENDER_BUFFER. This ensures that there are always enough buffer list items in the direction of page scrolling to prevent the screen from going blank during rendering, thereby improving scrolling smoothness and user experience.

[0096] In this embodiment, biased binary search and dynamic buffer are used to reduce the time complexity of rendering interval positioning. Biased binary search reduces the time complexity of rendering interval positioning, while dynamic buffer adapts to fast scrolling scenarios. The two work together to improve the smoothness and stability of page rendering.

[0097] Step S104: Render at least one list item to be rendered and generate view data on the display interface.

[0098] In some embodiments, the target rendering range determined by biased binary search corresponds to the item index parameter of each list item in the background list data. Therefore, before rendering the page, it is necessary to determine the list items to be rendered in the background list data based on the item index parameter.

[0099] That is, to render at least one list item to be rendered, before generating view data on the display interface, the method includes: determining at least one list item to be rendered from the background list data based on the item index parameter.

[0100] In this application, only the list items required for rendering within the target rendering range corresponding to the current viewport are bound to the view layer and participate in rendering. Instead of rendering all list items included in the background list data, the background list data is retained in the logic layer or loaded in chunks as needed, without being bound to the view all at once. This ensures that the memory associated with the rendered content only contains the data within the current rendering range, satisfying the WeChat Mini Program framework's single-page memory limitations and theoretically allowing for the loading of arrays of unlimited length within the Mini Program. The total height of the list corresponding to the background list data can be given by the prefix sum and the terminating element of the array, used to set the scrollable height of the scrollable container.

[0101] like Figure 5 As shown, after the page rendering is complete, the view data, such as product name: 1, product name: 2, etc., can be displayed to the user in the viewport on the front end. Meanwhile, in the back end, the configuration panel can display the number of list items and buffer size included in the backend list data, and the item height parameter corresponding to each list item can be adjusted adaptively.

[0102] In other embodiments, the rendering method applied to mini-program view data may further include:

[0103] Get the historical rendering range corresponding to the previous frame of the current frame. The historical rendering range includes the third starting index.

[0104] If the second starting index is different from the third starting index, the rendering offset is determined; the rendering offset is used to correct the visual display position of the view data on the display interface.

[0105] In some embodiments, the historical rendering range can be the target rendering range corresponding to the previous frame, and may include a third start index and a third end index. If the target rendering range corresponding to the current frame is different from the historical rendering range corresponding to the previous frame, that is, the second start index is different from the third start index, it indicates that the user has scrolled, and the page displayed on the interface needs to be updated, that is, new list item data needs to be rendered.

[0106] If the target rendering range corresponding to the current frame is the same as the historical rendering range corresponding to the previous frame, that is, the second starting index is equal to the third starting index, the user's scroll distance may be small and a line break or page update has not yet been triggered, so there is no need to render the page, thus saving computing resources.

[0107] Specifically, when the second starting index is different from the third starting index, the rendering offset is calculated. The rendering offset can represent the theoretical offset position of the list item corresponding to the second starting index in the entire long list within the target rendering interval corresponding to the current frame. This value is equal to the sum of the heights of all list items before this list item. For example, if the second starting index is 5, then the rendering offset is prefixSum[4].

[0108] Based on the rendering offset, the visual offset of the actual rendering area within the scrolling container can be adjusted to correct the visual display position of the view data on the display interface. For example, CSS transforms or placeholder padding can be used to shift a small number of actually rendered DOM nodes to the theoretical offset position, visually aligning them with the correct position within the scrolling container, thus simulating the natural scrolling effect of a long list.

[0109] Correspondingly, embodiments of this application also provide a rendering device for mini-program view data. For example... Figure 6 As shown, the device includes:

[0110] The data acquisition module 610 is used to acquire backend list data; the backend list data includes multiple list items, each list item having list item parameters.

[0111] Array construction module 620 is used to construct a prefix sum array based on the list item parameters corresponding to multiple list items;

[0112] The region positioning module 630 is used to obtain the actual rendering requirements and determine the target rendering region from the prefix sum array based on the actual rendering requirements; the target rendering region is used to determine at least one list item to be rendered.

[0113] The page rendering module 640 is used to render at least one list item to be rendered and generate view data on the display interface.

[0114] In other embodiments, the area positioning module 630 includes:

[0115] The position determination module is used to determine the estimated search position from the prefix sum array based on the actual rendering requirements, the starting element, the ending element, and the array length information.

[0116] The binary search module is used to perform a binary search on the prefix sum array based on the estimated search position to determine the initial rendering interval;

[0117] The region determination module is used to calculate the number of list items corresponding to the dynamic buffer, and determine the target rendering region based on the number of list items and the initial rendering region.

[0118] In other embodiments, the binary search module includes:

[0119] The first index determination module is used to determine a first starting index based on the estimated search position, the current scroll offset, and multiple elements; and,

[0120] The second index determination module is used to determine the first end index based on the current scroll offset, the current viewport height, and multiple elements, so as to obtain the initial rendering range.

[0121] In other embodiments, the region determination module includes:

[0122] The buffer calculation module is used to calculate the number of buffer list items based on the current scrolling direction and current scrolling speed.

[0123] The third index determination module is used to determine the second start index and the second end index based on the first start index, the first end index, and the number of buffer list items, so as to obtain the target rendering range.

[0124] In other embodiments, the device further includes:

[0125] The historical data acquisition module is used to obtain the historical rendering range corresponding to the previous frame of the current frame. The historical rendering range includes the third starting index.

[0126] The offset determination module is used to determine the rendering offset when the second starting index is different from the third starting index; the rendering offset is used to correct the visual display position of the view data on the display interface.

[0127] In other embodiments, the device further includes:

[0128] The list item determination module is used to determine at least one list item to be rendered from the background list data based on the item index parameter.

[0129] In other embodiments, array construction module 620 includes:

[0130] The cumulative value calculation module is used to sum the item height parameters corresponding to each list item in the background list data according to their arrangement order, and obtain multiple cumulative height values.

[0131] The array determination module is used to construct a prefix sum array by using the cumulative height value obtained from each summation as array elements.

[0132] The apparatus and method embodiments described above are based on the same inventive concept and are used to implement the above-described rendering method for mini-program view data.

[0133] This application also provides an electronic device. The electronic device includes a processor and a memory, the memory storing at least one instruction, at least one program, code set, or instruction set. The processor loads and executes the at least one instruction, at least one program, code set, or instruction set to implement the rendering method for mini-program view data as described in any of the method embodiments.

[0134] This application also provides a computer storage medium. This computer storage medium can be located in a server to store at least one instruction, at least one program, code set, or instruction set used to implement at least one instruction, at least one program, code set, or instruction set in the method embodiments. The at least one instruction, at least one program, code set, or instruction set is loaded and executed by a processor to implement the rendering method applied to mini-program view data as described in any of the method embodiments.

[0135] Optionally, in this embodiment of the application, the storage medium may be located in at least one of multiple network servers in a computer network. Optionally, in this embodiment of the application, the storage medium may include, but is not limited to, various media capable of storing program code, such as USB flash drives, read-only memory (ROM), random access memory (RAM), portable hard drives, magnetic disks, or optical disks.

[0136] It should be noted that the above embodiments only illustrate several implementation methods of this application, and their descriptions are relatively specific and detailed, but they should not be construed as limiting the scope of this application's patent. The above description is exemplary and not exhaustive, nor is it limited to the disclosed embodiments. The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity, not all possible combinations of the technical features in the above embodiments have been described. However, as long as the combination of these technical features does not contradict each other, it should be considered within the scope of this specification. It should be pointed out that for those skilled in the art, several modifications and improvements can be made without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this patent application should be determined by the appended claims. The terminology used herein is chosen to best explain the principles, practical applications, or technical improvements in the market of the various embodiments, or to enable other those skilled in the art to understand the various embodiments disclosed herein.

Claims

1. A method for rendering view data in a WeChat Mini Program, characterized in that, include: Retrieve backend list data; The background list data includes multiple list items, and each list item has list item parameters; Construct a prefix sum array based on the list item parameters corresponding to the multiple list items respectively; Obtain the actual rendering requirements, and determine the target rendering range from the prefix sum array based on the actual rendering requirements; The target rendering range is used to determine at least one list item to be rendered; The page is rendered for the at least one list item to be rendered, and view data is generated on the display interface.

2. The rendering method for mini-program view data according to claim 1, characterized in that, The prefix sum array corresponds to array length information, and the prefix sum array includes multiple elements, the multiple elements including at least a start element and a stop element; The step of obtaining the actual rendering requirements and determining the target rendering range from the prefix sum array based on the actual rendering requirements includes: Based on the actual rendering requirements, the starting element, the ending element, and the array length information, the estimated search position is determined from the prefix sum array; A binary search is performed on the prefix sum array based on the estimated search position to determine the initial rendering interval; Calculate the number of list items corresponding to the dynamic buffer, and determine the target rendering range based on the number of list items and the initial rendering range.

3. The rendering method for mini-program view data according to claim 2, characterized in that, The actual rendering requirements include the current scroll offset and the current viewport height corresponding to the current frame; The initial rendering range includes a first start index and a first end index; The step of performing a binary search on the prefix sum array based on the estimated search position to determine the initial rendering interval includes: Starting from the estimated search position, the first starting index is determined based on the current scroll offset and the multiple elements; as well as, Based on the current scroll offset, the current viewport height, and the multiple elements, the first end index is determined, and the initial rendering range is obtained.

4. The rendering method for mini-program view data according to claim 3, characterized in that, The actual rendering requirements also include the current scrolling direction and the current scrolling speed; the target rendering range includes a second start index and a second end index; The calculation of the number of list items corresponding to the dynamic buffer, and the determination of the target rendering range based on the number of list items and the initial rendering range, includes: Calculate the number of buffer list items based on the current scrolling direction and the current scrolling speed; Based on the first starting index, the first ending index, and the number of buffer list items, the second starting index and the second ending index are determined to obtain the target rendering range.

5. The rendering method for mini-program view data according to claim 1, characterized in that, The target rendering range corresponds to the current frame, and the target rendering range includes a second starting index; The method further includes: Obtain the historical rendering range corresponding to the previous frame of the current frame, wherein the historical rendering range includes a third starting index; If the second starting index is different from the third starting index, a rendering offset is determined; the rendering offset is used to correct the visual display position of the view data on the display interface.

6. The rendering method for mini-program view data according to claim 5, characterized in that, The list item parameters include the item index parameters; The method for rendering the page for the at least one list item to be rendered, before generating view data on the display interface, includes: Based on the item index parameter, at least one list item to be rendered is determined from the background list data.

7. The rendering method for mini-program view data according to claim 1, characterized in that, The list item parameters include the item height parameter; The step of constructing a prefix sum array based on the list item parameters corresponding to the plurality of list items includes: Based on the arrangement order of each list item in the background list data, the item height parameter corresponding to each list item is summed sequentially to obtain multiple cumulative height values; The cumulative height value obtained from each summation is used as an array element to construct the prefix sum array.

8. A rendering device for view data in a mini-program, characterized in that, The device includes: The data acquisition module is used to acquire background list data; the background list data includes multiple list items, and each list item has list item parameters; An array construction module is used to construct a prefix sum array based on the list item parameters corresponding to the plurality of list items respectively; A region positioning module is used to obtain the actual rendering requirements and determine the target rendering range from the prefix sum array based on the actual rendering requirements; the target rendering range is used to determine at least one list item to be rendered. The page rendering module is used to render the page for the at least one list item to be rendered and generate view data on the display interface.

9. An electronic device, characterized in that, The electronic device includes a processor and a memory, the memory storing at least one instruction and at least one program segment, the at least one instruction and the at least one program segment being loaded and executed by the processor to implement the rendering method for mini-program view data as described in any one of claims 1 to 7.

10. A computer storage medium, characterized in that, The computer storage medium stores at least one instruction and at least one program segment, which are loaded and executed by a processor to implement the rendering method for mini-program view data as described in any one of claims 1 to 7.

Images