Page data loading method, device, computer device and storage medium

Abstract

The present disclosure relates to a method, apparatus, computer device, and storage medium for loading page data. The method includes: determining a document object model of a display page, where the document object model includes at least one element node; establishing a monitoring object through an intersection observer, where the monitoring object is used to monitor the intersection ratio of a target element node of the document object model and transfer the monitoring object to a callback function in the intersection observer; triggering the execution of a data loading operation in the callback function when the intersection ratio of the monitoring object is greater than zero; recording the loaded page data and adding the recorded page data to the document object model in batches. The present disclosure can reduce page loading time and bandwidth occupancy; and reduce the number of updates to the DOM operation, improving the loading speed and page stability.

Description

Technical Field

[0001] The present disclosure relates to the technical field of big data processing, and particularly to a method, apparatus, computer device, and storage medium for loading page data. Background Art

[0002] The front-end web page bears the function of data interaction with the back-end. With the improvement of front-end interaction complexity, especially in application scenarios that require a large amount of data transmission and high-frequency rendering, the front-end web page usually supports the infinite pull-down function, and loads page update data in a timely manner by responding to page scrolling.

[0003] In the related art, the front-end web page triggers data loading by listening for scroll events or by periodically checking page scrolling through a timer, and renders a large number of data returned by the back-end, which is likely to cause waste of rendering resources and even cause page loading and updating lags, and the performance stability is poor; and listening for scroll events or periodically checking page scrolling through a timer greatly increases the code complexity and maintenance cost of the front-end page. Summary of the Invention

[0004] Based on this, it is necessary to provide a method, apparatus, computer device, storage medium, and computer program product for loading page data in view of the above technical problems.

[0005] In a first aspect, the present disclosure provides a method for loading page data. The method includes:

[0006] Determine the document object model of the display page, where the document object model includes at least one element node;

[0007] Establish a monitoring object through an intersection observer, where the monitoring object is used to monitor the intersection ratio of a target element node of the document object model, and transfer the monitoring object to a callback function in the intersection observer;

[0008] When the intersection ratio of the monitoring object is greater than zero, trigger the execution of the data loading operation in the callback function; the data loading operation includes loading page data of a preset number of data items;

[0009] Record the loaded page data, and add the recorded page data to the document object model in batches.

[0010] In one embodiment, the loading of page data of a preset number of data items includes:

[0011] Determine a data item number identifier, where the data item number identifier is used to identify the first page data item of the page data to be loaded;

[0012] Locate the first page data to be loaded according to the data count identifier, and load the page data of the preset number of data;

[0013] Update the data count identifier according to the number of page data that has been loaded.

[0014] In one embodiment, the triggering the data loading operation in the callback function includes:

[0015] In response to the number of page data obtained from the data loading operation being less than the preset number of data, stop the data loading operation.

[0016] In one embodiment, the recording the page data obtained by loading and adding the recorded page data to the Document Object Model in batches includes:

[0017] Write the page data into an array, and the maximum capacity data count of the array is equal to the preset number of data;

[0018] In response to the number of data written into the array reaching the maximum capacity data count, or the array including the last page data obtained by loading, add the page data in the array to the Document Object Model.

[0019] In one embodiment, the target element node is the last page data in the array, and the method further includes:

[0020] Update the target element node in the callback function.

[0021] In one embodiment, the target element node is a virtual element, the virtual element is located at the end of the array, and in the case where the page data in the array is empty, the intersection ratio of the virtual element is greater than zero.

[0022] In a second aspect, the present disclosure also provides a page data loading device. The device includes:

[0023] A Document Object Module, configured to determine a Document Object Model for displaying a page, the Document Object Model including at least one element node;

[0024] An Intersection Observer Module, configured to establish a monitoring object through an intersection observer, the monitoring object being used to monitor the intersection ratio of a target element node of the Document Object Model and transfer the monitoring object to a callback function;

[0025] A Callback Function Module, configured to trigger the execution of the data loading operation in the callback function when the intersection ratio of the monitoring object is greater than zero; the data loading operation includes loading page data of a preset number of data;

[0026] An element update module, configured to record the page data obtained by loading, and add the recorded page data to the Document Object Model in batches.

[0027] In one embodiment, the callback function module includes:

