Intelligent response type engine layout method and system

Abstract

The invention discloses an intelligent response type engine layout method and system. A machine learning framework is introduced, massive webpage style data is analyzed, a feature mode is extracted, a layout generator is constructed, an intelligent image processing module is designed, the picture size is dynamically adjusted, and the size is reduced while definition is guaranteed. Creating a self-adaptive loading mechanism, optimizing the priority of the resource request according to the performance of the equipment, and improving the loading efficiency; and the overall performance is improved by combining real-time monitoring feedback and continuously adjusting and optimizing the algorithm.

Description

Technical Field

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

[0002] With the popularization of the mobile Internet, the ways for users to access websites have become diversified. From desktop computers, laptops to tablets, smartphones, and even wearable devices, there are huge differences in screen sizes and resolutions. The traditional fixed-width layout can no longer meet the requirements of multi-terminal compatibility, and responsive web design has emerged. It allows page elements to automatically adjust the layout according to the size of the container, ensuring visual consistency and functional integrity on any device. Disadvantages of the prior art: A large number of breakpoint rules need to be manually written, resulting in high maintenance costs; the layout adjustment is not flexible enough, and the ability to adapt to different device characteristics is limited; the support for non-standard screen sizes is poor, such as some display devices with special ratios; the picture loading strategy is single, affecting the loading speed and resource consumption.

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

[0004] In view of the deficiencies of 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 object, the present invention provides the following technical solutions: An intelligent responsive engine layout method and system, including the following steps: Step S1: Data collection, constructing 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 technologies to parse the HTML / CSS syntax structure and extract key layout attributes and semantic information; Step S3: Algorithm construction, using convolutional neural network and recurrent neural network to construct a composite model, and optimizing through multiple iterative trainings and comprehensive scoring; Step S4: Testing and calibration, conducting multiple rounds of tests on the combination of global mainstream devices in a simulated environment and recording the performance, and integrating the intuitive feelings of real users into the model weight adjustment process after quantification; Step S5: Dynamic adjustment strategy, dynamically optimizing the cooperation of components, responsive logic injection, intelligent detection mechanism and efficient loading strategy through intelligent algorithms, and instantaneously generating personalized layout scripts; Step S6: Performance monitoring and upgrade, integrating a real-time monitoring module to monitor the website performance and automatically handle exceptions, and at the same time regularly collecting and analyzing operation data to update the model.

[0006] Optionally, the algorithm construction in step S3 is performed in the following manner: Step A1: By calculating the weighted sub - indicators of the rationality of element spacing, the coordination of element ratios, and the ratio of the page blank area, using the Euclidean distance formula and the aspect - ratio difference to quantify the deviation of each indicator, and summing them up with weights to obtain the comprehensive layout rationality index L; Step A2: By calculating the weighted sub - indicators of the image loading time, the script loading time, and the first - screen rendering time, and summing them up with weights to obtain the loading speed index V; Step A3: Quantify the sub - indicators of the page layout aesthetics, the convenience of interactive operations, and the integrity of content display through user ratings, and sum up the weighted sub - indicators to calculate the user satisfaction index U; Step A4: Sum up the comprehensive layout rationality index L, the loading speed index V, and the user satisfaction index U with certain weights to obtain the comprehensive score S, which is used as the comprehensive index for evaluating the performance of the model.

[0007] Optionally, the calculation of the comprehensive layout rationality index L in step A1 is performed in the following manner: L = W1S1+W2S2 + W3S3, W1+W2+W3 = 1, , , S3 = A1 / A0; wherein, S1 is the rationality of element spacing, S2 is the coordination of element ratios; S3 is the ratio of the page blank area, n is the number of elements in the page, d ij is the actual spacing 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 area of the page blank area, A0 is the total area, and W1, W2, W3 are the weights of S1, S2, S3 respectively.

[0008] Optionally, the loading speed index V in step A2 is obtained in the following manner: V = W4T1+W5T2 + W6T3, W4+W5+W6 = 1, , ; wherein, T1 is the image loading time, T2 is the script loading time, T3 is the first - screen rendering time, W4, W4, W6 are the weights of T1, T2, T3 respectively, p is the number of images in the page, q is the number of scripts in the page, t 1i is the loading time of the i - th image, t 2jis the loading time of the j-th script.

[0009] Optionally, the user satisfaction index U in step A3 is obtained by the following method: U = W7A - + W8I - + W9C - , where W7 + W8 + W9 = 1, In the formula, A - is the average score of the page layout aesthetics, I - is the average score of the convenience of interactive operations, C - is the average score of the integrity of content display. W7, W8, and W9 are the weights of A - , I - , C - respectively.

