Page loading optimization method and device, storage medium and computer equipment

Abstract

According to the page loading optimization method and device, the storage medium and the computer equipment provided by the invention, the element prediction list is obtained when the target page is triggered and entered, and the key elements in the target page are sequentially recorded by the element prediction list according to the importance, so that accurate identification of the key elements is realized. Then, according to historical interaction events, page types and content structure features of the target page, the sequence of the key elements in the element prediction list is dynamically adjusted, and the optimized element prediction list can more accurately reflect the importance of the key elements used by different scenes or different users. And loading rendering resources of the first N target key elements in the optimized element prediction list to pre-render each target key element, so that each target key element can be preferentially rendered according to a pre-rendering result when entering the target page. Therefore, the time for the user to wait for loading the key elements is effectively shortened, and the response speed of page loading and the fluency of visual experience are improved.

Description

Technical Field

[0001] This application relates to the field of application system technology, and in particular to a page loading optimization method, apparatus, storage medium, and computer equipment. Background Technology

[0002] As internet applications increasingly embrace highly interactive and dynamic content design, users' expectations for page loading performance are constantly rising, and their demands for smooth visual experiences are becoming more stringent. Against this backdrop, LCP (Largest Contentful Paint), as a key indicator of webpage performance, directly impacts users' intuitive perception of page loading speed. Related research indicates that if LCP latency exceeds 2.5 seconds, the risk of user churn increases significantly.

[0003] Current optimization techniques, such as resource compression, CDN acceleration, and lazy loading, while improving overall page loading efficiency, generally lack the ability to specifically handle key LCP elements. These key elements typically include the large image on the first screen and the main title text, and their rendering process is affected by multiple factors, including resource loading and rendering congestion. Existing technical solutions mostly rely on developers manually marking key resources or optimizing based on static rules, making it difficult to adapt to dynamically changing page content and diverse user interaction scenarios, thus resulting in low page loading efficiency in practical applications. Summary of the Invention

[0004] The purpose of this application is to at least address one of the aforementioned technical deficiencies, particularly the fact that existing technologies often rely on developers manually marking key resources or optimizing based on static rules, which makes it difficult to adapt to dynamically changing page content and diverse user interaction scenarios, resulting in low page loading efficiency in practical applications.

[0005] Firstly, this application provides a page loading optimization method, the method comprising:

[0006] When the target page is accessed, obtain the predicted list of elements for the target page;

[0007] Based on the historical interaction events, page type, and content structure characteristics of the target page, the order of each key element in the element prediction list is dynamically adjusted to obtain an optimized element prediction list.

[0008] Load the rendering resources of the first N target key elements in the optimized element prediction list, and pre-render each target key element according to the rendering resources corresponding to each target key element to obtain the pre-rendering result.

[0009] Upon entering the target page, each key element of the target page is rendered preferentially based on the pre-rendering results.

[0010] In one embodiment, the process of generating the element prediction list includes:

[0011] Identify key elements in the target page;

[0012] Extract the element attributes of each key element, and calculate the importance score of each key element based on the element attributes of each key element. The element attributes include visual attributes, positional attributes, content attributes, and semantic attributes.

[0013] Based on the importance scores from highest to lowest, the key elements are sorted to obtain a list of predicted elements.

[0014] In one embodiment, the step of dynamically adjusting the order of key elements in the element prediction list based on the historical interaction events, page type, and content structure characteristics of the target page to obtain an optimized element prediction list includes:

[0015] Obtain the historical interaction events, page type, and content structure characteristics of the target page;

[0016] Based on the historical interaction events, page type, and content structure features, calculate the score correction amount for each key element in the element prediction list;

[0017] The importance scores of each key element in the element prediction list are adjusted based on the correction amount of each key element.

[0018] Based on the adjusted importance scores from high to low, the order of each key element in the element prediction list is adjusted to obtain an optimized element prediction list.

[0019] In one embodiment, the rendering resources for the first N target key elements in the loaded optimized element prediction list include:

[0020] Obtain the global rendering resources of the target page;

[0021] The top N key elements in the optimized element prediction list are identified as target key elements, and resources related to each target key element are extracted from the global rendering resources to determine the rendering resources for each target key element.

[0022] In one embodiment, the step of pre-rendering each target key element according to the rendering resources corresponding to each target key element to obtain a pre-rendering result includes:

[0023] Create a separate rendering context;