[0028] A number identification unit, configured to determine a data number identification, where the data number identification is used to identify the first page data of the page data to be loaded;

[0029] A loading unit, configured to locate the first page data to be loaded according to the data number identification, and load the page data of the preset number of data;

[0030] An identification update unit, configured to update the data number identification according to the number of page data that has been loaded.

[0031] In one embodiment, the callback function module is further configured to stop the data loading operation in response to the number of page data obtained by the data loading operation being less than the preset number of data.

[0032] In one embodiment, the element update module includes:

[0033] An array writing unit, configured to write the page data into an array, where the maximum capacity number of data of the array is equal to the preset number of data;

[0034] An array adding unit, configured to add the page data in the array to the Document Object Model in response to the number of data written into the array reaching the maximum capacity number of data, or the array including the last page data obtained by loading.

[0035] In one embodiment, the target element node is the last page data in the array, and the apparatus further includes:

[0036] An update module, configured to update the target element node in the callback function.

[0037] In one embodiment, the target element node is a virtual element, the virtual element is located at the end of the array, and in the case where the page data in the array is empty, the cross ratio of the virtual element is greater than zero.

[0038] In a third aspect, the present disclosure further provides a computer device. The computer device includes a memory and a processor, the memory stores a computer program, and when the processor executes the computer program, the steps of the above page data loading method are implemented.

[0039] Fourthly, the present disclosure also provides a computer-readable storage medium. On the computer-readable storage medium, a computer program is stored, and when the computer program is executed by a processor, the steps of the above-mentioned page data loading method are implemented.

[0040] Fifthly, the present disclosure also provides a computer program product. The computer program product includes a computer program, and when the computer program is executed by a processor, the steps of the above-mentioned page data loading method are implemented.

[0041] The above-mentioned page data loading method, device, computer device, storage medium and computer program product have at least the following beneficial effects:

[0042] The present disclosure monitors the intersection ratio of the target element node through an intersection observer, and judges whether the target element node is visible according to the intersection ratio. Furthermore, when the target element node is visible, a data loading operation of triggering and executing a callback function is realized, so as to asynchronously monitor whether the target element node enters the viewport, and load the content data of the target element node when the target element node enters the viewport, reducing the page loading time and bandwidth occupancy; and when loading page data, load it sequentially according to the preset number of data items, avoiding rendering a large amount of data at one time, causing page jamming. At the same time, add the loaded page data to the DOM element in batches, avoiding updating one data item each time, reducing the number of DOM update operations, and improving the loading speed and page stability. Description of the Drawings

[0043] In order to more clearly illustrate the technical solutions in the embodiments of the present disclosure or in the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are only some embodiments of the present disclosure. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0044] Figure 1 It is an application environment diagram of the page data loading method in an embodiment;

[0045] Figure 2 It is a flowchart of the page data loading method in an embodiment;

[0046] Figure 3 It is a flowchart of the data loading operation in an embodiment;

[0047] Figure 4 It is a flowchart of the page data loading method in another embodiment;

[0048] Figure 5 It is a flowchart of the page data loading method in yet another embodiment;

[0049] Figure 6 is a structural block diagram of a page data loading device in an embodiment;

[0050] Figure 7 is a structural block diagram of a callback function module in an embodiment;

[0051] Figure 8 is a structural block diagram of an element update module in an embodiment;

[0052] Figure 9 is an internal structural block diagram of a computer device in an embodiment. Detailed implementation manners

[0053] In order to make the objectives, technical solutions and advantages of the present application clearer and more understandable, the present application will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0054] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the technical field to which this disclosure belongs. The terms used in the specification of this disclosure herein are only for the purpose of describing specific embodiments and are not intended to limit this disclosure.

[0055] The implementation manners described in the following exemplary embodiments do not represent all implementation manners consistent with this disclosure. On the contrary, they are merely examples of devices and methods consistent with some aspects of this disclosure as detailed in the appended claims. The term "including", "comprising" or any other variant thereof is intended to cover non-exclusive inclusion, such that a process, method, product or device including a series of elements includes not only those elements but also other elements not expressly listed, or further includes elements inherent to such process, method, product or device. Without further limitation, there is no exclusion of the presence of additional identical or equivalent elements in the process, method, product or device including the said elements.

