Virtual list rendering method and device, equipment, medium and product

Abstract

The invention discloses a virtual list rendering method and device, equipment, a medium and a product. The method comprises the steps of obtaining an initial data set, wherein the initial data set comprises multiple items of initial data; performing type identification on each item of initial data to obtain a content type corresponding to each item of initial data; performing height estimation on each item of initial data according to the content type to obtain a list height corresponding to the initial data; in response to a rolling operation instruction of a user, performing data indexing from a position index table by using a preset lookup algorithm based on the rolling operation instruction to obtain to-be-rendered data, the position index table being determined based on the list height corresponding to each item of initial data and an accumulated offset with a preset initial position; performing range updating on the to-be-rendered data according to a preset buffer area to obtain brand new rendered data; and rendering the brand new rendering data to obtain a visual list. According to the embodiment of the invention, the rendering effect is improved.

Description

TECHNICAL FIELD

[0001] The present application belongs to the technical field of list rendering, and particularly relates to a virtual list rendering method, device, equipment, medium and product. BACKGROUND

[0002] Virtual list is a front-end technology for optimizing the rendering performance of large data volume list, and its core idea is to render only the list items in the current viewport, rather than rendering all data, thereby significantly reducing the number of document object model nodes, reducing memory occupation, and improving scrolling fluency.

[0003] At present, the item height of most virtual list rendering technologies is fixed or can be accurately calculated in advance, which leads to the inability to process items with unknown initial height, the inability to perform effective initial layout calculation for items that need to load content asynchronously, and the inability to automatically adjust the positions of the item and all subsequent items when the content of the list item changes dynamically, resulting in layout disorder, content overlap or blank areas, poor rendering effect, and serious damage to user experience. SUMMARY

[0004] The embodiments of the present application provide a virtual list rendering method, device, equipment, medium and product, which can improve the rendering effect.

[0005] In one aspect, the embodiments of the present application provide a virtual list rendering method, which comprises: obtaining an initial data set, the initial data set comprising a plurality of initial data; performing type identification on each initial data to obtain a content type corresponding to each initial data; performing height estimation on each initial data according to the content type to obtain a list height corresponding to the initial data; in response to a user's scroll operation instruction, performing data indexing from a position index table based on the scroll operation instruction using a preset searching algorithm to obtain rendering data, the position index table being determined based on the list height corresponding to each initial data and the cumulative offset from a preset initial position; performing range updating on the rendering data according to a preset buffer to obtain new rendering data; rendering the new rendering data to obtain a visible list.

[0006] Optionally, the content type comprises a text type, the initial data comprises text data, and the height estimation on each initial data according to the content type to obtain the list height corresponding to the initial data comprises: obtaining a text style of the text data; create a temporary container based on the text style; insert the text content corresponding to the text data into the temporary container; obtain a list height of the temporary container using a preset attribute algorithm.

[0007] Optionally, the content type includes a picture type, and the initial data includes picture data. The step of estimating a height of each item of initial data according to the content type to obtain a list height corresponding to the initial data includes: obtain a first original size of the picture data; in a case where the picture data is successfully loaded, determine a first display height according to the first original size and a preset container constraint width and according to a preset ratio; determine a list height according to a preset additional height and the first display height.

[0008] Optionally, before the step of determining a list height according to a preset additional height and the first display height, the method further includes: in a case where the picture data is in a picture loading failure, determine a preset default height as the first display height.

[0009] Optionally, the content type includes a video type, and the initial data includes video data. The step of estimating a height of each item of initial data according to the content type to obtain a list height corresponding to the initial data includes: obtain a second original size of the video data; in a case where the video data is successfully loaded, determine a second display height according to the second original size and a preset container constraint width and according to a preset ratio; determine a list height according to a preset additional height and the second display height.

[0010] Optionally, before the step of obtaining the to-be-rendered data by using a preset searching algorithm to search from a position index table based on the scrolling operation instruction, the method further includes: obtain an identifier and an estimated height value of each item of initial data in the initial data set; in a preset empty array, for each item of initial data, the following steps are cyclically executed: determine a bottom position of the current item of initial data according to a preset initial position; determine a first top position of the current item of initial data based on the bottom position and the estimated height value; determine the bottom position of the current item of initial data as a second top position of a next item of initial data; According to the bottom position, the first top position and the second top position, a key-value pair of each of the initial data is generated, the key-value pair comprising an identifier, a first absolute pixel coordinate, a second absolute pixel coordinate and an initial height value, the first absolute pixel coordinate comprising an absolute pixel coordinate corresponding to an offset of the initial data top relative to a preset initial position, and the second absolute pixel coordinate comprising an absolute pixel coordinate corresponding to an offset of the initial data bottom relative to the preset initial position; Based on the key-value pair, a position index table is generated.

[0011] Optionally, the data indexing from the position index table based on the scroll operation instruction comprises: Based on the scroll operation instruction, a current scroll position and a viewport height are obtained, the viewport height comprising a height of a user interface; Based on the current scroll position and the viewport height, a visible region is determined, the visible region comprising a visible region start position and a visible region end position; According to the visible region start position and the visible region end position, a start item index position and an end item index position are determined, the start item index position comprising a position where a bottom position of a first initial data item is higher than the visible region start position, and the end item index position comprising a position where a bottom position of a first initial data item is higher than the visible region end position; Based on the start item index position and the end item index position, a rendering region to be rendered is determined in the position index table by using a preset search algorithm. All initial data in the rendering region to be rendered is determined as data to be rendered.

[0012] Optionally, before the range updating of the data to be rendered based on the preset buffer area to obtain new rendering data, the method further comprises: The start item index position is moved by a preset number of heights to obtain a start buffer area, the start buffer area comprising the start item index position and an invisible start buffer position; The end item index position is moved by a preset number of heights to obtain an end buffer area, the end buffer area comprising the end item index position and an invisible end buffer position; The start buffer area and the end buffer area are subjected to a compliance check to obtain a check result; In a case where the check result comprises compliance, the start buffer area, the end buffer area and the rendering region to be rendered are determined as a new rendering region; The range updating of the data to be rendered based on the preset buffer area to obtain new rendering data comprises: According to the new rendering area, the to-be-rendered data is range-updated to obtain new rendering data.