[0024] The DOM structure of each target key element is constructed in the rendering context, and the rendering resources of each target key element are injected into the rendering context.

[0025] Based on the DOM structure and rendering resources of each target element, the layout and drawing process of the rendering context is triggered to generate the visual output of each target key element.

[0026] Based on the visual output of each target key element, a pre-rendered result is generated.

[0027] In one embodiment, the step of preferentially rendering each target key element in the target page based on the pre-rendering result includes:

[0028] Obtain the visual output from the pre-rendered results;

[0029] During the rendering process of the target page, based on the visual output, the visual presentation of each key target element on the target page is completed first.

[0030] In one embodiment, the method further includes:

[0031] After rendering each target key element in the target page according to the pre-rendering result, the current page rendering of the target page is obtained;

[0032] The presentation effect of each target key element in the page is compared with the expected effect to obtain the comparison result. Based on the comparison result, the importance score calculation method applied in the generation process of the element prediction list is optimized.

[0033] Secondly, this application provides a page loading optimization device, the device comprising:

[0034] The list acquisition module is used to acquire a predicted list of elements of the target page when the target page is triggered.

[0035] The list adjustment module is used to dynamically adjust the order of each key element in the element prediction list based on the historical interaction events, page type and content structure characteristics of the target page, so as to obtain an optimized element prediction list.

[0036] The pre-rendering module is used to load the rendering resources of the first N target key elements in the optimized element prediction list, and pre-render each target key element according to the rendering resources corresponding to each target key element to obtain the pre-rendering result.

[0037] The page rendering module is used to render each target key element in the target page first based on the pre-rendering result when the target page is entered.

[0038] Thirdly, this application provides a storage medium storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the page loading optimization method as described in any of the above embodiments.

[0039] Fourthly, this application provides a computer device, including: one or more processors, and a memory;

[0040] The memory stores computer-readable instructions, and when the one or more processors execute the computer-readable instructions, they perform the steps of the page loading optimization method as described in any of the above embodiments.

[0041] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:

[0042] The page loading optimization method, apparatus, storage medium, and computer equipment provided in this application acquire an element prediction list for a target page when the page is accessed. This element prediction list is obtained by recording LCP key elements in the target page in order of importance, achieving accurate identification of key elements. Then, based on the target page's historical interaction events, page type, and content structure characteristics, the order of each key element in the element prediction list is dynamically adjusted. The optimized element prediction list can more accurately reflect the importance of key elements under different scenarios or user conditions. The rendering resources of the first N target key elements in the optimized element prediction list are loaded to pre-render each target key element, allowing for priority rendering of each target key element based on the pre-rendering results when the target page is accessed. This effectively reduces the time users spend waiting for LCP key elements to load, improving page loading response speed and the smoothness of the visual experience. Attached Figure Description

[0043] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0044] Figure 1 A flowchart illustrating a page loading optimization method provided in an embodiment of this application;

[0045] Figure 2A schematic diagram of a page loading optimization device provided in an embodiment of this application;

[0046] Figure 3 This is an internal structural diagram of a computer device provided in an embodiment of this application. Detailed Implementation

[0047] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0048] In one embodiment, this application provides a page loading optimization method. The following embodiments illustrate the application of this method to a front-end application system, hereinafter referred to as the system. Figure 1 As shown, this application provides a page loading optimization method, the method comprising:

[0049] S101: When the target page is triggered, obtain the predicted list of elements of the target page.

[0050] The element prediction list is obtained by recording the LCP key elements in the target page in order of importance. The LCP key elements refer to the visual elements that are predicted to become the largest content rendering targets during the loading process of the target page, that is, the elements that have a significant impact on the user's visual experience.

[0051] In this step, when a user triggers entry into the target page, the system retrieves a predicted list of elements corresponding to that target page. This predicted list is obtained by analyzing the structure and content of the target page and recording LCP key elements in order of importance. During execution, the system first identifies the structure of the target page, determines the LCP key elements contained within it, and sorts them according to their importance. This allows for subsequent page loading optimization based on LCP key elements, prioritizing content with the greatest impact on user experience and improving page loading efficiency. For example, on the homepage of a news website, the large image news and headline text on the first screen are usually marked as LCP key elements because these are the first elements that users focus on after entering the page.

[0052] Specifically, when obtaining the element prediction list for a target page, if there is no element prediction list for that target page, element prediction units can be generated by analyzing the structure and content of the target page. If there is a prediction list for that target page, it can be obtained directly.

