Web page loading speed improvement method and related device

Abstract

The present invention relates to the field of the Internet, and discloses a method for improving the loading speed of a web page and a related device. The method obtains the tag information of a target resource, and stores the uniform resource locator corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource; creates a preset observation function, and monitors a DOMContentLoaded event on a target page; when a trigger condition is met, the DOMContentLoaded event is triggered, and the preset attribute corresponding to the target resource is traversed through the preset observation function to obtain a traversal result; a visual resource is confirmed according to the traversal result, and the uniform resource locator corresponding to the visual resource is assigned to the target attribute of the visual resource to load the visual resource. In the process of loading a web page, the change of the visual resource is monitored, and the resource that needs to be loaded is loaded, thereby achieving the technical effect of improving the loading speed of the web page.

Description

Technical Field

[0001] The present invention relates to the field of Internet, and in particular to a method for improving web page loading speed and a related device. Background Art

[0002] With the advancement of science and technology, people's lives are increasingly inseparable from the Internet. The speed of web page loading has always been largely determined by the number and size of images and video resources. The more images and video resources a web page has, the slower the web page loads in theory. Therefore, how to improve web page loading performance and speed, save traffic, and save users' waiting time, thereby improving user experience and reducing server pressure, has become a technical problem that needs to be solved urgently.

[0003] The above contents are only used to assist in understanding the technical solution of the present invention and do not constitute an admission that the above contents are prior art. Summary of the invention

[0004] The main purpose of the present invention is to provide a method and related device for improving web page loading speed, aiming to solve the technical problem of how to improve web page loading speed.

[0005] To achieve the above object, the present invention provides a method for improving web page loading speed, the method comprising the following steps:

[0006] Acquire the tag information of the target resource, and store the uniform resource locator corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource;

[0007] Create a preset observation function and listen to the DOMContentLoaded event on the target page;

[0008] When the trigger condition is met, the DOMContentLoaded event is triggered, and the preset attributes corresponding to the target resource are traversed through the preset observation function to obtain a traversal result;

[0009] The visual resource is confirmed according to the traversal result, and the uniform resource locator corresponding to the visual resource is assigned to the target attribute of the visual resource to load the visual resource.

[0010] Optionally, the acquiring the tag information of the target resource and storing the uniform resource locator corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource includes:

[0011] Obtain tag information of a target resource, wherein the target resource includes: images and / or videos that need to be optimized for loading;

[0012] The URL link corresponding to the tag information of the target resource is stored in the preset attribute corresponding to the target resource.

[0013] Optionally, creating a preset observation function and monitoring the DOMContentLoaded event on the target page includes:

[0014] Create the observation function IntersectionObserver in the document.addEventListener method;

[0015] The DOMContentLoaded event is monitored on the target page according to the monitoring parameters corresponding to the observation function IntersectionObserver.

[0016] Optionally, when the trigger condition is met, the DOMContentLoaded event is triggered, and traversing the preset attributes corresponding to the target resource through the preset observation function to obtain the traversal result includes:

[0017] In the target page, when the HTML document is completely loaded and parsed, the DOMContentLoaded event is triggered;

[0018] The preset attributes corresponding to the target resource are traversed through the preset observation function to obtain a traversal result.

[0019] Optionally, the confirming a visual resource according to the traversal result and assigning the uniform resource locator corresponding to the visual resource to a target attribute of the visual resource to load the visual resource includes:

[0020] In the traversal result, whether or not a resource enters a viewport is used as a determination condition. If there is a resource that enters a viewport in the traversal result, the resource is determined to be a visible resource;

[0021] The uniform resource locator corresponding to the visual resource is assigned to the target attribute of the visual resource to load the visual resource.

[0022] Optionally, assigning the uniform resource locator corresponding to the visual resource to a target attribute of the visual resource to load the visual resource includes:

[0023] Assigning a uniform resource locator corresponding to the visual resource to the src attribute of the visual resource;

[0024] The loading of the visual resource is completed according to the scr attribute of the visual resource.

[0025] Optionally, after confirming the visual resource according to the traversal result and assigning the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource, the method further includes:

[0026] Release monitoring of the visual resource;

[0027] Determine whether there are any target resources that need to be loaded, and if so, continue to listen to the DOMContentLoaded event on the target page;

[0028] If not, the uniform resource locator in the target attribute of the visual resource is cleared.

[0029] In addition, to achieve the above-mentioned purpose, the present invention also proposes a webpage loading speed improving device, the webpage loading speed improving device comprising:

[0030] A resource acquisition module, used to acquire tag information of a target resource, and store a uniform resource locator corresponding to the tag information of the target resource into a preset attribute corresponding to the target resource;

[0031] Resource monitoring module, used to create preset observation functions and monitor DOMContentLoaded events on the target page;

[0032] A resource traversal module, used for, when a trigger condition is met, triggering the DOMContentLoaded event, traversing the preset attributes corresponding to the target resource through the preset observation function to obtain a traversal result;

[0033] The resource loading module is used to confirm the visual resource according to the traversal result, and assign the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource.

[0034] In addition, to achieve the above-mentioned purpose, the present invention also proposes a device for improving the web page loading speed, which includes: a memory, a processor, and a web page loading speed improvement generation program stored in the memory and executable on the processor, and the web page loading speed improvement program is configured to implement the steps of the web page loading speed improvement method described above.

[0035] In addition, to achieve the above-mentioned purpose, the present invention also proposes a storage medium, on which a web page loading speed improvement program is stored. When the web page loading speed improvement program is executed by a processor, the steps of the web page loading speed improvement generation method described above are implemented.

[0036] The present invention obtains the tag information of the target resource, and stores the uniform resource locator corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource; creates a preset observation function, and monitors the DOMContentLoaded event on the target page; when the trigger condition is met, the DOMContentLoaded event is triggered, and the preset attribute corresponding to the target resource is traversed through the preset observation function to obtain a traversal result; confirms the visual resource according to the traversal result, and assigns the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource, and loads the resources that need to be loaded by monitoring the changes of the visual resources during the loading process of the web page. It is simpler and less difficult to implement than the method of obtaining the current window of the browser through the position information of the scroll bar of the browser, and achieves the technical effect of improving the loading speed of the web page. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 It is a structural schematic diagram of a device for improving web page loading speed in a hardware operating environment involved in an embodiment of the present invention;

[0038] Figure 2 A schematic diagram of a flow chart of a first embodiment of a method for improving web page loading speed according to the present invention;

[0039] Figure 3 A flow chart of a second embodiment of a method for improving web page loading speed according to the present invention

[0040] Figure 4 It is a structural block diagram of the first embodiment of the web page loading speed improvement device of the present invention.

[0041] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0042] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0043] Reference Figure 1 , Figure 1 The figure is a schematic diagram of the structure of a device for improving the web page loading speed in a hardware operating environment according to an embodiment of the present invention.

[0044] like Figure 1As shown, the web page loading speed improvement device may include: a processor 1001, such as a central processing unit (CPU), a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Among them, the communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. The network interface 1004 may optionally include a standard wired interface and a wireless interface (such as a wireless fidelity (WIreless-FIdelity, WI-FI) interface). The memory 1005 may be a high-speed random access memory (Random Access Memory, RAM) memory, or a stable non-volatile memory (Non-Volatile Memory, NVM), such as a disk memory. The memory 1005 may also be a storage device independent of the aforementioned processor 1001.

[0045] Those skilled in the art will understand that Figure 1 The structure shown in does not constitute a limitation on the device for improving the web page loading speed, and may include more or fewer components than shown in the figure, or a combination of certain components, or a different arrangement of components.

[0046] like Figure 1 As shown, the memory 1005 as a storage medium may include an operating system, a data storage module, a network communication module, a user interface module, and a web page loading speed improvement program.

[0047] exist Figure 1 In the web page loading speed improvement device shown, the network interface 1004 is mainly used for data communication with the network server; the user interface 1003 is mainly used for data interaction with the user; the processor 1001 and the memory 1005 in the web page loading speed improvement device of the present invention can be set in the web page loading speed improvement device, and the web page loading speed improvement device calls the web page loading speed improvement program stored in the memory 1005 through the processor 1001, and executes the web page loading speed improvement method provided by the embodiment of the present invention.

[0048] The embodiment of the present invention provides a method for improving the loading speed of a web page. Figure 2 , Figure 2 Schematic diagram of the flow of the first embodiment of the method for improving web page loading speed of the present invention.

[0049] In this embodiment, the webpage loading speed improvement method includes the following steps:

[0050] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0051] Step S10: Acquire tag information of a target resource, and store a uniform resource locator corresponding to the tag information of the target resource into a preset attribute corresponding to the target resource.

[0052] It should be noted that the method in this embodiment is simpler than the method of obtaining the current window of the browser through the position information of the scroll bar of the browser, and is less difficult to implement and has a lower development cost. The advantage of this is that the method can improve the performance and speed of web page loading, save traffic, save user waiting time, etc., thereby achieving the purpose of improving user experience and reducing server pressure.

[0053] It can be understood that the steps of this embodiment include the following steps: obtaining all the images and video tags that need to be optimized and loaded on the web page; storing the URL links of the image and video tags in any custom attributes of the corresponding image and video tags; monitoring the DOMContentLoaded event through the document.addEventListener() method; creating an "observation" function IntersectionObserver() in the document.addEventListener() method; passing all the tags obtained in the first step to the observation function, and traversing all the observed objects in the observation function; judging whether the observed object enters the visible area through the isIntersecting attribute of the observed object; if it enters the visible area, assigning the URL link in the custom attribute to the src attribute of the corresponding image or video tag. Complete the loading of image and video resources.

[0054] Furthermore, in order to more accurately find the resources to be loaded during the process of loading a web page, the step of obtaining the tag information of the target resource and storing the uniform resource locator corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource includes: obtaining the tag information of the target resource, the target resource including: images and / or videos that need to be optimized for loading; storing the URL link corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource.

[0055] Step S20: Create a preset observation function and monitor the DOMContentLoaded event on the target page.

[0056] Furthermore, in order to reduce the waiting time when loading a web page, the creation of a preset observation function and monitoring the DOMContentLoaded event on the target page includes: creating an observation function IntersectionObserver in the document.addEventListener method; and monitoring the DOMContentLoaded event on the target page according to the monitoring parameters corresponding to the observation function IntersectionObserver.

[0057] It should be noted that the document.addEventListener() method registers the specified listener to the document. When the object triggers the specified event, the specified callback function will be executed.

[0058] Step S30: When the triggering condition is met, the DOMContentLoaded event is triggered, and the preset attributes corresponding to the target resource are traversed through the preset observation function to obtain a traversal result.

[0059] Understandably, the DOMContentLoaded event is fired when the plain HTML is fully loaded and parsed, without having to wait for stylesheets, images, or subframes to finish loading.

[0060] It should be noted that the IntersectionObserver interface (belonging to the Intersection ObserverAPI) provides a method for asynchronously observing the intersection state between a target element and its ancestor element or a top-level document window (viewport).

[0061] As you can understand, the EventTarget.addEventListener() method registers the specified listener to the EventTarget, and when the object triggers the specified event, the specified callback function will be executed. The event target can be an element on a document, Element, Document and Window or any other object that supports events (such as XMLHttpRequest). The working principle of addEventListener() is to add the function or object that implements EventListener to the event listener list of the specified event type on the EventTarget that calls it.

[0062] In specific implementation, the IntersectionObserver interface (subordinate to the Intersection ObserverAPI) provides a method to asynchronously observe the intersection state of a target element with its ancestor element or the top-level document viewport. The ancestor element and the viewport are called the root. When an IntersectionObserver object is created, it is configured to monitor a given percentage of the visible area in the root. Once an IntersectionObserver is created, its configuration cannot be changed, so a given observer object can only be used to monitor specific changes in the visible area; however, you can configure multiple target elements to monitor in the same observer object.