[0010] Optionally, the comprehensive score S in step A4 is calculated by the following method: S = W L L + W V V + W U U, where W L + W V + W U = 1, In the formula, L is the comprehensive layout rationality index, V is the loading speed index, and U is the user satisfaction index. W L , W V , W U are the weights of the comprehensive layout rationality index L, the loading speed index V, and the user satisfaction index U respectively.

[0011] Optionally, the dynamic adjustment strategy in step S5 is as follows: Step B1: Integration of responsive logic and efficient loading strategy. Assign responsive class names to each component and correspond to different screen breakpoints. Monitor the user's device type, screen size, and current network status to determine the best resource loading strategy; Step B2: Optimization of the loading strategy based on screen breakpoints. Adopt different compression ratios according to the screen size, and give priority to loading text content. Use lazy loading technology to handle images and non-critical scripts; Step B3: Influence of response logic adjustment on the loading strategy. Identify the changes caused by adjusting the component response logic, and configure the loading order and compression strategy of resources according to the screen size range.

[0012] Step B4: User network status perception and optimization. Dynamically adjust the compression ratio of images and the loading order of resources according to the user's real-time network status to balance the loading speed and display quality.

[0013] An intelligent responsive engine layout system, adopting the intelligent responsive engine layout method, includes a data collection 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; The data collection module is used to build a large-scale database containing various types of web design samples and record detailed device information; The feature extraction module is used to apply natural language processing and computer vision technologies to parse the HTML / CSS syntax structure, identify and mark important elements and their interrelationships; The model training and optimization module is used to build a compliance module, perform multiple iterative trainings, predict layout parameters, introduce regularization to prevent overfitting, and use the comprehensive scores of layout rationality, loading speed, and user satisfaction as evaluation indicators. Each sub-indicator is quantified through a detailed algorithm and weighted and summed to obtain the final score; The automated layout and dynamic optimization module is used to design intelligent algorithms to dynamically calculate components according to device characteristics, generate personalized layout scripts, and optimize the image compression ratio and resource loading order for different screen breakpoints; The performance monitoring and upgrade module is used to monitor the website performance in real time, automatically report abnormal states and trigger a fault recovery plan, regularly collect operation data, analyze trend changes, and update the model regularly.

[0014] Optionally, the layout rationality evaluation indicator is composed of the weighted sum of three sub-indicators: the rationality of element spacing, the coordination of element proportions, and the proportion of page blank areas; The loading speed evaluation indicator 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 indicator is obtained by quantifying three sub-indicators: the aesthetics of page layout, the convenience of interactive operations, and the integrity of content display.

[0015] Optionally, the corresponding logic for adjusting components is as follows: The intelligent detection mechanism will identify changes and reconfigure the resource loading order and compression strategy according to the new screen size range, so that the components that are delayed to load on small screens will become priority loading on medium screens, and their compression strategies will be adjusted accordingly to optimize resource allocation.

[0016] The beneficial effects of the present invention: 1. In the present invention, a machine learning framework is introduced to analyze a large amount of web page style data, extract feature patterns, build a layout generator, design an intelligent image processing module to dynamically adjust the image size, reduce the volume while ensuring clarity; create an adaptive loading mechanism to optimize the resource request priority according to device performance and improve the loading efficiency; combine real-time monitoring feedback to continuously optimize the algorithm and improve the overall performance; 2. In the present invention, the page is decomposed into independent functional blocks, each module having a self - adjustment function, which can autonomously adjust the layout, style, and behavior according to the device characteristics, support a hybrid layout mode, that is, static and dynamic elements coexist, provide highly customizable options, and balance flexibility and stability. 3. In the present invention, the code organization is clear, local modifications do not affect the overall situation, which is convenient for team collaboration and version control. Resources are loaded on demand, reducing the server pressure and ensuring a smooth experience for the user side. For new functions, there is no need to rewrite the code, just add the corresponding module, which is convenient for later function iteration and upgrade. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 It is a schematic diagram of a method flow of the present invention.

