Intelligent responsive engine layout method and system

Abstract

The present invention discloses an intelligent responsive engine layout method and system. The method introduces a machine learning framework, analyzes massive web page style data, extracts characteristic patterns, constructs a layout generator, designs an intelligent image processing module, and dynamically adjusts the image size to ensure clarity while reducing the size. The method also creates an adaptive loading mechanism to optimize resource request priority and improve loading efficiency based on device performance. The method also combines real-time monitoring feedback to continuously tune the algorithm and enhance overall performance.

Description

Technical Field

[0001] The present invention relates to the field of electromechanical equipment, and in particular to an intelligent responsive engine layout method and system. Background Art

[0002] With the widespread adoption of mobile internet, users are accessing websites in a diverse range of ways. From desktops and laptops to tablets, smartphones, and even wearable devices, screen sizes and resolutions vary significantly. Traditional fixed-width layouts no longer meet the requirements for multi-terminal compatibility. Responsive web design has emerged, allowing page elements to automatically adjust their layout as the container size changes, ensuring visual consistency and functional integrity on any device. However, existing technologies have the following drawbacks: They require manual programming of numerous breakpoint rules, resulting in high maintenance costs; layout adjustments are inflexible and have limited adaptability to different device characteristics; support for irregular screen sizes, such as those with display devices of certain specific ratios, is poor; and image loading strategies are limited, impacting loading speed and resource consumption.

[0003] In summary, an intelligent responsive engine layout method and system are needed to address the deficiencies in the existing technology. Summary of the Invention

[0004] In view of the deficiencies in the prior art, the present invention provides an intelligent responsive engine layout method and system, aiming to solve the above problems.

[0005] To achieve the above objectives, the present invention provides the following technical solution: an intelligent responsive engine layout method and system, comprising the following steps:

[0006] Step S1: Data collection, building a large-scale database containing various types of web design samples and recording detailed device information;

[0007] Step S2: Data preprocessing: applying natural language processing and computer vision techniques to parse HTML / CSS syntax structures and extract key layout attributes and semantic information;

[0008] Step S3: Algorithm construction, using convolutional neural networks and recurrent neural networks to build a composite model, through multiple iterative training and comprehensive score optimization;

[0009] Step S4: Testing and calibration: Conduct multiple rounds of testing on mainstream global device combinations in a simulated environment and record performance. Quantify real user experience and incorporate it into the model weight adjustment process.

[0010] Step S5: Dynamically adjust the strategy to instantly generate a personalized layout script through the collaboration of intelligent algorithms for dynamic component optimization, responsive logic injection, intelligent detection mechanisms, and efficient loading strategies;

[0011] Step S6: Performance monitoring and upgrading, integrating a real-time monitoring module to monitor website performance and automatically handle exceptions, while regularly collecting and analyzing operational data to update the model.

[0012] Optionally, the algorithm in step S3 is constructed in the following manner:

[0013] Step A1: By calculating the weighted sub-indicators of element spacing rationality, element proportion coordination, and page blank area ratio, the deviation of each indicator is quantified using the Euclidean distance formula and aspect ratio difference, and their weighted summation is used to obtain the comprehensive layout rationality index L;

[0014] Step A2: Calculate the weighted sub-indicators of image loading time, script loading time, and first screen rendering time, and sum them to obtain the loading speed indicator V;

[0015] Step A3: quantify the sub-indicators of page layout aesthetics, interactive operation convenience, and content display completeness through user ratings, and sum the weighted sub-indicators to calculate the user satisfaction index U;

[0016] Step A4: The comprehensive layout rationality index L, the loading speed index V, and the user satisfaction index U are weighted and summed according to certain weights to obtain a comprehensive score S, which is used as a comprehensive indicator for evaluating model performance.

[0017] Optionally, the comprehensive layout rationality index L in step A1 is calculated in the following manner:

[0018] L=W1S1+W2S2+ W3S3,W1+ W2+ W3=1,

[0019] ,

[0020] ,

[0021] S3=A1 / A0;

