A method and system for optimizing web page access performance

Abstract

The present invention discloses a method and system for optimizing web page access performance, the method comprising: identifying user data and web page data, and dividing CSS blocks in the web page data according to the user data; constructing an access habit model, and predicting user operation relationships according to the user data based on the access habit model; dividing the loading strategy of CSS blocks based on the user operation relationship, and dynamically compressing the CSS blocks; parsing and rendering the CSS blocks to complete web page loading. Divide the CSS block loading strategy according to the user access habits and operation relationships. Predict the user operation path through behavioral analysis, dynamically load the CSS blocks of the area that the user is about to visit, effectively reduce the first loading time, and can also monitor user behavior through a delayed loading strategy. When the user is about to enter an unvisited area, trigger the parsing and rendering of the CSS blocks in the area to ensure that when the user scrolls to the corresponding position, the style of the page has been rendered.

Description

Technical Field

[0001] The present invention relates to the technical field of web page loading, and in particular to a web page access performance optimization method and system. Background Art

[0002] In current Internet applications, the access speed and loading performance of web pages directly affect the user experience and retention rate. However, as web content becomes increasingly rich and complex, web performance optimization faces multiple technical problems. Especially in terms of CSS resource loading, the traditional CSS loading method usually provides complete style resources in the form of integrated files, resulting in the following technical problems: The first loading time is too long: Since CSS files often contain the style rules of the entire page, the web page needs to download and parse a large number of style files when it is first loaded, which increases the loading time of the page. Especially on mobile terminals or in low-speed network environments, fully loading CSS files will significantly extend the display time of the web page and affect the user experience. Redundant resource consumption: The traditional CSS file loading method cannot effectively identify user behavior and preferences. Even if a large number of style rules are not used on the current page, they are still downloaded and parsed. Especially in multi-region, content-rich pages, the page will load CSS files for all regions, regardless of whether the user visits these regions, resulting in a waste of bandwidth and system resources. Summary of the invention

[0003] In view of this, the present invention proposes a method and system for optimizing page access performance, which can realize block-based CSS loading and on-demand loading combined with user preference recognition, and can realize fast style loading. The present invention provides the following technical solutions:

[0004] A method for optimizing web page access performance, the method comprising: identifying user data and web page data, and dividing CSS blocks in the web page data according to the user data; building an access habit model, and predicting user operation relationships according to the user data based on the access habit model; dividing the loading strategy of CSS blocks based on the user operation relationship, and dynamically compressing the CSS blocks; parsing and rendering the CSS blocks to complete web page loading.

[0005] Optionally, the user data includes user historical access behavior data, user current access device, current browser information, and the web page data includes a CSS style sheet;

[0006] Optionally, the method for dividing CSS blocks in web page data according to user data includes: determining the loading style of the web page according to the user's current access device; dividing the CSS blocks according to the loading style. Matching multiple areas of the loading style; the CSS blocks corresponding to each area of ​​the loading style include all CSS rules related to the area;

[0007] Optionally, the method of constructing an access habit model and predicting user operation relationships based on the access habit model according to user data includes: dividing the user's historical access behavior data into regional access frequency, regional residence time and regional access link; constructing an access habit model based on a machine learning algorithm; inputting the user's historical access behavior data into the access habit model to divide the user into corresponding types; predicting the user's next operation based on the access habit model and the user's current operation;

[0008] Optionally, the method for dividing the loading strategy of CSS blocks based on the user operation relationship and dynamically compressing the CSS blocks includes: obtaining the area corresponding to the user's next operation according to the operation relationship; identifying the CSS blocks in the area, and selecting on-demand loading or full loading according to the resource content of the CSS blocks; when the resource content of the CSS blocks is a whole, selecting the full loading strategy, and compressing all the CSS blocks; when the resource content of the CSS blocks is a combination, selecting the on-demand loading strategy, and dividing the resource content of the CSS blocks into core layout styles, basic styles and decorative styles; extracting and compressing the core layout style rules; after triggering the core layout style, extracting and compressing the basic style rules and decorative style rules;