[0056] As used herein, the singular forms "a", "an" and "the" may also include the plural forms unless the context clearly dictates otherwise. It should also be understood that the term "including / comprising" or "having" etc. specifies the presence of the stated features, wholes, steps, operations, components, parts or combinations thereof, but does not exclude the possibility of the presence or addition of one or more other features, wholes, steps, operations, components, parts or combinations thereof. At the same time, in this specification, the term "and / or" includes any and all combinations of the related listed items.

[0057] The page data loading method provided by the embodiments of this disclosure can be applied to, for exampleFigure 1 In the application environment shown. Among them, the terminal 102 communicates with the server 104 through the network. The data storage system can store the data that the terminal 102 needs to process. The data storage system can be integrated on the terminal 102, or placed in the cloud or other network servers. The terminal 102 can load the page data in the data storage system or provided by the server 104 and render it onto the display page to achieve the display of the display page and human-computer interaction. Among them, the terminal 102 can be, but is not limited to, various personal computers equipped with a display screen, laptop computers, smart phones, tablet computers, Internet of Things devices, and portable wearable devices. The Internet of Things devices can be smart speakers, smart TVs, smart air conditioners, smart vehicle-mounted devices, etc. The portable wearable devices can be smart watches, smart bracelets, head-mounted devices, etc. The server 104 can be implemented by an independent server or a server cluster composed of multiple servers.

[0058] In some embodiments of the present disclosure, as Figure 2 shown, a page data loading method is provided. Taking the terminal in Figure 1 as an example for illustration, the method includes the following steps:

[0059] Step 210, determine the document object model of the display page, and the document object model includes at least one element node.

[0060] Among them, the document object model (Document Object Model, abbreviated as DOM) is a standard programming interface for processing extensible markup languages (HTML or XML). Through these DOM interfaces, the content, structure, and style of the web page can be changed. DOM can divide the document into several element nodes, and each element node can include several sub-nodes. DOM element nodes are elements with multiple attributes. For example, a DIV (a positioning technique in Cascading Style Sheets, DIVision) element. The DIV element can be used to provide structure and background for large chunks of content in an HTML (an application under the Standard Generalized Markup Language) document.

[0061] Exemplarily, the terminal can determine the document object model of the display page by creating DOM elements. For example, a new DIV element is created, and the DIV element includes multiple sub-elements, and each sub-element corresponds to a piece of page data. The newly created DIV element can be used as the data list initially displayed on the display page.

[0062] Step 220, establish a monitoring object through an intersection observer. The monitoring object is used to monitor the intersection ratio of the target element node of the document object model and pass the monitoring object to the callback function in the intersection observer.

[0063] Among them, the IntersectionObserver generally refers to an API (Application Programming Interface) that monitors whether a target element enters the visible area of the display page.

[0064] Exemplarily, the terminal establishes a monitoring object through the IntersectionObserver. The monitoring object can be used to monitor the parameters of the target element node in the DOM element, such as the intersection ratio. The terminal registers a callback function and passes the monitoring object to the callback function. The target element node can include page data or a preset fixed element node. The target element node can be used as a flag to trigger a data loading request when the target element node enters the visible area of the display page. The target element node can be selected according to the application scenario requirements of the display page. For example, the last or several last pieces of the already loaded page data can be selected.

[0065] Step 230, when the intersection ratio of the monitoring object is greater than zero, trigger the data loading operation in the callback function; the data loading operation includes loading page data of a preset number of data items.

[0066] Exemplarily, in the callback function, the intersection ratio passed by the monitoring object is judged. When the intersection ratio of the monitoring object is greater than zero, it is judged that the target element node is in a visible state, and then the data loading operation in the callback function is triggered. The intersection ratio is 1 when it is completely visible and less than or equal to 0 when it is completely invisible. Among them, the data loading operation includes loading page data of a preset number of data items. That is, when it is judged that the target element node is in a visible state, the operation of loading page data of a preset number of data items is executed. For example, if the preset number of data items is 10, then each time the data loading operation is triggered, 10 new pieces of page data can be loaded. When the page data is completely loaded, the last loaded page data may be less than 10 pieces.

[0067] Optionally, the data loading operation can be implemented by establishing a wrapper function, that is, when the intersection ratio of the monitoring object is greater than zero, a function for triggering the data loading operation is called.