[0022] Where S1 is the rationality of element spacing, S2 is the coordination of element proportions; S3 is the proportion of blank area on the page, n is the number of elements on the page, d ij is the actual distance between element i and element j, d ij0 is the standard spacing, m is the number of main elements, r i is the actual aspect ratio of element i, r i0 is the ideal aspect ratio, A1 is the blank area of ​​the page, A0 is the total area, and W1, W2, and W3 are the weights of S1, S2, and S3 respectively.

[0023] Optionally, the speed index V is loaded in step A2 in the following manner:

[0024] V=W4T1+W5T2+ W6T3,W4+ W5+ W6=1,

[0025] , ;

[0026] Where T1 is the image loading time, T2 is the script loading time, T3 is the first screen rendering time, W4, W4, and W6 are the weights of T1, T2, and T3 respectively, p is the number of images in the page, q is the number of scripts in the page, and t 1i is the loading time of the i-th picture, t 2j is the loading time of the jth script.

[0027] Optionally, the user satisfaction index U in step A3 is obtained by:

[0028] U=W7A - +W8I - +W9C - , W7+ W8+ W9=1,

[0029] Where A - is the average score of the page layout aesthetics, I - is the average score of the convenience of interactive operation, C - The average score of content display completeness is A for W7, W8 and W9 respectively. - , I - 、C - The weight of .

[0030] Optionally, the comprehensive score S in step A4 is calculated in the following manner:

[0031] S=W L L+W V V+W U U, W L +W V +W U =1,

[0032] Where L is the comprehensive layout rationality index, V is the loading speed index, and U is the user satisfaction index. L 、W V 、W U They are the weights of the comprehensive layout rationality index L, loading speed index V and user satisfaction index U respectively.

[0033] Optionally, the dynamic adjustment strategy in step S5 is performed in the following manner:

[0034] Step B1: Integrate responsive logic with efficient loading strategies. Assign responsive class names to each component and, based on different screen breakpoints, monitor the user's device type, screen size, and current network conditions to determine the optimal resource loading strategy.

[0035] Step B2: Optimize the loading strategy based on screen breakpoints, use different compression ratios according to screen size, prioritize loading text content, and use lazy loading technology for images and non-critical scripts;

[0036] Step B3: Identify the impact of response logic adjustments on loading strategies, identify changes caused by adjusting component response logic, and configure resource loading order and compression strategies based on screen size ranges.

[0037] Step B4: User network status perception and optimization: Dynamically adjust the image compression ratio and resource loading order based on the user's real-time network status to balance loading speed and display quality.

[0038] An intelligent responsive engine layout system adopts the intelligent responsive engine layout method, including a data acquisition module, a feature extraction module, a model training and optimization module, an automated layout and dynamic optimization module, and a performance monitoring and upgrade module;

[0039] Data collection module, used to build a large-scale database containing various types of web design samples and record detailed device information;

[0040] Feature extraction module, which applies natural language processing and computer vision techniques to parse HTML / CSS syntax structures, identify and mark important elements and their interrelationships;

[0041] The model training and optimization module is used to build a matching module, perform multiple iterative training, predict layout parameters, introduce regularization to prevent overfitting, and use the comprehensive score of layout rationality, loading speed, and user satisfaction as evaluation indicators. A detailed algorithm is used to quantify each sub-indicator and perform a weighted sum to obtain the final score;

[0042] The automated layout and dynamic optimization module is used to design intelligent algorithms to dynamically calculate components based on device characteristics, generate personalized layout scripts, and optimize image compression ratios and resource loading sequences for different screen breakpoints.

[0043] The performance monitoring and upgrade module is used to monitor website performance in real time, automatically report abnormal conditions and trigger fault recovery plans, regularly collect operational data, analyze trend changes, and regularly update models.

[0044] Optionally, the layout rationality evaluation index is composed of a weighted sum of three sub-indicators: element spacing rationality, element proportion coordination, and page blank area proportion;

[0045] The loading speed evaluation index is obtained by the weighted sum of three sub-indicators: image loading time, script loading time, and first screen rendering time;

[0046] The user satisfaction evaluation index is quantified through three sub-indicators: page layout aesthetics, interactive operation convenience, and content display completeness.

[0047] Optionally, the corresponding logic of the adjustment component is implemented in the following manner:

[0048] The intelligent detection mechanism will identify the changes and reconfigure the loading order and compression strategy of resources according to the new screen size range, so that components that are delayed in loading on small screens will be loaded first on medium screens, and their compression strategy will be adjusted accordingly to optimize resource allocation.

[0049] Beneficial effects of the present invention:

[0050] 1. This invention introduces a machine learning framework to analyze massive amounts of web page style data, extract characteristic patterns, build a layout generator, and design an intelligent image processing module to dynamically adjust image size to ensure clarity while reducing size. It also creates an adaptive loading mechanism to optimize resource request priority based on device performance and improve loading efficiency. It also combines real-time monitoring feedback to continuously tune the algorithm and improve overall performance.

[0051] 2. In this invention, the page is decomposed into independent functional blocks. Each module has a self-adjusting function and can autonomously adjust the layout, style and behavior according to the characteristics of the device. It supports a mixed layout mode, that is, static and dynamic elements coexist, providing highly customized options and balancing flexibility and stability.

[0052] 3. In the present invention, the code is clearly organized, local modifications do not affect the overall situation, which facilitates team collaboration and version control. Resources are loaded on demand, which reduces server pressure and ensures a smooth user experience. New functions do not require rewriting the code, but only need to add corresponding modules, which facilitates later function iteration and upgrades. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Figure 1 The present invention is a flow chart of a method.

[0054] Figure 2 A schematic diagram of the system structure of the present invention. DETAILED DESCRIPTION

[0055] In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0056] like Figure 1 As shown, an intelligent responsive engine layout method includes the following steps:

[0057] Step S1: Data collection, building a large-scale database containing various types of web design samples and recording detailed device information;

[0058] Step S2: Data preprocessing: applying natural language processing and computer vision techniques to parse HTML / CSS syntax structures and extract key layout attributes and semantic information;

[0059] Step S3: Algorithm construction, using convolutional neural networks and recurrent neural networks to build a composite model, through multiple iterative training and comprehensive score optimization;

[0060] Step S4: Testing and calibration: Conduct multiple rounds of testing on mainstream global device combinations in a simulated environment and record performance. Quantify real user experience and incorporate it into the model weight adjustment process.

[0061] Step S5: Dynamically adjust the strategy to instantly generate a personalized layout script through the collaboration of intelligent algorithms for dynamic component optimization, responsive logic injection, intelligent detection mechanisms, and efficient loading strategies;

[0062] Step S6: Performance monitoring and upgrading, integrating a real-time monitoring module to monitor website performance and automatically handle exceptions, while regularly collecting and analyzing operational data to update the model.

[0063] The algorithm in step S3 is constructed in the following way:

[0064] Step A1: By calculating the weighted sub-indicators of element spacing rationality, element proportion coordination, and page blank area ratio, the deviation of each indicator is quantified using the Euclidean distance formula and aspect ratio difference, and their weighted summation is used to obtain the comprehensive layout rationality index L;

[0065] Step A2: Calculate the weighted sub-indicators of image loading time, script loading time, and first screen rendering time, and sum them to obtain the loading speed indicator V;

[0066] Step A3: quantify the sub-indicators of page layout aesthetics, interactive operation convenience, and content display completeness through user ratings, and sum the weighted sub-indicators to calculate the user satisfaction index U;

[0067] Step A4: The comprehensive layout rationality index L, the loading speed index V, and the user satisfaction index U are weighted and summed according to certain weights to obtain a comprehensive score S, which is used as a comprehensive indicator for evaluating model performance.

[0068] The calculation of the comprehensive layout rationality index L in step A1 is as follows:

[0069] L=W1S1+W2S2+ W3S3,W1+ W2+ W3=1,

[0070] ,

[0071] ,

[0072] S3=A1 / A0;

[0073] Where S1 is the rationality of element spacing, S2 is the coordination of element proportions; S3 is the proportion of blank area on the page, n is the number of elements on the page, d ij is the actual distance between element i and element j, d ij0 is the standard spacing, m is the number of main elements, r i is the actual aspect ratio of element i, r i0 is the ideal aspect ratio, A1 is the blank area of ​​the page, A0 is the total area, and W1, W2, and W3 are the weights of S1, S2, and S3 respectively.

