Data loading methods, devices, electronic equipment and storage media

Abstract

This application relates to the field of computer technology and provides a data loading method, apparatus, electronic device, and storage medium, comprising: determining a first time, wherein the first time is the time when a scroll event is detected; determining a second time, wherein the second time is the time after the scroll event when a page refresh is detected; and if the time interval between the second time and the first time is greater than or equal to a preset threshold, then acquiring target data and displaying the target data in a user viewport, wherein the target data is the data to be displayed requested by the scroll event, and the user viewport is a pre-created scroll container with a fixed height. This application can reduce rendering pressure and improve data loading efficiency.

Description

Technical Field

[0001] This application belongs to the field of computer technology, and in particular relates to data loading methods, apparatus, electronic devices and computer-readable storage media. Background Technology

[0002] A webpage is a file on the World Wide Web organized in HTML (Hypertext Markup Language) format. It typically appears as an information page and usually includes graphics, text, sound, video, and other information. When a user searches for information on the World Wide Web, the browser needs to request the corresponding resources from the server and display the requested data as an information page (i.e., a webpage).

[0003] In existing technologies, all data is usually loaded onto the page at once for display. However, the larger the data volume, the greater the rendering pressure, which can lead to rendering stuttering when the data volume is large. Summary of the Invention

[0004] This application provides a data loading method, apparatus, electronic device, and storage medium, which can reduce rendering pressure, thereby reducing rendering stuttering and improving data loading performance.

[0005] In a first aspect, embodiments of this application provide a data loading method, including:

[0006] Determine the first time; the first time mentioned above is the time when the scroll event is detected.

[0007] Determine the second time, which is the page refresh time listened to after the scroll event mentioned above;

[0008] If the time interval between the second time and the first time is greater than or equal to a preset threshold, then target data is acquired and displayed in the user viewport, wherein the target data is the data to be displayed requested by the scrolling event, and the user viewport is a pre-created scrolling container with a fixed height.

[0009] Secondly, embodiments of this application provide a data loading apparatus, including:

[0010] The first-time acquisition module is used to determine the first time, which is the time when the scroll event is detected.

[0011] The second time acquisition module is used to determine the second time, which is the page refresh time listened to after the scroll event.

[0012] The data display module is used to acquire target data and display the target data in the user viewport if the time interval between the second time and the first time is greater than or equal to a preset threshold. The target data is the data to be displayed requested by the scrolling event, and the user viewport is a pre-created scrolling container with a fixed height.

[0013] Thirdly, 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 executes the computer program to implement the steps of the data loading method described in the first aspect above.

[0014] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the data loading method described in the first aspect above.

[0015] Fifthly, embodiments of this application provide a computer program product that, when run on an electronic device, causes the electronic device to execute the data loading method described in any one of the first aspects.

[0016] The beneficial effects of the embodiments of this application compared with the prior art are:

[0017] In this embodiment, a first time is determined based on the time when the scroll event is detected, and a second time is determined based on the page refresh time detected after the scroll event. If the time interval between the second time and the first time is greater than or equal to a preset threshold, target data is acquired and displayed in the user viewport. The target data is the data to be displayed requested by the scroll event, and the user viewport is a pre-created scroll container with a fixed height. When determining the second time, since the timer continues to count even when the user minimizes or hides the page, consuming CPU resources, determining the second time based on the page refresh time eliminates the need for an additional timer, reducing CPU resource consumption. Furthermore, when the user frequently triggers scroll events, the browser needs to request the target data corresponding to each triggered scroll event frequently within a short period. Therefore, acquiring and displaying the target data only when the time interval between the second time and the first time is greater than or equal to the preset threshold ensures that the browser does not lose some of the target data for the scroll events due to frequent requests. Furthermore, since only the data requested by the scroll event is retrieved as the target data and displayed in the user viewport with a fixed height, when rendering the data to the page for display, only the target data needs to be rendered to the user viewport, thereby reducing rendering pressure, reducing rendering stuttering, and improving the data loading effect. Attached Figure Description

[0018] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments or the prior art will be briefly introduced below.

[0019] Figure 1 This is a schematic flowchart of a data loading method provided in an embodiment of this application;

[0020] Figure 2 This is a schematic diagram of the structure of a rolling element provided in an embodiment of this application;

[0021] Figure 3 This is a schematic diagram of the structure of a scroll body and a cached data source provided in an embodiment of this application;

[0022] Figure 4 This is a schematic diagram of the structure of a scroll body and a cached data source provided in an embodiment of this application;

[0023] Figure 5 This is a schematic diagram of the user viewport structure provided in an embodiment of this application;

[0024] Figure 6 This is a schematic diagram of the upper and lower blank spaces provided in the embodiments of this application;

[0025] Figure 7 This is a schematic diagram of the structure of the data loading device provided in the embodiments of this application;

[0026] Figure 8 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0027] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.

[0028] It should be understood that, when used in this application specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or a collection thereof.

[0029] It should also be understood that the term “and / or” as used in this application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0030] Furthermore, in the description of this application and the appended claims, the terms "first," "second," "third," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0031] References to "one embodiment" or "some embodiments" in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized.

[0032] Example 1:

[0033] Currently, the amount of data on a webpage is typically large. Loading all the data at once would require loading a massive amount of page data, placing a significant burden on the browser's rendering capabilities and causing page lag if rendering is delayed. To address this, a method of batch data return has been proposed, returning only a fixed amount of data with each user request, allowing the browser to render only a small quantity. However, with batch data return, the front-end (i.e., the page) needs to render data onto the page using DOM (Document Object Model) elements. Each DOM element is stored in the browser's memory. With each user request, the amount of data rendered on the page increases, leading to a surge in DOM nodes (i.e., DOM elements) stored in the browser, consuming excessive memory. Furthermore, since browsers need to render all DOM elements on a page during rendering, as the number of DOM elements increases, the number of DOM elements that the browser needs to render each time data is rendered also increases. When a user scrolls the scrollbar too quickly, the data requested by the previous scroll event has not yet been redrawn before the next scroll event is triggered. This means that when scroll events are triggered frequently, the data from multiple scroll events is not redrawn, resulting in the loss of some requested data and thus poor data loading performance.

[0034] To improve data loading efficiency, this application provides a data loading method.

[0035] In the data loading method provided in this application embodiment, a first time is determined, which is the time when a scroll event is detected. After the scroll event is detected, a second time is determined, which is the time when the page refresh is detected after the scroll event. If the time interval between the second time and the first time is greater than or equal to a preset threshold, target data is acquired and displayed in the user viewport. The target data is the data to be displayed requested by the scroll event, and the user viewport is a scroll container with a fixed height.

[0036] Because only the target data of the scroll event is retrieved for display, only the target data needs to be rendered when rendering data to the user's viewport. Since the amount of target data is much smaller than the total amount of data on the page, the rendering pressure is reduced, thus minimizing rendering stutters and improving data loading efficiency. Furthermore, the target data for the scroll event is retrieved and displayed only when the time interval between the first and second events is greater than or equal to a threshold. Therefore, even when users frequently trigger scroll events, it ensures that the target data for each scroll event is retrieved and displayed, preventing the loss of some target data due to high-frequency requests within a short period.

[0037] The data loading method provided in the embodiments of this application is described below with reference to the accompanying drawings.

[0038] Figure 1 A flowchart illustrating a data loading method according to an embodiment of the present invention is shown below, and is described in detail below:

[0039] Step S101: Determine the first time, which is the time when the scrolling event is detected.

[0040] Specifically, while a user is browsing a webpage, the browser continuously listens for whether the user has triggered a scroll event. If a scroll event is detected, the browser records the time when the scroll event was triggered and uses this time as the first time. Optionally, since browsers typically respond to scroll events (responding to scroll events means requesting and displaying the data requested by the server) relatively quickly, the first time can be recorded to the nearest millisecond (ms) (e.g., 15.21.30.200), or to one decimal place after the millisecond (e.g., 20.30.11.3052, where 3052 represents 305.2ms) to accurately record the time when the scroll event was triggered.

[0041] The aforementioned scroll events refer to events that instruct the browser page to perform corresponding scrolling actions. Operations that trigger scroll events include mouse wheel scrolling, scroll bar dragging, keyboard arrow key clicks, and link clicks. When a user performs these operations, the browser page's scroll events are triggered, and the browser instructs the page to perform the corresponding scrolling action based on these events. For example, when a user clicks the up arrow key while browsing a webpage, the browser detects this as a keyboard arrow click scroll event. This scroll event instructs the webpage to scroll upwards by the corresponding distance. Simultaneously, the browser records the time when this scroll event was triggered (e.g., 12.05.00.088) and uses it as the first time.

[0042] In this embodiment, the browser continuously listens for scroll events and records the time when the scroll event is triggered as the first time. Since the browser responds to scroll events quickly, the first time is recorded to the millisecond, which can accurately determine the first time when the scroll event is triggered.

[0043] Step S102: Determine the second time, which is the page refresh time listened to after the scrolling event.

[0044] The page refresh mentioned above refers to the browser's `requestAnimationFrame` function redrawing the page based on the screen refresh rate to update the browser page. The page refresh frequency is typically influenced by the screen refresh rate. For example, assuming a device's screen refresh rate is generally 60Hz, the `requestAnimationFrame` function executes 60 times per second, equivalent to executing the callback function once every 16.67ms to refresh the browser page. For instance, if the browser's corresponding device has a screen refresh rate of 60Hz, then the device can redraw a maximum of 60 times per second, once every 16.7ms. The browser detects the page scroll event at time 12.10.10.0010. After detecting the scroll event (i.e., after the first time), the browser continues to monitor the page refresh time. The first time the page refresh is detected is 12.10.10.0157, and the second time is 12.10.10.0324. The second refresh time is determined based on the detected refresh times. Since the time when a user triggers a scroll event is not predetermined, after listening to the time when the scroll event is triggered (the first time), we then listen to the time when the page refreshes after that first time. Based on the listened page refresh time, we determine the second time, so that we can determine whether to obtain the target data requested by the scroll event based on the time interval between the second time and the first time.