[0009] Optionally, the method of parsing and rendering CSS blocks to complete web page loading includes: reading dynamically compressed CSS blocks; parsing the rule structure of the CSS blocks to extract CSS selectors, attributes, values ​​and media queries, and creating CSSOM; matching the style rules in the CSS blocks with the page through the selector rules defined in the CSSOM, and completing style loading by identifying the priority rules in the CSS blocks; rendering the loaded style to complete the loading of the web page.

[0010] The present invention further discloses a web page access performance optimization system, including: a CSS block module, used to identify user data and web page data, and to block CSS in the web page data according to the user data; a model construction module, used to build an access habit model, and predict user operation relationships according to user data based on the access habit model; a CSS block dynamic compression module, used to divide the loading strategy of CSS blocks based on user operation relationships, and dynamically compress CSS blocks; a web page loading module, used to parse and render CSS blocks to complete web page loading.

[0011] The present invention further discloses a computer-readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the web page access performance optimization method is implemented.

[0012] The present invention further discloses an electronic device, comprising a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned web page access performance optimization method when executing the program.

[0013] The present invention further discloses an electronic device, comprising a computer program, wherein the computer program implements the above-mentioned web page access performance optimization method when executed by a processor.

[0014] According to the technical solution of the present invention, a strategy for dividing CSS block loading according to user access habits and operation relationships is proposed. The user operation path is predicted through behavioral analysis, and the CSS blocks of the area that the user is about to visit are dynamically loaded, which effectively reduces the first loading time. It is also possible to monitor user behavior through a delayed loading strategy. When the user is about to enter an unvisited area, the parsing and rendering of the CSS blocks in the area are triggered to ensure that the style of the page has been rendered when the user scrolls to the corresponding position. At the same time, the blocks are gradually parsed according to priority, so that the key parts of the page are displayed faster and the response speed of dynamic interaction is optimized. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] For the purpose of illustration and not limitation, the present invention is now described in conjunction with the embodiments of the present invention and the accompanying drawings, in which:

[0016] Figure 1 It is a flowchart of a method for optimizing web page access performance in an embodiment of the present invention;

[0017] Figure 2 is a structural diagram of a web page access performance optimization system in an embodiment of the present invention;

[0018] Figure 3 It is a schematic diagram of the structure of an electronic device in an embodiment of the present invention. DETAILED DESCRIPTION

[0019] In order to enable those skilled in the art to better understand the solution of the present invention, the technical solution in the implementation of the present invention will be clearly and completely described below in conjunction with the drawings in the implementation of the present invention. Obviously, the described implementation is only a part of the implementation of the present invention, not all of the implementations. Based on the implementation of the present invention, all other implementations obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0020] It should be noted that the terms "first", "second", etc. in the specification of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so as to describe the embodiments of the present invention described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0021] In the present invention, the directions or positional relationships indicated by the terms "upper", "lower", "left", "right", "front", "back", "top", "bottom", "inner", "outer", "middle", "vertical", "horizontal", "lateral", "longitudinal" and the like are based on the directions or positional relationships shown in the drawings. These terms are mainly used to better describe the present invention and its embodiments, and are not used to limit the indicated devices, elements or components to have a specific direction, or to be constructed and operated in a specific direction.

[0022] In addition, some of the above terms may be used to express other meanings in addition to indicating orientation or positional relationship. For example, the term "on" may also be used to express a certain dependency or connection relationship in some cases. For those skilled in the art, the specific meanings of these terms in the present invention can be understood according to the specific circumstances. In addition, the term "plurality" should mean two or more than two.

[0023] It should be noted that, in the absence of conflict, the embodiments of the present invention and the features in the embodiments can be combined with each other. The embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

[0024] refer to Figure 1 This embodiment discloses a method for optimizing web page access performance, the method comprising:

[0025] S100: Identify user data and web page data, and divide CSS in the web page data into blocks according to the user data.

[0026] When a user accesses a web page, the user's relevant data can be obtained through the use record of the terminal device or the user account, which may include: user historical access behavior data, user's current access device, current browser information, etc. Web page data includes: CSS style sheet, HTML structure data, JavaScript data indexed by CSS style sheet, media query, images, icons and other resource information directly associated with CSS, and page metadata. After obtaining user data and web page data, the loading style of the web page is determined according to the user's current access device. For example, the user's access device can be a mobile phone, tablet, PC, etc. Different devices need to load different web page styles to adapt to the display area of ​​the device.

[0027] According to the loading style, the CSS is divided into blocks to match multiple areas of the loading style. Specifically, different functional areas in the page are identified according to the HTML structure data and the CSS style sheet in the web page data, such as the top navigation bar, sidebar, content area, bottom area, etc., and independent CSS blocks are divided for each area according to the CSS style sheet, such as header.css, sidebar.css, etc. The CSS block corresponding to each area of ​​the loading style includes all CSS rules related to the area, and does not contain styles of other areas. In this way, while ensuring the integrity of the loading of the regional style, the volume of the CSS block is reduced, the redundancy is reduced, and the loading speed of the CSS block is improved. On the basis of dividing the CSS blocks according to the loading style, each CSS block is further divided. Exemplarily, the CSS block is divided into a core layout style, a basic style, and a decorative style, wherein the core layout style is used to define the basic layout and structure (such as width, height, positioning, etc.) of the corresponding area, which is used for the first loading, and the core layout style ensures that the page frame structure is presented earliest. The basic style is used to define text, background color, icons, etc., optimize the presentation of the main content of the area, and the basic style is loaded after the core layout is rendered. Decorative styles contain visual effects (such as animation, shadows, gradients, etc.), which are placed in lazy loading to ensure the initial display speed of the page. In this way, the page content is displayed immediately after the core style and basic style are loaded, and the loading of decorative styles will not affect the basic display of the page structure.

[0028] S200: construct an access habit model, and predict user operation relationships based on the access habit model and user data. Specifically: divide the user data collected in step S100 into:

[0029] Area access frequency: record the user's access frequency in each area of ​​the page, count which areas are visited most frequently by users, and use this to identify key areas. For example, when a user browses a document through a web page, he needs to complete the page change operation through one side of the display area. When changing pages, the page turning style needs to be loaded. Therefore, the activation frequency of the CSS blocks corresponding to the two sides of the display area is significantly higher than that of other areas. Therefore, the two sides of the screen can be used as key areas, and the loading of the corresponding CSS blocks is significantly better than that of other areas. After activating a CSS block once, the CSS block should be loaded in advance according to the frequency data for the next activation.

[0030] Area dwell time: records the average dwell time of users in each area of ​​the page, reflecting the degree of user attention to the area. It can assist in identifying key areas and predict the loading of CSS blocks.

[0031] Regional access link: records the user's access path and operation sequence between different regions to help predict the user's next operation.

[0032] Feature extraction is completed from the above user data, specifically as follows: regional priority, operation mode, and behavior timing features. Among them, the regional priority is to calculate the priority of each area based on the access frequency and residence time. The higher the regional priority, the more the area needs to be loaded in advance. The operation mode is to extract the typical operation path of the user on the page to form an operation mode (such as "navigating from the top to the content area and then to the bottom"). The behavior timing feature is to record the time sequence of the user's entry into each area to capture the time characteristics of the operation link. And use the above feature data as the model input. Further, a machine learning algorithm is selected and the access habit model is trained according to the user's feature data. In this embodiment, a statistical naive Bayes algorithm is selected to predict the user's operation path based on the user's historical access frequency. By counting the access frequency and link relationship of each area, model training can be quickly realized. A time-based hidden Markov model (HMM) is selected to analyze the user's operation sequence and time dependency to predict the user's next operation area. A deep learning algorithm is selected to capture the nonlinear timing characteristics of the user's access path in complex scenarios with large data volumes, which can be RNN (recurrent neural network) or LSTM (long short-term memory network). The constructed access habit model can generate predictions of user behavior on the page, including: operation prediction, which is used to predict the user's next operation path or access area. Block priority division, which is used to dynamically adjust the loading order of CSS blocks according to the prediction results, load high-priority blocks in advance, and load low-priority areas on demand. Trigger dynamic loading, which is used to load the CSS blocks of the area that the user is about to visit in combination with the prediction results to ensure that the page is gradually displayed in full as the user operates. This access habit model can achieve: predictive loading: through the prediction of the access habit model, unnecessary style loading is reduced and bandwidth consumption is reduced; improve user experience: the dynamic loading strategy based on user behavior improves the response speed of the page and improves the first screen presentation effect; adaptive optimization: as user data accumulates, the access habit model can be continuously adaptively optimized to make the page loading strategy more and more accurate and efficient.

[0033] S300: Divide the loading strategy of CSS blocks based on the user operation relationship, and dynamically compress the CSS blocks. Specifically:

[0034] According to the operation relationship, the area corresponding to the user's next operation is obtained, and the priority of the next operation area is increased, and the CSS block corresponding to the area is set to a state to be loaded. Further identify the CSS block of the area, and select on-demand loading or full loading according to the resource content of the CSS block; when the resource content of the CSS block is a whole, select the full loading strategy to ensure the integrity of the style, and compress all the CSS blocks; when the resource content of the CSS block is a combination, select the on-demand loading strategy, and divide the resource content of the CSS block into core layout style, basic style and decorative style. Further, extract the core layout style rules and compress them. For example, extract the core style used to define the structure and layout in the target area, and compress this part with a high compression rate to ensure the fast loading of the layout style; after triggering the core layout style, extract the basic style rules and decorative style rules and compress them, wherein the decorative style is marked as lazy loading, and when the user operation is triggered, the decorative style is compressed and loaded to reduce the initial loading burden. For the compression method, this implementation method selects an adaptive compression strategy for the content characteristics of different CSS blocks. For example, high-frequency usage rules of basic styles use lossless compression, while decorative styles use a higher compression ratio to reduce network overhead. Also, when low network bandwidth or user device limitations are detected, the CSS file size is further reduced by increasing the compression rate or using a delayed loading strategy. After the CSS blocks are compressed, the loaded CSS blocks are cached in the user's device to avoid repeated downloads and increase the loading speed of subsequent visits. When there are significant changes in web page content or user behavior, the compression strategy is dynamically updated to automatically replace the relevant CSS blocks in the cache to ensure the latest style.

[0035] S400: Parse and render CSS blocks to complete web page loading. Specifically:

[0036] Read dynamically compressed CSS chunks;

[0037] Parse the rule structure of CSS blocks to extract CSS selectors, properties, values, and media queries, and create CSSOM, wherein each selector is extracted from the CSS block, its level and scope are identified, and the CSS rules associated with the selector are recorded. The properties and values ​​in each style rule are parsed to ensure that the style definition meets the basic requirements of page rendering. On different devices or screen sizes, media queries will affect the style selection. Parse the media query conditions and create alternative style paths for rendering on different devices. Build the CSSOM structure based on the parsing results. As a hierarchical tree, CSSOM nests each CSS selector and rule in its scope as an object for subsequent efficient search and matching.

[0038] Furthermore, through the selector rules defined in CSSOM, the style rules in the CSS block are matched with the page, and the style loading is completed by identifying the priority rules in the CSS block. Specifically, the DOM (Document Object Model) is introduced, and each selector rule in the CSSOM will be matched with the page elements in the DOM (Document Object Model) in turn. DOM represents the structural hierarchy of the page. After parsing the CSS selector rules, the system will traverse the elements in the DOM and apply the corresponding styles one by one according to the CSS rules to ensure that the style of the page is consistent on different operations or devices. When multiple CSS rules act on the same element, the final applied style is determined according to the CSS priority algorithm (such as inline style>ID selector>class selector>tag selector). For selectors with the same priority, the CSS cascading order rule is followed, that is, the later defined style overrides the previous style, thereby ensuring the correct visual effect. For example, a web page element needs to apply two style rules, where the first style rule defines the text color as blue and the font size as 16 pixels, and the second rule defines the specified color as red. Then, in CSS, if the priorities are the same, the browser will apply the style rule defined later in the CSS cascading order to overwrite the previous rule. Therefore, the text color will eventually appear red, while the font size remains at 16 pixels in the first rule. The above solution completes the loading of the style.