[0053] S102: Based on the target page's historical interaction events, page type, and content structure characteristics, dynamically adjust the order of each key element in the element prediction list to obtain an optimized element prediction list.

[0054] Among these, historical interaction events refer to the collection of various actions performed by the current user when visiting the target page in the past. Page type refers to the function and content classification of the target page, such as a news page, an e-commerce product page, or a video playback page. Content structure characteristics refer to the layout, hierarchical relationship, and content attributes of elements in the target page.

[0055] When optimizing the element prediction list for a target page, the system can comprehensively consider historical interaction events, page type, and content structure characteristics to personalize the element prediction list, resulting in an optimized list. This dynamic adjustment allows the optimized list to more accurately reflect the importance of key elements in different scenarios or under different user conditions. This dynamic adjustment mechanism, which considers multiple factors, effectively covers diverse interaction scenarios and different users, improving page responsiveness and visual smoothness. For example, on the homepage of a news website, if users frequently click on the titles and images of a certain type of news, the system will increase the importance of these elements.

[0056] Furthermore, in the process of dynamically adjusting the order of key elements in the element prediction list based on the target page's historical interaction events, page type, and content structure characteristics, each key element can be evaluated based on historical interaction events, page type, and content structure characteristics, combined with pre-set quantification rules. The order of key elements in the element prediction list can then be adjusted based on the evaluation results. Alternatively, a pre-trained deep learning model can be used to learn the relationship between historical interaction events, page type, and content structure characteristics and the importance of each key element. The order of key elements in the element prediction list can then be adjusted based on the output of the deep learning model. This application does not impose specific limitations on this process.

[0057] S103: Load the rendering resources of the first N target key elements in the optimized element prediction list, and pre-render each target key element according to the rendering resources corresponding to each target key element to obtain the pre-rendering result.

[0058] Where N is a positive integer greater than zero. The target key element refers to an element that has a significant impact on visual perception. Rendering resources refer to all kinds of resources necessary for the visual display of the target key element, such as image resources, font resources, and style resources. The pre-rendered result refers to the intermediate visual representation of the target key element generated through a separate, offline rendering process before the official page rendering process begins. Its form is usually a quickly reusable bitmap cache or vector graphics fragment, along with the element's precise size and position information, so as to map and composite it with the corresponding DOM element in the official page.

[0059] In this step, the system first selects the top N key elements, i.e., the target key elements, based on the optimized element prediction list. For each target key element, the system loads its corresponding rendering resources, including images, text, CSS styles, and JavaScript. After loading, the system uses these resources to pre-render each target key element, generating a pre-rendered result.

[0060] For example, when a user enters an e-commerce product page, the system loads rendering resources for key elements such as the product main image, product name, and price based on an optimized list of predicted elements. Once these resources are loaded, the system pre-renders these elements, generating a pre-rendered result. When the e-commerce product page is officially loaded, the system can directly apply this pre-rendered result to quickly display key content.

[0061] S104: When entering the target page, render each target key element in the target page first based on the pre-rendering results.

[0062] In this step, when a user enters the target page, the system prioritizes rendering the key target elements based on the pre-rendered results. Specifically, when a user triggers a page load request, the system retrieves the previously pre-rendered results from the cache and quickly renders the key parts of the page according to these results. These key target elements are typically the content that users are most interested in, such as the main image, title text, and video cover images. This ensures that these key elements are displayed to the user first.

[0063] In this embodiment, upon triggering entry into the target page, a predicted list of elements for that target page is obtained. This predicted list is obtained by recording the LCP key elements of the target page in order of importance, achieving accurate identification of key elements. Subsequently, based on the target page's historical interaction events, page type, and content structure characteristics, the order of each key element in the predicted list is dynamically adjusted. The optimized predicted list more accurately reflects the importance of key elements under different scenarios or user conditions. The rendering resources of the first N target key elements in the optimized predicted list are loaded to pre-render each target key element, allowing for priority rendering of each target key element upon entry into the target page based on the pre-rendering results. This effectively reduces the time users spend waiting for LCP key elements to load, improving page loading response speed and the smoothness of the visual experience.

[0064] In one embodiment, the process of generating the element prediction list includes:

[0065] S1: Identify key elements in the target page.

[0066] S2: Extract the element attributes of each key element, and calculate the importance score of each key element based on the element attributes of each key element.