[0074] The loading speed index V in step A2 is performed as follows:

[0075] V=W4T1+W5T2+ W6T3,W4+ W5+ W6=1,

[0076] , ;

[0077] Where T1 is the image loading time, T2 is the script loading time, T3 is the first screen rendering time, W4, W4, and W6 are the weights of T1, T2, and T3 respectively, p is the number of images in the page, q is the number of scripts in the page, and t 1i is the loading time of the i-th picture, t 2j is the loading time of the jth script.

[0078] The user satisfaction index U in step A3 is obtained by:

[0079] U=W7A - +W8I - +W9C - , W7+ W8+ W9=1,

[0080] Where A - is the average score of the page layout aesthetics, I - is the average score of the convenience of interactive operation, C - The average score of content display completeness is A for W7, W8 and W9 respectively. - , I - 、C - The weight of .

[0081] The comprehensive score S is calculated in step A4 in the following manner:

[0082] S=W L L+W V V+W U U, W L +W V +W U =1,

[0083] Where L is the comprehensive layout rationality index, V is the loading speed index, and U is the user satisfaction index. L 、W V 、W U They are the weights of the comprehensive layout rationality index L, loading speed index V and user satisfaction index U respectively.

[0084] The dynamic adjustment strategy in step S5 is as follows:

[0085] Step B1: Integrate responsive logic with efficient loading strategies. Assign responsive class names to each component and, based on different screen breakpoints, monitor the user's device type, screen size, and current network conditions to determine the optimal resource loading strategy.

[0086] Step B2: Optimize the loading strategy based on screen breakpoints, use different compression ratios according to screen size, prioritize loading text content, and use lazy loading technology for images and non-critical scripts;

[0087] Step B3: Identify the impact of response logic adjustments on loading strategies, identify changes caused by adjusting component response logic, and configure resource loading order and compression strategies based on screen size ranges.

[0088] Step B4: User network status perception and optimization: Dynamically adjust the image compression ratio and resource loading order based on the user's real-time network status to balance loading speed and display quality.

[0089] Data collection, building a large-scale database containing design samples of various types of web pages, covering official websites, e-commerce, news portals, etc. in different industries, to ensure data diversity.

[0090] Record detailed device information, such as screen resolution, operating system version, browser type, etc., to provide rich environmental parameters for subsequent training.

[0091] Feature extraction, applying natural language processing (NLP) and computer vision (CV) technologies, accurately interprets HTML / CSS syntax structures, and identifies and marks important elements and their interrelationships.

[0092] Use semantic analysis to determine the meaning of text paragraphs, title levels, button functions, and the context of images to enhance understanding levels.

[0093] In algorithm construction, convolutional neural networks (CNN) are used to process image data, and recurrent neural networks (RNN) are used to deal with text sequence information, combining the advantages of both to form a composite model.

[0094] Multiple iterative trainings are performed, and regularization is introduced to prevent overfitting. Evaluation indicators include comprehensive scores such as layout rationality, loading speed, and user satisfaction.

[0095] There are more detailed algorithms when evaluating comprehensive scores such as layout rationality, loading speed, and user satisfaction.

[0096] Layout rationality is weighted. The layout rationality evaluation index includes three sub-indicators: element spacing rationality, element proportion coordination, and page blank area ratio. For element spacing rationality, the Euclidean distance formula is used to calculate the deviation between the spacing between each element and the predefined standard spacing.

[0097] For element proportion harmony, calculate the difference between the aspect ratio of major elements (such as images and surrounding text areas) and the ideal aspect ratio.

[0098] For the page blank area ratio, the ratio of the page blank area to the total page area is calculated, and then the weighted sum of these three sub-indicators is used to obtain the layout rationality index.

[0099] Loading speed weighting. The loading speed evaluation index includes three sub-indicators: image loading time, script loading time, and first screen rendering time. The loading speed index is obtained by weighted summation of these three sub-indicators.

[0100] User satisfaction is weighted. User satisfaction evaluation metrics are derived through user surveys and behavioral analysis. These metrics include page layout aesthetics, interactive ease of use, and content completeness. These three sub-indicators are quantified using user ratings (0-10). The user satisfaction index is then calculated by weighting these three sub-indicators.