[0039] Render the loaded style. When rendering different page styles, different rendering steps and optimization methods will be used. The exemplary public rendering method of this embodiment is as follows: When rendering different page styles, different rendering steps and optimization methods will be used. The exemplary public rendering method of this embodiment is as follows: Style application: Apply the matched style rules to the page elements to adjust the appearance and layout of the elements. Rearrangement and redrawing: Trigger the rearrangement and redrawing operations of the page after the style is applied to ensure that the position and appearance of the page elements are updated in real time according to the rules. Optimization of delayed rendering: For low-priority CSS blocks (such as decorative styles), lazy loading rendering is performed after the main content of the page is rendered to reduce the resource usage of the first load and improve the user experience to complete the loading of the web page. The loading of the web page is completed through the above operations.

[0040] In summary, the present invention can significantly reduce the size of the CSS file loaded for the first time by dividing the CSS into blocks and loading them on demand, and dividing the CSS into blocks on demand based on the page area and user access habits. The on-demand loading strategy also effectively reduces unnecessary resource consumption, making the page load faster. The personalized access habit model constructed at the same time can predict the user's operation path, preload CSS styles for high-frequency access areas, reduce latency, and improve the response speed of the page, thereby providing a better user experience. A dynamic compression strategy is adopted to achieve efficient and adaptive CSS compression based on the CSS block content, loading timing and user device performance. By selecting the appropriate compression level, the loading of CSS is made lighter, ensuring compatibility in different network environments and devices. With the help of delayed loading and caching mechanisms, rapid loading of subsequent visits is achieved, network requests and data transmission are reduced, and the loading speed and user experience during repeated visits are improved.

[0041] refer to Figure 2 This embodiment further discloses a web page access performance optimization system, including:

[0042] The CSS block module 21 is used to identify user data and web page data, and to block the CSS in the web page data according to the user data; it is also used to determine the loading style of the web page according to the user's current access device; block the CSS according to the loading style to match multiple areas of the loading style; the CSS block corresponding to each loading style area includes all CSS rules related to the area.

[0043] The model building module 22 is used to build an access habit model and predict user operation relationships based on the access habit model according to user data; it is also used to divide the user's historical access behavior data into regional access frequency, regional residence time and regional access link; build an access habit model based on a machine learning algorithm; input the user's historical access behavior data into the access habit model to divide the user into corresponding types; based on the access habit model and the user's current operation, predict the user's next operation.

[0044] The CSS block dynamic compression module 23 is used to divide the loading strategy of CSS blocks based on the user operation relationship and dynamically compress the CSS blocks; it is also used to obtain the area corresponding to the user's next operation according to the operation relationship; identify the CSS blocks in the area, and select on-demand loading or full loading according to the resource content of the CSS blocks; when the resource content of the CSS blocks is a whole, select the full loading strategy and compress all the CSS blocks; when the resource content of the CSS blocks is a combination, select the on-demand loading strategy and divide the resource content of the CSS blocks into core layout style, basic style and decorative style; extract the core layout style rules and compress them; after triggering the core layout style, extract the basic style rules and decorative style rules and compress them.

[0045] The web page loading module 24 is used to parse and render the CSS blocks to complete the web page loading; it is also used to read the dynamically compressed CSS blocks; parse the rule structure of the CSS blocks to extract the CSS selectors, attributes, values ​​and media queries, and create the CSSOM; match the style rules in the CSS blocks with the page through the selector rules defined in the CSSOM, and complete the style loading by identifying the priority rules in the CSS blocks; render the loaded style to complete the loading of the web page.

[0046] This embodiment further discloses a computer program product, including a computer program, which implements the above-mentioned web page access performance optimization method when executed by a processor.

[0047] Figure 3 A schematic diagram of the physical structure of an electronic device provided in an embodiment of the present invention, such as Figure 3 As shown, the electronic device 50 includes: a processor 501 (processor), a memory 502 (memory) and a bus 503;

[0048] The processor 501 and the memory 502 communicate with each other via the bus 503 ; the processor 501 is used to call program instructions in the memory 502 to execute the methods provided by the above-mentioned method implementation methods.

[0049] This embodiment provides a non-transitory computer-readable storage medium, which stores computer instructions. The computer instructions enable a computer to execute the methods provided by the above-mentioned method embodiments.