[0013] Optionally, the rendering of the new rendering data to obtain a visible list comprises: copying data content of the new rendering data from the initial data set; obtaining a top offset of the target data from the position index table; generating layout information of the new rendering data based on the new rendering data, the visible area and the top offset; sending the data content and the layout information to a rendering engine to enable the rendering engine to perform data rendering to obtain the visible list.

[0014] Optionally, after the rendering of the new rendering data to obtain the visible list, the method further comprises: updating an initial height of each initial data in the initial data set based on the visible list and layout compensation to obtain an updated visible list; storing the updated visible list.

[0015] In another aspect, an embodiment of the present application provides a virtual list rendering device, which comprises: an obtaining module configured to obtain an initial data set, the initial data set comprising a plurality of initial data; a type identifying module configured to identify the type of each initial data to obtain a content type corresponding to each initial data; an estimating module configured to estimate the height of each initial data according to the content type to obtain a list height corresponding to the initial data; an indexing module configured to perform data indexing from a position index table based on a scroll operation instruction of a user by using a preset search algorithm to obtain to-be-rendered data, the position index table being determined based on the list height; an updating module configured to range-update the to-be-rendered data according to a preset buffer to obtain new rendering data; a rendering module configured to render the new rendering data to obtain a visible list.

[0016] In still another aspect, an embodiment of the present application provides an electronic device, which comprises a processor and a memory storing computer program instructions; The processor, when executing the computer program instructions, implements the virtual list rendering method of the first aspect.

[0017] In still another aspect, an embodiment of the present application provides a computer storage medium, which stores computer program instructions, and the computer program instructions are executed by a processor to implement the virtual list rendering method according to the first aspect.

[0018] In still another aspect, an embodiment of the present application provides a computer program product, and instructions in the computer program product are executed by a processor of an electronic device to enable the electronic device to perform the xxx method according to the first aspect.

[0019] The virtual list rendering method, device, equipment, medium and product provided by the embodiments of the present application can decouple the direct dependency relationship between data changes and rendering by analyzing the content type of each initial data, determining the list height of each book data according to the content type, and updating the index table and performing efficient difference calculation to quickly determine the data to be rendered and update the range through the preset buffer, thereby reducing the possibility of white screen and achieving high performance, smooth user experience without lag. BRIEF DESCRIPTION OF DRAWINGS

[0020] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings needed in the embodiments of the present application will be briefly introduced. Those skilled in the art can obtain other drawings according to these drawings without creative labor.

[0021] Figure 1 is a structural schematic diagram of a virtual list rendering system provided by an embodiment of the present application; Figure 2 is a flowchart of a virtual list rendering method provided by another embodiment of the present application; Figure 3 is a flowchart of a virtual list rendering method provided by another embodiment of the present application; Figure 4 is a flowchart of a virtual list rendering method provided by another embodiment of the present application; Figure 5 is a flowchart of a virtual list rendering method provided by another embodiment of the present application; Figure 6 is a flowchart of a virtual list rendering method provided by another embodiment of the present application; Figure 7 is a structural schematic diagram of a virtual list rendering device provided by another embodiment of the present application; Figure 8 is a structural schematic diagram of an electronic device provided by another embodiment of the present application. DETAILED DESCRIPTION

[0022] To make the purposes, technical solutions, and advantages of the present application clearer, further understood, and easier to grasp, the features and exemplary embodiments of various aspects of the present application will be described in detail below with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application, but not to limit the present application. For those skilled in the art, the present application can be implemented without some of these specific details. The following description of the embodiments is only to provide a better understanding of the present application by showing examples of the present application.

[0023] It should be noted that, in this document, relational terms such as first and second and the like can only be used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. Moreover, the terms "comprising", "including", or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article, or apparatus that includes a list of elements not only includes those elements, but also includes other elements not explicitly listed, or further includes elements inherent in such a process, method, article, or apparatus. Without more limitations, the elements defined by the statement "comprising" do not exclude the presence of additional identical elements in the process, method, article, or apparatus that includes the elements.

[0024] To solve the problems in the prior art, the present application provides a virtual list rendering method, device, equipment, medium, and product. In the present application, by analyzing the content type of each initial data, the list height of each book data is determined according to the content type, and the direct dependency relationship between data changes and rendering is decoupled from the constructed dynamic position index table. Whether the height of the data item is unknown in advance, or dynamically changes after rendering, or is added or deleted at any position in the list, the system can quickly determine the data to be rendered by updating the index table and performing efficient difference calculation, and update the range through the preset buffer, thereby reducing the possibility of white screen, and realizing high-performance, non-stuttering, and smooth user experience.

[0025] The virtual list rendering system provided by the present application will be introduced first below. Referring to Figure 1 , the virtual list rendering system can include: A data and state layer 101 for storing all initial data sets that need to be rendered; A core computing layer 102 in communication connection with the data and state layer 101, for complex all core computing, which can include message type, content length, and state, and calculate or estimate the accurate height of each initial data; The rendering control layer 103 is in communication connection with the core computing layer 102, and is configured to be responsible for listening to user interaction, scheduling rendering tasks, and converting to-be-rendered data into a view to present to the user. The external interaction layer 104 is in communication connection with the data and state layer 101, and is configured to interact with the outside of the system.

[0026] In some embodiments, the data and state layer 101 can include a data pool, a position index table, and a paging state machine, wherein the data pool is in communication connection with the core computing layer and the external interaction layer 104 respectively, the position index table is in communication connection with the core computing layer 102, the data pool is configured to store all message data of the current session, and can also store new data of the external interaction layer 104 and the single-item final height calculated by the dynamic height calculation module in the core computing layer 102, the position index table is the core data result, and stores the position index data of each message, which is the basis for all subsequent calculations, and the paging state machine is configured to manage the paging loading state.

[0027] In this embodiment, the data and state layer 101 can provide the complete data pool and position index table data to the core computing layer 102 to drive layout calculation.