[0101] Finally, the comprehensive layout rationality index, loading speed index and user satisfaction index are weighted and summed according to certain weights to obtain a comprehensive score, which is used as a comprehensive indicator to evaluate model performance.

[0102] Testing and calibration involves repeated trials in simulated environments, covering mainstream global device combinations, recording performance under each configuration, and adjusting parameter settings in a timely manner.

[0103] Invite real users to participate, collect intuitive feedback, quantify subjective feelings, and incorporate them into the model weight adjustment process.

[0104] Dynamically adjust strategies, design intelligent algorithms, dynamically calculate the ideal position, size, and style of each component, and instantly generate personalized layout scripts.

[0105] In terms of component layout, there is a close correlation between the responsive logic injection, intelligent detection mechanism, and efficient loading strategy of the present invention.

[0106] The relationship between responsive logic injection and efficient loading strategies. In terms of loading strategies in different situations, when assigning responsive class names to each module (such as .col-sm.col-md.col-lg), different class names correspond to different screen breakpoints. For efficient loading strategies, in the case of .col-sm (small screen class name), more aggressive image compression ratios and stricter resource loading order optimization may be adopted. For example, for small screen devices, images will be compressed to 30% of their original size (assuming a compression ratio), and text content will be loaded first. Images and non-critical scripts are loaded lazily to reduce the first screen load time.

[0107] In the case of .col-md (middle screen class name), the image compression ratio may be adjusted to 50% of the original size, and according to the page layout structure, some non-critical modules, such as some auxiliary recommended content modules, are loaded asynchronously.

[0108] In the case of .col-lg (large screen class name), the image compression ratio is relatively loose, perhaps 70% of the original size, and more scripts and resources are loaded in parallel because large screen devices usually have better network and processing capabilities.

[0109] Adjusting the response logic affects the loading strategy. When you adjust the response logic of each component, such as changing the breakpoint setting of a component from .col-sm to .col-md, the efficient loading strategy will automatically adjust. The intelligent detection mechanism will detect this change and then readjust the loading order and compression ratio of resources based on the screen size range corresponding to the new class name. For example, if a component that was originally delayed loading on a small screen becomes a priority loading on a medium screen due to the adjustment of the response logic, the efficient loading strategy will ensure that this component is loaded according to the new priority on the medium-screen device, which may advance its loading order and adjust its compression strategy based on the resource allocation of the medium screen.

[0110] Based on the user's current network conditions, optimize the image compression ratio and loading order, balance quality and efficiency, and improve the overall perceived experience.

[0111] Performance monitoring and upgrades, integrated real-time monitoring module, monitors website performance, automatically reports abnormal status, and triggers fault recovery plans.

[0112] Regularly collect operational data, analyze trend changes, and update models regularly to ensure long-term effectiveness and competitiveness.

[0113] like Figure 2 As shown, an intelligent responsive engine layout system adopts the intelligent responsive engine layout method, including a data acquisition module, a feature extraction module, a model training and optimization module, an automatic layout and dynamic optimization module, and a performance monitoring and upgrade module;

[0114] Data collection module, used to build a large-scale database containing various types of web design samples and record detailed device information;

[0115] Feature extraction module, which applies natural language processing and computer vision techniques to parse HTML / CSS syntax structures, identify and mark important elements and their interrelationships;

[0116] The model training and optimization module is used to build a matching module, perform multiple iterative training, predict layout parameters, introduce regularization to prevent overfitting, and use the comprehensive score of layout rationality, loading speed, and user satisfaction as evaluation indicators. A detailed algorithm is used to quantify each sub-indicator and perform a weighted sum to obtain the final score;

[0117] The automated layout and dynamic optimization module is used to design intelligent algorithms to dynamically calculate components based on device characteristics, generate personalized layout scripts, and optimize image compression ratios and resource loading sequences for different screen breakpoints.

[0118] The performance monitoring and upgrade module is used to monitor website performance in real time, automatically report abnormal conditions and trigger fault recovery plans, regularly collect operational data, analyze trend changes, and regularly update models.

[0119] The layout rationality evaluation index is composed of the weighted sum of three sub-indicators: element spacing rationality, element proportion coordination, and page blank area ratio;