[0068] Optionally, the terminal can also construct a custom throttling function to control the execution frequency of the callback function. By setting a time interval, when the event that the intersection ratio is greater than zero is triggered, the corresponding callback function will not be immediately triggered, but will be executed at a specific time interval. Whenever the execution response interval arrives, the response function will be executed. Thus, the problem that the callback function is frequently triggered when quickly sliding, resulting in the page being stuck and unable to slide, is solved.

[0069] Step 240: Record the page data obtained by loading, and add the recorded page data to the Document Object Model in batches.

[0070] Exemplarily, record the page data obtained by loading, and add the recorded page data to the DOM elements in batches for subsequent rendering. After adding the recorded page data to the DOM elements in batches, it can be added to the rendering list by means of adding new element nodes and / or adding child nodes at the end of the child nodes of existing element nodes.

[0071] Optionally, when the number of the recorded page data reaches a preset threshold or the page data of this batch includes the last page data obtained by loading, add the page data of this batch to the DOM elements at one time, and continue to record the loaded page data.

[0072] In the above page data loading method, the intersection ratio of the target element node is monitored through an intersection observer, and it is judged whether the target element node is visible according to the intersection ratio. Furthermore, when the target element node is visible, a data loading operation of a callback function is triggered to asynchronously monitor whether the target element node enters the viewport, and load the content data of the target element node when the target element node enters the viewport, reducing the page loading time and bandwidth occupancy; and when loading page data, load it sequentially according to the preset number of data items, avoiding rendering a large amount of data at one time and causing page jamming. At the same time, add the loaded page data to the DOM elements in batches, avoiding updating one data item each time, reducing the number of DOM updates, and improving the loading speed and page stability.

[0073] In some embodiments of the present disclosure, as Figure 3 shown, step 230 includes:

[0074] Step 232: Determine a data number identifier, which is used to identify the first page data of the page data to be loaded.

[0075] Exemplarily, before loading page data, a data number identifier can be set in advance. The data number identifier is a variable M (M is a positive integer). The data number identifier is used to identify the first page data of the page data to be loaded, that is, it can be used to identify starting from the Mth page data as the first page data for loading.

[0076] Step 234: Locate the first page data to be loaded according to the data number identifier, and load the page data of the preset number of data items.

[0077] Exemplarily, when the terminal requests to load page data, after determining the current data count identifier M, it can quickly locate the M-th page data and start loading page data with a preset number of data entries from the M-th page data.

[0078] Step 236, update the data count identifier according to the number of page data entries that have been loaded.

[0079] Exemplarily, when the terminal performs a data loading operation, it can update the data count identifier after the loading is completed. For example, if the preset number of data entries is 10, when performing a data loading operation and loading 10 page data entries at once, after the loading is completed, update the data count identifier to (M + 10), that is, assign (M + 10) to the data count identifier. In some embodiments, when the page data loading is completed, the number of page data entries obtained from the last data loading operation may be less than 10, for example, N page data entries are loaded (N is a non-negative integer and N is less than 10), then after the loading is completed, update the data count identifier to (M + N), that is, assign (M + N) to the data count identifier.

[0080] In this embodiment, by establishing a data count identifier, when loading page data with a preset number of data entries each time, it is possible to quickly and accurately locate the first page data to be loaded.

[0081] In some embodiments of the present disclosure, step 230 further includes:

[0082] In response to the number of page data entries obtained from the data loading operation being less than the preset number of data entries, stop the data loading operation.

[0083] Exemplarily, during the process of performing a data loading operation, it is possible to batch load and obtain the number of page data entries with a preset number of data entries. However, when the page data loading is completed, the number of page data entries obtained from the last data loading operation may be less than the preset number of data entries. At this time, trigger to stop the data loading operation. Optionally, after all page data is loaded, the data loading operation in the callback function can be disabled to reduce the triggering of the callback function to load page data and avoid waste of loading resources.

[0084] In this embodiment, by setting the condition for the callback function to stop loading data, the loading action is stopped in a timely manner after the data loading is completed, reducing the risk of page freezing or blank caused by continuous loading.

[0085] In some embodiments of the present disclosure, as Figure 4 shown, step 240 includes:

[0086] Step 242, write the page data into an array, and the maximum capacity number of data entries of the array is equal to the preset number of data entries.