[0063] Furthermore, in order to improve the efficiency of loading web pages, when the trigger condition is met, the DOMContentLoaded event is triggered, and the preset attributes corresponding to the target resource are traversed through the preset observation function to obtain the traversal result, including: in the target page, when the HTML document is completely loaded and parsed, the DOMContentLoaded event is triggered; the preset attributes corresponding to the target resource are traversed through the preset observation function and the traversal result is obtained.

[0064] Step S40: confirming a visual resource according to the traversal result, and assigning the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource.

[0065] Furthermore, the confirming of visual resources according to the traversal results and assigning the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource includes: using whether the traversal results enter the viewport as a judgment condition, if there are resources that enter the viewport in the traversal results, then judging the resources as visual resources; assigning the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource.

[0066] In a specific implementation, assigning the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource includes: assigning the uniform resource locator corresponding to the visual resource to the src attribute of the visual resource; and completing the loading of the visual resource according to the scr attribute of the visual resource.

[0067] In a specific implementation, after confirming the visual resource according to the traversal result and assigning the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource, it also includes: releasing the monitoring of the visual resource; determining whether there are still target resources that need to be loaded, and if so, continuing to monitor the DOMContentLoaded event on the target page; if not, clearing the uniform resource locator in the target attribute of the visual resource.

[0068] This example obtains the tag information of the target resource, and stores the uniform resource locator corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource; creates a preset observation function, and listens for the DOMContentLoaded event on the target page; when the trigger condition is met, the DOMContentLoaded event is triggered, and the preset attribute corresponding to the target resource is traversed through the preset observation function to obtain a traversal result; confirms the visual resource according to the traversal result, and assigns the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource. During the loading process of the web page, the changes of the visual resources are monitored and the resources that need to be loaded are loaded. This method is simpler and less difficult to implement than the method of obtaining the current browser window through the position information of the browser's scroll bar, and achieves the technical effect of improving the loading speed of the web page.

[0069] In addition, the embodiment of the present invention also provides a method for improving the loading speed of a web page. Figure 3 , Figure 3 Schematic diagram of the flow of the second embodiment of the method for improving web page loading speed of the present invention.

[0070] In this embodiment, the method for improving web page loading speed includes the following steps.

[0071] Step S100: Obtain all the image and video tags that need to be optimized and loaded in the webpage.

[0072] Step S200: storing the URL link of the image or video transition in any custom attribute of the corresponding image or video tag.

[0073] Step S300: Listen to the DOMContentLoaded event through the document.addEventListener() method.

[0074] Step S400: Create an “observation function” IntersectionObserver() in the document.addEventListener() method.

[0075] Step S500: pass all tags acquired in step S100 to the observation function, and traverse all observation objects in the observation function.

[0076] Step S600: Determine whether the observed object has entered the visible area through its isIntersecting attribute, if not, execute step S700, if yes, execute step S500.

[0077] Step S700: Assign the URL link in the custom attribute to the scr attribute of the corresponding picture or video tag.

[0078] Step S800: Complete the loading of image and video resources.

[0079] This embodiment obtains all the images and video tags that need to be optimized and loaded in the web page; stores the URL link of the image and video changes in any custom attribute of the corresponding image and video tags; monitors the DOMContentLoaded event through the document.addEventListener() method; creates an "observation function" IntersectionObserver() in the document.addEventListener() method; passes all the obtained tags to the observation function, and traverses all the observed objects in the observation function; determines whether the observed object enters the visible area through the isIntersecting attribute of the observed object; if so, assigns the URL link in the custom attribute to the scr attribute of the corresponding image or video tag to complete the loading of the image and video resources. It is simpler than the method of obtaining the current browser window through the position information of the browser's scroll bar, and the implementation difficulty is also lower, and the development cost is lower. This embodiment can improve the performance and speed of web page loading, save traffic, save user waiting time, etc. through this method, thereby achieving the purpose of improving user experience and reducing server pressure.

[0080] Reference Figure 4 , Figure 4 It is a structural block diagram of the first embodiment of the web page loading speed improvement device of the present invention.

[0081] like Figure 4 As shown, the webpage loading speed improving device proposed in the embodiment of the present invention includes:

[0082] The resource acquisition module 10 is used to acquire the tag information of the target resource and store the uniform resource locator corresponding to the tag information of the target resource into the preset attribute corresponding to the target resource;

[0083] The resource monitoring module 20 is used to create a preset observation function and monitor the DOMContentLoaded event on the target page;

[0084] The resource traversal module 30 is used to trigger the DOMContentLoaded event when a trigger condition is met, and traverse the preset attributes corresponding to the target resource through the preset observation function to obtain a traversal result;

[0085] The resource loading module 40 is used to confirm the visual resource according to the traversal result, and assign the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource.

[0086] This example obtains the tag information of the target resource, and stores the uniform resource locator corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource; creates a preset observation function, and listens for the DOMContentLoaded event on the target page; when the trigger condition is met, the DOMContentLoaded event is triggered, and the preset attribute corresponding to the target resource is traversed through the preset observation function to obtain a traversal result; confirms the visual resource according to the traversal result, and assigns the uniform resource locator corresponding to the visual resource to the target attribute of the visual resource to load the visual resource. During the loading process of the web page, the changes of the visual resources are monitored and the resources that need to be loaded are loaded. This method is simpler and less difficult to implement than the method of obtaining the current browser window through the position information of the browser's scroll bar, and achieves the technical effect of improving the loading speed of the web page.

[0087] In one embodiment, the resource acquisition module 10 is also used to obtain tag information of the target resource, where the target resource includes: pictures and / or videos that need to be optimized for loading; and store the URL link corresponding to the tag information of the target resource in the preset attribute corresponding to the target resource.

[0088] In one embodiment, the resource monitoring module 20 is further used to create an observation function IntersectionObserver in the document.addEventListener method; and monitor the DOMContentLoaded event on the target page according to the monitoring parameters corresponding to the observation function IntersectionObserver.

[0089] In one embodiment, the resource traversal module 30 is also used to trigger the DOMContentLoaded event when the HTML document is completely loaded and parsed in the target page; traverse the preset attributes corresponding to the target resource through the preset observation function and obtain the traversal result.

[0090] In one embodiment, the resource loading module 40 is further used to use whether the traversal result enters the viewport as a judgment condition. If there are resources that enter the viewport in the traversal result, the resources are judged as visual resources; the uniform resource locator corresponding to the visual resource is assigned to the target attribute of the visual resource to load the visual resource.

[0091] In one embodiment, the resource loading module 40 is further used to assign the uniform resource locator corresponding to the visual resource to the src attribute of the visual resource; and complete the loading of the visual resource according to the scr attribute of the visual resource.

[0092] In one embodiment, the resource loading module 40 is also used to cancel the monitoring of the visual resource; determine whether there are still target resources that need to be loaded, if so, continue to monitor the DOMContentLoaded event on the target page; if not, clear the uniform resource locator in the target attribute of the visual resource.

[0093] It should be understood that the above is only an example and does not constitute any limitation on the technical solution of the present invention. In specific applications, technicians in this field can make settings as needed, and the present invention does not limit this.

[0094] It should be noted that the workflow described above is merely illustrative and does not limit the scope of protection of the present invention. In practical applications, technicians in this field can select part or all of them according to actual needs to achieve the purpose of the present embodiment, and no limitation is made here.

[0095] In addition, for technical details not fully described in this embodiment, reference can be made to the stream processing method provided in any embodiment of the present invention, and will not be repeated here.

[0096] In addition, it should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or system including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or system. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or system including the element.