[0028] In some other embodiments, the core computing layer 102 can include a dynamic height calculation module, a position management engine, and a visible area calculation engine, wherein the dynamic height calculation module is connected with the data pool, and is configured to calculate or estimate the accurate height of each initial data according to the message type, the content length, and the state, it can be understood that the input of the dynamic height calculation module is the single-item data in the data pool, and the output of the dynamic height calculation module is the height value of the corresponding item in the updated data pool, the position management engine is connected with the position index table and the data pool, and is configured to calculate and update the position index table recursively according to the final height of each item in the data pool; the visible area engine is connected with the position index table and the rendering and control layer, and is configured to quickly locate the start index and the end index in the position index table according to the current scroll position and the viewport height, and return the final data slice to be rendered by combining the buffer measurement.

[0029] In some other embodiments, the rendering and control layer 103 can include a scroll listener, an asynchronous rendering scheduler, and a list item rendering component, wherein the scroll listener is configured to listen to the scroll time and obtain the current selectable area value, the asynchronous rendering scheduler is configured to throttle the scroll event, and perform calculation and rendering before the next browser rendering period, so as to ensure that the process is efficient and does not block the interactive interface, and the list item rendering component is configured to dynamically create different types of message components for rendering.

[0030] In some embodiments, the external interaction layer 104 can include a data loading module, a real-time push listening module, and a user operation response module, wherein the data loading module is used to interact with the server communication interface, the real-time push module is used to listen to the message or state change time of the push mechanism, and the user operation response module is used to respond to the right-click menu operation, modify the state of the corresponding item in the data pool in the data layer according to the operation type, and thus indirectly trigger the height recalculation and re-rendering.

[0031] Through the above modular design and clear interface definition, the system forms an efficient and decoupled closed loop: external input drives data changes -> data changes trigger core calculation -> calculation results guide view rendering -> user interaction generates new external input. This design ensures that the scheme can still maintain smooth performance and stable layout in a highly dynamic data scenario, realizing dynamic and real-time rendering of the virtual list.

[0032] The virtual list rendering method provided by the embodiment of the application is introduced below.

[0033] Figure 2 The flowchart of the virtual list method provided by an embodiment of the application is shown. As shown in Figure 1 The virtual list method can include S201-S206: S201, obtaining an initial data set.

[0034] In some embodiments, before performing virtual list rendering, an initial data set can be obtained or received, wherein the initial data set includes multiple initial data; each initial data can include an identifier and data content, and the initial data set can come from local storage, a communication request, or a browser push.

[0035] S202, identifying the type of each initial data to obtain the content type corresponding to each initial data.

[0036] In the embodiment of the application, since the initial data comes from local storage, a communication request, or a browser push, each initial data can include text data, image data, and video data. On this basis, since the types of each initial data are different, the content types corresponding to each initial data are different, and the heights of each initial data corresponding to the list are different, it is necessary to identify the type of each initial data to use different height calculation methods to provide a height basis for subsequent virtual list data.

[0037] It is worth noting that if the initial data has been rendered, the height corresponding to the initial data can have been cached and recorded, and if it has not been rendered, a pre-defined estimated height can be used.

[0038] S203, estimating the height of each initial data according to the content type to obtain the list height corresponding to the initial data.

[0039] In this embodiment, different height estimation methods are used for the content type corresponding to each initial data to ensure that the rendered virtual list data conforms to the data content of the initial data. In this way, not only can resource optimization be ensured during list rendering, but the probability of white screen occurrence can also be reduced.

[0040] S204, in response to a user's scroll operation instruction, data indexing is performed from the position index table based on the scroll operation instruction using a preset search algorithm to obtain the data to be rendered.

[0041] In this embodiment, since the user controls the visible area to scroll during browsing through the browser, in order to enable the visible area of the display to track the user's scroll operation, a scroll time listener can be added to the virtual list container element, and when scrolling occurs, the height of the scroll bar of the container and the height of the container itself are obtained through the position index table, a binary search method is used to quickly find the start index and end index in the position index table, the visible area that needs to be rendered by the visible area is quickly determined, and it is ensured that the user can browse the corresponding data content. The position index table is determined based on the list height corresponding to each initial data and the cumulative offset from the preset initial position.

[0042] S205, updating the range of the data to be rendered according to the preset buffer to obtain new rendering data.

[0043] In this embodiment, in order to ensure that the user can browse more clearly and smoothly, the range of the data to be rendered can be updated according to the preset buffer to obtain new rendering data, the actual rendering range of the virtual list is expanded, and it is ensured that the user can browse the visible area more smoothly and that the visible area can avoid white screen.

[0044] S206, rendering the new rendering data to obtain a visible list.

[0045] In some embodiments, using a virtual list to optimize big data can reduce memory usage, improve scroll smoothness, and perform high-performance mass data display to ensure user browsing needs.

[0046] In the embodiments of the present application, by analyzing the content type of each initial data, the list height of each book data is determined according to the content type, and the direct dependency between data change and rendering is decoupled from the constructed dynamic position index table. No matter whether the height of the data item is unknown in advance, or dynamically changes after rendering, or is added or deleted at any position in the list, the system can quickly determine the data to be rendered by updating the index table and performing efficient difference calculation, and update the range through the preset buffer, reduce the possibility of white screen, and thus realize high performance, no lag and smooth user experience.

[0047] In some embodiments, in order to ensure that the height of each initial data can fit the visible area, and ensure the smoothness of browsing, the list height of each initial data is estimated for each content type, that is, for the text data of the text type, S203 can include: obtaining the text style of the text data; creating a temporary container based on the text style; inserting the text content corresponding to the text data into the temporary container; obtaining the list height of the temporary container by using a preset attribute algorithm.

[0048] In the embodiments, the text style of the text can be obtained, where the text style can include font, font size, inner margin, outer margin and width, then a temporary container can be created according to the text style, that is, a temporary invisible container element is created in the document object model, then the text content is inserted into the temporary container, the temporary container is added to the document object model tree, and then positioned outside the visible area, and then the accurate height of the text content after rendering is obtained through the height calculation attribute of the browser; after obtaining the list height, the temporary container in the document object model is removed, and the calculated list height value is returned, which ensures the list height of each initial data and the sustainability of high performance calculation.