[0120] The loading speed evaluation index is obtained by the weighted sum of three sub-indicators: image loading time, script loading time, and first screen rendering time;

[0121] The user satisfaction evaluation index is quantified through three sub-indicators: page layout aesthetics, interactive operation convenience, and content display completeness.

[0122] Adjust the corresponding logic of the component in the following ways:

[0123] The intelligent detection mechanism will identify the changes and reconfigure the loading order and compression strategy of resources according to the new screen size range, so that components that are delayed in loading on small screens will be loaded first on medium screens, and their compression strategy will be adjusted accordingly to optimize resource allocation.

[0124] This paper introduces a machine learning framework to analyze massive amounts of web page style data, extract characteristic patterns, build a layout generator, and design an intelligent image processing module to dynamically adjust image size to ensure clarity while reducing size. It also creates an adaptive loading mechanism to optimize resource request priority based on device performance and improve loading efficiency. It also combines real-time monitoring feedback to continuously tune algorithms and enhance overall performance.

[0125] The page is broken down into independent functional blocks. Each module has self-regulation capabilities and can autonomously adjust the layout, style, and behavior according to device characteristics. It supports mixed layout modes, where static and dynamic elements coexist, providing highly customized options while balancing flexibility and stability.

[0126] The code is clearly organized, local modifications do not affect the overall situation, which facilitates team collaboration and version control. Resources are loaded on demand, reducing server pressure and ensuring a smooth user experience. New features do not require rewriting the code, only the corresponding modules need to be added, which facilitates later function iteration and upgrades.

[0127] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions or improvements made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. An intelligent responsive engine layout method, characterized in that: The following steps are involved: Step S1: Data collection, building a large-scale database containing various types of web design samples and recording detailed device information; Step S2: Data preprocessing: applying natural language processing and computer vision techniques to parse HTML / CSS syntax structures and extract key layout attributes and semantic information; Step S3: Algorithm construction, using convolutional neural networks and recurrent neural networks to build a composite model, through multiple iterative training and comprehensive score optimization; The algorithm is built in the following ways: Step A1: By calculating the weighted sub-indicators of element spacing rationality, element proportion coordination, and page blank area ratio, the deviation of each indicator is quantified using the Euclidean distance formula and aspect ratio difference, and their weighted summation is used to obtain the comprehensive layout rationality index L; Step A2: Calculate the weighted sub-indicators of image loading time, script loading time, and first screen rendering time, and sum them to obtain the loading speed indicator V; Step A3: quantify the sub-indicators of page layout aesthetics, interactive operation convenience, and content display completeness through user ratings, and sum the weighted sub-indicators to calculate the user satisfaction index U; Step A4: The comprehensive layout rationality index L, the loading speed index V, and the user satisfaction index U are weighted and summed according to certain weights to obtain a comprehensive score S, which is used as a comprehensive indicator for evaluating model performance; Step S4: Testing and calibration: Conduct multiple rounds of testing on mainstream global device combinations in a simulated environment and record performance. Quantify real user experience and incorporate it into the model weight adjustment process. Step S5: Dynamically adjust the strategy to instantly generate a personalized layout script through the collaboration of intelligent algorithms for dynamic component optimization, responsive logic injection, intelligent detection mechanisms, and efficient loading strategies; Step S6: Performance monitoring and upgrading, integrating a real-time monitoring module to monitor website performance and automatically handle exceptions, while regularly collecting and analyzing operational data to update the model.

2. The intelligent responsive engine layout method according to claim 1, characterized in that: The calculation of the comprehensive layout rationality index L in step A1 is as follows: L=W1S1+W2S2+ W3S3,W1+ W2+ W3=1, ， ， S3=A1 / A0; Where S1 is the rationality of element spacing, S2 is the coordination of element proportions; S3 is the proportion of blank area on the page, n is the number of elements on the page, d ij is the actual distance between element i and element j, d ij0 is the standard spacing, m is the number of main elements, r i is the actual aspect ratio of element i, r i0 is the ideal aspect ratio, A1 is the blank area of ​​the page, A0 is the total area, and W1, W2, and W3 are the weights of S1, S2, and S3 respectively.