[0050] A person skilled in the art can understand that all or part of the steps for implementing the above-mentioned method implementation method can be completed by hardware related to program instructions, and the aforementioned program can be stored in a computer-readable storage medium, which, when executed, executes the steps of the above-mentioned method implementation method; and the aforementioned storage medium includes: ROM, RAM, magnetic disk or optical disk, etc., various storage media that can store program codes.

[0051] The device implementation described above is merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, i.e., they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present implementation scheme. Those of ordinary skill in the art may understand and implement it without creative effort.

[0052] Through the description of the above implementation modes, those skilled in the art can clearly understand that each implementation mode can be implemented by means of software plus a necessary general hardware platform, or of course by hardware. Based on such an understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a magnetic disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods of each implementation mode or some parts of the implementation mode.

[0053] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for optimizing web page access performance, characterized in that: The method comprises: Identifying user data and web page data, and dividing CSS in the web page data into blocks according to the user data, including: determining a loading style of the web page according to the user's current access device; dividing the CSS into blocks according to the loading style to match multiple areas of the loading style; the CSS block corresponding to each area of ​​the loading style includes all CSS rules related to the area; Build an access habit model and predict user operation relationships based on user data based on the access habit model; Divide the loading strategy of CSS blocks based on the user operation relationship and dynamically compress the CSS blocks, including: obtain the area corresponding to the user's next operation according to the operation relationship; identify the CSS blocks in the area, and select on-demand loading or full loading according to the resource content of the CSS blocks; when the resource content of the CSS blocks is a whole, select the full loading strategy and compress all the CSS blocks; when the resource content of the CSS blocks is a combination, select the on-demand loading strategy and divide the resource content of the CSS blocks into core layout styles, basic styles and decorative styles; extract the core layout style rules and compress them; after the core layout style is triggered, extract the basic style rules and decorative style rules and compress them; Parse and render CSS chunks to complete page loading.

2. The web page access performance optimization method according to claim 1, characterized in that: The user data includes the user's historical access behavior data, the user's current access device, and current browser information, and the web page data includes a CSS style sheet.

3. The web page access performance optimization method according to claim 2, characterized in that: The method of constructing an access habit model and predicting user operation relationships based on the access habit model and user data includes: Divide the user's historical access behavior data into regional access frequency, regional stay time, and regional access links; Build access habit models based on machine learning algorithms; Input the user's historical access behavior data into the access habit model to classify users into corresponding types; Predict the user's next action based on the access habit model and the user's current action.

4. The web page access performance optimization method according to claim 3, characterized in that: The method of parsing and rendering CSS blocks to complete web page loading includes: Read dynamically compressed CSS chunks; Parse the rule structure of CSS chunks to extract CSS selectors, properties, values, and media queries, and create a CSSOM; Match the style rules in the CSS block with the page through the selector rules defined in the CSSOM, and complete the style loading by identifying the priority rules in the CSS block; Render the loaded style to complete the loading of the web page.

5. A web page access performance optimization system, characterized in that: include: The CSS block module is used to identify user data and web page data, and to block the CSS in the web page data according to the user data, including: determining the loading style of the web page according to the user's current access device; dividing the CSS into blocks according to the loading style to match multiple areas of the loading style; the CSS block corresponding to each area of ​​the loading style includes all CSS rules related to the area; A model building module is used to build an access habit model and predict user operation relationships based on the access habit model and user data; The CSS block dynamic compression module is used to divide the loading strategy of CSS blocks based on the user operation relationship and dynamically compress the CSS blocks, including: obtaining the area corresponding to the user's next operation according to the operation relationship; identifying the CSS blocks in the area, and selecting on-demand loading or full loading according to the resource content of the CSS blocks; when the resource content of the CSS blocks is a whole, selecting the full loading strategy and compressing all the CSS blocks; when the resource content of the CSS blocks is a combination, selecting the on-demand loading strategy and dividing the resource content of the CSS blocks into core layout styles, basic styles and decorative styles; extracting and compressing the core layout style rules; after triggering the core layout style, extracting and compressing the basic style rules and decorative style rules; The web page loading module is used to parse and render CSS blocks to complete web page loading.

6. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

7. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 4 is implemented.

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

Images