[0049] In some other embodiments, for the picture data of the picture type, S203 can include: obtaining a first original size of the picture data; in a case where the picture data is successfully loaded, determining a first display height according to the first original size and a preset container constraint width according to a preset ratio; determining the list height according to a preset additional height and the first display height.

[0050] In the embodiment, in the case that the initial data comprises picture data, it is required to start an asynchronous loading process to obtain a first original size of the picture data, wherein the first original size can comprise a width and a height, and then in the case that the picture data is successfully loaded, a first display height can be determined according to the first original size and a preset container constraint width of the visual area according to a preset ratio, wherein the preset container constraint width can comprise a container width minus a margin, and the first display height can be calculated by (container constraint width / picture original width) * picture original height.

[0051] In some other embodiments, after the first display height is calculated, a preset additional height such as an inner margin and an outer margin can be added to obtain a list height.

[0052] In some other embodiments, in order to increase the fault tolerance processing of the picture data, before the list height is determined according to the preset additional height and the first display height, the method further comprises: In the case that the picture data is in a picture loading failure, a preset default height is determined as the first display height.

[0053] Specifically, in the case that the picture data is in a loading failure, it indicates that the picture data can be in an error at this time, and then a preset default height can be used to determine the first display height to ensure the integrity of the interface layout. Therefore, for the picture data, if the picture is successfully loaded, the first display height can be used to determine the list height, and if the picture is in a loading failure, the preset default height can be used to determine the first display height.

[0054] In some other embodiments, for video data of a video type, S203 can comprise: obtaining a second original size of the video data; in the case that the video data is successfully loaded, determining a second display height according to the second original size and a preset container constraint width according to a preset ratio; determining a list height according to a preset additional height and the second display height.

[0055] In the embodiment, in the case that the initial data comprises video data, it is required to asynchronously load the video data to obtain a second original size corresponding to the video data, and then a second display height of a video player can be determined according to the second original size and a preset container constraint width by using a ratio calculation measurement corresponding to the picture data, and a corresponding margin is also required to be added to determine the list height.

[0056] It is worth noting that in the case that the screw video data is in a loading failure, a preset default height can also be used to determine the list height, which will not be described herein again.

[0057] In some other embodiments, for other known message types, such as system notifications, file cards, voice messages, etc., a preset fixed height value can be directly used to determine the list height.

[0058] By combining dynamic calculation (text), proportional scaling (pictures, videos) and static configuration (other types), precise and automated calculation of the height of diversified message content is achieved, which is a key technology to ensure smooth experience of high dynamic content applications such as chat interfaces.

[0059] Referring to Figure 3 As an example, the following explains how to calculate the list height with a specific example. A virtual list rendering method can include: S301, receiving message elements; S302, judging the message type of the message elements. If it is a text type, S303 is executed. If it is a picture message, S308 is executed. If it is a video message, S313 is executed. If it is other messages, S315 is executed. S303, creating a temporary container and using a style; S304, entering the text content and adding it to the text object model; S305, obtaining the calculated height; S306, cleaning up the temporary elements; S307, returning the calculation result; S308, asynchronously loading the picture and calculating the proportional height after obtaining the original size; S309, if the picture loading is successful, S310 is entered. If the loading fails, S312 is entered; S310, calculating the proportional height and adding the margin; S311, returning the final height; S312, using the default height and entering S311; S313, asynchronously loading the video metadata and calculating the proportional height after obtaining the original size; S314, if the loading is successful, S310 is entered. If the loading fails, S312 is entered; S315, returning the preset fixed height.

[0060] In some other embodiments, in order to quickly find the data to be rendered, before S204, the method can further include: Obtaining the identifier and the estimated height value of the initial data of each item in the initial data set; In the preset empty array, for each initial data, the following steps are executed in a loop: According to the preset initial position, the bottom position of the current initial data is determined; determine a first top position of the current item initial data based on the bottom position and the estimated height value; determine the bottom position of the current initial data as a second top position of the next item initial data; generate a key-value pair of each item initial data according to the bottom position, the first top position and the second top position; generate a position index table based on the key-value pair.

[0061] In the embodiment, the position index table can convert the data item list into an index table recording absolute position information. Specifically, an identifier of initial data of each item in the initial data set and an estimated height value can be obtained, where the estimated height value can be a preset height value or a list height value calculated in the above manner.

[0062] In order to quickly generate the position index table, an empty array positionIndex can be initialized to store the calculation result, and a variable cumulativeTop can be initialized to dynamically accumulate the top position of each item. For each element item in the initial data set and its index index, the following steps are executed in a loop: a. Calculate the bottom position of the current item: itemBottom←cumulativeTop+item.height b. Create a new position object newPosition: newPosition.id←item.id newPosition.top←cumulativeTop newPosition.bottom←itemBottom newPosition.height←item.height c. Append newPosition to the end of the positionIndex array.

[0063] d. Update cumulativeTop←itemBottom as the starting top position of the next item.

[0064] After the loop ends, the generated position index table is returned.

[0065] In the embodiment, the absolute position of each initial data relative to the preset initial position is determined by presetting the initial position, the bottom position, the first top position and the second top position of each initial data are obtained by the preset initial position, and a key-value pair is generated, wherein the key-value pair can include an identifier, a first absolute pixel coordinate, a second absolute pixel coordinate and an initial height value, the first absolute pixel coordinate includes an absolute pixel coordinate corresponding to the offset of the top of the initial data relative to the preset initial position, and the second absolute pixel coordinate includes an absolute pixel coordinate corresponding to the offset of the bottom of the initial data relative to the preset initial position. After obtaining the key-value pair, a position index table is generated by the key-value pair, so that the position corresponding to the initial data can be located by the identifier of the initial data, that is, the to-be-rendered data can be quickly obtained.

[0066] The mathematical recursive relationship is described as follows: Suppose there are n data items, and the height of each data item is h_i (i = 1, 2,..., n). The top position top_i and the bottom position bottom_i of the i-th item in the position index table are defined by the following formulas: top_1 = 0; bottom_i = top_i + h_i; top_{i+1} = bottom_i.