[0067] S3: Sort the key elements according to their importance scores from high to low to obtain a list of predicted elements.

[0068] Element attributes include visual attributes, positional attributes, content attributes, and semantic attributes. Importance scores quantify the importance of key elements in page visual loading. A higher importance score indicates a greater impact of the element on visual smoothness.

[0069] In this embodiment, by parsing the DOM tree and CSSOM tree of the target page, potential key elements within the viewport are identified, including image elements, video containers, and text blocks. Specifically, the layout size, position weight, and visibility index of each element can be calculated to identify key elements in the target page. Next, the element attributes of each key element are extracted. These attributes include multiple dimensions, and an importance score for each key element can be calculated based on these attributes. Finally, the key elements are sorted in descending order of importance score, and the resulting list is the element prediction list. By extracting element attributes and calculating importance scores, the system can quantify the importance of each element, thereby focusing on those parts that have a significant impact on the user's visual experience and improving the visual smoothness of the page.

[0070] Furthermore, when identifying key elements on a target page, the score for each element can be calculated across three dimensions: layout size, positional weight, and visibility. These scores are then weighted and summed to obtain the key score for each element. Finally, the key score of each element is compared to a preset score. If the key score is greater than the preset score, the corresponding element is identified as a key element, thus identifying key elements that occupy a large visual space on the target page or have a significant impact on the user's visual experience.

[0071] Specifically, when calculating the importance score of each key element, we can first calculate the score of the key element on each dimension's attribute, and then perform a weighted sum of the scores on each dimension's attribute to obtain the importance score of the key element. In an example, this process can be represented as follows:

[0072] A weighted scoring algorithm is used to rank key elements based on visual, location, content, and semantic attributes, generating a predicted list of elements. The weights of each attribute dimension are as follows:

[0073] (1) Visual attributes (weight 0.35): Calculate the percentage of the display area of ​​the element within the viewport and assign different scores according to the numerical range of the percentage of the display area.

[0074] (2) Position attribute (weight 0.25): add two points if it is an element in the upper half of the first screen, and add one point if it is an element in the center area of ​​the viewport.

[0075] (3) Content attributes (weight 0.20): Add one point if it is a rich media element such as an image or video.

[0076] (4) Semantic attributes (weight 0.20): Semantic importance is inferred from the HTML tag type.

[0077] Specifically, semantic attributes can be divided into primary semantic roles and secondary semantic roles, with the former earning two points and the latter one point. Primary semantic roles include main content containers (e.g., main, article, section), top-level headings (e.g., h1, h2), and key media containers (e.g., figure, picture, video). Secondary semantic roles include subheadings (e.g., h3, h4), navigation elements (e.g., nav, header), important list items (e.g., li), and interactive controls (e.g., button). In summary, the expression for calculating the importance score of each key element can be expressed as: Importance Score = (Visual Attribute × 0.35) + (Position Attribute × 0.25) + (Content Attribute × 0.20) + (Semantic Attribute × 0.20).

[0078] In one embodiment, the order of key elements in the element prediction list is dynamically adjusted based on the target page's historical interaction events, page type, and content structure characteristics to obtain an optimized element prediction list, including:

[0079] S1: Obtain the target page's historical interaction events, page type, and content structure characteristics.

[0080] S2: Based on historical interaction events, page type, and content structure characteristics, calculate the score correction amount for each key element in the element prediction list.

[0081] S3: Adjust the importance scores of each key element in the element prediction list based on the correction amount of each key element.

[0082] S4: Based on the adjusted importance scores from high to low, adjust the order of each key element in the element prediction list to obtain the optimized element prediction list.

[0083] Among them, the score correction amount refers to the quantitative value that adjusts the current importance score.

[0084] In this embodiment, the system can analyze users' historical interaction behavior on the target page, such as click frequency and dwell time, while identifying the page type (e.g., news page, e-commerce page, video page) and content structure (e.g., element layout, hierarchical relationship). Based on this information, the system calculates the rating correction for each key element. For example, if an element is frequently clicked by users in historical interactions, or is located at the top of the page, its rating correction might be positive, indicating that its importance needs to be adjusted upwards. Conversely, if an element is rarely noticed by users, or is located at the bottom of the page, its rating correction might be negative.

[0085] Next, the system adjusts the current importance scores of each key element in the element prediction list based on the calculated score correction amount. For example, a large image news item on the first screen of a news page may already have a high importance score, but if historical data shows that users have a very high click-through rate for this element, the system will further increase its importance score. Finally, the system sorts the key elements in the element prediction list from high to low according to the adjusted importance scores, resulting in an optimized element prediction list.