[0087] Exemplarily, the page data obtained by loading can be recorded in an array, and the page data is recorded in units of the array. The maximum number of page data items that a single array can accommodate can be equal to the preset number of data items when loading the page data, so as to achieve the synchronization of the number of pages loaded from the server and the DOM elements added to the front end.

[0088] Step 244, in response to the number of data items written into the array reaching the maximum capacity number of data items, or the last page data obtained by loading being included in the current array, add the page data in the array to the Document Object Model.

[0089] Exemplarily, the recorded page data is added to the DOM elements in units of the array, that is, when the number of data items written into the current array reaches the maximum capacity number of data items, or the last page data obtained by loading is included in the current array, the array can be added to the DOM elements at one time, and the array can continue to record newly loaded page data.

[0090] In this embodiment, the page data is recorded by data, and the page data is added to the DOM elements in units of the array, which not only improves the stability of the number of pages loaded from the server and added to the DOM elements on the front end, reduces data errors, but also greatly reduces the number of update operations on the DOM elements, and improves the page loading speed.

[0091] In some embodiments of the present disclosure, as Figure 5 shown, the method further includes:

[0092] Step 250, update the target element node in the callback function.

[0093] Wherein, the target element node is the last page data in the array.

[0094] Exemplarily, the target element node can be selected as the last page data in the current array. When the intersection ratio of the last page data in the array is greater than zero, that is, the last page data in the array enters the visible area of the display page, the data loading operation in the callback function is triggered. And after completing a data loading operation (new page data is loaded into the array), after the terminal adds the loaded page data to the DOM elements for rendering, the target element node is updated to the last page data in the current array in the callback function, which is convenient for observing the newly loaded data.

[0095] In this embodiment, by selecting the last piece of page data in the current array as the target element node, the purpose of triggering the execution of the data loading operation after the page data loaded currently enters the visible area of the display page can be achieved. After adding the loaded page data to the DOM element for rendering, the target element node is updated to the last piece of page data in the current array in the callback function, which is convenient for observing the newly loaded data.

[0096] In some embodiments of the present disclosure, the target element node is a virtual element, the virtual element is located at the tail end of the array, and in the case where the page data in the array is empty, the intersection ratio of the virtual element is greater than zero.

[0097] Among them, the virtual element may refer to the case where the intersection ratio of the virtual element is greater than zero (that is, the virtual element enters the visible area of the display page), and the display effect of the virtual element is invisible.

[0098] Exemplarily, the target element node may be a fixed virtual element set in advance, and the display effect of this virtual element is always invisible. Even if the virtual element enters the visible area of the display page, its display effect is invisible. The virtual element is always located at the tail end of the array. In the case where the page data in the array is not empty, the page data in the array enters the visible area of the display page. In the case where the page data in the array is empty, the virtual element enters the visible area of the display page, and at this time, the intersection ratio of the virtual element is greater than zero.

[0099] In this embodiment, by selecting a fixed virtual element as the target element node, the purpose of triggering the execution of the data loading operation after the page data loaded currently enters the visible area of the display page can be achieved, and the virtual element is located at the end of the data and is always invisible, and there is no need to update the target element node after each rendering, which improves the efficiency of page data loading.

[0100] It should be understood that although the steps in the flowcharts involved in the above-described embodiments are shown in sequence according to the arrows, these steps do not necessarily need to be executed in the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps has no strict order limit, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-described embodiments may include multiple steps or multiple stages, and these steps or stages do not necessarily need to be executed at the same moment, but can be executed at different moments, and the execution order of these steps or stages does not necessarily need to be sequential, but can be executed alternately or in turn with at least a part of other steps or steps or stages in other steps.

[0101] Based on the same inventive concept, embodiments of the present disclosure also provide a page data loading device for implementing the page data loading method involved above. The solution provided by this device to solve the problem is similar to the solution described in the above method. Therefore, the specific limitations in one or more embodiments of the page data loading device provided below can refer to the limitations on the page data loading method in the foregoing, and will not be elaborated herein.

[0102] In some embodiments of the present disclosure, as Figure 6 shown, a page data loading device is provided.

[0103] The device 600 includes:

[0104] A document object module 610, configured to determine a document object model of the display page, where the document object model includes at least one element node;