[0067] By constructing the position index table in the above manner, the relative position height value can be converted into absolute position coordinates, providing a data structure basis for subsequent efficient positioning based on binary search.

[0068] Referring to Figure 4 In some other embodiments, S204 can specifically include: S2041, based on the scroll operation instruction, obtaining the current scroll position and the viewport height; S2042, based on the current scroll position and the viewport height, determining the visible area; S2043, determining the start item index position and the end item index position according to the visible area start position and the visible area end position; S2044, using a preset search algorithm, determining the to-be-rendered area in the position index table based on the start item index position and the end item index position; S2045, determining all initial data in the to-be-rendered area as to-be-rendered data.

[0069] In the embodiment, when the to-be-rendered data is obtained, the visible area needs to be obtained first, that is, the scroll position and the viewport height can be obtained, wherein the viewport height can include the height of the user interface, then the visible area is determined by the current scroll position and the viewport height, that is, the visible area can include the visible area start position and the visible area end position, then the start item index position and the end item index position are determined by the visible area start position and the visible area end position, wherein the start item index position includes a position where the bottom position of the first initial data item is higher than the visible area start position, and the end item index position includes a position where the bottom position of the first initial data item is higher than the visible area end position; then the to-be-rendered area in the virtual list is determined by the determined start item index position and the end item index position, and all initial data contained in the to-be-rendered area in the virtual list is determined as the to-be-rendered data, so that the to-be-rendered data can be quickly determined.

[0070] The visible area is calculated by taking a specific example as follows: (1) The visible area start position is the current scrollTop.

[0071] (2) The visible area end position is the scrollTop + viewportHeight. This interval defines the region that is theoretically completely visible in the current scroll container.

[0072] (3) Binary search positioning: in order to quickly convert the pixel position into the data index, the binary search algorithm (findNearestIndex) is used to quickly locate the: (4) Start item index startIdx: the index of the first item whose list height value is greater than the scrollTop (that is, the item that cuts into the viewport).

[0073] (5) End item index endIdx: the index of the first item whose bottom value is greater than the scrollTop + viewportHeight (that is, the item that completely leaves the viewport).

[0074] In some other embodiments, in order to solve the white screen problem, after obtaining the above to-be-rendered area, before S205, the method can further include: Moving the start item index position by a preset number of heights to obtain a start buffer area, the start buffer area including the start item index position and an invisible start buffer position; Moving the end item index position by a preset number of heights to obtain an end buffer area, the end buffer area including the end item index position and an invisible end buffer position; Performing a compliance check on the start buffer area and the end buffer area to obtain a check result; In the case that the inspection result includes compliance, the start buffer, the end buffer and the to-be-rendered region are determined as a brand-new rendering region; S205 can include: The to-be-rendered data is range-updated according to the brand-new rendering region, to obtain brand-new rendering data.

[0075] In the embodiment, based on the above to-be-rendered region, one buffer is extended in each of the upward and downward directions, to obtain a preset buffer, that is: (1) Start buffer: moving the start item index forward by a preset number of items.

[0076] (2) End buffer: moving the end item index backward by a preset number of items.

[0077] Then, the start buffer and the end buffer are subjected to compliance inspection, to ensure that the boundaries in the brand-new rendering region are not less than 0 and not greater than the maximum index of the list, to prevent out-of-bound.

[0078] In some other embodiments, S206 can include: copying the data content of the brand-new rendering data from the initial data set; obtaining the top offset of the target data from the position index table; generating layout information of the brand-new rendering data based on the brand-new rendering data, the visible region and the top offset; sending the data content and the layout information to the rendering engine, to enable the rendering engine to perform data rendering, to obtain a visible list.

[0079] In the embodiment, after obtaining the brand-new rendering data, for each index in the to-be-rendered region, the data content of the brand-new rendering data can be copied from the initial data set, the top offset of the target data can be obtained from the position index table and injected into the data copy, and the brand-new rendering data, the visible region and the top offset are used to generate layout information of the brand-new rendering data, and the data content and the layout information are subjected to data rendering by the rendering engine, to ensure that the brand-new rendering data is viewed in the visible region of the user.

[0080] In some other embodiments, after S206, the method can include: updating and layout compensating an initial height of each initial data in the initial data set based on the visible list, to obtain an updated visible list; storing the updated visible list.

[0081] In this embodiment, the list height calculated above can be updated according to the data pool, and an update position index table function is triggered to recalculate the entire position index table. Since the list height has changed, a compensation mechanism for browser rearrangement is performed once to apply the new layout and avoid the jumping of the scroll bar. This tiny, one-pixel scroll offset forces the browser to recalculate the layout and smoothly adjust the subsequent items to the correct position, thus providing a seamless experience for the user.

[0082] In some other embodiments, the addition and deletion of data (whether top loading or tail pushing) follow a unified pattern to ensure smooth browsing: (1) Update the data source (imList).

[0083] (2) Trigger recalculation (initPositions): Rebuild the unique source of truth - the position index table based on the new data source.

[0084] (3) Intelligent scroll adjustment: Based on the operation type (loading historical messages vs. receiving new messages) and the current user's scroll position, intelligently decide whether to adjust and how to adjust the scroll bar position (scrollTop) to maintain visual continuity.

[0085] In some embodiments, in order to more clearly show the data rendering method of the visible area, the following specific example is given, referring to Figure 5 , the virtual list rendering method can include: S501, determine whether the scroll container is available, if available, go to S502, if not available, go to S506; S502, calculate the theoretical visible area, which can include: obtaining the current scroll position and the viewport height; calling the binary search method to calculate the starting index item of the visible area, and calling the binary search method to calculate the end item index of the visible area; S503, apply buffer measurement, which includes starting item index expansion, end item index expansion, and application boundary constraint: the result is not less than 0 and not greater than the maximum index of the list; S504, build the visible item dataset, which includes traversing the starting item index to the end item index, copying the corresponding item data from the data pool, and injecting the layout value of the item from the position index table to generate the final rendering data; S505, return the rendering data to drive the view rendering; S506, return an empty array.