[0086] Furthermore, when calculating the score correction amount for each key element in the element prediction list based on historical interaction events, page type, and content structure features, a pre-trained score correction model can be used to determine the score correction amount for each key element. This score correction model is used to determine the score correction amount based on the target page's historical interaction events, page type, and content structure features, combined with the current importance score of each key element. In addition, the score correction model of this application can be obtained by training a pre-trained model using historical interaction events, page type, and content structure features as training samples, the score correction amount as sample labels, and a loss function. During training, training samples and their corresponding sample labels can be input into the pre-trained model for forward propagation, and the parameters of the pre-trained model can be adjusted using the loss function during backpropagation until the pre-trained model meets certain iteration conditions. The trained pre-trained model can then be used as the score correction model.

[0087] In one example, user interaction events can be identified through scroll depth and dwell analysis, click heatmap analysis, and input focus tracking. Scroll depth and dwell analysis records the duration of user stays in different areas of the page, with elements in areas of longer dwell time showing increased weight. Click heatmap analysis tracks the coordinate distribution of user clicks and touches, with key elements (LCPs) near high-frequency interaction areas showing increased weight. Input focus tracking monitors focus events on form elements such as input boxes, with elements related to input boxes that immediately gain focus after page load showing increased weight.

[0088] Understandably, by calculating the score correction amount for key elements based on the target page's historical interaction events, page type, and content structure characteristics, and then adjusting the order of key elements in the element prediction list, the system can more accurately reflect the importance of each key element in the actual user scenario. In this way, the system can dynamically adapt to user habits and page characteristics, ensuring that the most valuable content to the user is prioritized during page loading. This optimizes the page loading strategy, improving page loading efficiency and user experience.

[0089] In one embodiment, loading the rendering resources of the first N target key elements in the optimized element prediction list includes:

[0090] S1: Obtain the global rendering resources of the target page.

[0091] S2: Determine the top N key elements in the optimized element prediction list as target key elements, and extract resources related to each target key element from the global rendering resources to determine the rendering resources for each target key element.

[0092] Global rendering resources refer to the collection of all resources required during the loading and rendering of the target page, including HTML, CSS, JavaScript files, images, videos, etc.

[0093] In this embodiment, the system first acquires the global rendering resources of the target page, which are fundamental for the page to display and interact correctly. Next, based on the optimized element prediction list, the system identifies the top N key elements as target key elements. These target key elements are the content users are most interested in when entering the page and have a significant impact on visual smoothness. The system extracts resources related to these target key elements from the global rendering resources, ensuring that the rendering resources for each target key element are complete and available, so that these target key elements can be pre-rendered subsequently.

[0094] Specifically, during the pre-rendering process, only the minimum necessary style rules are loaded and applied. That is, when loading the rendering resources of each target key element, for CSS resources, only the minimum style rules that can preserve the page functionality are loaded to avoid blocking when loading the global CSS file.

[0095] In one embodiment, this method can also monitor resource loading behavior. Specifically, it uses the Performance Resource Timing API to monitor the loading progress of rendering resources and records resource size, response time, priority, and whether rendering is blocked during the monitoring process. If there are rendering-blocking resources, the impact of the resource on the rendering path is evaluated, and a resource loading optimization plan is generated based on this.

[0096] In one embodiment, based on the rendering resources corresponding to each target key element, pre-rendering is performed on each target key element to obtain a pre-rendering result, including:

[0097] S1: Create an independent rendering context.

[0098] S2: Construct the DOM structure for each target key element in the rendering context and inject the rendering resources for each target key element into the rendering context.

[0099] S3: Based on the DOM structure and rendering resources of each target element, trigger the layout and drawing process of the rendering context to generate the visual output of each target key element.

[0100] S4: Generate pre-rendered results based on the visual output of each target key element.

[0101] In this context, the rendering context refers to an independent rendering environment used to isolate and manage the rendering process of specific elements on a page, such as the Offscreen Canvas in a browser. The DOM structure refers to the Document Object Model structure of the target key elements. Visual output refers to the final visual content generated through the layout and drawing process of the rendering context.