[0018] Figure 2 It is a schematic diagram of a system structure of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following - described drawings are only some embodiments of the invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0020] As Figure 1 shown, an intelligent responsive engine layout method includes the following steps: Step S1: Data collection, constructing a large - scale database containing various types of web design samples and recording detailed device information. Step S2: Data pre - processing, applying natural language processing and computer vision technologies to parse the HTML / CSS syntax structure, and extracting key layout attributes and semantic information. Step S3: Algorithm construction, using a convolutional neural network and a recurrent neural network to build a composite model, and optimizing through multiple iterations of training and comprehensive scoring. Step S4: Testing and calibration, conducting multiple rounds of tests on a combination of global mainstream devices in a simulated environment and recording the performance, and integrating the intuitive feelings of real users into the process of adjusting the model weights after quantification. Step S5: Dynamic adjustment strategy, through the cooperation of intelligent algorithms for dynamic optimization of components, responsive logic injection, intelligent detection mechanisms, and efficient loading strategies, to instantaneously generate personalized layout scripts. Step S6: Performance monitoring and upgrade, integrating a real - time monitoring module to monitor the website performance and automatically handle exceptions, and at the same time regularly collecting and analyzing operation data to update the model.

[0021] The algorithm in step S3 is constructed in the following way: Step A1: By calculating the weighted sub-indicators of element spacing rationality, element ratio coordination and page blank area ratio, the deviation of each indicator is quantified using the Euclidean distance formula and aspect ratio difference, and they are weighted and summed 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 up 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.

[0022] 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; In the formula, 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, and 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] The loading speed index V in step A2 is performed 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, W4, W6 are the weights of T1, T2, T3 respectively, p is the number of images in the page, q is the number of scripts in the page, t 1i is the loading time of the i-th picture, t 2j is the loading time of the jth script.

[0024] In step A3, the user satisfaction index U is calculated as follows: U = W7A - + W8I - + W9C - , where W7 + W8 + W9 = 1, In the formula, A - is the average score of the page layout aesthetics, I - is the average score of the convenience of interactive operations, C - is the average score of the completeness of content display, and W7, W8, and W9 are the weights of A - , I - , C - respectively.

[0025] In step A4, the comprehensive score S is calculated as follows: S = WL L + WV V + WU, where W U + W L + W V = 1, U In the formula, L is the comprehensive layout rationality index, V is the loading speed index, and U is the user satisfaction index, and W , W L , W V , W U are the weights of the comprehensive layout rationality index L, the loading speed index V, and the user satisfaction index U respectively.

[0026] In step S5, the dynamic adjustment strategy is as follows: Step B1: Integration of responsive logic and efficient loading strategy, assign responsive class names to each component, corresponding to different screen breakpoints, monitor the user's device type, screen size, and current network status, and determine the best resource loading strategy; Step B2: Optimization of the loading strategy based on screen breakpoints, adopt different compression ratios according to the screen size, and give priority to loading text content, and use lazy loading technology to process images and non-critical scripts; Step B3: Impact of response logic adjustment on the loading strategy, identify changes caused by adjusting the component response logic, and configure the loading order and compression strategy of resources according to the screen size range.

[0027] Step B4: User network status awareness and optimization, dynamically adjust the compression ratio of images and the loading order of resources according to the user's real-time network status, and balance the loading speed and display quality.

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

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

[0030] Feature extraction, applying natural language processing (NLP) and computer vision (CV) technologies to accurately interpret the HTML / CSS syntax structure, identify and mark important elements and their interrelationships.

[0031] Use semantic analysis to determine the meanings of text paragraphs, title levels, button functions, etc., as well as the context scenarios of pictures to enhance the level of understanding.

[0032] Algorithm construction, select convolutional neural network (CNN) to process image data, and recurrent neural network (RNN) to handle text sequence information, integrate the advantages of both to form a composite model.

[0033] Conduct multiple iterative trainings, introduce regularization to prevent overfitting, and the evaluation metrics include comprehensive scores such as layout rationality, loading speed, user satisfaction, etc.

[0034] When evaluating comprehensive scores such as layout rationality, loading speed, and user satisfaction, there are more detailed algorithms.

[0035] Layout rationality weighting, assuming that the layout rationality evaluation metrics include three sub-metrics: the rationality of element spacing, the coordination of element proportions, and the proportion of page blank area. For the rationality of element spacing, use the Euclidean distance formula to calculate the deviation between the spacing of each element and the predefined standard spacing.

[0036] For the coordination of element proportions, calculate the difference between the aspect ratio of the main elements (such as pictures and the surrounding text areas) and the ideal aspect ratio.

[0037] For the proportion of page blank area, calculate the ratio of the area of the page blank area to the total area of the page, and then perform weighted summation of these three sub-metrics to obtain the layout rationality metric.

[0038] Loading speed weighting, the loading speed evaluation metrics include three sub-metrics: image loading time, script loading time, and first-screen rendering time, and perform weighted summation of these three sub-metrics to obtain the loading speed metric.