[0045] Specifically, due to the delay in generating random values ​​with timers, when using timers to determine the second time, the browser may experience delays in rendering the target data or even execute the page update twice. Furthermore, even when the page is hidden or minimized, the timer continues to run in the background, wasting CPU resources. Therefore, after determining the first time, the browser continuously monitors the page refresh time after that first time and uses that refresh time as the second time. Optionally, the precision of the second time is consistent with that of the first time, uniformly accurate to milliseconds or one decimal place, for ease of subsequent calculations.

[0046] Optionally, since different devices are affected by screen resolution and screen size, the screen refresh rate of different devices may be different. Therefore, the page refresh time is determined according to the screen refresh rate of the electronic device currently used by the user. For example, when the screen refresh rate is 75Hz, the screen refreshes 75 times per second, that is, the browser redraws once every 13.3ms, refreshing the browser page.

[0047] In this embodiment, since the timer has a delay in generating random values, it has a certain impact on the browser's data loading effect. Furthermore, the timer continues to count down when the user minimizes or hides the page, consuming CPU resources. Therefore, after listening to the page being triggered by a scrolling event, a second time is determined based on the page refresh time of the requestAnimationFrame function to reduce unnecessary CPU resource consumption.

[0048] Step S103: If the time interval between the second time and the first time is greater than or equal to a preset threshold, then acquire the target data and display the target data in the user viewport.

[0049] The target data mentioned above is the data to be displayed requested by the scrolling event, that is, the data that the user viewport on the page needs to display after the current scrolling event occurs.

[0050] The aforementioned user viewport is a pre-created, fixed-height scrollable container on the page. Since the browser needs to render the target data corresponding to the scroll event after requesting it, creating a DOM element for each data point would impact browser memory and performance. Therefore, a fixed-height div container (the scrollable container) is pre-created on the page, allowing the scroll body to scroll only within this container. During scrolling, the target data requested by the scroll event is displayed in the viewport of this container (the user viewport). Because only the target data requested by the scroll event is displayed in the fixed-height user viewport, rendering only the target data in the user viewport reduces rendering pressure and stuttering, thus improving data loading efficiency. During scrolling, the data in the scroll body includes the target data displayed in the user viewport, and the height of the scroll body is determined by the amount of data previously loaded and displayed in the user viewport (including the currently displayed target data). For example, as shown... Figure 2 As shown, during page scrolling, the browser obtains the target data requested by the current scroll event and renders it into the user's viewport for display. The length of the scroll body beyond the target data is determined by the amount of data that the user's viewport had previously loaded and displayed before this scroll event (i.e., the target data corresponding to the scroll events before this scroll event).

[0051] Specifically, because browsers respond to scroll event requests relatively quickly, when a user triggers scroll events frequently within a short period, the browser needs to respond to multiple scroll events in a short time (such as when a user frequently triggers page scroll events by rapidly scrolling the mouse wheel). That is, the browser needs to obtain the target data corresponding to each scroll event request and display it in the user's viewport within a short time. During this process of responding to multiple scroll events, the target data requested by one scroll event is usually not yet successfully rendered and displayed in the user's viewport before the target data requested by the next scroll event is rendered and displayed. This results in multiple rendering processes not being completed, meaning that the target data requested by one scroll event may only be rendered and displayed after a series of frequently triggered scroll events have ended. Furthermore, during the process of the browser responding to multiple scroll events in a short time, because new rendering processes begin repeatedly, the DOM (Document Object Model) elements in the user's viewport are not updated in time before appearing in the user's view. Therefore, a brief period of blank space appears on the page, affecting data loading and user experience. To improve data loading efficiency, after determining the first and second times, if the time interval between the second and first times is greater than or equal to a preset threshold (e.g., 30ms), the browser will respond to the scroll event request, retrieve the target data requested by the scroll event, and render the target data to the user's viewport for display. If the time interval between the second and first times is not greater than or equal to the preset threshold, the next time the page refresh is detected will be used as the new second time, until the time interval between the second and first times is greater than or equal to the preset threshold. That is, if the time interval between the first detected page refresh time (the first second time) and the first time is not greater than or equal to the preset threshold after detecting the scroll event, the browser will continue to monitor the page refresh time, and the second detected page refresh time (the second second time) will be calculated with the first time until the time interval between the second and first times is greater than or equal to the preset threshold.

[0052] In this embodiment, since the browser responds to the scroll event request when the time interval between the first time and the second time is greater than or equal to a preset threshold, obtains the target data requested by the scroll event, and displays the target data in the user's viewport, when the user frequently triggers the browser's scroll event, the browser does not need to respond to multiple scroll event requests frequently in a short period of time, which can ensure that the target data requested by each scroll event is displayed, thereby improving the data loading effect.

[0053] In this embodiment, a first time is determined based on the time when the scroll event is detected. After the scroll event is detected, a second time is determined based on the page refresh time. If the time interval between the second time and the first time is greater than or equal to a preset threshold, target data is acquired and displayed in the user viewport. The target data is the data requested by the scroll event, and the user viewport is a pre-created scroll container with a fixed height. Since the timer continues to count even when the user minimizes or hides the page, consuming unnecessary CPU resources, and the timer may have a delay in generating random values, affecting data loading, determining the second time based on the page refresh time eliminates the need for an additional timer, reducing CPU resource consumption and improving data loading efficiency. Because the target data is acquired and displayed only when the time interval between the second time and the first time is greater than or equal to the preset threshold, the browser will not lose some of the target data for scroll events due to frequent data requests. Meanwhile, during scrolling, the browser only retrieves the data to be displayed requested by the current scroll event as the target data, and displays the target data in the user viewport with a fixed height. This allows the browser to only render the target data to the user viewport for display, reducing the browser's rendering and storage pressure, thereby reducing page lag and improving data loading efficiency.

[0054] In some embodiments, step S103, when acquiring target data and displaying the target data in the user viewport, includes:

[0055] A1. Determine the starting and ending indexes of the target data in the cached data source.

[0056] Optionally, after a browser detects a scroll event, it typically needs to send a request to the server to retrieve the target data corresponding to that scroll event, and then display the returned target data in the user's viewport. Therefore, when the user's network is unstable, the browser's response to the scroll event request may take a long time, or it may even be unable to send the corresponding request to the server or retrieve the returned target data for a short period due to network issues. To reduce data loading time and minimize the impact of network on data loading, a cached data list is created in the browser. This cached data source includes data previously loaded onto the page and data to be loaded onto the page. When the browser retrieves the target data requested by the scroll event, it obtains the target data from this cached data source without sending a request to the server. In other words, the cached data source is equivalent to the data source for the data displayed on the page (user's viewport).

[0057] A2. Obtain the target data based on the above starting index and the above ending index.

[0058] A3. Fill the target data into the corresponding DOM elements in the user viewport.

[0059] The DOM (Document Object Model) is an HTML and XML-oriented framework. It can be understood as the API (Application Programming Interface) of a webpage, treating each element as an object, allowing computer languages ​​to access and edit these elements. During the browser's data loading process, corresponding methods can be used to manipulate DOM elements, such as setting their content using `innerHTML`, `innerText`, or `value`.

[0060] Optionally, multiple DOM elements can be set within the user viewport to hold the target data to be displayed. The sum of the heights of these DOM elements does not necessarily equal the height of the user viewport; that is, not all DOM elements may be located within the user viewport.

[0061] Specifically, when the browser retrieves the target data requested by the scroll event, since it directly obtains the target data from the cached data source, it first determines the start and end indices of the target data in the cached data source. Then, it retrieves the data between the start and end indices (inclusive of the start index, exclusive of the end index) from the cached data source and uses this data to populate the corresponding DOM elements in the user's viewport, thereby loading the target data onto the page for display. For example, ... Figure 3 As shown, the starting index of the target data corresponding to a certain scrolling event is 4 and the ending index is 9. Then, the data with indices 4 to 9 are obtained from the cached data source as the target data, and the data corresponding to each index is filled into the corresponding DOM elements (i.e., the DOM elements from DOM element 1 to DOM element 6) for display.

[0062] In this embodiment, since the target data is retrieved from the cached data source based on the start and end indices of the target data in the cached data source, the browser does not need to retrieve the target data of the scroll event from the server when the user triggers the browser's scroll event. Instead, it can directly retrieve the target data from the browser's cached data source, thereby reducing the impact of the network on data loading. At the same time, since only the target data of the scroll event is retrieved for display, the data rendering pressure is reduced.

[0063] In some embodiments, step A1 above includes:

[0064] A11. Obtain the first distance from the top of the user viewport to the top of the scroll body.

[0065] The top of the user viewport corresponds to the first piece of data currently displayed in the user viewport, that is, the first DOM element currently corresponding to the top of the user viewport. For example, as shown... Figure 2 As shown, the target data currently displayed in the user viewport consists of the data corresponding to each DOM element from DOM element 1 to DOM element 6. Among them, the data corresponding to DOM element 1 is the first data currently displayed in the user viewport.

[0066] The top of the scroll bar corresponds to the first data displayed in the user viewport, meaning the first data in the target data requested by the first scroll event displayed in the user viewport during the page's scrolling process. The height of the scroll bar is the sum of the heights of the data loaded into the user viewport (including the target data) (the height of a single data item refers to the height of a DOM element, and all DOM elements have the same height). In other words, the top of the scroll bar corresponds to the first data displayed in the user viewport, and the bottom of the scroll bar corresponds to the last data displayed in the user viewport (this last data item may not have scrolled into the user viewport yet). For example, as... Figure 3 As shown, the first data displayed in the user viewport corresponding to the top of the scroll body is the first data in the cached data source (data with index 0), and the last data displayed in the user viewport corresponding to the bottom of the scroll body is DOM element 6, whose data is the data with index 9 in the cached data source.

[0067] A12. Calculate the starting index of the target data in the cached data source based on the first distance and the height of the DOM element.

[0068] A13. Determine the termination index based on the starting index and the maximum display size of the user viewport.

[0069] The maximum display size mentioned above refers to the maximum number of DOM elements that can be displayed in a single user viewport.

[0070] Specifically, since the top of the scroll body corresponds to the first data displayed in the user viewport (i.e., the top of the scroll body corresponds to the top of the cached data source (data with index 0), and the scroll distance corresponding to the scroll body's scrolling when the scroll event is triggered means that at this point, the top of the user viewport corresponds to the first data of the target data for the current scroll event, the first distance from the top of the user viewport to the top of the scroll body is equivalent to the distance from index 0 in the cached data source to the first data of the target data for the current scroll event. Based on this first distance and the height of the DOM element, the starting index of the target data requested by the currently triggered scroll event can be calculated. The maximum display size of the user viewport is equivalent to the number of target data requested in one scroll event. Therefore, the final index of the target data is determined based on the starting index and the maximum display size of the user viewport.

[0071] The starting index mentioned above is:

[0072]

[0073] Math.floor() rounds the value inside the parentheses down to the nearest integer. For example, Math.floor(4.7) = 4, where scrolltop is the first distance and itemheight is the height of the DOM element.

[0074] The above terminating index is:

[0075] endIndex = starIndex + N

[0076] N represents the maximum display size of the user viewport.

[0077] For example, such as Figure 4 As shown, the maximum display size of the user viewport is 6. The top of the user viewport corresponds to DOM element 1 (the first data of the target data), while the top of the scroll body corresponds to the top of the cache data source (data at index 0). Based on the first distance from the top of the user viewport to the scroll body and the height of the DOM element, the starting index is calculated to be 3, and the ending index is 9. Therefore, the target data is the data between index 3 and index 9 in the cache data source (excluding index 9).

[0078] In this embodiment, since the top of the scroll body corresponds to the first data displayed in the user viewport, that is, the top of the scroll body corresponds to the first data in the cached data source (i.e., the top of the cached data source), and the height of the DOM element is equal to the height of the data, the data corresponding to the top of the user viewport is obtained based on the distance from the top of the scroll body to the top of the user viewport and the height of the DOM element. The top of the user viewport is the first data currently displayed in the user viewport (i.e., the first data of the target data). Therefore, the browser can accurately obtain the starting index of the target data in the cached data source, and thus obtain the target data of the scroll event from the cached data source for display.

[0079] In some embodiments, prior to step A13 described above, the method further includes:

[0080] The maximum display size of the user viewport is calculated based on the height of the user viewport and the height of the DOM element.

[0081] Specifically, the maximum display size of the user viewport is determined by the height of the user viewport and the height of the DOM element. The maximum display size N of the user viewport is:

[0082]

[0083] Where N is a positive integer, clientheight is the height of the user viewport, itemheight is the height of a DOM element (usually all DOM elements have the same height), and i takes the value 1 when the remainder of clientheight / itemheight is 0, and i takes the value 2 when the remainder of clientheight / itemheight is not 0.

[0084] To improve the data display effect in the user viewport, if the remainder when the user viewport height is divided by the DOM element height is zero, it indicates that the user viewport height is exactly an integer multiple of the DOM element height. Figure 5 As shown in the left image, the value is 1 when calculating the maximum display size; if the remainder is not 0, it indicates that the height of the user's viewport is not an integer multiple of the DOM element's height, such as... Figure 5 As shown in the right figure, i takes the value 2 at this time so that the corresponding DOM element is displayed in the user's viewport during scrolling.

[0085] In this embodiment, the maximum display size of the user viewport is determined based on the height of the user viewport and the height of the DOM element, so as to determine the amount of data that the browser should obtain when it receives the target data of the scroll event.

[0086] In some embodiments, step A1 above further includes:

[0087] Based on the above starting index and the height setting of the above DOM elements, blank space is used as a placeholder.

[0088] The blank space is set based on the height of the scroll body, the termination index, and the height of the DOM element.

[0089] Specifically, during page scrolling, target data is displayed via a scroll body. The top of the scroll body corresponds to the first piece of data displayed in the user's viewport, and the height of the scroll body is equal to the sum of the heights of the data loaded into the user's viewport. However, in normal scrolling events, the scroll body includes all data loaded onto the page and its corresponding DOM elements. That is, all DOM elements and data in the scroll body are one-to-one and truly existent. The scroll bar's position moves up or down with the scrolling action. In the data loading method provided in this application embodiment, target data is filled into the various DOM elements corresponding to the user's viewport during scrolling. Only the DOM elements corresponding to the user's viewport and the target data in the scroll body truly exist; other elements do not truly exist. If the DOM elements that have scrolled up and down, along with their corresponding data, are not present outside the DOM element corresponding to the viewport, normal scrolling will be disrupted and normal scrolling will not be possible. Therefore, to achieve normal scrolling, the length of the scrolled data from the top of the scroll body to the data corresponding to the starting index is determined based on the starting index and the height of the DOM element. This determines the upper blank space, which represents the scrolled data from the top of the scroll body to the starting index. The length of the unscathed data from the last DOM element in the user's viewport to the bottom of the scroll body is determined based on the height of the scroll body, the ending index of the target data, and the height of the DOM element. This determines the lower blank space.

[0090] For example, such as Figure 6As shown, the maximum display size of the user viewport is 6, meaning there are 6 DOM elements in the user viewport used to display the target data. Within the scroll body, only these 6 DOM elements and their corresponding data in the user viewport are actually present; other parts of the scroll body do not contain any actual DOM elements to reduce the browser memory occupied by storing DOM elements. However, since only the DOM elements corresponding to the user viewport are actually present in the scroll body, to achieve normal scrolling, the length L1 from the first DOM element to the top of the scroll body is determined based on the starting index (i.e., the first DOM element) and the height of the DOM element. A blank space of length L1 is set at the top to represent the length of the data that has already scrolled up and is displayed in the user viewport, from the first data to the data corresponding to the starting index. Simultaneously, the length L2 from the last DOM element in the user viewport to the bottom of the scroll body is determined based on the height of the scroll body, the ending index, and the height of the DOM elements. A blank space of length L2 is set at the bottom to represent the length of the data that has not yet been scrolled and displayed, from the ending index to the bottom of the scroll body.

[0091] In this embodiment, since only the DOM elements and their data corresponding to the user's viewport actually exist in the scroll body, in order to achieve normal page scrolling, an upper blank placeholder is set to represent the length of the data that has been scrolled and displayed between the top of the scroll body and the starting index, and a lower blank placeholder is set to represent the length of the data that has not yet been scrolled and displayed between the ending index and the bottom of the scroll body. This ensures that the DOM elements and their corresponding data that do not exist in the scroll body have corresponding placeholders, so as to achieve normal page scrolling.

[0092] In some embodiments, step S103 further includes:

[0093] Calculate the second distance between the scroll bar and the bottom of the scroll body. If the second distance is less than a preset distance threshold, then obtain a specified amount of data and add the obtained data to the cached data source.

[0094] The scroll bar described above is used to indicate the position of the last piece of target data in the user's viewport within the scroll body. During scrolling, the scroll bar is typically attached to the scroll body to help the user observe the data or help the browser determine the current data's position within the scroll body. When the user triggers a scroll event, the scroll bar will change accordingly based on the trigger position. For example, if the user scrolls the page upwards a certain distance using the up key, the scroll bar will scroll along with the page, adjusting according to the position of the last piece of target data in the user's viewport (e.g., the last piece of target data in the viewport). Figure 6 The distance from the bottom of the scroll body to the DOM element 6 shown indicates the position of the last piece of data in the scroll body of the target data currently displayed in the user viewport.

[0095] Specifically, the browser retrieves page data in batches from the server and stores it in the corresponding location in the cache data source, and sets corresponding indexes for each data. During page scrolling, the browser continuously monitors the second distance between the scroll bar and the bottom of the scroll body. If the second distance is less than a preset distance threshold, it retrieves the specified data from the server, concatenates the newly retrieved data with the current cache data source, inserts the newly retrieved data into the bottom of the cache data source, and sets corresponding indexes for the newly inserted data so that the browser can retrieve the target data later.

[0096] Optionally, in some practical application scenarios, when the browser has sufficient memory, the browser can also retrieve all data from the server at once (i.e., full data) and store it in the cache data source, without having to retrieve batch data from the server multiple times, thus reducing the impact of network instability during the process of the browser retrieving batch data.

[0097] In this embodiment of the application, in order to reduce unnecessary occupation of user device memory resources, if the second distance between the scroll bar and the bottom of the scroll body is less than a preset threshold during scrolling, the browser will retrieve the specified data and add it to the cache data source to reduce browser memory usage.

[0098] In some embodiments, the above data loading method further includes:

[0099] If the time interval between the second time and the first time is less than a preset threshold, and a new scrolling event is detected, wait until the time interval between the second time and the first time is greater than or equal to the preset threshold, and then use the second time as the new first time.

[0100] Optionally, since the browser will listen to multiple scroll events in a short period of time when the user triggers scroll events frequently, it needs to obtain the target data requested by multiple scroll events and display the target data of each scroll event. Therefore, in order to reduce the loss of target data of some scroll events and improve the data loading effect, if the time interval between the second time and the first time of the current scroll event is less than a preset threshold, that is, the browser has not yet obtained the target data requested by the current scroll event and a new scroll event is detected, the new scroll event is blocked. The browser waits until the time interval between the second time and the first time of the current scroll event is greater than or equal to the preset threshold before obtaining the target data of the current scroll event and displaying it. At the same time, the second time of the current scroll event is taken as the first time of the new scroll event, and the page refresh time listened to after the first time of the new scroll event is obtained to determine the second time of the new scroll event, so as to obtain the target data of the new scroll event and display it in the user's viewport. If, in the current scrolling event, the time interval between the second time and the first time is less than a preset threshold, and the browser detects multiple scrolling events, it will block each scrolling event and repeat the steps of determining the first and second times of the scrolling event in the order in which the scrolling events are detected. When the target data of the current scrolling event is obtained, the first time of the next scrolling event of the detected scrolling event will be determined.

[0101] In this embodiment of the application, since the browser will listen to multiple scroll events in a short period of time when the user triggers scroll events frequently, in order to obtain the target data of each scroll event in an orderly manner and reduce the loss of target data, after obtaining the target data of the current scroll event, the target data of each scroll event is obtained and displayed in the order of the time when each scroll event is listened to, so that the browser can obtain the target data of each scroll event and display it in the user's viewport.

[0102] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0103] Example 2:

[0104] Corresponding to the data loading method described in the above embodiments, Figure 7 A structural block diagram of a data loading apparatus provided in an embodiment of this application is shown. For ease of explanation, only the parts related to the embodiment of this application are shown.

[0105] Reference Figure 7 The device includes: a first-time acquisition module 71, a second-time acquisition module 72, and a data display module 73. Among them,

[0106] The first time acquisition module 71 is used to determine the first time, which is the time when the scroll event is detected.

[0107] The second time acquisition module 72 is used to determine the second time, which is the page refresh time listened to after the scrolling event.

[0108] The data display module 73 is used to acquire target data and display the target data in the user viewport if the time interval between the second time and the first time is greater than or equal to a preset threshold, wherein the target data is the data to be displayed requested by the scrolling event, and the user viewport is a pre-created scrolling container with a fixed height.

[0109] In this embodiment, a first time is determined based on the time when the scroll event is detected. After the scroll event is detected, a second time is determined based on the page refresh time. If the time interval between the second time and the first time is greater than or equal to a preset threshold, target data is acquired and displayed in the user viewport. The target data is the data requested by the scroll event, and the user viewport is a pre-created scroll container with a fixed height. Since the timer continues to count even when the user minimizes or hides the page, consuming unnecessary CPU resources, and the timer may have a delay in generating random values, affecting data loading, determining the second time based on the page refresh time eliminates the need for an additional timer, reducing CPU resource consumption and improving data loading efficiency. Because the target data is acquired and displayed only when the time interval between the second time and the first time is greater than or equal to the preset threshold, the browser will not lose some of the target data for scroll events due to frequent data requests. Meanwhile, during scrolling, the browser only retrieves the data to be displayed requested by the current scroll event as the target data, and displays the target data in the user viewport with a fixed height. This allows the browser to only render the target data to the user viewport for display, reducing the browser's rendering and storage pressure, thereby reducing page lag and improving data loading efficiency.

[0110] In some embodiments, the data display module 73 further includes:

[0111] The index determination unit is used to determine the starting index and the ending index of the target data in the cached data source.

[0112] The target data acquisition unit is used to terminate the index acquisition of the aforementioned target data.

[0113] The data filling unit is used to fill the target data into the corresponding DOM elements in the user viewport.

[0114] In some embodiments, the data display module 73 further includes:

[0115] The first distance acquisition unit is used to acquire the first distance from the top of the user viewport to the top of the scroll body.

[0116] The starting index calculation unit is used to calculate the starting index of the target data in the cached data source based on the first distance and the height of the DOM element.

[0117] The termination index calculation unit is used to determine the termination index based on the starting index and the maximum display size of the user viewport.

[0118] In some embodiments, the data display module 73 further includes:

[0119] The display amount calculation unit is used to calculate the maximum display amount of the user viewport based on the height of the user viewport and the height of the DOM element.

[0120] In some embodiments, the data display module 73 further includes:

[0121] The upper blank placeholder setting unit is used to set the upper blank placeholder based on the above starting index and the height of the above DOM element.

[0122] The lower blank placeholder setting unit is used to set the lower blank placeholder based on the height of the scroll body, the termination index, and the height of the DOM element.

[0123] In some embodiments, the data display module 73 further includes:

[0124] The second distance calculation unit is used to calculate the second distance between the scroll bar and the bottom of the scroll body. If the second distance is less than a preset distance threshold, a specified amount of data is obtained and the obtained data is added to the cache data source.

[0125] In some embodiments, the data loading device further includes:

[0126] The loop module is used to wait until the time interval between the second time and the first time is greater than or equal to the preset threshold when a new scrolling event is detected if the time interval between the second time and the first time is less than or equal to the preset threshold, and then use the second time as the new first time.

[0127] It should be noted that the information interaction and execution process between the above-mentioned devices / units are based on the same concept as the method embodiments of this application. For details on their specific functions and technical effects, please refer to the method embodiments section, and they will not be repeated here.

[0128] Example 3:

[0129] Figure 8 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Figure 8 As shown, the electronic device 8 of this embodiment includes: at least one processor 80 ( Figure 8 The diagram shows only one processor, a memory 81, and a computer program 82 stored in the memory 81 and executable on the at least one processor 80, which, when executing the computer program 82, implements the steps in any of the above method embodiments.

[0130] For example, the computer program 82 described above can be divided into one or more modules / units, which are stored in the memory 81 and executed by the processor 80 to complete this application. The one or more modules / units can be a series of computer program instruction segments capable of performing specific functions, which describe the execution process of the computer program 82 in the electronic device 8. For example, the computer program 82 can be divided into a first-time acquisition module 71, a second-time acquisition module 72, and a data display module 73, with the specific functions of each module as follows:

[0131] The first time acquisition module 71 is used to determine the first time, which is the time when the scroll event is detected.

[0132] The second time acquisition module 72 is used to determine the second time, which is the page refresh time listened to after the scrolling event.

[0133] The data display module 73 is used to acquire target data and display the target data in the user viewport if the time interval between the second time and the first time is greater than or equal to a preset threshold, wherein the target data is the data to be displayed requested by the scrolling event, and the user viewport is a pre-created scrolling container with a fixed height.

[0134] The electronic device 8 can be a desktop computer, laptop, handheld computer, or cloud server, etc. This electronic device may include, but is not limited to, a processor 80 and a memory 81. Those skilled in the art will understand that... Figure 8This is merely an example of electronic device 8 and does not constitute a limitation on electronic device 8. It may include more or fewer components than shown, or combine certain components, or different components. For example, it may also include input / output devices, network access devices, etc.

[0135] The processor 80 may be a Central Processing Unit (CPU), or it may be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor.

[0136] In some embodiments, the memory 81 may be an internal storage unit of the electronic device 8, such as a hard disk or memory of the electronic device 8. In other embodiments, the memory 81 may be an external storage device of the electronic device 8, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the electronic device 8. Furthermore, the memory 81 may include both internal and external storage units of the electronic device 8. The memory 81 is used to store the operating system, applications, bootloader, data, and other programs, such as the program code of the computer program. The memory 81 can also be used to temporarily store data that has been output or will be output.

[0137] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is merely an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this application. The specific working process of the units and modules in the above system can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0138] This application also provides a network device, which includes: at least one processor, a memory, and a computer program stored in the memory and executable on the at least one processor, wherein the processor executes the computer program to implement the steps in any of the above method embodiments.