[0102] In this embodiment, a separate rendering context is first created. This is an isolated environment specifically for handling the rendering of target key elements. Within the rendering context, the system constructs the DOM structure for each target key element. Next, the system injects the rendering resources for each target key element into the rendering context. These resources include images, CSS styles, JavaScript scripts, etc., ensuring that each target key element has complete resource support during pre-rendering.

[0103] Subsequently, the system triggers the layout and drawing process of the rendering context based on the DOM structure and rendering resources of each target key element. The layout phase determines the position and size of each target key element on the page, while the drawing phase generates the visual appearance of each target key element. Finally, the system generates the visual output of each target key element. Based on these visual outputs, the system generates a pre-rendered result, which can be cached in memory or local storage for quick display when the user enters the page.

[0104] In one embodiment, based on the pre-rendering results, each target key element in the target page is rendered preferentially, including:

[0105] S1: Obtain visual output from pre-rendered results.

[0106] S2: During the rendering process of the target page, based on the visual output, prioritize the visual presentation of each key element of the target page.

[0107] In this embodiment, visual output is obtained from the pre-rendered results, and the visual presentation of each key element of the target page is prioritized based on the visual output during the rendering process of the target page. This ensures that users can quickly see the most important content when entering the page, thereby improving the page loading speed and visual smoothness.

[0108] Specifically, when prioritizing the visual presentation of each key element on the target page, page rendering can be divided into multiple time-series stages. First, the rendering of each key element is completed, and then secondary content is rendered gradually. Visual transition effects are used to maintain a consistent user experience.

[0109] Furthermore, during the rendering process of the target page, it is also necessary to load rendering resources for other elements. In order to avoid delays caused by resource contention or repeated requests, a progressive loading or low-quality placeholder strategy can be implemented for image resources.

[0110] In one embodiment, the page loading optimization method further includes:

[0111] S1: After rendering each key element of the target page according to the pre-rendering results, obtain the current page rendering of the target page.

[0112] S2: Compare the presentation effect of each target key element in the page presentation with the expected effect, obtain the comparison result, and optimize the importance score calculation method applied in the element prediction list generation process based on the comparison result.

[0113] The expected effect refers to the anticipated results regarding the visual effects, layout, and interactive functions of the target key element on the target page. The comparison result refers to the analysis results obtained by comparing the actual presentation effect of the target key element with the expected effect, which may include information on visual differences, layout deviations, performance issues, etc.

[0114] In this embodiment, the system captures the current presentation of each key element on the page, including its visual appearance, layout, and interactive functions. Then, the system compares these actual presentations with preset expected effects. For example, it checks whether the size, color, and position of the key elements are consistent with design specifications, and whether the interactive functions are working properly. The comparison process can be automated using tools or scripts to generate detailed comparison results. Based on the comparison results, the system optimizes the importance scoring calculation method used in generating the element prediction list. For example, it can adjust the weights or score allocation in the importance scoring calculation process to optimize the importance scoring method. This dynamic adjustment and optimization strategy based on actual feedback ensures the best visual experience in different scenarios and reduces user churn caused by loading delays or presentation issues.

[0115] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages of other steps.

[0116] The page loading optimization apparatus provided in the embodiments of this application is described below. The page loading optimization apparatus described below can be referred to in correspondence with the page loading optimization method described above.

[0117] like Figure 2 As shown, this application provides a page loading optimization device 200, the device comprising:

[0118] The list acquisition module 201 is used to acquire the predicted list of elements of the target page when the target page is triggered.

[0119] The list adjustment module 202 is used to dynamically adjust the order of each key element in the element prediction list based on the historical interaction events, page type and content structure characteristics of the target page, so as to obtain an optimized element prediction list.

[0120] The pre-rendering module 203 is used to load the rendering resources of the first N target key elements in the optimized element prediction list, and pre-render each target key element according to the rendering resources corresponding to each target key element to obtain the pre-rendering result.

[0121] The page rendering module 204 is used to prioritize rendering each target key element in the target page based on the pre-rendering results when entering the target page.

[0122] In this embodiment, upon triggering entry into the target page, a predicted list of elements for that target page is obtained. This predicted list is obtained by recording the LCP key elements of the target page in order of importance, achieving accurate identification of key elements. Subsequently, based on the target page's historical interaction events, page type, and content structure characteristics, the order of each key element in the predicted list is dynamically adjusted. The optimized predicted list more accurately reflects the importance of key elements under different scenarios or user conditions. The rendering resources of the first N target key elements in the optimized predicted list are loaded to pre-render each target key element, allowing for priority rendering of each target key element upon entry into the target page based on the pre-rendering results. This effectively reduces the time users spend waiting for LCP key elements to load, improving page loading response speed and the smoothness of the visual experience.