[0097] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0098] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as a read-only memory (ROM) / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0099] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A method for improving web page loading speed, characterized in that: The webpage loading speed improvement method comprises: Acquire the tag information of the target resource, and store the uniform resource locator corresponding to the tag information of the target resource in the custom attribute corresponding to the target resource; Create a preset observation function and listen to the DOMContentLoaded event on the target page; When the trigger condition is met, the DOMContentLoaded event is triggered, and the isIntersecting attribute corresponding to the target resource is traversed through the preset observation function to obtain a traversal result; Confirming a visual resource according to the traversal result, and assigning the uniform resource locator corresponding to the visual resource to the src attribute of the visual resource to load the visual resource; The step of obtaining the tag information of the target resource and storing the uniform resource locator corresponding to the tag information of the target resource in the custom attribute corresponding to the target resource includes: obtaining the tag information of the target resource, wherein the target resource includes: pictures and / or videos to be optimized for loading; storing the URL link corresponding to the tag information of the target resource in the custom attribute corresponding to the target resource; The creating of a preset observation function and monitoring the DOMContentLoaded event on the target page includes: creating an observation function IntersectionObserver in the document.addEventListener method; and monitoring the DOMContentLoaded event on the target page according to the monitoring parameters corresponding to the observation function IntersectionObserver.

2. The method for improving web page loading speed according to claim 1, characterized in that: When the trigger condition is met, the DOMContentLoaded event is triggered, and the isIntersecting attribute corresponding to the target resource is traversed by the preset observation function to obtain the traversal result, including: In the target page, when the HTML document is completely loaded and parsed, the DOMContentLoaded event is triggered; The isIntersecting attribute corresponding to the target resource is traversed through the preset observation function and the traversal result is obtained.

3. The method for improving web page loading speed according to claim 1, characterized in that: The step of confirming a visual resource according to the traversal result and assigning the uniform resource locator corresponding to the visual resource to the src attribute of the visual resource to load the visual resource includes: In the traversal result, whether or not a resource enters a viewport is used as a determination condition. If there is a resource that enters a viewport in the traversal result, the resource is determined to be a visible resource; The uniform resource locator corresponding to the visual resource is assigned to the src attribute of the visual resource to load the visual resource.

4. The method for improving web page loading speed according to claim 3, characterized in that: The step of assigning the uniform resource locator corresponding to the visual resource to the src attribute of the visual resource to load the visual resource includes: Assigning a uniform resource locator corresponding to the visual resource to the src attribute of the visual resource; The loading of the visual resource is completed according to the scr attribute of the visual resource.

5. The method for improving web page loading speed according to any one of claims 1 to 4, characterized in that: After confirming the visual resource according to the traversal result and assigning the uniform resource locator corresponding to the visual resource to the src attribute of the visual resource to load the visual resource, the method further includes: Release monitoring of the visual resource; Determine whether there are any target resources that need to be loaded, and if so, continue to listen to the DOMContentLoaded event on the target page; If not, clear the uniform resource locator in the src attribute of the visual resource.

6. A device for improving web page loading speed, characterized in that: The webpage loading speed improving device comprises: A resource acquisition module, used to acquire tag information of a target resource, and store a uniform resource locator corresponding to the tag information of the target resource into a custom attribute corresponding to the target resource; Resource monitoring module, used to create preset observation functions and monitor DOMContentLoaded events on the target page; A resource traversal module, used for, when a trigger condition is met, triggering the DOMContentLoaded event, traversing the isIntersecting attribute corresponding to the target resource through the preset observation function to obtain a traversal result; A resource loading module, used for confirming a visual resource according to the traversal result, and assigning the uniform resource locator corresponding to the visual resource to the src attribute of the visual resource to load the visual resource; The resource acquisition module is further used to acquire tag information of a target resource, wherein the target resource includes: pictures and / or videos that need to be optimized for loading; and store the URL link corresponding to the tag information of the target resource in a custom attribute corresponding to the target resource; The resource monitoring module is further used to create an observation function IntersectionObserver in the document.addEventListener method; and monitor the DOMContentLoaded event on the target page according to the monitoring parameters corresponding to the observation function IntersectionObserver.

7. A device for improving web page loading speed, characterized in that: The web page loading speed improvement device includes: a memory, a processor, and a web page loading speed improvement program stored in the memory and executable on the processor, wherein the web page loading speed improvement program is configured to implement the steps of the web page loading speed improvement method as described in any one of claims 1 to 5.

8. A storage medium, characterized in that: The storage medium stores a program for improving web page loading speed, and when the program for improving web page loading speed is executed by the processor, the steps of the method for improving web page loading speed as described in any one of claims 1 to 5 are implemented.

Images