[0139] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps described in the various method embodiments above.

[0140] This application provides a computer program product that, when run on an electronic device, enables the electronic device to perform the steps described in the various method embodiments above.

[0141] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, all or part of the processes in the methods of the above embodiments of this application can be implemented by a computer program instructing related hardware. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the various method embodiments described above. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. The computer-readable medium can include at least: any entity or device capable of carrying computer program code to a photographing device / terminal device, a recording medium, a computer memory, a read-only memory (ROM), a random access memory (RAM), an electrical carrier signal, a telecommunication signal, and a software distribution medium. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.

[0142] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0143] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0144] In the embodiments provided in this application, it should be understood that the disclosed apparatus / network devices and methods can be implemented in other ways. For example, the apparatus / network device embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms.

[0145] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0146] The above-described embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be included within the protection scope of this application.

Claims

1. A data loading method, characterized by, The method comprises: determining a first time, which is the time when a scroll event is detected; determining a second time, which is the time when a page refresh is detected after the scroll event; if the time interval between the second time and the first time is greater than or equal to a preset threshold, obtaining target data and displaying the target data in a user viewport, wherein the target data is the data requested by the scroll event to be displayed, and the user viewport is a pre-created scroll container with a fixed height; if the time interval between the second time and the first time is less than the preset threshold, and a new scroll event is detected, waiting until the time interval between the second time and the first time is greater than or equal to the preset threshold, and taking the second time as the new first time.

2. The data loading method of claim 1, wherein, The target data is cached in a cache data source, and the obtaining of the target data and the displaying of the target data in the user viewport comprises: determining the start index and the end index of the target data in the cache data source; obtaining the target data based on the start index and the end index; filling the target data into corresponding dom elements in the user viewport.

3. The data loading method of claim 2, wherein, The determination of the start index and the end index of the target data in the cache data source comprises: obtaining a first distance from the top of the user viewport to the top of a scroll body, the scroll body comprising target data displayed in the user viewport, the top of the user viewport corresponding to the first data currently displayed in the user viewport, and the top of the scroll body corresponding to the first data displayed in the user viewport; calculating the start index of the target data in the cache data source according to the first distance and the height of the dom elements; determining the end index according to the start index and the maximum display amount of the user viewport, the maximum display amount being the maximum number of dom elements that can be displayed at a time in the user viewport.

4. The data loading method of claim 3, wherein, Before the determination of the end index according to the start index and the maximum display amount of the user viewport, the method further comprises: calculating the maximum display amount of the user viewport according to the height of the user viewport and the height of the dom elements.

5. The data loading method of claim 3, wherein, The method further comprises: setting an upper blank placeholder based on the start index and the height of the dom elements, the upper blank placeholder being used to represent the length of the data that has been displayed in the scroll body from the top of the scroll body to the start index; setting a lower blank placeholder based on the height of the scroll body, the end index, and the height of the dom elements, the lower blank placeholder being used to represent the length of the data that has not been displayed in the scroll body from the end index to the bottom of the scroll body.

6. The data loading method according to any one of claims 3 to 5, wherein, The data loading method further comprises: If a time interval between the second time and the first time is greater than or equal to the preset threshold, a second distance between a scroll bar and a bottom of the scroll body is calculated, if the second distance is less than a preset distance threshold, a specified amount of data is acquired and the acquired data is added to the cache data source, the scroll bar is used to indicate position information of a last data of target data in the user viewport in the scroll body.

7. A data loading apparatus, characterized by comprising: The method comprises the steps of: a first time acquisition module is configured to determine a first time, the first time being a time when a scroll event is listened to; a second time acquisition module is configured to determine a second time, the second time being a time when a page refresh is listened to after the scroll event; a data display module is configured to acquire target data and display the target data in a user viewport if a time interval between the second time and the first time is greater than or equal to a preset threshold, wherein the target data is to-be-displayed data requested by the scroll event, and the user viewport is a pre-created scroll container with a fixed height; a cycle module is configured to wait until the time interval between the second time and the first time is greater than or equal to the preset threshold if the time interval between the second time and the first time is less than the preset threshold and a new scroll event is listened to, and the second time is taken as a new first time.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, The processor executes the computer program to implement the method of any one of claims 1 to 6.

9. A computer-readable storage medium storing a computer program, the computer program comprising instructions that, when executed by a computer, cause the computer to perform the method of any one of claims 1 to 8. The computer program is executed by the processor to implement the method of any one of claims 1 to 6.

Images