A cache area correction method and device, electronic equipment and storage medium
By acquiring scrolling parameters and a prediction model, the target error is calculated, and a correction strategy is used to correct the rendering item range area. This solves the problem of inaccurate rendering caused by rapid scrolling when rendering extremely long lists, and achieves the effects of stable scrollbars and reasonable resource allocation.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- BEIJING CERTIFICATE AUTHORITY
- Filing Date
- 2025-08-06
- Publication Date
- 2026-06-30
AI Technical Summary
When rendering very long lists, rapid scrolling can prevent the generation of an accurate rendering area, thus failing to render the list data accurately into the rendering area.
By acquiring scrolling parameters, a pre-trained linear regression model or a feature vector-based machine learning model is used to predict and determine the predicted height of the area to be rendered. The target error is calculated based on the predicted height and the preset height. A correction strategy is then used to correct the area to be rendered, generating a matching rendering area.
It achieves dynamic matching of scroll speed in fast scrolling situations, eliminates blank spaces during fast scrolling, stabilizes scrollbar behavior, rationally allocates resources, and improves rendering efficiency.
Smart Images

Figure CN120949986B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of interface rendering technology, and more specifically, to a method, apparatus, electronic device, and storage medium for correcting a cache region. Background Technology
[0002] When rendering a list containing a large amount of data, the traditional approach processes the entire dataset at once, synchronously generating DOM nodes corresponding to all list items and inserting them all into the page document flow. During rendering, a cache area is generated by scrolling the list, and then the list data is mapped to the rendering area. However, if the scrolling speed is too fast, an accurate rendering area cannot be generated, and thus the list data cannot be accurately rendered into the rendering area. Therefore, how to adaptively adjust the rendering area in real time is an urgent problem to be solved. Summary of the Invention
[0003] The purpose of some embodiments of this application is to provide a method, apparatus, electronic device, and storage medium for correcting a cache area. Through the technical solutions of the embodiments of this application, in response to a user-input scrolling command for a long list rendering task, scrolling parameters corresponding to the scrolling command are obtained, wherein the scrolling parameters include at least scrolling speed and scrolling direction; based on the scrolling parameters, a preset basic buffer area, and the scrolling area range of the long list, the range area of the item to be rendered is determined; based on a pre-established prediction model, the range area of the item to be rendered is predicted to obtain a predicted height; wherein the pre-established prediction model is obtained by training a training model using historical rendering data, and the training model includes at least a linear regression model or a model based on... This is one type of machine learning model for feature vectors; based on the predicted height and the preset height, a target error corresponding to the predicted height is determined; based on the preset correction strategy, a target correction strategy corresponding to the target error is determined; the range of items to be rendered is corrected according to the target correction strategy. In this embodiment, the range of items to be rendered is generated by obtaining the scrolling speed, and then a pre-trained prediction model is used to predict the predicted height of the range of items to be rendered. Then, the correction is performed based on the predicted height and the preset height to obtain the corresponding correction strategy. The range of items to be rendered can be corrected according to different needs, so that the scrolling speed can be matched in real time to generate a matching rendering area, thereby completing the rendering of the ultra-long list.
[0004] Firstly, some embodiments of this application provide a method for correcting a cache region, including:
[0005] In response to a user-input scrolling command for a long list rendering task, scrolling parameters corresponding to the scrolling command are obtained, wherein the scrolling parameters include at least scrolling speed and scrolling direction;
[0006] The range of items to be rendered is determined based on the scrolling parameters, the preset basic buffer area, and the scrolling area range of the super long list.
[0007] Based on a pre-established prediction model, the range of the item to be rendered is predicted to obtain the predicted height; wherein, the pre-established prediction model is obtained by training a training model using historical rendering data, and the training model includes at least one of a linear regression model or a feature vector-based machine learning model.
[0008] Based on the predicted height and the preset height, determine the target error corresponding to the predicted height;
[0009] Based on the pre-set correction strategy, determine the target correction strategy corresponding to the target error;
[0010] The range of items to be rendered is corrected according to the target correction strategy. Some embodiments of this application generate the range of items to be rendered by acquiring the scrolling speed, then using a pre-trained prediction model to predict the predicted height of the range of items to be rendered, and then correcting it based on the predicted height and a preset height to obtain a corresponding correction strategy. This allows for correction of the range of items to be rendered according to different needs, thus enabling real-time matching of the scrolling speed to generate a matching rendering area, thereby completing the rendering of ultra-long lists.
[0011] Optionally, determining the range of items to be rendered based on the scrolling parameters, the preset basic buffer area, and the scrolling area range of the super-long list includes:
[0012] Calculate the scroll area of the super long list based on the view window size and the current scroll position;
[0013] The scrolling parameters and the preset basic buffer area are processed according to a pre-set calculation method to determine the actual buffer area. The pre-set calculation method includes at least one of linear formula or sliding window.
[0014] The range of items to be rendered is determined based on the scrolling area of the extremely long list and the actual buffer area. Some embodiments of this application effectively eliminate fast scrolling blanks through a dynamic buffer mechanism, resulting in stable scrollbar behavior. This scrolling speed awareness allows for more rational resource allocation.
[0015] Optionally, the pre-established prediction model is obtained in the following manner:
[0016] Acquire historical rendering data, wherein the historical rendering data includes at least the range of sample rendering items and a preset sample height;
[0017] The sample rendering item range area is parsed to obtain the baseline height, text length weight coefficient, text character count, adjacent item height influence, adjacent item average height, width scaling factor and container real-time width corresponding to the sample rendering range area.
[0018] The prediction model is determined based on the baseline height, text length weighting coefficient, number of text characters, influence of adjacent item height, average height of adjacent items, width scaling factor, and real-time container width.
[0019] Optionally, the pre-established prediction model is obtained in the following manner:
[0020] Acquire historical rendering data, wherein the historical rendering data includes at least the range of sample rendering items and a preset sample height;
[0021] The historical rendering data is used to train a feature vector-based machine learning model to obtain the output results.
[0022] If the output meets the preset conditions, the machine learning model is determined as the prediction model.
[0023] Some embodiments of this application achieve a "stable scrollbar behavior" effect by pre-training a linear regression model and a feature vector-based machine learning model to make high-precision predictions, based on the input text length and container width.
[0024] Optionally, determining the target error corresponding to the predicted height based on the predicted height and the preset height includes:
[0025] The gradient descent method is used to calculate the loss function for the predicted height and the preset height;
[0026] Calculate the target error corresponding to the predicted height based on the loss function.
[0027] Some embodiments of this application calculate the loss function between the predicted height and the preset height to obtain the target error, and thus determine the correction strategy.
[0028] Optionally, determining the target correction strategy corresponding to the target error according to a pre-set correction strategy includes:
[0029] If the error is greater than a preset error value, then a target correction strategy corresponding to the target error is determined from the preset correction strategies. The preset correction strategies include at least the error and the correction strategy corresponding to the error.
[0030] Some embodiments of this application find corresponding correction strategies based on different error values, thereby adjusting the update range.
[0031] Optionally, correcting the range of the item to be rendered according to the target correction strategy includes:
[0032] According to the target correction strategy, the preset number of items in the range region of the items to be rendered is corrected and updated. Optionally, the method further includes:
[0033] According to the preset division rules, the range of the item to be rendered is divided into sub-rendering items;
[0034] Calculate the target distance from the center point of each of the sub-rendering items to the center point of the view window;
[0035] Based on a pre-established priority relationship, the target priority corresponding to the target distance is determined, wherein the pre-established priority relationship includes at least the distance and the priority corresponding to the distance;
[0036] Sort the target priorities in descending order to obtain the sorting result;
[0037] Based on the sorting result, the sub-rendering items corresponding to the target priority are rendered.
[0038] Some embodiments of this application achieve the effect of "prioritizing the rendering of items in the center of the window" by using preset partitioning rules, such as: predicting weights based on scrolling direction, and rendering items at the top of the window first if the user scrolls upwards; using simple heuristic rules instead of distance formulas.
[0039] Optionally, the method further includes:
[0040] If the scrolling speed is greater than a preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority.
[0041] In some embodiments of this application, if the scrolling speed is greater than a preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority, thereby reducing the rendering time.
[0042] Secondly, some embodiments of this application provide a cache region correction apparatus, including:
[0043] The acquisition module is used to respond to a scrolling command input by the user for a long list rendering task, and acquire scrolling parameters corresponding to the scrolling command, wherein the scrolling parameters include at least scrolling speed and scrolling direction;
[0044] The determination module is used to determine the range of items to be rendered based on the scrolling parameters, the preset basic buffer area, and the scrolling area range of the super-long list;
[0045] The prediction module is used to predict the range of the item to be rendered based on a pre-established prediction model to obtain the predicted height; wherein the pre-established prediction model is obtained by training a training model using historical rendering data, and the training model includes at least one of a linear regression model or a feature vector-based machine learning model.
[0046] The calculation module is used to determine the target error corresponding to the predicted height based on the predicted height and the preset height;
[0047] The correction module is used to determine the target correction strategy corresponding to the target error according to the preset correction strategy;
[0048] The rendering module is used to correct the range of the item to be rendered according to the target correction strategy.
[0049] Some embodiments of this application obtain the scrolling speed, generate the range of items to be rendered, and then use a pre-trained prediction model to predict the predicted height of the range of items to be rendered. Then, the prediction height and a preset height are used for correction to obtain the corresponding correction strategy. The range of items to be rendered can be corrected according to different needs. In this way, the scrolling speed can be matched in real time to generate a matching rendering area, thereby completing the rendering of the ultra-long list.
[0050] Optionally, the determining module is configured to:
[0051] Calculate the scroll area of the super long list based on the view window size and the current scroll position;
[0052] The scrolling parameters and the preset basic buffer area are processed according to a pre-set calculation method to determine the actual buffer area. The pre-set calculation method includes at least one of linear formula or sliding window.
[0053] The range of items to be rendered is determined based on the scrolling area of the extremely long list and the actual buffer area. Some embodiments of this application effectively eliminate fast scrolling blanks through a dynamic buffer mechanism, resulting in stable scrollbar behavior. This scrolling speed awareness allows for more rational resource allocation.
[0054] Optionally, the prediction module is used to:
[0055] Acquire historical rendering data, wherein the historical rendering data includes at least the range of sample rendering items and a preset sample height;
[0056] The sample rendering item range area is parsed to obtain the baseline height, text length weight coefficient, text character count, adjacent item height influence, adjacent item average height, width scaling factor and container real-time width corresponding to the sample rendering range area.
[0057] The prediction model is determined based on the baseline height, text length weighting coefficient, number of text characters, influence of adjacent item height, average height of adjacent items, width scaling factor, and real-time container width.
[0058] Optionally, the prediction module is used to:
[0059] Acquire historical rendering data, wherein the historical rendering data includes at least the range of sample rendering items and a preset sample height;
[0060] The historical rendering data is used to train a feature vector-based machine learning model to obtain the output results.
[0061] If the output meets the preset conditions, the machine learning model is determined as the prediction model.
[0062] Some embodiments of this application achieve a "stable scrollbar behavior" effect by pre-training a linear regression model and a feature vector-based machine learning model to make high-precision predictions, based on the input text length and container width.
[0063] Optionally, the computing module is used for:
[0064] The gradient descent method is used to calculate the loss function for the predicted height and the preset height;
[0065] Calculate the target error corresponding to the predicted height based on the loss function.
[0066] Some embodiments of this application calculate the loss function between the predicted height and the preset height to obtain the target error, and thus determine the correction strategy.
[0067] Optionally, the correction module is used for:
[0068] If the error is greater than a preset error value, then a target correction strategy corresponding to the target error is determined from the preset correction strategies. The preset correction strategies include at least the error and the correction strategy corresponding to the error.
[0069] Some embodiments of this application find corresponding correction strategies based on different error values, thereby adjusting the update range.
[0070] Optionally, the rendering module is used for:
[0071] According to the target correction strategy, the preset number of items in the range of items to be rendered is corrected and updated.
[0072] Optionally, the rendering module is used for:
[0073] According to the preset division rules, the range of the item to be rendered is divided into sub-rendering items;
[0074] Calculate the target distance from the center point of each of the sub-rendering items to the center point of the view window;
[0075] Based on a pre-established priority relationship, the target priority corresponding to the target distance is determined, wherein the pre-established priority relationship includes at least the distance and the priority corresponding to the distance;
[0076] Sort the target priorities in descending order to obtain the sorting result;
[0077] Based on the sorting result, the sub-rendering items corresponding to the target priority are rendered.
[0078] Some embodiments of this application achieve the effect of "prioritizing the rendering of items in the center of the window" by using preset partitioning rules, such as: predicting weights based on scrolling direction, and rendering items at the top of the window first if the user scrolls upwards; using simple heuristic rules instead of distance formulas.
[0079] Optionally, the rendering module is used for:
[0080] If the scrolling speed is greater than a preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority.
[0081] In some embodiments of this application, if the scrolling speed is greater than a preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority, thereby reducing the rendering time.
[0082] Thirdly, some embodiments of this application provide an electronic device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the program, can implement a cache region correction method as described in any embodiment of the first aspect.
[0083] Fourthly, some embodiments of this application provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, can implement the cache region correction method as described in any embodiment of the first aspect.
[0084] Fifthly, some embodiments of this application provide a computer program product, the computer program product including a computer program, wherein when the computer program is executed by a processor, it can implement the cache region correction method as described in any embodiment of the first aspect. Attached Figure Description
[0085] To more clearly illustrate the technical solutions of some embodiments of this application, the accompanying drawings used in some embodiments of this application will be briefly described below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.
[0086] Figure 1 A flowchart illustrating a method for correcting a cache region provided in an embodiment of this application;
[0087] Figure 2 A flowchart illustrating another method for correcting a cache region provided in an embodiment of this application;
[0088] Figure 3 A flowchart illustrating another method for correcting a cache region provided in an embodiment of this application;
[0089] Figure 4 This is a schematic diagram of the structure of a cache region correction device provided in an embodiment of this application;
[0090] Figure 5 This is a schematic diagram of an electronic device provided in an embodiment of this application. Detailed Implementation
[0091] The technical solutions of some embodiments of this application will now be described with reference to the accompanying drawings.
[0092] It should be noted that similar reference numerals and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures. Furthermore, in the description of this application, terms such as "first," "second," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.
[0093] When rendering a list containing a large amount of data, traditional methods process the entire dataset at once, synchronously generating DOM nodes corresponding to all list items and inserting them into the page document flow. During rendering, a buffer area is generated by scrolling the list, and then the list data is mapped to the rendering area. However, if the scrolling speed is too fast, an accurate rendering area cannot be generated, thus failing to accurately render the list data into the rendering area. Therefore, how to adaptively adjust the rendering area in real time is an urgent problem to be solved. In view of this, some embodiments of this application provide a method for correcting the buffer area. The method includes responding to a scrolling command input by the user for a long list rendering task, obtaining scrolling parameters corresponding to the scrolling command, wherein the scrolling parameters include at least scrolling speed and scrolling direction; determining the range of items to be rendered based on the scrolling parameters, a preset basic buffer area, and the scrolling area range of the long list; and determining the range of items to be rendered based on the preset buffer area. An established prediction model is used to predict the range of the item to be rendered, obtaining a predicted height. This pre-established prediction model is trained using historical rendering data, and the training model includes at least one of a linear regression model or a feature vector-based machine learning model. Based on the predicted height and a preset height, a target error corresponding to the predicted height is determined. A target correction strategy corresponding to the target error is determined based on a pre-set correction strategy. The range of the item to be rendered is then corrected according to the target correction strategy. In this embodiment, the scrolling speed is obtained to generate the range of the item to be rendered. Then, the pre-trained prediction model is used to predict the predicted height of the range of the item to be rendered. Correction is then performed based on the predicted height and the preset height to obtain the corresponding correction strategy. The range of the item to be rendered can be corrected according to different needs, thus matching the scrolling speed in real time to generate a matching rendering area, thereby completing the rendering of the ultra-long list.
[0094] like Figure 1 As shown, an embodiment of this application provides a method for correcting a cache region, the method comprising:
[0095] S101. In response to a scrolling command input by the user for a long list rendering task, obtain scrolling parameters corresponding to the scrolling command, wherein the scrolling parameters include at least scrolling speed and scrolling direction.
[0096] Specifically, the terminal device stores an extremely long list that needs to be rendered. The extremely long list needs to be rendered onto the page. For a certain starting position of the extremely long list, the user inputs a scrolling command for the rendering task, and the terminal device obtains the scrolling speed and scrolling direction of the scrolling command.
[0097] For example, the scrolling command entered by the user can be any one of scrolling up, scrolling down, scrolling left, or scrolling right.
[0098] S102. Determine the range of items to be rendered based on the scrolling parameters, the preset basic buffer area, and the scrolling area range of the super long list.
[0099] Specifically, the terminal device calculates the actual buffer area based on the scrolling speed collected within a preset time and the preset basic buffer size, and then calculates the range of items to be rendered based on the scrolling area of the long list and the actual buffer area.
[0100] S103. Based on the pre-established prediction model, predict the range of the item to be rendered to obtain the predicted height; wherein, the pre-established prediction model is obtained by training a training model using historical rendering data, and the training model includes at least one of a linear regression model or a feature vector-based machine learning model.
[0101] Specifically, the terminal device uses historical rendering data to train a training model to obtain a prediction model. The training model includes at least one of a linear regression model or a feature vector-based machine learning model. The prediction model is used to predict the height of the rendering area.
[0102] The terminal device inputs the range of the item to be rendered into the prediction model to obtain the predicted height of the range of the item to be rendered.
[0103] S104. Determine the target error corresponding to the predicted height based on the predicted height and the preset height;
[0104] The terminal device can obtain the preset height of different rendering tasks after rendering based on historical rendering data. Then, during the actual rendering process, it calculates the loss function between the predicted height and the preset height, judges the obtained loss function value, and obtains the target error corresponding to the predicted height.
[0105] S105. Determine the target correction strategy corresponding to the target error based on the preset correction strategy;
[0106] Specifically, the terminal device pre-stores a correction strategy, which includes at least an error and a corresponding correction strategy. Thus, after the target error is obtained, the target correction strategy corresponding to the target error is searched in the correction strategy.
[0107] For example, if the error is 0.8, the correction strategy is to modify it page by page;
[0108] If the error is 0.1, the correction strategy is to modify it row by row. The specific correction strategy can be set according to the requirements, and no specific limit is made here.
[0109] S106. Correct the range of the item to be rendered according to the target correction strategy.
[0110] Specifically, after obtaining the target correction strategy, the terminal device corrects the range of items to be rendered. For example, it can correct the preset number of rows or preset number of pages in the range of items to be rendered. After the correction is completed, the data in the long list is mapped to the range of items to be rendered, and the page rendering is completed.
[0111] Some embodiments of this application obtain the scrolling speed, generate the range of items to be rendered, and then use a pre-trained prediction model to predict the predicted height of the range of items to be rendered. Then, the prediction height and a preset height are used for correction to obtain the corresponding correction strategy. The range of items to be rendered can be corrected according to different needs. In this way, the scrolling speed can be matched in real time to generate a matching rendering area, thereby completing the rendering of the ultra-long list.
[0112] Another embodiment of this application further supplements the description of the cache region correction method provided in the above embodiments.
[0113] Optionally, the range of items to be rendered is determined based on scrolling parameters, a preset base buffer area, and the scrolling area range of the extra-long list, including:
[0114] Calculate the scroll area of the super long list based on the view window size and the current scroll position;
[0115] Based on the pre-set calculation method, the scrolling parameters and the preset basic buffer area are processed to determine the actual buffer area. The pre-set calculation method includes at least one of linear formula or sliding window.
[0116] The range of items to be rendered is determined based on the scrolling area of the long list and the actual buffer area.
[0117] like Figure 2As shown, in this embodiment of the application, the Adaptive Virtualization Window Controller (AVC) (4.2) View Area Calculator calculates the current view area [startIndex, endIndex] based on the container viewport size and the current scroll position; the AVC (4.3) Dynamic Buffer Calculator calculates the actual buffer size dynamicBuffer based on the scroll speed v and the preset base buffer size baseBuffer (e.g., 20 items).
[0118] Example algorithm: Actual buffer size dynamicBuffer = baseBuffer (preset base buffer size) + Math.floor (rounded) (k * Math.exp(scroll speed v / adjustable scaling factor, i.e., the effect of speed on scrolling scale));
[0119] Where: k and scale are adjustable parameters, for example, k=5, scale=0.02.
[0120] The parameters k and scale were optimized through scrolling tests on a list of 100,000 items: when k=5 and scale=0.02, the scrolling blank rate was the lowest (<0.3%). When the dynamic buffer formula parameters k∈[4,6] and scale∈[0.01,0.03], the scrolling blank rate was <0.5%. The final range of items to be rendered was determined based on the scrolling area and the actual buffer: [renderStart, renderEnd] =[startIndex - dynamicBuffer, endIndex + dynamicBuffer].
[0121] In this embodiment, the buffer calculation function can also employ other mathematical functions, such as sliding window averaging and other dynamic statistical algorithms; for example, linear or polynomial functions, dynamically adjusted based on historical scrolling speed data, setting an upper limit for the buffer, and ultimately ensuring that the scrolling blank rate is ≤0.5%, thus avoiding an exponential explosion.
[0122] Some embodiments of this application effectively eliminate fast scrolling blanks through a dynamic buffer mechanism, and the scroll bar behavior is stable. In this way, the scrolling speed perception makes resource allocation more reasonable.
[0123] Optionally, the pre-established prediction model is obtained in the following way:
[0124] Obtain historical rendering data, which includes at least the range of sample rendering items and the preset sample height;
[0125] The sample rendering item range area is parsed to obtain the baseline height, text length weight coefficient, text character count, adjacent item height influence, adjacent item average height, width scaling factor and container real-time width corresponding to the sample rendering range area.
[0126] The prediction model is determined based on the baseline height, text length weighting coefficient, number of text characters, influence of adjacent item height, average height of adjacent items, width scaling factor, and real-time container width.
[0127] Specifically, the terminal device updates the system every 100 renders based on historical rendering data, calculates the gradient based on the actual rendering height of the current batch, and minimizes the error between the predicted height and the actual height.
[0128] The training process of the linear regression model in this embodiment is as follows:
[0129] Predicted height = intercept + text length weight factor * text length * neighbor impact * average height of neighboring items (avgNeighborHeight) + width scaling factor * container width;
[0130] Where: interceptw is the base height (px); textWeight is the text length weight coefficient; textLength is the number of text characters; neighborImpact is the height influence of adjacent items; avgNeighborHeightw is the average height of adjacent items (px); widthScaleFactor is the width scaling factor; containerWidth is the real-time width of the container (excluding scrollbars);
[0131] After initializing the linear regression model: textWeight=0.1, neighborImpact=0.15 (based on the historical data mean). Optionally, the pre-built prediction model is obtained as follows:
[0132] Obtain historical rendering data, which includes at least the range of sample rendering items and the preset sample height;
[0133] Historical rendering data is used to train a feature vector-based machine learning model to obtain the output results;
[0134] If the output meets the preset conditions, the machine learning model is determined as the prediction model.
[0135] In addition to the linear regression model described above, other prediction models can also be used in the embodiments of this application, such as machine learning models based on feature vectors to achieve size prediction, such as decision trees or K-nearest neighbors algorithm to predict height based on historical data of similar items. The specific machine learning model is not specifically limited in this application.
[0136] Some embodiments of this application achieve a "stable scrollbar behavior" effect by pre-training a linear regression model and a feature vector-based machine learning model to make high-precision predictions, based on the input text length and container width.
[0137] Optionally, based on the predicted height and the preset height, a target error corresponding to the predicted height is determined, including:
[0138] The gradient descent method is used to calculate the loss function for the predicted height and the preset height;
[0139] Calculate the target error corresponding to the predicted height based on the loss function.
[0140] Specifically, for every 100 updates, the terminal device uses gradient descent to optimize the weights, with the loss function being MAE(actual height, predicted height).
[0141] The prediction model input features = text length (number of characters) × weight coefficient + container width (px) × scaling factor. The input features include: text length, adjacent item height and container width.
[0142] Correction is triggered when the value of the loss function, i.e., the target error value, is greater than an error threshold, where the error threshold is 5% to 10%. Some embodiments of this application calculate the target error by calculating the loss function between the predicted height and the preset height, and thus determine the correction strategy.
[0143] Optionally, based on a pre-set correction strategy, a target correction strategy corresponding to the target error is determined, including:
[0144] If the error is greater than the preset error value, the target correction strategy corresponding to the target error is determined from the preset correction strategies. The preset correction strategies include at least the error and the correction strategy corresponding to the error.
[0145] Specifically, the correction strategies set by the terminal device include at least: updating by row or updating by page. This allows the update range to be adjusted according to actual needs. For example, the list can be divided into blocks (e.g., groups of 100 items), and only the affected blocks can be recalculated, rather than the entire list. At the same time, a size cache pool can be used for storage, and the page can be managed with a first-in-first-out (FIFO) strategy, or a timestamp-based expiration strategy can be added.
[0146] Some embodiments of this application find corresponding correction strategies based on different error values, thereby adjusting the update range.
[0147] Optionally, the range of the item to be rendered is corrected according to the target correction strategy, including:
[0148] Based on the target correction strategy, the number of preset items in the range of items to be rendered is corrected and updated.
[0149] Specifically, when the error exceeds the threshold, the terminal device corrects the size of the area to be rendered. It only triggers the recalculation of the position from the item whose size has changed to the item whose actual position has changed. The position calculation is based on the prediction model (4.9) and is accumulated to avoid traversing the entire list.
[0150] Optionally, the method further includes:
[0151] According to the preset division rules, the area to be rendered is split into sub-rendering items;
[0152] Calculate the target distance from the center point of each sub-render item to the center point of the view window;
[0153] Based on the pre-established priority relationship, the target priority corresponding to the target distance is determined, wherein the pre-established priority relationship includes at least the distance and the priority corresponding to the distance;
[0154] Sort the target priorities in descending order to obtain the sorting results;
[0155] Based on the sorting results, render the sub-rendering items corresponding to the target priority.
[0156] Specifically, in this embodiment, task priority is calculated based on the new range and view window position. The weight is calculated according to the vertical distance between the center point of the list item and the center point of the current view window. The closer the distance, the higher the weight. The dynamic priority weight is inversely proportional to the item viewing distance and negatively correlated with the scrolling speed, ensuring that the closer the item is to the center of the view window, the greater the weight value. The task queue (4.6) will sort the rendering tasks in descending order of weight.
[0157] The method of calculating priority in this application can also be other, such as: predicting weights based on scrolling direction, and rendering items at the top of the viewport first if the user scrolls up; using simple heuristic rules instead of distance formulas; and achieving the effect of "prioritizing the rendering of items in the center of the viewport".
[0158] Optionally, the method further includes:
[0159] If the scrolling speed exceeds the preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority.
[0160] Specifically, the terminal device judges the scrolling speed. If the scrolling speed exceeds the preset value, i.e., the threshold (>5px / ms), an interruption is triggered, i.e., the current rendering task is interrupted. The interruption method can also be triggered by listening for long task events through browser APIs (such as PerformanceObserver).
[0161] In some embodiments of this application, if the scrolling speed is greater than a preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority, thereby reducing the rendering time.
[0162] like Figure 2 As shown: This invention provides a collaborative optimization method for asynchronous time-slice rendering and dynamic virtualization for ultra-long lists. Its core lies in three closely cooperating technical modules: a dynamic priority time-slice scheduler, an adaptive virtualization window controller, and a lazy size measurement manager.
[0163] 1. User interaction layer: Receives user scroll events, transmits scroll speed in real time through requestAnimationFrame, that is, responds to the scroll command input by the user for the rendering task of a long list, and obtains the scroll parameters corresponding to the scroll command, wherein the scroll parameters include at least scroll speed and scroll direction;
[0164] 2. Adaptive Virtualized Window Controller (AVC)
[0165] A. When the user scrolls, the Adaptive Virtualized Window Controller (AVC) (4.1) calculates the change in scrolling speed;
[0166] B. Adaptive Virtualized Window Controller (AVC) (4.2) Viewport Calculator: Calculates the current viewport [startIndex, endIndex] based on the container viewport size and the current scroll position;
[0167] C. AVC(4.3) Dynamic Buffer Calculator: Based on the scroll speed v and the preset base buffer size baseBuffer (e.g., 20 items), calculate the actual buffer size dynamicBuffer. And determine the final range of items to be rendered [renderStart, renderEnd] = [startIndex -dynamicBuffer, endIndex + dynamicBuffer] based on the scroll area and the actual buffer.
[0168] D. AVC (4.4) Native scrollbar and height predictor: Generates the range of the item to be rendered [startIndex, EndIndex], and passes it to the DPTS module through the CustomEvent event, breaking through the fragmented processing architecture of the existing technology: The CustomEvent method can be replaced by an asynchronous notification mechanism such as event-driven, callback functions, and message queues; ensuring that the range update and task reconstruction are completed within ≤16ms, for example: DPTS registers a callback function with AVC (such as onRangeChange(callback)); when AVC calculates the new range, it directly executes the callback function callback(start, end) to pass the data.
[0169] 3. Dynamic Priority Time Slice Scheduler (DPTS)
[0170] (4.5) Priority Calculator: Calculates task priority based on the new range and view window position. Calculates weight based on the vertical distance between the center point of the list item and the center point of the current view window. The closer the distance, the higher the weight. The dynamic priority weight is inversely proportional to the item's viewing distance and negatively correlated with the scrolling speed. Ensure that the closer the item is to the center of the view window, the greater the weight value. The task queue (4.6) will sort and render tasks in descending order of weight.
[0171] (4.6) Task queue management: Update the task queue. If the scrolling speed exceeds the threshold (>5px / ms), trigger an interruption until (4.7).
[0172] (4.7) Slice Execution and Interrupt Controller: When the scrolling speed exceeds the threshold, the current execution is interrupted, low-priority tasks are frozen, the range is recalculated, and then the Web Worker's postMessage() is called (see the visualization of the communication process). Figure 3When the runtime environment does not support Web Worker or the communication time is >5ms, it will automatically degrade to requestIdleCallback scheduling. It sends a status flag to the adaptive virtualization window controller AVC (4.2), and after the main thread listens for (event loop + Promise callback) messages, it sends an interrupt signal. Then it re-virtualizes the region, receives the new visualization range, and rebuilds the priority queue (4.5). The task reconstruction is achieved through the asynchronous task scheduling mechanism to ensure that it is completed within a single event loop cycle of the browser (60Hz=16.7ms), thereby starting a new round of scheduling.
[0173] 4. Inertial Dimension Manager (LSM):
[0174] (4.8) Size cache pool: Stores actual measured dimensions to avoid redundant work;
[0175] (4.9) Prediction model (linear regression): Based on historical rendering data, the system is updated once every 100 renderings. The gradient is calculated based on the actual rendering height of the current batch to minimize the error between the predicted height and the actual height. The gradient descent method is used to optimize the weights. The loss function is calculated as MAE(actual height, predicted height), and the correction strategy is determined based on the loss function.
[0176] (4.10) Measurement execution and corrector: Size correction when the error exceeds the threshold. Only the position is recalculated from the item where the size change occurs to the item whose actual position changes. The position calculation is based on the prediction model (4.9) and is accumulated to avoid traversing the entire list.
[0177] The corrected data is fed back to AVC(4.4) to update the predicted height.
[0178] The Dynamic Priority Time Slicing (DPTS) in this embodiment solves the problems of missing rendering priorities and disconnect between task interruption and virtualization state in the combined scheme, achieving improved priority scheduling efficiency: preemptive rendering of high-priority tasks (window center items) during scrolling, with interrupt response latency ≤16ms (when the average exceeds the threshold, the interruption must be completed within a single browser event loop cycle (16.7ms)); the rendering completion time of the window center item is significantly shortened. Actual test comparison [combined scheme]: in a list containing 100,000 complex items (including images and dynamic layouts), the rendering time of the center item is shortened by approximately 70%-85%. In a typical scenario affecting ≤3 items, the single correction time is ≤1ms, compared to >500ms for basic virtualization, which is the local update mechanism of the LSM module; useless rendering tasks are reduced by >90% during rapid scrolling.
[0179] In this embodiment, the Adaptive Virtualization Window (AVC) overcomes the problems of rapid scrolling jumps / blanks in basic virtualization and fixed buffers in combined schemes, achieving optimized scrolling smoothness: the dynamic buffer mechanism effectively eliminates rapid scrolling blanks; the scrollbar behavior is stable, and the mean absolute error (MAE) of the proxy node height prediction error (based on LRU caching + linear regression model) is <3% on real datasets (MAE <3% on CNN datasets); scrolling speed awareness enables more reasonable resource allocation.
[0180] The Lazy Size Measurement (LSM) in this embodiment overcomes the problems of dynamic size item measurement blocking and O(N) recalculation overhead, achieving a breakthrough in computational complexity: size measurement is triggered only after the item is mounted, avoiding the initialization of the full prediction quantity. Actual measurements show an improvement of >30% in the initial rendering speed. The prediction-correction mechanism enables local updates. Size correction only affects directly subsequent items (O(1) complexity), and the time for a single correction of a list of tens of thousands is <1.5ms (compared to >500ms in basic virtualization). Size cache reuse reduces repeated measurements by >60%.
[0181] It should be noted that each of the implementable methods in this embodiment can be implemented individually or in any combination without conflict. This application does not limit this.
[0182] Another embodiment of this application provides a cache region correction apparatus for performing the cache region correction method provided in the above embodiments.
[0183] like Figure 4 The diagram shown is a structural schematic of a cache region correction device provided in an embodiment of this application. The cache region correction device includes an acquisition module 401, a determination module 402, a prediction module 403, a calculation module 404, a correction module 405, and a rendering module 406, wherein:
[0184] The acquisition module 401 is used to respond to the scrolling command input by the user for the ultra-long list rendering task, and acquire the scrolling parameters corresponding to the scrolling command, wherein the scrolling parameters include at least scrolling speed and scrolling direction;
[0185] The determination module 402 is used to determine the range of items to be rendered based on the scrolling parameters, the preset basic buffer area, and the scrolling area range of the super long list;
[0186] The prediction module 403 is used to predict the range of the item to be rendered based on a pre-established prediction model to obtain the predicted height; wherein, the pre-established prediction model is obtained by training a training model using historical rendering data, and the training model includes at least one of a linear regression model or a feature vector-based machine learning model.
[0187] The calculation module 404 is used to determine the target error corresponding to the predicted height based on the predicted height and the preset height;
[0188] The correction module 405 is used to determine the target correction strategy corresponding to the target error according to the preset correction strategy;
[0189] The rendering module 406 is used to correct the range of the item to be rendered according to the target correction strategy.
[0190] Regarding the apparatus in this embodiment, the specific manner in which each module performs its operations has been described in detail in the embodiments related to the method, and will not be elaborated upon here.
[0191] Some embodiments of this application obtain the scrolling speed, generate the range of items to be rendered, and then use a pre-trained prediction model to predict the predicted height of the range of items to be rendered. Then, the prediction height and a preset height are used for correction to obtain the corresponding correction strategy. The range of items to be rendered can be corrected according to different needs. In this way, the scrolling speed can be matched in real time to generate a matching rendering area, thereby completing the rendering of the ultra-long list.
[0192] Another embodiment of this application further illustrates the correction device for the cache region provided in the above embodiments.
[0193] Optionally, a module is defined for:
[0194] Calculate the scroll area of the super long list based on the view window size and the current scroll position;
[0195] Based on the pre-set calculation method, the scrolling parameters and the preset basic buffer area are processed to determine the actual buffer area. The pre-set calculation method includes at least one of linear formula or sliding window.
[0196] The range of items to be rendered is determined based on the scrolling area of the long list and the actual buffer area. Some embodiments of this application effectively eliminate fast scrolling blanks through a dynamic buffer mechanism, resulting in stable scrollbar behavior. This scrolling speed awareness allows for more rational resource allocation.
[0197] Optionally, the prediction module is used for:
[0198] Obtain historical rendering data, which includes at least the range of sample rendering items and the preset sample height;
[0199] The sample rendering item range area is parsed to obtain the baseline height, text length weight coefficient, text character count, adjacent item height influence, adjacent item average height, width scaling factor and container real-time width corresponding to the sample rendering range area.
[0200] The prediction model is determined based on the baseline height, text length weighting coefficient, number of text characters, influence of adjacent item height, average height of adjacent items, width scaling factor, and real-time container width.
[0201] Optionally, the prediction module is used for:
[0202] Obtain historical rendering data, which includes at least the range of sample rendering items and the preset sample height;
[0203] Historical rendering data is used to train a feature vector-based machine learning model to obtain the output results;
[0204] If the output meets the preset conditions, the machine learning model is determined as the prediction model.
[0205] Some embodiments of this application achieve a "stable scrollbar behavior" effect by pre-training a linear regression model and a feature vector-based machine learning model to make high-precision predictions, based on the input text length and container width.
[0206] Optionally, the calculation module is used for:
[0207] The gradient descent method is used to calculate the loss function for the predicted height and the preset height;
[0208] Calculate the target error corresponding to the predicted height based on the loss function.
[0209] Some embodiments of this application calculate the loss function between the predicted height and the preset height to obtain the target error, and thus determine the correction strategy.
[0210] Optionally, the calibration module is used for:
[0211] If the error is greater than the preset error value, the target correction strategy corresponding to the target error is determined from the preset correction strategies. The preset correction strategies include at least the error and the correction strategy corresponding to the error.
[0212] Some embodiments of this application find corresponding correction strategies based on different error values, thereby adjusting the update range.
[0213] Optionally, the rendering module is used for:
[0214] Based on the target correction strategy, the number of preset items in the range of items to be rendered is corrected and updated.
[0215] Optionally, the rendering module is used for:
[0216] According to the preset division rules, the area to be rendered is split into sub-rendering items;
[0217] Calculate the target distance from the center point of each sub-render item to the center point of the view window;
[0218] Based on the pre-established priority relationship, the target priority corresponding to the target distance is determined, wherein the pre-established priority relationship includes at least the distance and the priority corresponding to the distance;
[0219] Sort the target priorities in descending order to obtain the sorting results;
[0220] Based on the sorting results, render the sub-rendering items corresponding to the target priority.
[0221] Some embodiments of this application achieve the effect of "prioritizing the rendering of items in the center of the window" by using preset partitioning rules, such as: predicting weights based on scrolling direction, and rendering items at the top of the window first if the user scrolls upwards; using simple heuristic rules instead of distance formulas.
[0222] Optionally, the rendering module is used for:
[0223] If the scrolling speed exceeds the preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority.
[0224] In some embodiments of this application, if the scrolling speed is greater than a preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority, thereby reducing the rendering time.
[0225] Regarding the apparatus in this embodiment, the specific manner in which each module performs its operations has been described in detail in the embodiments related to the method, and will not be elaborated upon here.
[0226] It should be noted that each of the implementable methods in this embodiment can be implemented individually or in any combination without conflict. This application does not limit this.
[0227] This application also provides a computer-readable storage medium storing a computer program thereon. When the program is executed by a processor, it can implement the operation of any of the methods corresponding to the methods in the above embodiments of the cache area correction method.
[0228] This application also provides a computer program product, which includes a computer program, wherein when the computer program is executed by a processor, it can implement the operation of any of the methods corresponding to the methods in the above embodiments of the cache area correction method.
[0229] like Figure 5 As shown, some embodiments of this application provide an electronic device 500, which includes: a memory 510, a processor 520, and a computer program stored on the memory 510 and executable on the processor 520. When the processor 520 reads the program from the memory 510 via a bus 530 and executes the program, it can implement any of the methods included in the above-described cache area correction method.
[0230] Processor 520 can process digital signals and can include various computing architectures. For example, it can be a complex instruction set computer architecture, a reduced instruction set computer architecture, or an architecture that implements multiple instruction set combinations. In some examples, processor 520 can be a microprocessor.
[0231] The memory 510 can be used to store instructions executed by the processor 520 or data related to the execution of instructions. These instructions and / or data may include code for implementing some or all of the functions of one or more modules described in the embodiments of this application. The processor 520 of this disclosure embodiment can be used to execute the instructions in the memory 510 to implement the methods shown above. The memory 510 includes dynamic random access memory, static random access memory, flash memory, optical memory, or other memories well known to those skilled in the art.
[0232] The above are merely embodiments of this application and are not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application. It should be noted that similar reference numerals and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.
[0233] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.
[0234] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
Claims
1. A method for correcting a cache region, characterized in that, The method includes: In response to a user-input scrolling command for a long list rendering task, scrolling parameters corresponding to the scrolling command are obtained, wherein the scrolling parameters include at least scrolling speed and scrolling direction; The range of items to be rendered is determined based on the scrolling parameters, the preset basic buffer area, and the scrolling area range of the super long list. Based on a pre-established prediction model, the range of the item to be rendered is predicted to obtain the predicted height; wherein, the pre-established prediction model is obtained by training a training model using historical rendering data, and the training model includes at least one of a linear regression model or a feature vector-based machine learning model. Based on the predicted height and the preset height, a target error corresponding to the predicted height is determined. The preset height is the height of the rendering task after rendering is completed in the historical rendering data. Based on the pre-set correction strategy, determine the target correction strategy corresponding to the target error; The range of the item to be rendered is corrected according to the target correction strategy; The step of determining the range of items to be rendered based on the scrolling parameters, the preset basic buffer area, and the scrolling area range of the super-long list includes: Calculate the scrolling area of the super long list based on the view window size and the current scroll position; The scrolling parameters and the preset basic buffer area are processed according to a pre-set calculation method to determine the actual buffer area. The pre-set calculation method includes at least one of linear formula or sliding window. The range of items to be rendered is determined based on the scrolling area of the super-long list and the actual buffer area.
2. The method for correcting a cache region according to claim 1, characterized in that, The pre-established prediction model is obtained in the following way: Acquire historical rendering data, wherein the historical rendering data includes at least the range of sample rendering items and a preset sample height; The sample rendering item range area is parsed to obtain the baseline height, text length weight coefficient, text character count, adjacent item height influence, adjacent item average height, width scaling factor and container real-time width corresponding to the sample rendering range area. The prediction model is determined based on the baseline height, text length weighting coefficient, number of text characters, influence of adjacent item height, average height of adjacent items, width scaling factor, and real-time container width.
3. The method for correcting a cache region according to claim 1, characterized in that, The pre-established prediction model is obtained in the following way: Acquire historical rendering data, wherein the historical rendering data includes at least the range of sample rendering items and a preset sample height; The historical rendering data is used to train a feature vector-based machine learning model to obtain the output results. If the output meets the preset conditions, the machine learning model is determined as the prediction model.
4. The method for correcting a cache region according to claim 1, characterized in that, The step of determining the target error corresponding to the predicted height based on the predicted height and the preset height includes: The gradient descent method is used to calculate the loss function for the predicted height and the preset height; Calculate the target error corresponding to the predicted height based on the loss function.
5. The method for correcting a cache region according to claim 4, characterized in that, The step of determining the target correction strategy corresponding to the target error according to the pre-set correction strategy includes: If the error is greater than a preset error value, then a target correction strategy corresponding to the target error is determined from the preset correction strategies. The preset correction strategies include at least the error and the correction strategy corresponding to the error.
6. The method for correcting a cache region according to claim 1, characterized in that, The step of correcting the range of the item to be rendered according to the target correction strategy includes: According to the target correction strategy, the preset number of items in the range of items to be rendered is corrected and updated.
7. The method for correcting a cache region according to claim 1, characterized in that, The method further includes: According to the preset division rules, the range of the item to be rendered is divided into sub-rendering items; Calculate the target distance from the center point of each of the sub-rendering items to the center point of the view window; Based on a pre-established priority relationship, the target priority corresponding to the target distance is determined, wherein the pre-established priority relationship includes at least the distance and the priority corresponding to the distance; Sort the target priorities in descending order to obtain the sorting result; Based on the sorting result, the sub-rendering items corresponding to the target priority are rendered.
8. The method for correcting a cache region according to claim 7, characterized in that, The method further includes: If the scrolling speed is greater than a preset value, the current rendering task is interrupted, the range of items to be rendered is recalculated, the priority of the range of items to be rendered is recalculated, and the recalculated range of items to be rendered is rendered according to the priority.
9. A calibration device for a buffer region, characterized in that, The device includes: The acquisition module is used to respond to a scrolling command input by the user for a long list rendering task, and acquire scrolling parameters corresponding to the scrolling command, wherein the scrolling parameters include at least scrolling speed and scrolling direction; The determination module is used to determine the range of items to be rendered based on the scrolling parameters, the preset basic buffer area, and the scrolling area range of the super-long list; The prediction module is used to predict the range of the item to be rendered based on a pre-established prediction model to obtain the predicted height; wherein the pre-established prediction model is obtained by training a training model using historical rendering data, and the training model includes at least one of a linear regression model or a feature vector-based machine learning model. The calculation module is used to determine the target error corresponding to the predicted height based on the predicted height and the preset height, wherein the preset height is the height of the rendering task after rendering is completed in historical rendering data; The correction module is used to determine the target correction strategy corresponding to the target error according to the preset correction strategy; The rendering module is used to correct the range of the item to be rendered according to the target correction strategy; The determining module is used for: Calculate the scrolling area of the super long list based on the view window size and the current scroll position; The scrolling parameters and the preset basic buffer area are processed according to a pre-set calculation method to determine the actual buffer area. The pre-set calculation method includes at least one of linear formula or sliding window. The range of items to be rendered is determined based on the scrolling area of the super-long list and the actual buffer area.
10. An electronic device, characterized in that, The system includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the program, implements the method for correcting the cache region as described in any one of claims 1-8.
11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, characterized in that, when the program is executed by a processor, it can implement the cache region correction method according to any one of claims 1-8.