[0086] As an example, refer to Figure 6, the virtual list rendering method provided by the embodiment of the application is explained and described below with a specific example, which can specifically include: S601, initializing loading data; S602, estimating / calculating an initial height and constructing a position index table; S603, listening to a scroll event; S604, when scrolling, calculating a visible area start / end index by using a binary search; S605, intercepting courseware data items and applying a transformation rendering, and returning to step S603; S606, when scrolling to the top, loading more historical messages; S607, inserting new data into a list head; S608, calculating a total height of new content; S609, compensating a scroll position to maintain a monthly view angle, and returning to S602; S610, an external event: new message pushing; S611, appending new data to a list tail; S612, triggering a recalculation of a position index table; S613, judging whether it is near the bottom, if yes, returning to S614, otherwise, returning to S615; S614, automatically scrolling to the bottom, and returning to S603; S615, keeping a current scroll position, and returning to S603; S616, an external event: item height change picture loading / unfolding text S617, updating a height of a specific data item; S618, triggering a recalculation of a position index; S619, actively triggering a browser to rearrange and apply a new layout, and returning to S603. Based on the virtual list rendering method provided in the above embodiment, the application further provides a specific implementation of a virtual list rendering device. Please refer to the following embodiment.

[0087] Firstly referring to Figure 7 The virtual list rendering device 700 provided by the embodiment of the application can include: The acquisition module 701 is configured to acquire an initial data set, and the initial data set includes multiple initial data items; The type identification module 702 is configured to identify the type of each initial data item to obtain a content type corresponding to each initial data item; The estimation module 703 is configured to estimate the height of each initial data item according to the content type to obtain a list height corresponding to the initial data item; The index module 704 is configured to, in response to a scroll operation instruction of a user, perform data indexing from a position index table based on the scroll operation instruction by using a preset search algorithm, to obtain to-be-rendered data, the position index table being determined based on a list height; The update module 705 is configured to perform range updating on the to-be-rendered data according to a preset buffer, to obtain new rendering data; The rendering module 706 is configured to perform rendering on the new rendering data, to obtain a visible list.

[0088] As an optional implementation, the content type includes a text type, and the initial data includes text data. The estimation module 703 can be specifically configured to: obtain a text style of the text data; create a temporary container based on the text style; insert text content corresponding to the text data into the temporary container; and obtain a list height of the temporary container by using a preset attribute algorithm.

[0089] As an optional implementation, the content type includes a picture type, and the initial data includes picture data. The estimation module 703 can be specifically configured to: obtain a first original size of the picture data; in a case where the picture data is successfully loaded, determine a first display height according to the first original size and a preset container constraint width, according to a preset ratio; determine the list height according to a preset additional height and the first display height.

[0090] As an optional implementation, the estimation module 703 can be specifically configured to: in a case where the picture data fails to be loaded, determine a preset default height as the first display height.

[0091] As an optional implementation, the content type includes a video type, and the initial data includes video data. The estimation module 703 can be specifically configured to: obtain a second original size of the video data; in a case where the video data is successfully loaded, determine a second display height according to the second original size and a preset container constraint width, according to a preset ratio; determine the list height according to a preset additional height and the second display height.

[0092] As an optional implementation, the index module 704 can be configured to: obtain an identifier and an estimated height value of initial data of each item in the initial data set; in a preset empty array, for each item of initial data, the following steps are cyclically performed: According to the preset initial position, a bottom position of the current initial data is determined; Based on the bottom position and the estimated height value, a first top position of the current initial data is determined; The bottom position of the current initial data is determined as a second top position of the next initial data; According to the bottom position, the first top position and the second top position, a key-value pair of each initial data is generated, the key-value pair including an identifier, a first absolute pixel coordinate, a second absolute pixel coordinate and an initial height value, the first absolute pixel coordinate including an absolute pixel coordinate corresponding to an offset of the top of the initial data relative to the preset initial position, and the second absolute pixel coordinate including an absolute pixel coordinate corresponding to an offset of the bottom of the initial data relative to the preset initial position; Based on the key-value pair, a position index table is generated.

[0093] As an optional implementation, the index module 704 can be configured to: Based on the scroll operation instruction, a current scroll position and a viewport height are obtained, the viewport height including a height of a user interface; Based on the current scroll position and the viewport height, a visible area is determined, the visible area including a visible area start position and a visible area end position; According to the visible area start position and the visible area end position, a start item index position and an end item index position are determined, the start item index position including a position where the bottom position of the first initial data item is higher than the visible area start position, and the end item index position including a position where the bottom position of the first initial data item is higher than the visible area end position; Using a preset search algorithm, a to-be-rendered area is determined in the position index table based on the start item index position and the end item index position; All initial data in the to-be-rendered area is determined as to-be-rendered data.

[0094] As an optional implementation, the update module 705 can be further configured to: The start item index position is moved by a preset number of heights to obtain a start buffer area, the start buffer area including the start item index position and an invisible start buffer position; The end item index position is moved by a preset number of heights to obtain an end buffer area, the end buffer area including the end item index position and an invisible end buffer position; The start buffer area and the end buffer area are subjected to a compliance check to obtain a check result; In a case where the check result includes compliance, the start buffer area, the end buffer area and the to-be-rendered area are determined as a brand-new rendering area; The to-be-rendered data is subjected to range updating according to a preset buffer area to obtain brand-new rendering data, including: According to the new rendering area, the range of the to-be-rendered data is updated to obtain new rendering data.

[0095] As an optional implementation, the rendering module 706 can also be configured to: copy data content of the new rendering data from the initial data set; obtain the top offset of the target data from the position index table; generate layout information of the new rendering data based on the new rendering data, the visible area, and the top offset; send the data content and the layout information to the rendering engine to enable the rendering engine to perform data rendering to obtain a visible list.

[0096] As an optional implementation, the rendering module 706 can also be configured to: update and layout compensate an initial height of each initial data in the initial data set based on the visible list to obtain an updated visible list; store the updated visible list.

[0097] Figure 8 A hardware structure schematic diagram of an electronic device is shown.

[0098] The electronic device can include a processor 801 and a memory 802 storing computer program instructions.