3. The intelligent responsive engine layout method according to claim 1, characterized in that: The speed index V is loaded in step A2 in the following manner: V=W4T1+W5T2+ W6T3,W4+ W5+ W6=1, ， ； Where T1 is the image loading time, T2 is the script loading time, T3 is the first screen rendering time, W4, W5, and W6 are the weights of T1, T2, and T3 respectively, p is the number of images in the page, q is the number of scripts in the page, and t 1i is the loading time of the i-th picture, t 2j is the loading time of the jth script.

4. The intelligent responsive engine layout method according to claim 1, characterized in that: The user satisfaction index U in step A3 is obtained by: U=W7A‾+W8I‾+W9C‾, W7+ W8+ W9=1, Where A‾ is the average score of page layout aesthetics, I‾ is the average score of interactive operation convenience, C‾ is the average score of content display completeness, and W7, W8, and W9 are the weights of A‾, I‾, and C‾, respectively.

5. The intelligent responsive engine layout method according to claim 1, characterized in that: The comprehensive score S is calculated in step A4 in the following manner: S=W L L+W V V+W U U,W L +W V +W U =1, Where L is the comprehensive layout rationality index, V is the loading speed index, and U is the user satisfaction index. L 、W V 、W U They are the weights of the comprehensive layout rationality index L, loading speed index V and user satisfaction index U respectively.

6. The intelligent responsive engine layout method according to claim 1, characterized in that: The dynamic adjustment strategy in step S5 is achieved by: Step B1: Integrate responsive logic with efficient loading strategies. Assign responsive class names to each component and, based on different screen breakpoints, monitor the user's device type, screen size, and current network conditions to determine the optimal resource loading strategy. Step B2: Optimize the loading strategy based on screen breakpoints, use different compression ratios according to screen size, prioritize loading text content, and use lazy loading technology for images and non-critical scripts; Step B3: Identify the impact of response logic adjustments on loading strategies, identify changes caused by adjusting component response logic, and configure resource loading order and compression strategies based on screen size ranges. Step B4: User network status perception and optimization: Dynamically adjust the image compression ratio and resource loading order based on the user's real-time network status to balance loading speed and display quality.

7. An intelligent responsive engine layout system, using the intelligent responsive engine layout method according to any one of claims 1 to 6, characterized in that: It includes data acquisition module, feature extraction module, model training and optimization module, automatic layout and dynamic optimization module and performance monitoring and upgrade module; Data collection module, used to build a large-scale database containing various types of web design samples and record detailed device information; Feature extraction module, which applies natural language processing and computer vision techniques to parse HTML / CSS syntax structures, identify and mark important elements and their interrelationships; The model training and optimization module is used to build composite modules, perform multiple iterative training, predict layout parameters, introduce regularization to prevent overfitting, and use the comprehensive score of layout rationality, loading speed, and user satisfaction as evaluation indicators. A detailed algorithm is used to quantify each sub-indicator and perform a weighted sum to obtain the final score. The automated layout and dynamic optimization module is used to design intelligent algorithms to dynamically calculate components based on device characteristics, generate personalized layout scripts, and optimize image compression ratios and resource loading sequences for different screen breakpoints. The performance monitoring and upgrade module is used to monitor website performance in real time, automatically report abnormal conditions and trigger fault recovery plans, regularly collect operational data, analyze trend changes, and regularly update models.

8. The intelligent responsive engine layout system according to claim 7, characterized in that: The layout rationality evaluation index is composed of the weighted sum of three sub-indicators: element spacing rationality, element proportion coordination, and page blank area ratio; The loading speed evaluation index is obtained by the weighted sum of three sub-indicators: image loading time, script loading time, and first screen rendering time; The user satisfaction evaluation index is quantified through three sub-indicators: page layout aesthetics, interactive operation convenience, and content display completeness.

9. The intelligent responsive engine layout system according to claim 7, characterized in that: The corresponding logic of the automatic layout and dynamic optimization module is as follows: The intelligent detection mechanism will identify the changes and reconfigure the loading order and compression strategy of resources according to the new screen size range, so that components that are delayed in loading on small screens will be loaded first on medium screens, and their compression strategy will be adjusted accordingly to optimize resource allocation.

Images