[0123] In one embodiment, the inventory acquisition module includes:

[0124] The element recognition submodule is used to identify key elements in the target page;

[0125] The scoring calculation submodule is used to extract the element attributes of each key element and calculate the importance score of each key element based on the element attributes. The element attributes include visual attributes, positional attributes, content attributes, and semantic attributes.

[0126] The list generation submodule is used to sort each key element according to its importance score from high to low, and obtain a list of predicted elements.

[0127] In one embodiment, the inventory adjustment module includes:

[0128] The data acquisition submodule is used to acquire historical interaction events, page type, and content structure characteristics of the target page.

[0129] The correction calculation submodule is used to calculate the score correction for each key element in the element prediction list based on historical interaction events, page type, and content structure characteristics.

[0130] The scoring adjustment submodule is used to adjust the importance scores of each key element in the element prediction list based on the correction amount of each key element.

[0131] The list optimization submodule is used to adjust the order of each key element in the element prediction list according to the adjusted importance score from high to low, so as to obtain an optimized element prediction list.

[0132] In one embodiment, the pre-rendering module includes:

[0133] The resource acquisition submodule is used to acquire the global rendering resources of the target page;

[0134] The resource determination submodule is used to determine the top N key elements in the optimized element prediction list as target key elements, and extract the resources related to each target key element from the global rendering resources to determine the rendering resources for each target key element.

[0135] In one embodiment, the pre-rendering module includes:

[0136] The context creation submodule is used to create independent rendering contexts;

[0137] The resource injection submodule is used to build the DOM structure of each target key element in the rendering context and inject the rendering resources of each target key element into the rendering context.

[0138] The pre-rendering submodule is used to trigger the layout and drawing process of the rendering context based on the DOM structure and rendering resources of each target element, and generate the visual output of each target key element.

[0139] The results generation submodule is used to generate pre-rendered results based on the visual output of each target key element.

[0140] In one embodiment, the page rendering module includes:

[0141] The output acquisition submodule is used to obtain the visual output from the pre-rendered results;

[0142] The page rendering submodule is used to prioritize the visual presentation of each key element on the target page during the rendering process, based on the visual output.

[0143] In one embodiment, the page loading optimization apparatus further includes:

[0144] The page retrieval submodule is used to retrieve the current page rendering of the target page after rendering each target key element in the target page according to the pre-rendering results.

[0145] The comparison and optimization submodule is used to compare the presentation effect of each target key element in the page presentation with the expected effect, obtain the comparison result, and optimize the importance score calculation method applied in the element prediction list generation process based on the comparison result.

[0146] The division of modules in the above-described page loading optimization device is merely illustrative. In other embodiments, the page loading optimization device can be divided into different modules as needed to complete all or part of its functions. Each module in the above-described page loading optimization device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device in hardware form, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0147] In one embodiment, this application also provides a storage medium storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the page loading optimization method as described in any of the above embodiments.

[0148] In one embodiment, this application also provides a computer device storing computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the page loading optimization method as described in any of the above embodiments.

[0149] Indicatively, such as Figure 3 As shown, Figure 3 This is a schematic diagram of the internal structure of a computer device 300 provided in an embodiment of this application. The computer device 300 can be provided as a server. (Refer to...) Figure 3 The computer device 300 includes a processing component 302, which further includes one or more processors, and memory resources represented by memory 301 for storing instructions, such as application programs, that can be executed by the processing component 302. The application programs stored in memory 301 may include one or more modules, each corresponding to a set of instructions. Furthermore, the processing component 302 is configured to execute instructions to perform the page loading optimization method of any of the above embodiments.

[0150] The computer device 300 may also include a power supply component 303 configured to perform power management of the computer device 300, a wired or wireless network interface 304 configured to connect the computer device 300 to a network, and an input / output (I / O) interface 305. The computer device 300 may operate on an operating system stored in memory 301, such as Windows Server™, Mac OS X™, Unix™, Linux™, Free BSD™, or similar.