[0099] Specifically, the processor 801 can include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement one or more embodiments of the present application.

[0100] The memory 802 can include a mass storage for data or instructions. By way of example and not limitation, the memory 802 can include a hard disk drive (HDD), a floppy disk drive, a flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a universal serial bus (USB) drive or a combination of two or more of these. In one example, the memory 802 can include a removable or non-removable (or fixed) media, or the memory 802 is a non-volatile solid-state memory. The memory 802 can be internal or external to the integrated gateway disaster recovery device.

[0101] In one example, the memory 802 can be a Read Only Memory (ROM). In one example, the ROM can be a mask programmed ROM, a Programmable ROM (PROM), an Erasable PROM (EPROM), an Electrically Erasable PROM (EEPROM), an Electrically Alterable ROM (EAROM), or a flash memory, or a combination of two or more of these.

[0102] The memory 802 can include a Read Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk storage media device, an optical storage media device, a flash memory device, an electrical, optical, or other physical / tangible memory storage device. Thus, generally, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., memory devices) encoded with software including computer-executable instructions that, when executed (e.g., by one or more processors), are operable to perform the operations described with reference to the virtual list rendering method according to the first aspect of the present disclosure.

[0103] The processor 801 implements the virtual list rendering method of one of the embodiments shown by reading and executing computer program instructions stored in the memory 802. Figure 1

[0104] In one example, the electronic device can further include a communication interface 803 and a bus 804. Wherein, as shown, the processor 801, the memory 802, the communication interface 803 are connected through the bus 804 and complete the communication between each other. Figure 8

[0105] The communication interface 803 is mainly used to realize the communication between each module, device, unit and / or equipment in the embodiments of the present application.

[0106] ​​Bus 804 includes a hardware, software, or both that couples electronic devices to each other. By way of example, and not limitation, the bus can include an Accelerated Graphics Port (AGP) or other graphics bus, an Extended Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Hyper Transport (HT) interconnect, an Industry Standard Architecture (ISA) bus, an InfiniBand™ interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local (VLB) bus, or another suitable bus or a combination of two or more of these. Where appropriate, bus 804 can include one or more buses. Although the application embodiments described and illustrated herein focus on specific buses, the application contemplates any suitable bus or interconnect.

[0107] The electronic device can perform the virtual list rendering method in the embodiments of the application, thereby realizing the virtual list rendering method and device described in the embodiments of the application. Figures 1-7 The virtual list rendering method and device described in the embodiments of the application.

[0108] In addition, in combination with the virtual list rendering method in the above embodiments, the embodiments of the application can provide a computer storage medium to implement. The computer storage medium has computer program instructions stored thereon; the computer program instructions are executed by a processor to implement any one of the virtual list rendering methods in the above embodiments.

[0109] In an optional embodiment, in combination with the virtual list rendering method in the above embodiments, the embodiments of the application can provide a computer program product to implement, and instructions in the computer program product are executed by a processor of an electronic device, so that the electronic device can implement any one of the virtual list rendering methods in the above embodiments.

[0110] It should be noted that the application is not limited to the specific configurations and processes described above and shown in the drawings. For the sake of brevity, detailed descriptions of well-known methods are omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method processes of the application are not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order between steps, after understanding the spirit of the application.

[0111] The functional blocks shown in the structural block diagrams above can be implemented as hardware, software, firmware, or a combination thereof. When implemented in hardware, they can be, for example, electronic circuits, application specific integrated circuits (ASICs), appropriate firmware, plug-ins, function cards, and the like. When implemented in software, the elements of the present application are program or code segments that are used to perform the required tasks. The program or code segments can be stored in a machine-readable medium, or transmitted through a data signal carried in a carrier wave over a transmission medium or communication link. A "machine-readable medium" includes any medium that can store or transport information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROMs, flash memories, erasable ROMs (EROMs), floppy disks, CD-ROMs, optical disks, hard disks, fiber optic media, radio frequency (RF) links, and the like. The code segments can be downloaded via computer networks such as the Internet, intranets, and the like.

[0112] It is also important to note that the examples mentioned in the present application describe some methods or systems based on a series of steps or devices. However, the present application is not limited to the order of the steps mentioned above, that is, the steps can be performed in the order mentioned in the examples, or in an order different from the examples, or several steps can be performed simultaneously.

[0113] The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other processing devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other processing devices to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks. These computer program instructions can also be stored in a computer readable medium that can direct a computer, other programmable data processing apparatus, or other processing devices to operate in a particular manner, such that the instructions stored in the computer readable medium produce an article of manufacture including instructions which implement the function / act specified in the flowchart and / or block diagram block or blocks. The computer program instructions can also be loaded onto a computer, other programmable data processing apparatus, or other processing devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other processing devices to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions / acts specified in the flowchart and / or block diagram block or blocks. These computer program instructions can also be stored in a computer readable medium that can direct a computer, other programmable data processing apparatus, or other processing devices to operate in a particular manner, such that the instructions stored in the computer readable medium produce an article of manufacture including instructions which implement the function / act specified in the flowchart and / or block diagram block or blocks.

[0114] The above merely describes a specific implementation of the present application. Those skilled in the art can clearly understand the specific working processes of the system, modules and units described above for the convenience and brevity of description, and can refer to the corresponding processes in the foregoing method embodiments, which will not be described herein again. It should be understood that the protection scope of the present application is not limited to this, and any person skilled in the art can easily think of various equivalent modifications or replacements within the technical range disclosed by the present application, and these modifications or replacements should be covered within the protection scope of the present application.

Claims

1. A method for rendering a virtual list, the method comprising: The method comprises: acquiring an initial data set comprising a plurality of initial data; identifying the type of each initial data to obtain a content type corresponding to each initial data; estimating the height of each initial data according to the content type to obtain a list height corresponding to the initial data; in response to a user's scroll operation instruction, performing data indexing from a position index table based on the scroll operation instruction using a preset search algorithm to obtain rendering data, the position index table being determined based on the list height corresponding to each initial data and the cumulative offset from a preset initial position; updating the range of the rendering data according to a preset buffer to obtain new rendering data; rendering the new rendering data to obtain a visual list.