[0105] An intersection observer module 620, configured to establish a monitoring object through an intersection observer, where the monitoring object is used to monitor the intersection ratio of a target element node of the document object model, and transmit the monitoring object to a callback function;

[0106] A callback function module 630, configured to trigger the execution of a data loading operation in the callback function when the intersection ratio of the monitoring object is greater than zero; the data loading operation includes loading page data of a preset number of data items;

[0107] An element update module 640, configured to record the loaded page data and add the recorded page data to the document object model in batches.

[0108] In some embodiments of the present disclosure, as Figure 7 shown, the callback function module 630 includes:

[0109] A number identifier unit 632, configured to determine a data number identifier, where the data number identifier is used to identify the first page data of the page data to be loaded;

[0110] A loading unit 634, configured to locate the first page data to be loaded according to the data number identifier and load the page data of the preset number of data items;

[0111] An identifier update unit 636, configured to update the data number identifier according to the number of page data items that have been loaded.

[0112] In some embodiments of the present disclosure, the callback function module is further configured to stop the data loading operation in response to the number of page data items obtained from the data loading operation being less than the preset number of data items.

[0113] In some embodiments of the present disclosure, as Figure 8 shown, the element update module 640 includes:

[0114] An array writing unit 642, configured to write the page data into an array, where the maximum capacity number of data items of the array is equal to the preset number of data items;

[0115] An array adding unit 644, configured to add the page data in the array to the document object model in response to the number of data items written into the array reaching the maximum capacity number of data items, or the array including the last page data obtained by loading.

[0116] In some embodiments of the present disclosure, the target element node is the last page data in the array, and the device further includes:

[0117] An update module, configured to update the target element node in the callback function.

[0118] In some embodiments of the present disclosure, the target element node is a virtual element, the virtual element is located at the end of the array, and when the page data in the array is empty, the cross ratio of the virtual element is greater than zero.

[0119] Each module in the above page data loading device can be implemented in whole or in part by software, hardware, and their combination. The above-mentioned modules can be embedded in the processor in the computer device in hardware form or be independent of the processor, or can be stored in the memory in the computer device in software form, so that the processor can call and execute the operations corresponding to the above modules. It should be noted that the division of modules in the embodiments of the present disclosure is illustrative, only a logical function division, and there may be other division methods in actual implementation.

[0120] Based on the description of the embodiments of the foregoing page data loading method, in another embodiment provided by the present disclosure, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as Figure 9As shown in the figure. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit, and an input device. Among them, the processor, the memory, and the input / output interface are connected through a system bus, and the communication interface, the display unit, and the input device are connected to the system bus through the input / output interface. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and external devices. The communication interface of the computer device is used to communicate with external terminals in a wired or wireless manner, and the wireless manner can be implemented through WIFI, a mobile cellular network, NFC (Near Field Communication), or other technologies. The computer program, when executed by the processor, implements a page data loading method. The display unit of the computer device is used to form a visually visible picture, which can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen. The input device of the computer device can be a touch layer covering the display screen, or a button, a trackball, or a touchpad provided on the computer device housing, or an external keyboard, touchpad, or mouse, etc.

[0121] Those skilled in the art can understand that Figure 9 the structure shown in the figure is only a block diagram of some structures related to the solution of this application, and does not constitute a limitation on the computer device to which the solution of this application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine some components, or have different component arrangements.

[0122] Based on the description of the embodiments of the foregoing page data loading method, in another embodiment provided by the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the steps in the foregoing method embodiments are implemented.

[0123] Based on the description of the embodiments of the foregoing page data loading method, in another embodiment provided by the present disclosure, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the steps in the foregoing method embodiments are implemented.

[0124] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use, and processing of relevant data need to comply with the relevant laws, regulations, and standards of relevant countries and regions.

[0125] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, database, or other medium used in the embodiments provided in this application can include at least one of non-volatile and volatile memories. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc. The databases involved in the embodiments provided in this application can include at least one of relational databases and non-relational databases. Non-relational databases can include distributed databases based on blockchain, etc., without limitation. The processors involved in the embodiments provided in this application can be general-purpose processors, central processors, graphics processors, digital signal processors, programmable logic devices, data processing logics based on quantum computing, etc., without limitation.

[0126] In the description of this specification, the description of reference terms such as "some embodiments", "other embodiments", "ideal embodiments", etc. means that the specific features, structures, materials, or features described in connection with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic description of the above terms does not necessarily refer to the same embodiment or example.

[0127] It can be understood that the various embodiments of the above methods in this specification are all described in a progressive manner. The same / similar parts between the various embodiments can be referred to each other, and the key points of each embodiment are the differences from other embodiments. For the relevant parts, refer to the descriptions of other method embodiments.

[0128] The technical features of the above-described embodiments can be combined arbitrarily. For the sake of brevity of description, not all possible combinations of the technical features of the above-described embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered to be within the scope described in this specification.

[0129] The above-described embodiments merely represent several implementation manners of the present disclosure. The description is relatively specific and detailed, but it should not be construed as a limitation to the scope of the patent application. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present disclosure, several modifications and improvements can still be made, and these all belong to the protection scope of the present disclosure. Therefore, the protection scope of the patent of the present disclosure shall be subject to the appended claims.

Claims

1. A method for loading page data, characterized in that, The method includes: Determine the document object model of the display page, where the document object model includes at least one element node; Establish a monitoring object through an intersection observer, where the monitoring object is used to monitor the intersection ratio of the target element node of the document object model and transfer the monitoring object to a callback function in the intersection observer; When the intersection ratio of the monitoring object is greater than zero, trigger the execution of the data loading operation in the callback function; the data loading operation includes loading page data of a preset number of data items; the loading of page data of a preset number of data items includes: determining a data item number identifier, where the data item number identifier is used to identify the first page data item of the page data to be loaded; positioning the first page data item to be loaded according to the data item number identifier and loading the page data of the preset number of data items; updating the data item number identifier according to the number of page data items that have been loaded; the triggering of the execution of the data loading operation in the callback function includes: stopping the data loading operation in response to the number of page data items obtained from the data loading operation being less than the preset number of data items; Record the page data obtained by loading and add the recorded page data to the document object model in batches.

2. The method according to claim 1, wherein The recording of the page data obtained by loading and adding the recorded page data to the document object model in batches includes: Write the page data into an array, where the maximum capacity number of data items of the array is equal to the preset number of data items; In response to the number of data items written into the array reaching the maximum capacity number of data items, or the array including the last page data item obtained by loading, add the page data in the array to the document object model.

3. The method according to claim 2, wherein The target element node is the last page data item in the array, and the method further includes: Update the target element node in the callback function.

4. The method according to claim 2, wherein The target element node is a virtual element, the virtual element is located at the end of the array, and when the page data in the array is empty, the intersection ratio of the virtual element is greater than zero.

5. A page data loading device, characterized in that, The device includes: A document object module for determining the document object model of the display page, where the document object model includes at least one element node; An intersection observer module for establishing a monitoring object through an intersection observer, where the monitoring object is used to monitor the intersection ratio of the target element node of the document object model and transfer the monitoring object to a callback function; A callback function module, configured to trigger the execution of a data loading operation in the callback function when the cross ratio of the monitored object is greater than zero; the data loading operation includes repeatedly loading page data of a preset number of data items; the callback function module includes: a number identification unit, configured to determine a data number identification, where the data number identification is used to identify the first page data of the page data to be loaded; a loading unit, configured to locate the first page data to be loaded according to the data number identification and load the page data of the preset number of data items; an identification update unit, configured to update the data number identification according to the number of page data items that have been loaded; the callback function module is further configured to stop the data loading operation in response to the number of page data items obtained from the data loading operation being less than the preset number of data items; An element update module, configured to record the page data obtained by loading, add the recorded page data to the Document Object Model in batches, and update the monitored object.

6. The device according to claim 5, characterized in that, The element update module includes: An array writing unit, configured to write the page data into an array, where the maximum capacity number of data items of the array is equal to the preset number of data items; An array adding unit, configured to add the page data in the array to the Document Object Model in response to the number of data items written into the array reaching the maximum capacity number of data items, or the array including the last page data obtained by loading.

7. The device according to claim 6, characterized in that The target element node is the last page data in the array, and the apparatus further includes: An update module, configured to update the target element node in the callback function.

8. A computer device, comprising a memory and a processor, the memory storing a computer program, characterized in that, When the processor executes the computer program, the steps of the method according to any one of claims 1 to 4 are implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 4 are implemented.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 4 are implemented.

Images