[0039] User satisfaction weighting. The user satisfaction evaluation indicators are obtained through user surveys and behavior analysis, and include three sub - indicators: the aesthetics of page layout, the convenience of interactive operations, and the integrity of content display. These three sub - indicators are quantified by user scores (0 - 10 points), and the user satisfaction indicator is obtained by weighted summation of these three sub - indicators.

[0040] Finally, by comprehensively considering the layout rationality index, the loading speed index, and the user satisfaction index, a weighted summation is performed according to a certain weight to obtain a comprehensive score, which is used as the comprehensive indicator for evaluating the performance of the evaluation model.

[0041] Testing and calibration. Repeated experiments are carried out in a simulated environment, covering the mainstream device combinations globally, recording the performance under each group of configurations, and adjusting the parameter settings in a timely manner.

[0042] Invite real users to participate, collect intuitive feedback, quantify subjective feelings, and incorporate them into the process of adjusting the model weights.

[0043] Dynamic adjustment strategy. Design an intelligent algorithm to dynamically calculate the ideal positions, sizes, and styles of each component, and instantly generate personalized layout scripts.

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

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

[0046] In the case of.col - md (medium - 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 recommendation content modules, will be loaded asynchronously.

[0047] When it comes to.col - lg (large - screen class name), the image compression ratio is relatively loose, perhaps 70% of the original size, and more scripts and resources will be loaded in parallel because large - screen devices usually have better network and processing capabilities.

[0048] Adjust the impact of response logic on the loading strategy. When adjusting the response logic of each component, such as changing the breakpoint settings of a certain component from.col-sm to.col-md, the efficient loading strategy will be automatically adjusted. The intelligent detection mechanism will detect this change and then re-adjust the loading order and compression ratio of resources according to the screen size range corresponding to the new class name. For example, if a component that was originally lazy-loaded on a small screen becomes a priority load 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 medium-screen devices, possibly advancing its loading order and adjusting its compression strategy according to the resource allocation of the medium screen.

[0049] Optimize the image compression ratio and loading order according to the user's current network status, balance quality and efficiency, and enhance the overall perceived experience.

[0050] Performance monitoring and upgrade. Integrate a real-time monitoring module to monitor the website performance, automatically report abnormal status, and trigger a fault recovery plan.

[0051] Regularly collect operation data, analyze trend changes, and regularly update the model to ensure long-term effectiveness and competitiveness.

[0052] As Figure 2 shown, an intelligent responsive engine layout system, adopting the intelligent responsive engine layout method, includes a data collection 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; The data collection module is used to build a large-scale database containing various types of web design samples and record detailed device information; The feature extraction module is used to apply natural language processing and computer vision technologies to parse the HTML / CSS syntax structure, identify and mark important elements and their interrelationships; The model training and optimization module is used to build a compliance module, perform multiple iterative trainings, predict layout parameters, introduce regularization to prevent overfitting, and use the comprehensive scores of layout rationality, loading speed, and user satisfaction as evaluation indicators, and quantify each sub-indicator through detailed algorithms and sum them up with weights to obtain the final score; The automated layout and dynamic optimization module is used to design intelligent algorithms to dynamically calculate components according to device characteristics, generate personalized layout scripts, and optimize the image compression ratio and resource loading order for different screen breakpoints; The performance monitoring and upgrade module is used to monitor the website performance in real-time through the monitoring function, automatically report abnormal status and trigger a fault recovery plan, regularly collect operation data, analyze trend changes, and regularly update the model.

[0053] The layout rationality evaluation index is composed of the weighted sum of three sub - indexes: the rationality of element spacing, the coordination of element proportion, and the proportion of page blank area; The loading speed evaluation index is obtained by the weighted sum of three sub - indexes: the image loading time, the script loading time, and the first - screen rendering time; The user satisfaction evaluation index is quantified through three sub - indexes: the aesthetics of page layout, the convenience of interactive operations, and the integrity of content display.

[0054] Adjust the corresponding logic of the component in the following ways: The intelligent detection mechanism will identify the changes and re - configure the loading order and compression strategy of resources according to the new screen size range, so that the components that are deferred - loaded on small screens will be preferentially loaded on medium screens, and their compression strategies will be adjusted accordingly to optimize resource allocation.

[0055] The present invention introduces a machine - learning framework, analyzes a large amount of web page style data, extracts feature patterns, constructs a layout generator, designs an intelligent image - processing module to dynamically adjust the image size, reducing the volume while ensuring clarity; creates an adaptive loading mechanism to optimize the resource request priority according to the device performance and improve the loading efficiency; combines real - time monitoring feedback to continuously optimize the algorithm and enhance the overall performance; Decompose the page into independent functional blocks, each module having a self - adjustment function, which can independently adjust the layout, style, and behavior according to the device characteristics, support a mixed layout mode, that is, the co - existence of static and dynamic elements, provide highly customizable options, and balance flexibility and stability; The code organization is clear. Local modifications do not affect the whole, facilitating team collaboration and version control. Resources are loaded on demand, reducing the server pressure and ensuring a smooth experience for the user side. For new functions, there is no need to rewrite the code, just add the corresponding module, which is convenient for later function iteration and upgrade.

[0056] The above are only the preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent replacements, or improvements made within the spirit and principle of the present invention shall be included in the protection scope 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 technology to parse HTML / CSS syntax structure and extract key layout attributes and semantic information; Step S3: Algorithm construction, using convolutional neural network and recurrent neural network to build a composite model, through multiple iterative training and comprehensive scoring optimization; Step S4: Testing and calibration: Conduct multiple rounds of testing on the global mainstream device combinations in a simulated environment and record the performance, quantify the real user's intuitive feelings and incorporate them into the model weight adjustment process; Step S5: Dynamically adjust the strategy, dynamically optimize components through intelligent algorithms, responsive logic injection, intelligent detection mechanism and efficient loading strategy collaboration, and instantly generate personalized layout scripts; Step S6: Performance monitoring and upgrading, integrating the 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, wherein The algorithm in step S3 is constructed in the following way: Step A1: By calculating the weighted sub-indicators of element spacing rationality, element ratio coordination and page blank area ratio, the deviation of each indicator is quantified using the Euclidean distance formula and aspect ratio difference, and they are weighted and summed 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 up 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.

3. The intelligent response engine layout method according to claim 2, 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; In the formula, 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, and 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.

4. The intelligent responsive engine layout method according to claim 2, wherein The loading speed index V in step A2 is performed in the following manner: V=W4T1+W5T2+ W6T3,W4+ W5+ W6=1, ， ； Wherein, 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, t 1i is the loading time of the i-th image, t 2j is the loading time of the j-th script.

5. The intelligent responsive engine layout method according to claim 2, wherein The user satisfaction index U in step A3 is obtained by: U = W7A - +W8I - +W9C - , W7 + W8 + W9 = 1, Wherein, A - is the average score of the page layout aesthetics, I - is the average score of the convenience of interaction operations, C - is the average score of the integrity of content display, and W7, W8, and W9 are the weights of A - , I - , and C - respectively.

6. The intelligent responsive engine layout method according to claim 2, wherein 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, In the formula, L is the comprehensive layout rationality index, V is the loading speed index, and U is the user satisfaction index. W L , W V , W U are the weights of the comprehensive layout rationality index L, the loading speed index V, and the user satisfaction index U, respectively.

7. The intelligent responsive engine layout method according to claim 1, wherein The dynamic adjustment strategy in step S5 is implemented in the following manner: Step B1: Integrate responsive logic with efficient loading strategies, assign responsive class names to each component, and correspond to different screen breakpoints, monitor the user's device type, screen size, and current network conditions to determine the best 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 to process images and non-critical scripts; Step B3: The impact of response logic adjustment on loading strategy, identify the changes caused by adjusting component response logic, and configure the loading order and compression strategy of resources according to the screen size range; Step B4: User network status perception and optimization: dynamically adjust the image compression ratio and resource loading order according to the user's real-time network status to balance loading speed and display quality.

8. An intelligent responsive engine layout system, which adopts the intelligent responsive engine layout method according to any one of claims 1-7, is characterized in that, It includes data collection 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 is used to parse HTML / CSS syntax structure by applying natural language processing and computer vision techniques, and identify and mark important elements and their interrelationships; The model training and optimization module is used to build a matching module, conduct multiple iterations of training, predict layout parameters, introduce regularization to prevent overfitting, and use the layout rationality, loading speed, and user satisfaction comprehensive score as evaluation indicators. The detailed algorithm is used to quantify each sub-indicator and 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.

9. The intelligent responsive engine layout system according to claim 8, wherein 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 proportion; The loading speed evaluation index is obtained by weighted summing up the 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.

10. The intelligent responsive engine layout system according to claim 8, wherein The corresponding logic of the adjustment component is as follows: The intelligent detection mechanism identifies changes and reconfigures 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 become priority loading on medium screens, and their compression strategy is adjusted accordingly to optimize resource allocation.

Images