2. The method of claim 1, wherein, The content type comprises a text type, and the initial data comprises text data. The height of each initial data is estimated according to the content type to obtain a list height corresponding to the initial data, which comprises: acquiring a text style of the text data; creating a temporary container based on the text style; inserting the text content corresponding to the text data into the temporary container; and obtaining the list height of the temporary container using a preset attribute algorithm.

3. The method of claim 1, wherein, The content type comprises a picture type, and the initial data comprises picture data. The height of each initial data is estimated according to the content type to obtain a list height corresponding to the initial data, which comprises: acquiring a first original size of the picture data; in the case that the picture data is successfully loaded, determining a first display height according to the first original size and a preset container constraint width according to a preset ratio; determining a list height according to a preset additional height and the first display height.

4. The method of claim 3, wherein, Before determining the list height according to the preset additional height and the first display height, the method further comprises: in the case that the picture data is in a picture loading failure state, determining a preset default height as the first display height.

5. The method of claim 1, wherein, The content type comprises a video type, and the initial data comprises video data. The height of each initial data is estimated according to the content type to obtain a list height corresponding to the initial data, which comprises: acquiring a second original size of the video data; in the case that the video data is successfully loaded, determining a second display height according to the second original size and a preset container constraint width according to a preset ratio; determining a list height according to a preset additional height and the second display height.

6. The method of claim 1, wherein, Before performing data indexing from a position index table based on the scroll operation instruction using a preset search algorithm to obtain rendering data, the method further comprises: acquiring an identifier and an estimated height value of each initial data in the initial data set; in a preset empty array, for each initial data, the following steps are cyclically executed: determining a bottom position of the current initial data according to a preset initial position; determining a first top position of the current initial data based on the bottom position and the estimated height value; determining the bottom position of the current initial data as a second top position of the next initial data; and determining the bottom position of the current initial data as a second top position of the next initial data. According to the bottom position, the first top position and the second top position, a key-value pair of each of the initial data is generated, the key-value pair comprising an identifier, a first absolute pixel coordinate, a second absolute pixel coordinate and an initial height value, the first absolute pixel coordinate comprising an absolute pixel coordinate corresponding to an offset of the top of the initial data relative to a preset initial position, and the second absolute pixel coordinate comprising an absolute pixel coordinate corresponding to an offset of the bottom of the initial data relative to the preset initial position; Based on the key-value pair, a position index table is generated.

7. The method according to any one of claims 1 to 6, characterized in that, The data indexing from the position index table based on the scroll operation instruction by using a preset search algorithm to obtain the data to be rendered comprises: Based on the scroll operation instruction, a current scroll position and a viewport height are obtained, the viewport height comprising a height of a user interface that can be viewed; Based on the current scroll position and the viewport height, a visible area is determined, the visible area comprising a visible area start position and a visible area end position; According to the visible area start position and the visible area end position, a start item index position and an end item index position are determined, the start item index position comprising a position where the bottom of the first initial data item is higher than the visible area start position, and the end item index position comprising a position where the bottom of the first initial data item is higher than the visible area end position; By using a preset search algorithm, a to-be-rendered area is determined in the position index table based on the start item index position and the end item index position; All initial data in the to-be-rendered area is determined as the data to be rendered.

8. The method of claim 7, wherein, Before the range update of the data to be rendered based on the preset buffer area to obtain the new rendering data, the method further comprises: The start item index position is moved by a preset number of heights to obtain a start buffer area, the start buffer area comprising the start item index position and an invisible start buffer position; The end item index position is moved by a preset number of heights to obtain an end buffer area, the end buffer area comprising the end item index position and an invisible end buffer position; The start buffer area and the end buffer area are subjected to a compliance check to obtain a check result; In a case where the check result comprises compliance, the start buffer area, the end buffer area and the to-be-rendered area are determined as the new rendering area; The range update of the data to be rendered based on the preset buffer area to obtain the new rendering data comprises: The range update of the data to be rendered based on the new rendering area to obtain the new rendering data.

9. The method of claim 8, wherein, The rendering of the new rendering data to obtain a visible list comprises: Data content of the new rendering data is copied from the initial data set; A top offset of the target data is obtained from the position index table; Based on the new rendering data, the visible area and the top offset, layout information of the new rendering data is generated; The data content and the layout information are sent to a rendering engine, so that the rendering engine performs data rendering to obtain the visible list.

10. The method of claim 1, wherein, After rendering the newly rendered data to obtain a visible list, the method further comprises: updating and layout compensating an initial height of each initial data in the initial data set based on the visible list to obtain an updated visible list; storing the updated visible list.

11. A list rendering apparatus, characterized by comprising: The device comprises: an acquisition module configured to acquire an initial data set, the initial data set comprising a plurality of initial data; a type identification module configured to identify a type of each initial data to obtain a content type corresponding to each initial data; an estimation module configured to estimate a height of each initial data according to the content type to obtain a list height corresponding to the initial data; an index module configured to, in response to a scroll operation instruction of a user, perform data indexing from a position index table based on the scroll operation instruction using a preset searching algorithm to obtain to-be-rendered data, the position index table being determined based on the list height; an updating module configured to update a range of the to-be-rendered data according to a preset buffer to obtain newly rendered data; a rendering module configured to render the newly rendered data to obtain a visible list.

12. A list rendering system, characterized by, The list rendering system comprises: an external interaction layer, a data and state layer, a rendering and control layer, and a core computing layer as claimed in any one of claims 1-10.

13. An electronic device, comprising: The device comprises a processor and a memory having computer program instructions stored thereon; The processor, when executing the computer program instructions, implements the list rendering method as claimed in any one of claims 1-10.

14. A computer-readable storage medium, characterized in that, The computer readable storage medium has computer program instructions stored thereon, and the computer program instructions, when executed by a processor, implement the list rendering method as claimed in any one of claims 1-10.

15. A computer program product, characterised in that, The instructions in the computer program product are executed by a processor of an electronic device, so that the electronic device performs the list rendering method as claimed in any one of claims 1-10.

Images