[0151] Those skilled in the art will understand that Figure 3The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0152] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising a…" does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element. In this document, the singular forms "a," "an," and "the" may also include the plural forms unless the context clearly indicates otherwise. It should also be understood that the terms “comprising / including” or “having” specify the presence of the stated features, wholes, steps, operations, components, parts or combinations thereof, but do not exclude the possibility of the presence or addition of one or more other features, wholes, steps, operations, components, parts or combinations thereof. Meanwhile, the term “and / or” as used in this specification includes any and all combinations of the associated listed items.

[0153] The various embodiments in this specification are described in a progressive manner. Each embodiment focuses on the differences from other embodiments. The various embodiments can be combined as needed, and the same or similar parts can be referred to each other.

[0154] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A page loading optimization method, characterized in that, The method includes: When the target page is accessed, obtain the predicted list of elements for the target page; Based on the historical interaction events, page type, and content structure characteristics of the target page, the order of each key element in the element prediction list is dynamically adjusted to obtain an optimized element prediction list. Load the rendering resources of the first N target key elements in the optimized element prediction list, and pre-render each target key element according to the rendering resources corresponding to each target key element to obtain the pre-rendering result. Upon entering the target page, each key element of the target page is rendered first based on the pre-rendering results.

2. The page loading optimization method according to claim 1, characterized in that, The process of generating the element prediction list includes: Identify key elements in the target page; Extract the element attributes of each key element, and calculate the importance score of each key element based on the element attributes of each key element. The element attributes include visual attributes, positional attributes, content attributes, and semantic attributes. Based on the importance scores from highest to lowest, the key elements are sorted to obtain a list of predicted elements.

3. The page loading optimization method according to claim 1, characterized in that, The optimized element prediction list is obtained by dynamically adjusting the order of key elements in the element prediction list based on the historical interaction events, page type, and content structure characteristics of the target page, including: Obtain the historical interaction events, page type, and content structure characteristics of the target page; Based on the historical interaction events, page type, and content structure features, calculate the score correction amount for each key element in the element prediction list; The importance scores of each key element in the element prediction list are adjusted based on the correction amount of each key element. Based on the adjusted importance scores from high to low, the order of each key element in the element prediction list is adjusted to obtain an optimized element prediction list.

4. The page loading optimization method according to claim 1, characterized in that, The rendering resources for the first N target key elements in the optimized element prediction list include: Obtain the global rendering resources of the target page; The top N key elements in the optimized element prediction list are identified as target key elements, and resources related to each target key element are extracted from the global rendering resources to determine the rendering resources for each target key element.

5. The page loading optimization method according to claim 1, characterized in that, The step of pre-rendering each target key element according to the rendering resources corresponding to each target key element to obtain the pre-rendering result includes: Create a separate rendering context; The DOM structure of each target key element is constructed in the rendering context, and the rendering resources of each target key element are injected into the rendering context. Based on the DOM structure and rendering resources of each target element, the layout and drawing process of the rendering context is triggered to generate the visual output of each target key element. Based on the visual output of each target key element, a pre-rendered result is generated.

6. The page loading optimization method according to claim 1, characterized in that, The step of prioritizing the rendering of each target key element in the target page based on the pre-rendering result includes: Obtain the visual output from the pre-rendered results; During the rendering process of the target page, based on the visual output, the visual presentation of each key target element on the target page is completed first.

7. The page loading optimization method according to any one of claims 1 to 6, characterized in that, The method further includes: After rendering each target key element in the target page according to the pre-rendering result, the current page rendering of the target page is obtained; The presentation effect of each target key element in the page is compared with the expected effect to obtain the comparison result. Based on the comparison result, the importance score calculation method applied in the generation process of the element prediction list is optimized.

8. A page loading optimization device, characterized in that, The device includes: The list acquisition module is used to acquire a predicted list of elements of the target page when the target page is triggered. The list adjustment module is used to dynamically adjust the order of each key element in the element prediction list based on the historical interaction events, page type and content structure characteristics of the target page, so as to obtain an optimized element prediction list. The pre-rendering module is used to load the rendering resources of the first N target key elements in the optimized element prediction list, and pre-render each target key element according to the rendering resources corresponding to each target key element to obtain the pre-rendering result. The page rendering module is used to render each target key element in the target page first based on the pre-rendering result when the target page is entered.

9. A storage medium, characterized in that: The storage medium stores computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the page loading optimization method as described in any one of claims 1 to 7.

10. A computer device, characterized in that, include: One or more processors, and memory; The memory stores computer-readable instructions that, when executed by the one or more processors, perform the steps of the page loading optimization method as described in any one of claims 1 to 7.

Images