CN118035585A - Webpage resource loading method and device, terminal equipment and storage medium - Google Patents
Webpage resource loading method and device, terminal equipment and storage medium Download PDFInfo
- Publication number
- CN118035585A CN118035585A CN202410431221.8A CN202410431221A CN118035585A CN 118035585 A CN118035585 A CN 118035585A CN 202410431221 A CN202410431221 A CN 202410431221A CN 118035585 A CN118035585 A CN 118035585A
- Authority
- CN
- China
- Prior art keywords
- resource
- loading
- webpage
- resources
- user
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 198
- 238000012544 monitoring process Methods 0.000 claims abstract description 14
- 238000000034 method Methods 0.000 claims description 41
- 238000004590 computer program Methods 0.000 claims description 27
- 238000004458 analytical method Methods 0.000 claims description 8
- 230000003111 delayed effect Effects 0.000 claims description 4
- 238000009877 rendering Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 2
- 230000006870 function Effects 0.000 description 8
- 230000008569 process Effects 0.000 description 8
- 238000013515 script Methods 0.000 description 8
- 230000036316 preload Effects 0.000 description 6
- 230000006399 behavior Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 4
- 238000004422 calculation algorithm Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000003068 static effect Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 230000003542 behavioural effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 235000014510 cooky Nutrition 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The application is suitable for the technical field of webpage development, and provides a webpage resource loading method, a webpage resource loading device, terminal equipment and a storage medium. The loading method of the webpage resource comprises the following steps: monitoring operation events of a user on a webpage; analyzing the operation event to obtain a user portrait of the user; performing estimation according to the user portrait to obtain a prediction result; preloading the prediction result to obtain a preloaded resource, and caching the preloaded resource to the local; acquiring equipment performance, equipment resolution and network strength of equipment corresponding to the webpage; acquiring a resource request sent by a user; setting a resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength; when the preloaded resource matches the resource request, the preloaded resource is loaded locally according to the resource loading policy. The embodiment of the application can improve the loading speed of the webpage, thereby improving the use experience of a user.
Description
Technical Field
The application belongs to the technical field of webpage development, and particularly relates to a webpage resource loading method, a webpage resource loading device, terminal equipment and a storage medium.
Background
In the process of browsing the web page, a user can initiate a resource request, the web page can obtain a corresponding domain name IP address according to the resource request, the resource request is sent to a server corresponding to the address, and then the resource returned by the server is received and loaded on a front-end page. In the process of loading resources, the loading of the web pages may be interfered by various factors, such as insufficient bandwidth, slow loading of the resources, excessive request of the front-end pages, excessive occupation of the CPU or the memory, and the like, which may result in slow loading of the web pages, thereby affecting the user experience.
Disclosure of Invention
The embodiment of the application provides a method, a device, terminal equipment and a storage medium for loading webpage resources, which can solve the problems of low webpage loading speed and poor user experience in the related technology.
In a first aspect, an embodiment of the present application provides a method for loading a web resource, including:
monitoring operation events of a user on a webpage;
analyzing the operation event to obtain a user portrait of the user;
performing speculation according to the user portrait to obtain a prediction result;
Preloading the prediction result to obtain a preloading resource, and caching the preloading resource to a local place;
Acquiring equipment performance, equipment resolution and network strength of equipment corresponding to the webpage;
Acquiring a resource request sent by the user;
setting a resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength;
When the preloaded resource matches the resource request, the preloaded resource is loaded from the local according to the resource loading policy.
In a second aspect, an embodiment of the present application provides a loading device for a web resource, including:
The monitoring module is used for monitoring operation events of a user on a webpage;
The analysis module is used for analyzing the operation event to obtain a user portrait of the user;
The presumption module is used for presuming according to the user portrait to obtain a forecast result;
the preloading module is used for preloading the prediction result to obtain a preloading resource and caching the preloading resource to the local;
The first acquisition module is used for acquiring the equipment performance, the equipment resolution and the network strength of the equipment corresponding to the webpage;
the second acquisition module is used for acquiring the resource request sent by the user;
The setting module is used for setting a resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength;
And the loading module is used for loading the pre-loaded resource from the local according to the resource loading strategy when the pre-loaded resource is matched with the resource request.
In a third aspect, an embodiment of the present application provides a terminal device, including a memory, a processor, and a computer program stored in the memory and capable of running on the processor, where the processor implements the steps of the method for loading web page resources when the processor executes the computer program.
In a fourth aspect, an embodiment of the present application provides a computer readable storage medium storing a computer program, where the computer program when executed by a processor implements the steps of the method for loading web page resources described above.
In a fifth aspect, an embodiment of the present application provides a computer program product, which when executed on a terminal device, causes the terminal device to execute the method for loading a web page resource.
Compared with the prior art, the embodiment of the application has the beneficial effects that: according to the embodiment of the application, the operation event of the user on the webpage is monitored, the operation event is analyzed to obtain the user portrait of the user, and then the prediction result is obtained by performing prediction according to the user portrait. The method comprises the steps of pre-loading a prediction result to obtain pre-loaded resources, caching the pre-loaded resources to the local, obtaining equipment performance, equipment resolution and network strength of equipment corresponding to a webpage, obtaining a resource request sent by a user, setting a resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength, and loading the pre-loaded resources from the local according to the resource loading strategy when the pre-loaded resources are matched with the resource request. According to the embodiment of the application, the user portrait is obtained by analyzing the operation event, and is preloaded according to the user portrait, and the loading speed of the webpage can be improved by preloading the network resources possibly used by the user. In addition, the application sets the resource loading strategy according to the factors such as the resource request, the equipment performance, the equipment resolution, the network strength and the like, and loads the webpage resources through the resource loading strategy, so that the loading speed of the webpage can be improved, and the use experience of a user is improved.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the embodiments or the description of the prior art will be briefly described below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
FIG. 1 is a schematic implementation flow chart of a method for loading web page resources according to an embodiment of the present application;
FIG. 2 is a schematic structural diagram of a loading device for web page resources according to an embodiment of the present application;
fig. 3 is a schematic structural diagram of a terminal device according to an embodiment of the present application.
Detailed Description
The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application. All other embodiments, which can be made by a person skilled in the art without any inventive effort, are intended to be protected by the present application based on the embodiments of the present application.
It is noted that the terms "comprising," "including," and "having," and any variations thereof, in the description and claims of the application and in the foregoing figures, are intended to cover non-exclusive inclusions. For example, a process, method, terminal, article, or apparatus that comprises a list of steps or elements is not limited to only those listed steps or elements but may include other steps or elements not listed or inherent to such process, method, article, or apparatus. In the claims, specification, and drawings of the present application, relational terms such as "first" and "second", and the like are used solely to distinguish one entity/operation/object from another entity/operation/object without necessarily requiring or implying any such real-time relationship or order between such entities/operations/objects.
Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.
In the process of browsing the web page, a user can initiate a resource request, the web page can obtain a corresponding domain name IP address according to the resource request, the resource request is sent to a server corresponding to the address, and then the resource returned by the server is received and loaded on a front-end page. In the process of loading resources, the loading of the web pages may be interfered by various factors, such as insufficient bandwidth, slow loading of the resources, excessive request of the front-end pages, excessive occupation of the CPU or the memory, and the like, which may result in slow loading of the web pages, thereby affecting the user experience.
Therefore, according to the embodiment of the application, the user portrait is obtained by analyzing the operation event, and is preloaded according to the user portrait, and the loading speed of the webpage can be improved by preloading the network resources possibly used by the user. In addition, the application sets the resource loading strategy according to the factors such as the resource request, the equipment performance, the equipment resolution, the network strength and the like, and loads the webpage resources through the resource loading strategy, so that the loading speed of the webpage can be improved, and the use experience of a user is improved.
In order to illustrate the technical scheme of the application, the following description is made by specific examples.
Fig. 1 shows a schematic implementation flow chart of a method for loading web page resources according to an embodiment of the present application, where the method may be applied to a terminal device. The terminal device may be a mobile phone, tablet computer, notebook computer, ultra-mobile personal computer (UMPC), netbook, etc.
Specifically, the method for loading the web page resources may include the following steps S101 to S108.
Step S101, monitoring an operation event of a user on a web page.
In the embodiment of the application, when the user performs operations such as clicking, scrolling and the like on the webpage, the terminal equipment can monitor the operation event of the user. Specifically, when a user accesses a webpage, the operation behaviors of the user, including operations such as clicking and scrolling, can be monitored and detected through JavaScript writing codes. When an event occurs, the user behavior is recorded. For example, click events, scroll events may be listened to using an addEventListener function.
And step S102, analyzing the operation event to obtain a user portrait of the user.
The user portrait may be a comprehensive description of the user formed according to the behavior, interest, habit and other information of the user.
In the embodiment of the application, the terminal equipment can count and analyze the operation events of the user according to the operation events of the user on the webpage, extract the information of interests, preferences, behavior modes and the like of the user, and further obtain the user portrait corresponding to the user.
Step S103, performing estimation according to the user portrait to obtain a prediction result.
Wherein the predicted outcome may be the content or behavior of an operation that the user may be interested in or about to do.
In the embodiment of the application, the terminal equipment can predict the content possibly interested by the user or the upcoming operation based on the user portrait by utilizing techniques such as machine learning or recommendation algorithm and the like so as to obtain a prediction result.
Step S104, preloading the prediction result to obtain a preloading resource, and caching the preloading resource to the local.
In the embodiment of the application, after the prediction result is determined, the terminal device can load the corresponding resources (i.e. the preloaded resources) in advance according to the prediction result at the server end or the front end, for example, pictures, videos, scripts and the like, and cache the corresponding resources locally for subsequent quick access.
Step S105, obtaining the device performance, the device resolution, and the network strength of the device corresponding to the web page.
The device performance may refer to hardware performance of a device accessing a web page, such as CPU speed, memory size, and the like. The device resolution may refer to the display resolution of the device, i.e. the number of pixels the device is capable of displaying. Network strength may refer to the quality of the network connection, such as bandwidth, delay, etc., between the user equipment and the server.
In the embodiment of the application, the terminal equipment can acquire the performance information (such as CPU speed and memory size), resolution and network connection quality of the user equipment through script or server technology.
Step S106, obtaining a resource request sent by a user.
The resource request may be a request sent by a user to a server through a browser to acquire a specific resource.
In an embodiment of the present application, when a user needs to access a certain resource, a resource request is sent to a server through an HTTP request. The terminal device may capture these requests.
Step S107, setting a resource loading strategy according to the resource request, the device performance, the device resolution and the network strength.
The resource loading policy may be a policy formulated according to various factors (such as user request, device performance, etc.), and used for deciding how to load the web page resource.
In the embodiment of the application, the terminal equipment can formulate a proper resource loading strategy, such as selecting which resources to load, the loading sequence, whether to cache or not and the like, according to various collected information, such as resource requests, equipment performance, resolution and network strength.
Step S108, when the preloaded resource is matched with the resource request, the preloaded resource is loaded from the local according to the resource loading strategy.
In the embodiment of the application, when the preloaded resources are matched with the resource requests sent by the users, namely, the preloaded resources are consistent with the resource requests sent by the users or meet certain conditions, the terminal equipment can load the preloaded resources from the local according to the resource loading strategy formulated before so as to improve the loading speed of the webpage resources.
Compared with the prior art, the embodiment of the application has the beneficial effects that: according to the embodiment of the application, the operation event of the user on the webpage is monitored, the operation event is analyzed to obtain the user portrait of the user, and then the prediction result is obtained by performing prediction according to the user portrait. The method comprises the steps of pre-loading a prediction result to obtain pre-loaded resources, caching the pre-loaded resources to the local, obtaining equipment performance, equipment resolution and network strength of equipment corresponding to a webpage, obtaining a resource request sent by a user, setting a resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength, and loading the pre-loaded resources from the local according to the resource loading strategy when the pre-loaded resources are matched with the resource request. According to the embodiment of the application, the user portrait is obtained by analyzing the operation event, and is preloaded according to the user portrait, and the loading speed of the webpage can be improved by preloading the network resources possibly used by the user. In addition, the application sets the resource loading strategy according to the factors such as the resource request, the equipment performance, the equipment resolution, the network strength and the like, and loads the webpage resources through the resource loading strategy, so that the loading speed of the webpage can be improved, and the use experience of a user is improved.
In some embodiments of the present application, the resource loading policy may include a loading order, a loading manner, and a loading resolution. The setting of the resource loading policy according to the resource request, the device performance, the device resolution, and the network strength may specifically include steps S401 to S406.
Step S401, corresponding web page resources are determined according to the resource request.
In the embodiment of the application, when the user sends a resource request to the server, the terminal equipment can identify the webpage resource which the user needs to access according to the request. In particular, the URL or parameters in the resource request are parsed to determine the type and location of the desired web page resource.
Step S402, the priority of each resource in the webpage resources is obtained, and the loading sequence of all the resources is set based on the priority.
In an embodiment of the present application, web page resources may include various types of text, pictures, video, scripts, etc. Each resource may be given a different priority depending on its importance and impact on the user experience. For example, text and background pictures may have a higher priority, while key scripts or videos may have a lower priority. Based on these priorities, the terminal device may determine the loading order of the resources to ensure that the most important resources are loaded first. Specifically, the terminal device may use perload and prerender attributes on the < link > tag to control the priority level of the web page resource.
Step S403, determining necessary resources and unnecessary resources in the web page resources, and setting the loading mode of the unnecessary resources as delayed loading.
The necessary resources may refer to resources necessary for normal display and function implementation of the web page. Unnecessary resources may refer to those resources that, while may enhance the user experience, are not required.
In embodiments of the present application, some resources are required for normal display of a page (e.g., key scripts, style sheets, etc.), while some resources are not required (e.g., certain decorative pictures, sidebar content, etc.), among web page resources. For unnecessary resources, the terminal device may set its loading mode to be delayed loading, that is, the resources are not loaded when the page is initially loaded, but are loaded after the user needs or the page is completely loaded. Specifically, the terminal device may use the defer or aysnc attribute under the < script > tag or use a manner of dynamically creating JavaScript to load.
Step S404, monitoring the page browsing range of the user, setting the loading mode of the webpage resources in the page browsing range as real-time loading, and setting the loading mode of the webpage resources outside the page browsing range as non-loading.
The page view range may be an area where the user is currently visible on the web page.
In the embodiment of the application, by monitoring the page browsing range (such as the position of the scroll bar) of the user, the terminal equipment can judge the page area currently browsed by the user. For areas that the user has browsed, the system may choose not to load or unload resources within that area to save bandwidth and device resources. For the area to be browsed by the user, the system can select to load related resources in real time so as to ensure the smoothness of browsing by the user.
Step S405, setting a loading mode of the image according to the device resolution and the image resolution of the image in the webpage resource.
The loading mode comprises the following steps: when the image resolution is greater than the device resolution, the image is not loaded, and when the image resolution is not greater than the device resolution, the image is loaded. Device resolution refers to the number or size of pixels that the device is capable of displaying. Image resolution refers to the number or size of pixels of an image.
In an embodiment of the application, the resolution of the device determines the maximum size of the image that it can display. If the resolution of the image is higher than the resolution of the device, loading such an image is not only unnecessary, but bandwidth and device resources may be wasted. Therefore, the terminal device can decide whether to load a certain image according to the resolution of the device and the resolution of the image in the webpage resource. An image will only be loaded if its resolution is not greater than the device resolution. When the resolution of the image is greater than the device resolution, then the image is not loaded.
Step S406, setting the loading resolution of the image in the webpage resource according to the equipment performance and the network intensity.
The loading resolution refers to the resolution of an image actually loaded on a webpage.
In embodiments of the present application, it is understood that the performance of the device and the strength of the network can affect the speed and quality of image loading. If the device performance is poor or the network strength is weak, loading high resolution images may result in slower loading speeds or reduced image quality. Therefore, in the embodiment of the application, the terminal equipment can select proper image resolution for loading according to the performance of the equipment and the strength of the network. For example, for a device with poor performance or a weak network strength, the terminal device may choose to load a lower resolution image to increase the loading speed and user experience.
The embodiment of the application can set the resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength, can specifically determine the loading sequence, the loading mode and the loading resolution of the webpage resources, loads the webpage resources through the resource loading strategy, can further improve the webpage loading speed and improve the user experience.
In some embodiments of the present application, the preloading resources may include: CSS files, javaScript files, and images. The preloading of the prediction result to obtain the preloaded resource may specifically include steps S501 to S503.
Step S501, preloading the CSS file and JavaScript file corresponding to the prediction result.
Among them, the CSS file is a style sheet language for describing the style of HTML or XML (including derivative languages such as SVG, XHTML, etc.) documents. The JavaScript file is a programming language for realizing interactive effects and controlling web page functions in the browser. The CSS file is responsible for the style of the web page, while the JavaScript file controls the interactive function of the web page.
In the embodiment of the application, the terminal equipment can pre-load CSS and JavaScript files possibly needed by a user according to the prediction result. Specifically, the method can be realized by modifying HTML codes, adding a < link > or a < script > tag in a < head > tag, and setting a rel attribute of the < link > or the < script > tag to preload.
Step S502, preloading the image corresponding to the prediction result.
In the embodiment of the application, the terminal equipment can pre-load image resources possibly needed by a user according to the prediction result. This can be accomplished by modifying the HTML code to set srcset and sizes properties within the < img > tag, or using the < link > tag and setting its rel properties to preload.
Step S503, pre-rendering the webpage corresponding to the prediction result.
In the embodiment of the application, the terminal device can render part or all of the content of the webpage into static HTML in advance before the user actually browses the webpage, and then store the static HTML in a cache. When the user requests the webpage, the server can directly return the rendered HTML, so that the loading speed of the webpage is greatly improved. Specifically, prerendering may be implemented by Server-side technology (e.g., node. Js) or front-end technology (e.g., server-SIDE RENDERING for act).
According to the embodiment of the application, the CSS file, the JavaScript file and the image corresponding to the prediction result can be preloaded, and the corresponding webpage is prerendered, so that the display speed of the webpage can be accelerated.
In some embodiments of the present application, the method may further include steps S601 to S604.
Step S601, obtaining a webpage resource corresponding to the resource request.
In the embodiment of the application, the terminal equipment can identify the webpage resources which the user needs to access according to the resource request. In particular, the URL or parameters in the resource request are parsed to determine the type and location of the desired web page resource.
Step S602, caching the webpage resources according to the network node where the webpage resources are located, and obtaining the cached resources.
The network node may be a node storing web page resources, and may specifically include a browser, a server, and a Content Delivery Network (CDN). The content distribution network is a distributed network architecture, and the transmission speed of the content is increased by deploying servers at a plurality of locations around the world and caching the website content to the server nearest to the user.
In an embodiment of the present application, the terminal device may store the web page resources on different network nodes, such as a user's browser, server or content distribution network. Specifically, the terminal device may select the most suitable node for caching according to the location and availability of the resource. For example, frequently accessed resources may be cached on the CDN for quick delivery to users. Specifically, the terminal device may implement caching by modifying a Cache control field (e.g., cache-Control, expires, etc.) in the HTTP response header, and storing a copy of the resource file on the Cache node. The embodiment of the application can reduce network transmission and improve the cache hit rate by caching resources on different network nodes
Step S603, obtaining the attribute and the update frequency of the cache resource, and setting the expiration time of the cache resource based on the attribute and the update frequency.
It will be appreciated that different cache resources may have different attributes and update frequencies. For example, some static resources (e.g., CSS, javaScript files) may be updated infrequently, while some dynamic content (e.g., news articles) may be updated frequently.
In the embodiment of the application, the terminal equipment can acquire the attribute and the update frequency by analyzing the metadata, the configuration file or the version information of the cache resource, and set reasonable expiration time for the cache resource according to the attribute and the update frequency so as to ensure that a user can acquire the latest and effective content. For example, for resources that are updated infrequently, longer expiration times may be set to reduce unnecessary network requests.
Step S604, compressing the cache resource to obtain a compressed resource.
In the embodiment of the application, the terminal equipment can compress the cache resource. Specifically, the cache resources may be encoded using a compression algorithm (e.g., gzip, brotli, etc.) to reduce their file size, thereby reducing file transfer size and network latency. Before the server sends the resource to the client, the server may compress the resource first and set a corresponding Encoding field (e.g., content-Encoding) in the HTTP response header, so as to inform the client that the resource needs to be decompressed for use.
In some embodiments of the present application, after setting the resource loading policy according to the resource request, the device performance, the device resolution, and the network strength, the method further includes the steps of:
When the preloaded resource is not matched with the resource request, the corresponding webpage resource is obtained according to the resource request, and the webpage resource is loaded according to the resource loading strategy.
In an embodiment of the present application, the terminal device may check whether the preloaded resource matches the resource request of the user. In particular, it may be checked by comparing URLs, types or other identifiers of resources. When the preloaded resource does not match the resource request, the terminal device may obtain the corresponding web page resource from the server or other storage location according to the resource request of the user. And load the resources according to the previously set resource loading policies.
In some more specific embodiments of the present application, the loading the web page resource according to the resource loading policy may specifically include the following steps:
and carrying out parallel loading, asynchronous loading and stream loading on the webpage resources according to the resource loading strategy.
In the embodiment of the application, the terminal equipment can load the webpage resources according to the resource loading strategy in a parallel loading mode, an asynchronous loading mode and a streaming loading mode.
Specifically, the terminal device may load the web page resources in parallel, that is, load multiple resources from multiple sources or servers at the same time. For example, CSS, javaScript of the web page and the picture file can be loaded at the same time, so that the loading speed is remarkably improved. The terminal device can also asynchronously load the webpage resources, namely, can asynchronously load certain resources (such as advertisements, social media widgets and the like) after the webpage loading is completed. This means that the user can see the main content of the page first without waiting for the additional resources to be fully loaded, which can increase the first screen loading speed and provide better user experience. The terminal device can also load web page resources in a streaming manner, namely, for large content or infinitely scrolled pages, the content is gradually loaded according to the scrolling direction of the user, instead of loading the whole page at one time. This may reduce initial loading time and save bandwidth and device resources.
In some embodiments of the present application, the analyzing the operation event to obtain the user portrait of the user may specifically include steps S701 to S703.
Step S701, the operation event is sent to the server.
In the embodiment of the application, the terminal equipment can use an AJAX or WebSockets technology to transmit data, and when a user operates, an operation event is sent to a server.
In step S702, the receiving server analyzes the operation event to generate a user portrait.
In the embodiment of the application, after receiving the operation event, the server can establish a database to store the data operated by the user, and specifically can use a database such as MySQL. The server may analyze the event using data analysis algorithms and models. Specific analysis content may include a user's behavioral patterns, interest preferences, access frequency, etc. Based on these analysis results, the server can generate a user portrayal and return it as response data to the terminal device.
Step S703, caching the user portrait to the local.
In the embodiment of the application, after receiving the user portrait returned by the server, the terminal equipment can cache the user portrait locally by Cookie, session and the like for subsequent use. Caching user portraits can improve data access speed and reduce communication overhead with a server. Meanwhile, the caching is also beneficial to keeping the real-time performance of the data under the condition that the user image data is updated infrequently.
Fig. 2 shows a schematic structural diagram of a device for loading web resources according to an embodiment of the present application, where the device 2 for loading web resources may be configured on a terminal device, and specifically the device 2 for loading web resources may include:
A monitoring module 201, configured to monitor an operation event of a user on a web page;
An analysis module 202, configured to analyze the operation event to obtain a user profile of the user;
a presumption module 203, configured to presume according to the user portrait, and obtain a prediction result;
the preloading module 204 is configured to preload the prediction result to obtain a preloaded resource, and cache the preloaded resource to a local area;
a first obtaining module 205, configured to obtain device performance, device resolution, and network strength of a device corresponding to the web page;
A second obtaining module 206, configured to obtain a resource request sent by the user;
a setting module 207, configured to set a resource loading policy according to the resource request, the device capability, the device resolution, and the network strength;
a loading module 208, configured to load the preloaded resource from the local area according to the resource loading policy when the preloaded resource matches the resource request.
Compared with the prior art, the embodiment of the application has the beneficial effects that: according to the embodiment of the application, the operation event of the user on the webpage is monitored, the operation event is analyzed to obtain the user portrait of the user, and then the prediction result is obtained by performing prediction according to the user portrait. The method comprises the steps of pre-loading a prediction result to obtain pre-loaded resources, caching the pre-loaded resources to the local, obtaining equipment performance, equipment resolution and network strength of equipment corresponding to a webpage, obtaining a resource request sent by a user, setting a resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength, and loading the pre-loaded resources from the local according to the resource loading strategy when the pre-loaded resources are matched with the resource request. According to the embodiment of the application, the user portrait is obtained by analyzing the operation event, and is preloaded according to the user portrait, and the loading speed of the webpage can be improved by preloading the network resources possibly used by the user. In addition, the application sets the resource loading strategy according to the factors such as the resource request, the equipment performance, the equipment resolution, the network strength and the like, and loads the webpage resources through the resource loading strategy, so that the loading speed of the webpage can be improved, and the use experience of a user is improved.
In some embodiments of the present application, the resource loading policy includes a loading order, a loading manner, and a loading resolution, and the setting module 207 may be further configured to: determining corresponding webpage resources according to the resource request; acquiring the priority of each resource in the webpage resources, and setting the loading sequence of all the resources based on the priority; determining necessary resources and unnecessary resources in the webpage resources, and setting the loading mode of the unnecessary resources as delayed loading; monitoring a page browsing range of the user, and setting a loading mode of the webpage resources in the page browsing range as real-time loading and a loading mode of the webpage resources outside the page browsing range as non-loading; setting a loading mode of the image according to the equipment resolution and the image resolution of the image in the webpage resource, wherein the loading mode comprises the following steps: not loading the image when the image resolution is greater than the device resolution, and loading the image when the image resolution is not greater than the device resolution; and setting the loading resolution of the image in the webpage resource according to the equipment performance and the network intensity.
In some embodiments of the application, the preloaded resource comprises: CSS files, javaScript files, and images, the preload module 204 described above may also be used to: preloading the CSS file and the JavaScript file corresponding to the prediction result; preloading the image corresponding to the prediction result; and pre-rendering the webpage corresponding to the prediction result.
In some embodiments of the present application, the loading device 2 for web page resources may further include a cache module, configured to: acquiring webpage resources corresponding to the resource request; caching the webpage resources according to a network node where the webpage resources are located to obtain cache resources, wherein the network node comprises a browser, a server and a content distribution network; acquiring the attribute and the update frequency of the cache resource, and setting the expiration time of the cache resource based on the attribute and the update frequency; and compressing the cache resource to obtain a compressed resource.
In some embodiments of the present application, the loading device 2 for web page resources may further include a second loading module, configured to: when the preloaded resource is not matched with the resource request, acquiring the corresponding webpage resource according to the resource request, and loading the webpage resource according to the resource loading strategy.
In some embodiments of the present application, the second loading module may be further configured to: and carrying out parallel loading, asynchronous loading and stream loading on the webpage resources according to the resource loading strategy.
In some embodiments of the present application, the analysis module 202 described above may also be used to: sending the operation event to a server; receiving the user portrait generated by the server after analysis based on the operation event; and caching the user portrait to the local.
Fig. 3 is a schematic diagram of a terminal device according to an embodiment of the present application. The terminal device 3 may include: a processor 301, a memory 302 and a computer program 303, such as a loader of a web resource, stored in said memory 302 and executable on said processor 301. The steps in the above embodiments of the loading method of the web page resources are implemented when the processor 301 executes the computer program 303, for example, steps S101 to S108 shown in fig. 1. Or the processor 301 may perform the functions of the modules/units in the above-described apparatus embodiments when executing the computer program 303, for example, the monitoring module 201, the analyzing module 202, the predicting module 203, the preloading module 204, the first obtaining module 205, the second obtaining module 206, the setting module 207, and the loading module 208 shown in fig. 2.
The computer program may be divided into one or more modules/units, which are stored in the memory 302 and executed by the processor 301 to accomplish the present application. The one or more modules/units may be a series of computer program instruction segments capable of performing the specified functions, which instruction segments are used for describing the execution of the computer program in the terminal device.
The terminal device may include, but is not limited to, a processor 301, a memory 302. It will be appreciated by those skilled in the art that fig. 3 is merely an example of a terminal device and is not limiting of the terminal device, and may include more or fewer components than shown, or may combine some components, or different components, e.g., the terminal device may also include input-output devices, network access devices, buses, etc.
The Processor 301 may be a central processing unit (Central Processing Unit, CPU), but may also be other general purpose processors, digital signal processors (DIGITAL SIGNAL Processor, DSP), application SPECIFIC INTEGRATED Circuit (ASIC), off-the-shelf Programmable gate array (Field-Programmable GATE ARRAY, FPGA) or other Programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory 302 may be an internal storage unit of the terminal device, such as a hard disk or a memory of the terminal device. The memory 302 may also be an external storage device of the terminal device, such as a plug-in hard disk, a smart memory card (SMART MEDIA CARD, SMC), a Secure Digital (SD) card, a flash memory card (FLASH CARD) or the like, which are provided on the terminal device. Further, the memory 302 may also include both an internal storage unit and an external storage device of the terminal device. The memory 302 is used for storing the computer program and other programs and data required by the terminal device. The memory 302 may also be used to temporarily store data that has been output or is to be output.
It should be noted that, for convenience and brevity of description, the structure of the above terminal device may also refer to a specific description of the structure in the method embodiment, which is not repeated herein.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-described division of the functional units and modules is illustrated, and in practical application, the above-described functional distribution may be performed by different functional units and modules according to needs, i.e. the internal structure of the apparatus is divided into different functional units or modules to perform all or part of the above-described functions. The functional units and modules in the embodiment may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit, where the integrated units may be implemented in a form of hardware or a form of a software functional unit. In addition, the specific names of the functional units and modules are only for distinguishing from each other, and are not used for limiting the protection scope of the present application. The specific working process of the units and modules in the above system may refer to the corresponding process in the foregoing method embodiment, which is not described herein again.
The embodiment of the application also provides a computer readable storage medium, wherein the computer readable storage medium stores a computer program, and the computer program can realize the steps in the webpage resource loading method when being executed by a processor.
The embodiment of the application provides a computer program product which can realize the steps in the loading method of the webpage resources when being executed by a mobile terminal when the computer program product runs on the mobile terminal.
In the foregoing embodiments, the descriptions of the embodiments are emphasized, and in part, not described or illustrated in any particular embodiment, reference is made to the related descriptions of other embodiments.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus/terminal device and method may be implemented in other manners. For example, the apparatus/terminal device embodiments described above are merely illustrative, e.g., the division of the modules or units is merely a logical function division, and there may be additional divisions in actual implementation, e.g., multiple units or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection via interfaces, devices or units, which may be in electrical, mechanical or other forms.
The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
In addition, each functional unit in the embodiments of the present application may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The integrated units may be implemented in hardware or in software functional units.
The integrated modules/units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer readable storage medium. Based on such understanding, the present application may implement all or part of the flow of the method of the above embodiment, or may be implemented by a computer program to instruct related hardware, where the computer program may be stored in a computer readable storage medium, and when the computer program is executed by a processor, the computer program may implement the steps of each of the method embodiments described above. Wherein the computer program comprises computer program code which may be in source code form, object code form, executable file or some intermediate form etc. The computer readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a U disk, a removable hard disk, a magnetic disk, an optical disk, a computer Memory, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), an electrical carrier signal, a telecommunications signal, a software distribution medium, and so forth. It should be noted that the computer readable medium contains content that can be appropriately scaled according to the requirements of jurisdictions in which such content is subject to legislation and patent practice, such as in certain jurisdictions in which such content is subject to legislation and patent practice, the computer readable medium does not include electrical carrier signals and telecommunication signals.
The above embodiments are only for illustrating the technical solution of the present application, and not for limiting the same; although the application has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical scheme described in the foregoing embodiments can be modified or some technical features thereof can be replaced by equivalents; such modifications and substitutions do not depart from the spirit and scope of the technical solutions of the embodiments of the present application, and are intended to be included in the scope of the present application.
Claims (10)
1. The loading method of the webpage resource is characterized by comprising the following steps of:
monitoring operation events of a user on a webpage;
analyzing the operation event to obtain a user portrait of the user;
performing speculation according to the user portrait to obtain a prediction result;
Preloading the prediction result to obtain a preloading resource, and caching the preloading resource to a local place;
Acquiring equipment performance, equipment resolution and network strength of equipment corresponding to the webpage;
Acquiring a resource request sent by the user;
setting a resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength;
When the preloaded resource matches the resource request, the preloaded resource is loaded from the local according to the resource loading policy.
2. The method for loading web page resources according to claim 1, wherein the resource loading policy includes a loading order, a loading manner, and a loading resolution, and the setting the resource loading policy according to the resource request, the device performance, the device resolution, and the network strength includes:
Determining corresponding webpage resources according to the resource request;
acquiring the priority of each resource in the webpage resources, and setting the loading sequence of all the resources based on the priority;
determining necessary resources and unnecessary resources in the webpage resources, and setting the loading mode of the unnecessary resources as delayed loading;
Monitoring a page browsing range of the user, and setting a loading mode of the webpage resources in the page browsing range as real-time loading and a loading mode of the webpage resources outside the page browsing range as non-loading;
Setting a loading mode of the image according to the equipment resolution and the image resolution of the image in the webpage resource, wherein the loading mode comprises the following steps: not loading the image when the image resolution is greater than the device resolution, and loading the image when the image resolution is not greater than the device resolution;
and setting the loading resolution of the image in the webpage resource according to the equipment performance and the network intensity.
3. The method for loading web page resources according to claim 1, wherein preloading the resources comprises: CSS file, javaScript file and image, the preloading of the prediction result to obtain preloaded resource includes:
preloading the CSS file and the JavaScript file corresponding to the prediction result;
preloading the image corresponding to the prediction result;
and pre-rendering the webpage corresponding to the prediction result.
4. The method for loading web page resources of claim 1, wherein the method further comprises:
acquiring webpage resources corresponding to the resource request;
caching the webpage resources according to a network node where the webpage resources are located to obtain cache resources, wherein the network node comprises a browser, a server and a content distribution network;
acquiring the attribute and the update frequency of the cache resource, and setting the expiration time of the cache resource based on the attribute and the update frequency;
And compressing the cache resource to obtain a compressed resource.
5. The method for loading web page resources according to claim 1, wherein after said setting a resource loading policy according to said resource request, said device capabilities, said device resolution, and said network strength, said method further comprises:
When the preloaded resource is not matched with the resource request, acquiring the corresponding webpage resource according to the resource request, and loading the webpage resource according to the resource loading strategy.
6. The method for loading web page resources according to claim 5, wherein loading the web page resources according to the resource loading policy comprises:
and carrying out parallel loading, asynchronous loading and stream loading on the webpage resources according to the resource loading strategy.
7. The method for loading web page resources according to claim 1, wherein said analyzing the operation event to obtain a user portrait of the user comprises:
sending the operation event to a server;
receiving the user portrait generated by the server after analysis based on the operation event;
and caching the user portrait to the local.
8. A web resource loading device, comprising:
The monitoring module is used for monitoring operation events of a user on a webpage;
The analysis module is used for analyzing the operation event to obtain a user portrait of the user;
The presumption module is used for presuming according to the user portrait to obtain a forecast result;
the preloading module is used for preloading the prediction result to obtain a preloading resource and caching the preloading resource to the local;
The first acquisition module is used for acquiring the equipment performance, the equipment resolution and the network strength of the equipment corresponding to the webpage;
the second acquisition module is used for acquiring the resource request sent by the user;
The setting module is used for setting a resource loading strategy according to the resource request, the equipment performance, the equipment resolution and the network strength;
And the loading module is used for loading the pre-loaded resource from the local according to the resource loading strategy when the pre-loaded resource is matched with the resource request.
9. A terminal device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, the processor implementing the steps of the method for loading web page resources according to any one of claims 1 to 7 when the computer program is executed.
10. A computer readable storage medium storing a computer program, wherein the computer program when executed by a processor implements the steps of the method for loading web page resources according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410431221.8A CN118035585A (en) | 2024-04-11 | 2024-04-11 | Webpage resource loading method and device, terminal equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410431221.8A CN118035585A (en) | 2024-04-11 | 2024-04-11 | Webpage resource loading method and device, terminal equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN118035585A true CN118035585A (en) | 2024-05-14 |
Family
ID=90993578
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410431221.8A Pending CN118035585A (en) | 2024-04-11 | 2024-04-11 | Webpage resource loading method and device, terminal equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN118035585A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107959668A (en) * | 2016-10-14 | 2018-04-24 | 南宁富桂精密工业有限公司 | Streaming media optimization method and buffer storage |
| CN112153465A (en) * | 2019-06-28 | 2020-12-29 | 北京京东尚科信息技术有限公司 | Image loading method and device |
| CN113055742A (en) * | 2021-03-05 | 2021-06-29 | Oppo广东移动通信有限公司 | Video display method, device, terminal and storage medium |
| CN114265976A (en) * | 2021-12-14 | 2022-04-01 | 平安付科技服务有限公司 | H5 page loading method, device, equipment and medium based on intelligent recommendation technology |
| CN117235393A (en) * | 2023-09-15 | 2023-12-15 | 中国联合网络通信集团有限公司 | Self-adaptive page loading method and device, equipment and storage medium |
-
2024
- 2024-04-11 CN CN202410431221.8A patent/CN118035585A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107959668A (en) * | 2016-10-14 | 2018-04-24 | 南宁富桂精密工业有限公司 | Streaming media optimization method and buffer storage |
| CN112153465A (en) * | 2019-06-28 | 2020-12-29 | 北京京东尚科信息技术有限公司 | Image loading method and device |
| CN113055742A (en) * | 2021-03-05 | 2021-06-29 | Oppo广东移动通信有限公司 | Video display method, device, terminal and storage medium |
| CN114265976A (en) * | 2021-12-14 | 2022-04-01 | 平安付科技服务有限公司 | H5 page loading method, device, equipment and medium based on intelligent recommendation technology |
| CN117235393A (en) * | 2023-09-15 | 2023-12-15 | 中国联合网络通信集团有限公司 | Self-adaptive page loading method and device, equipment and storage medium |
Non-Patent Citations (2)
| Title |
|---|
| 吴功宜等: "《深入理解互联网》", 30 June 2022, pages: 249 - 250 * |
| 朱明鹏: "《活动中台 揭秘vivo的千万级DAU活动中台》", 31 January 2022, pages: 140 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11153402B2 (en) | Method and apparatus for automatically optimizing the loading of images in a cloud-based proxy service | |
| US11032388B2 (en) | Methods for prerendering and methods for managing and configuring prerendering operations | |
| CN102438045B (en) | Method and system for pre-fetching web page, and method for accessing web page | |
| US9916285B2 (en) | Generating a preview of a web page for a mobile terminal | |
| KR102151457B1 (en) | Method and apparatus for reducing page load time in a communication system | |
| US9530099B1 (en) | Access to network content | |
| US10291738B1 (en) | Speculative prefetch of resources across page loads | |
| CN106599239A (en) | Webpage content data acquisition method and server | |
| CN104685831A (en) | Measuring web page rendering time | |
| JP2011018314A (en) | Method, system and computer program for sharing web page | |
| US20170094004A1 (en) | Browser cache management | |
| CN103139292A (en) | Method for processing pictures in hyper text transmission protocol (HTTP) proxy and proxy server and system | |
| US20170221109A1 (en) | Ads management in a browser application | |
| CN109388317B (en) | Picture loading method, terminal device and storage medium | |
| AU2017330446B2 (en) | Method and system for delivering real-time content | |
| CN106649313B (en) | Method and apparatus for processing cache data | |
| CN112115388A (en) | Webpage display method, mobile terminal and computer readable storage medium | |
| US8832288B1 (en) | Transitions between remotely cached and live versions of a webpage | |
| CN112752107B (en) | Webpage picture preprocessing method, system, storage medium and computer equipment | |
| US20080168229A1 (en) | Method of Caching Data Assets | |
| US20190114311A1 (en) | Non-Invasive, Single Use System and Methods for Selective Brain Cooling | |
| CN111984868A (en) | Method and device for controlling webpage browsing in browser | |
| CN114491344B (en) | Webpage resource downloading type determining method, device, equipment and medium | |
| CN118035585A (en) | Webpage resource loading method and device, terminal equipment and storage medium | |
| KR20150058868A (en) | Method for web browsing on offline based HTML5 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |