Website dynamic automatic optimization method and system

Abstract

The invention relates to the technical field of computers, discloses a website dynamic automatic optimization method and system, and aims to solve the problems of layout disorder and performance loss caused by the fact that existing static media query cannot adapt to continuous form changes of folding screen equipment. The method comprises the following steps: acquiring physical form parameters and viewport geometric features of the folding screen in real time through a native interface of a browser, and constructing a multi-dimensional equipment state vector; in a special Web Worker thread, mapping the vector into sixteen key CSS attribute parameters by using a lightweight neural network model; and the generated CSS rule character string is injected into the tail of the page root style sheet, so that no-backflow and no-redrawing atomic-scale style updating is realized. The system comprises an equipment state sensing module, a vector construction module, a neural network reasoning module and a pattern injection module. According to the method, external dependence is not needed, the layout disorder rate and the forced backflow frequency are remarkably reduced, and the rendering performance of the folding screen webpage and the user experience are improved.

Description

Technical Field

[0001] This invention belongs to the field of computer technology, specifically relating to a method and system for dynamic automatic optimization of websites. Background Technology

[0002] The widespread adoption of foldable screen devices has brought new challenges to responsive web design. Traditional web adaptation solutions mainly rely on CSS media query mechanisms based on fixed screen sizes. However, as foldable screen devices unfold and fold, the screen shape and viewport size undergo continuous and non-linear changes, making it difficult for the original static adaptation rules to cover all intermediate states. This can easily lead to layout errors, content overflow, or display anomalies.

[0003] Current common adaptation solutions have obvious shortcomings: simply adding media query breakpoints still cannot detect the real-time physical state of the device; introducing external JavaScript libraries for dynamic adjustment often brings performance overhead and compatibility issues; and relying solely on native CSS functions for simple calculations is difficult to handle complex layout scenarios caused by changes in folding angles, which can easily lead to visual overlap or decreased rendering efficiency.

[0004] Existing technical solutions have failed to effectively resolve the following contradiction: the need to respond in real-time to continuous dynamic changes in device form factor while maintaining lightweight and efficient client-side performance. Therefore, a new solution is needed that can achieve real-time, accurate, and low-loss adaptive optimization of foldable screen webpage styles in a pure browser environment. Summary of the Invention

[0005] To address the aforementioned technical problems, this application is proposed. Embodiments of this application provide a website dynamic automatic optimization method and system. This method captures the physical shape parameters and viewport geometric features of a foldable screen device in real time through a client-side native device state awareness interface, constructing a multi-dimensional device state vector including the folding angle, screen segment coordinates, and available display density. Based on this vector, a lightweight neural network model is used to perform non-linear mapping calculations in a dedicated working thread outside the browser's main thread, generating a CSS style rule set that precisely matches the current device state. This rule set is directly injected into the stylesheet object of the document object model, achieving atomic style updates without reflow or repaint. This allows for adaptive layout optimization across the entire form range of the foldable screen device without relying on external resources or introducing performance bottlenecks.

[0006] According to one aspect of this application, a method for dynamic automatic optimization of a website is provided, comprising: The physical form parameters and viewport geometric features of the foldable screen device are obtained in real time through the browser's native device status awareness interface. The physical form parameters include folding angle, hinge position coordinates, and screen unfolding status indicator. The viewport geometric features include main viewport width, main viewport height, secondary viewport starting horizontal coordinate, secondary viewport width, device pixel ratio, and content density coefficient. The physical morphology parameters and viewport geometric features are combined into a device state vector, and the device state vector is input into a pre-trained lightweight neural network model, which is deployed in a browser-dedicated worker thread. The lightweight neural network model outputs a set of CSS style rule parameters; The CSS style rule parameter set is converted into a standard CSS rule string, and then injected into the end of the root stylesheet of the page through the stylesheet object interface of the document object model, overriding the original static media query rules, thus completing an atomic style update. The update process does not trigger a re-layout or redraw operation of the document object model tree.

[0007] Furthermore, the physical shape parameters and viewport geometry features of the foldable screen device are obtained in real time through the browser's native device state awareness interface, including: The device's current physical orientation and folding angle are obtained through the screen orientation sensor interface; Listen for device state transition events from folded to unfolded or vice versa using a device attitude event listener; Capture geometric changes between the primary and secondary viewports using the viewport change event handler; The hinge area coordinates and screen segment information are read through the experimental foldable screen device interface. The returned data structure contains a segment array, and each array element defines the top-left corner coordinates and width and height dimensions of a continuous display area.

[0008] Furthermore, the physical morphological parameters are combined with the viewport geometric features to form a device state vector, including: The folding angle, hinge position x-coordinate, screen unfolding status indicator, main viewport width, main viewport height, secondary viewport starting x-coordinate, secondary viewport width, and content density coefficient are combined into an eight-dimensional real vector as the device state vector, where the content density coefficient is the ratio of the main viewport area to the text content area.

[0009] Furthermore, inputting the device state vector into a pre-trained lightweight neural network model includes: The device state vector is transmitted to the Web Worker thread using a structured cloning algorithm; The Web Worker thread loads a lightweight neural network model in TensorFlow.js format, stored in an embedded form. Perform model inference to generate a sixteen-dimensional CSS style rule parameter set.

[0010] Furthermore, the lightweight neural network model outputs a set of CSS style rule parameters, including: The baseline column width is calculated based on the maximum width of the main content area and the weights assigned to the split-screen areas, and a grid template column definition in the form of repeat(auto-fit, minmax(baseline column width, 1fr)) is generated. The line height ratio is dynamically set based on the content density coefficient. When the content density coefficient is greater than 1.5, the line height ratio is 1.6; otherwise, it is 1.4. The `clamp` function is used to express the font size baseline value, with a minimum value of 14 pixels and a maximum value of 22 pixels. The ideal value is the font size baseline value output by the neural network multiplied by the device pixel ratio. Set the text wrapping strategy according to the folding angle. Set it to normal when the folding angle is less than 45 degrees or greater than 135 degrees, and set it to balance when the folding angle is in the middle range. The overflow handling mode is set according to the width of the secondary viewport. When the width of the secondary viewport is less than 300 pixels, it is set to scroll; otherwise, it is set to visible.

[0011] Furthermore, the CSS style rule parameter set is converted into a standard CSS rule string, including: Map the grid template column definition parameters to a CSS declaration of the form: `grid-template-columns: repeat(auto-fit,minmax(XXXpx, 1fr));` Convert the line height ratio, font size baseline value, padding baseline value, and margin scaling factor into valid CSS numeric expressions for line-height, font-size, padding, and margin, respectively. Convert the main axis direction, cross axis alignment, text wrapping strategy, and overflow handling mode of the flex container into standard keyword values ​​for the flex-direction, align-items, text-wrap, and overflow properties, respectively.

[0012] Furthermore, injecting the standard CSS rule string into the end of the page root stylesheet includes: Check if there are dynamic rule blocks marked with the comment / * DYNAMIC-FOLDABLE-STYLE-BLOCK * / in the page root stylesheet; If it exists, call the CSSStyleSheet.deleteRule method to remove the rule block; Calling the CSSStyleSheet.insertRule method inserts the newly generated standard CSS rule string at the end index of the stylesheet rule list.

[0013] Furthermore, atomic style updates are performed without triggering a re-layout or redraw operation of the Document Object Model tree, including: After injecting a new style rule, if the forced reflow suppression flag is true, the callback function registered by requestAnimationFrame will be called. The getComputedStyle method is executed inside the callback function to trigger synchronous style calculation; Prevent subsequent layout and drawing phases from executing, and merge potential forced reflows into the next natural rendering cycle.

[0014] According to another aspect of this application, a website dynamic automatic optimization system is provided, comprising: The device status awareness module is used to obtain the physical form parameters and viewport geometric features of the foldable screen device in real time through the browser's native device status awareness interface. The physical form parameters include folding angle, hinge position coordinates, and screen unfolding status indicator. The viewport geometric features include main viewport width, main viewport height, secondary viewport starting horizontal coordinate, secondary viewport width, device pixel ratio, and content density coefficient. The device state vector construction module is used to combine the physical morphological parameters with the viewport geometric features into a device state vector. The lightweight neural network inference module is used to input the device state vector into a pre-trained lightweight neural network model. The lightweight neural network model is deployed in a browser-dedicated worker thread. Its input layer has eight nodes, and the hidden layer contains two fully connected layers with sixty-four and thirty-two nodes respectively. The activation function uses a modified linear unit. The output layer has sixteen nodes, corresponding to the numerical control parameters of sixteen key CSS properties. The lightweight neural network model outputs a set of CSS style rules parameters, which includes grid template column definitions, grid template row definitions, maximum width of the main content area, minimum width of the sidebar, font size baseline value, line height ratio, element padding baseline value, margin scaling factor, flex container main axis direction, cross axis alignment, text wrapping strategy, overflow handling mode, viewport unit baseline value, media query equivalent breakpoint threshold, split-screen area allocation weight, and forced reflow suppression flag. The style rule injection module is used to convert the CSS style rule parameter set into a standard CSS rule string, and inject the standard CSS rule string into the end of the root style sheet of the page through the style sheet object interface of the document object model, overriding the original static media query rules, completing the atomic style update, and the update process does not trigger the re-layout or redrawing operation of the document object model tree.

[0015] In summary, this application includes at least one of the following beneficial technical effects: (1): This invention abandons the traditional media query mechanism that relies on fixed breakpoints. It directly obtains real-time physical states such as folding angle and screen partitions through native interfaces, and uses a lightweight neural network model for nonlinear intelligent mapping. This enables the dynamic generation of CSS style rules that precisely match each continuous device form. This allows the web page layout to smoothly and stably adapt to folding, unfolding and other operations, effectively eliminating element misalignment, content overflow or display abnormalities caused by rule mismatch in traditional solutions.

[0016] (2): This invention places the core computational reasoning process in an independent Web Worker thread, avoiding the blocking of the browser's main thread by complex calculations and ensuring the smoothness of user interaction. Simultaneously, the solution employs an embedded lightweight model, eliminating the need to request external network resources, and designs an atomic style update and reflow suppression mechanism to minimize the triggering of expensive page reflow and repaint operations during dynamic style updates. Thus, while achieving real-time adaptation, performance overhead is minimized, benefiting mobile devices and weak network environments.

[0017] (3): This solution is built on the device awareness interface natively provided by modern browsers and standard APIs such as Web Worker. It does not rely on any third-party libraries or server-side support and has good compatibility and portability. Developers do not need to perform tedious adaptation coding for specific devices. The system can automatically complete the entire process from device status awareness to optimal style output, which reduces the development threshold and maintenance cost of foldable screen web pages and provides reliable basic technical support for building high-quality, consistent foldable screen web applications. Attached Figure Description

[0018] Figure 1 This is a schematic diagram of the overall technical architecture of a website dynamic automatic optimization method and system proposed in this invention; Figure 2 This is a schematic diagram of the core principle framework of the nonlinear mapping from device state to CSS rules driven by the lightweight neural network model in this invention; Figure 3This is a schematic diagram of the multi-level interaction relationship and data flow between dynamic CSS rule injection and atomic style update in this invention. Detailed Implementation

[0019] This invention provides a method and system for dynamic automatic website optimization, aiming to solve the problems of layout disorder, rendering delay, and interaction stuttering caused by static media query breakpoint failure, excessive performance overhead of third-party libraries, and insufficient accuracy of heuristic algorithms during continuous form changes of foldable screen devices. The method captures the physical form parameters and viewport geometric features of the foldable screen device in real time through the browser's native device state awareness interface, constructs a multi-dimensional device state vector, and uses a lightweight neural network model deployed in a dedicated worker thread for non-linear mapping to generate a CSS style rule set that precisely matches the current device state. Finally, atomic style updates are completed through the Document Object Model's stylesheet object interface, without triggering a re-layout or redraw operation of the Document Object Model tree.

[0020] Reference Figure 1-3 The website dynamic automatic optimization method includes the following steps: S1, obtain the physical shape parameters and viewport geometric features of the foldable screen device in real time through the browser's native device state awareness interface; S2, combine the physical shape parameters and viewport geometric features into a device state vector, and input the device state vector into a pre-trained lightweight neural network model; S3, output a CSS style rule parameter set from the lightweight neural network model; S4, convert the CSS style rule parameter set into a standard CSS rule string, and inject the standard CSS rule string into the end of the page root style sheet through the document object model's stylesheet object interface, overriding the original static media query rules and completing the atomic style update.

[0021] The above steps will be further elaborated below, and the specific implementation methods of the above steps have been shown, as follows.

[0022] In step S1, the physical shape parameters and viewport geometric features of the foldable screen device are obtained in real time through the browser's native device state awareness interface. The specific execution flow is as follows: S101: Obtain physical shape and screen segmentation information. This step uses a combination of native browser interfaces to accurately obtain the physical state of the foldable screen device, specifically including the following steps: S10111: In the page, listen for the deviceorientation event using window.addEventListener. When the event is triggered, read the device's Euler angle data from the event object, which typically includes alpha (rotation around the Z-axis), beta (rotation around the X-axis), and gamma (rotation around the Y-axis). For foldable screen devices, the folding angle is mainly related to the change in beta or gamma angles (depending on the device coordinate system definition).

[0023] In this embodiment, the absolute value of the beta angle is mapped to the folding angle, and the calculation formula is: folding angle = Math.abs(event.beta). The raw angle data obtained by this calculation will contain sensor noise.

[0024] S1012: To eliminate jitter and obtain smooth and continuous angle values, a first-order infinite impulse response (IIR) low-pass filter is applied to the continuously calculated folded angle sequence in step S101.1. Let rawAngle be the original angle at the current moment, and filteredAngle be the filtered angle at the previous moment. Then, the filtered angle filteredAngle at the current moment is calculated by the following formula: filteredAngle = 0.8 * filteredAngle + 0.2 * rawAngle.

[0025] The coefficients 0.8 and 0.2 are the filter's feedback and feedforward coefficients, which can be adjusted according to the requirements for smoothness and response speed. This filtering process is executed synchronously in each deviceorientation event callback.

[0026] S1013: Read the physical coordinates of the hinge and screen segmentation information through the experimental foldable screen device interface provided by the browser (in this embodiment, specifically the window.screen.foldable interface, or the equivalent interface in future standardization). Call the screen.foldable.segments property, which returns an array of Segments. Each Segment object in the array explicitly contains the following properties: x (the horizontal coordinate of the top-left corner of the continuous display area relative to the top-left corner of the screen), y (the vertical coordinate), width (the width of the area), and height (the height of the area).

[0027] By parsing this array, one can accurately determine how the device is physically divided into one or more independent display areas.

[0028] S102: Listen for sudden changes in status and viewport changes. This step involves setting up an event listener to respond in real time to sudden and continuous changes in the physical form of the device and the display area.

[0029] S1021: Listen for and handle device folding state transition events. In the JavaScript execution environment, register a listener for device form change events using the `window.addEventListener` method. Specifically, listen for two events: deviceorientationchange: Used to sense significant changes in device orientation, and can serve as an auxiliary judgment for morphological changes.

[0030] foldchange (or device-specific shape event in the current browser implementation, such as screenfoldchange): This is the core event for capturing the fold / expand state transition.

[0031] In the callback function of the `foldchange` event, key properties are read from the event object. For example, accessing `event.screenState` or a similar property might yield a value such as "folded", "unfolded", or "half-folded". The system compares this state flag with the previously recorded state; if a change has occurred, a "state transition event" is immediately marked, triggering the subsequent style recalculation process.

[0032] S1022: Use ResizeObserver to accurately capture viewport geometry changes.

[0033] Create a ResizeObserver instance to observe changes in the viewport container's size. The target of the observation is the root element of the document (document.documentElement), as it represents the size of the current layout viewport.

[0034] In the ResizeObserver callback function, you can obtain a ResizeObserverEntry object containing the new size information from the entries parameter. You can then obtain the precise width and height of the current main viewport by reading entry.contentRect.width and entry.contentRect.height.

[0035] The size of the secondary viewport (such as the sub-screen area of ​​a foldable screen) may change indirectly through changes in the size of the primary viewport, or it may require a comprehensive judgment through specific CSS media queries (such as (spanning:single-fold-vertical)) or by checking the size of specific segments in screen.foldable.segments. In this implementation, when a non-continuous jump in the width of the primary viewport is detected (e.g., a change exceeding 100 pixels), it is determined that a change in the availability of the secondary viewport may have occurred, and the starting horizontal coordinate and width of the secondary viewport are then reread and updated from screen.foldable.segments.

[0036] The steps S101 and S102 described above together complete the real-time capture of the core dynamic attributes of the foldable screen device. S101 focuses on obtaining the original, direct physical state (angle, partition) from the hardware interface; S102 focuses on listening to the instantaneous events triggered by user operation or system that cause changes in these states or display areas. The combination of the two constitutes a complete perception of the device's "current static state" and "moment of dynamic change".

[0037] S103: Construct a comprehensive parameter set and calculate derived indicators. This step standardizes and integrates the raw data obtained in S101 and S102 and performs secondary calculations to generate a set of standardized parameters that characterize the current device and content status and can be directly used for neural network inference.

[0038] S1031: Assign the specific data obtained in the previous steps to the corresponding morphological parameter variable: fold angle (foldAngle): directly use the smoothed angle value (unit: degrees) after low-pass filtering in S101.2.

[0039] Hinge position coordinates (hingeX, hingeY): Analyzed from the screen.foldable.segments array obtained from S101.3. In a typical dual-segment foldable screen, the two display segments (segments[0] and segments[1]) are adjacent in the folded state. The horizontal coordinate of the hinge can be approximated as the right boundary of the first display segment (segments[0]), i.e., hingeX = segments[0].x + segments[0].width; the vertical coordinate is taken as their common upper boundary, i.e., hingeY = segments[0].y.

[0040] Screen unfolded state indicator (isUnfolded): Based on the foldchange event captured in S102.1, or by logically determining the current number and layout of screen.foldable.segments. For example, if the segments array has a length of 2 and two segments are consecutive and do not overlap in the horizontal or vertical direction, it is determined to be in the unfolded state (isUnfolded = true); otherwise, it is in the folded state (isUnfolded = false).

[0041] S1032: Viewport Width and Height: Directly taken from the clientWidth and clientHeight values ​​of document.documentElement obtained by the ResizeObserver callback function in S102.2 (unit: pixels).

[0042] The starting horizontal coordinate (secondaryViewportX) and width (secondaryViewportWidth) of the secondary viewport are parsed from the segments array obtained from S101.3. Assuming that segments[1] represents the secondary screen (or another part of the screen in the collapsed state), then secondaryViewportX = segments[1].x, secondaryViewportWidth = segments[1].width.

[0043] Device pixel ratio (devicePixelRatio): can be obtained directly through the window.devicePixelRatio API.

[0044] S1033: Calculate the content density coefficient. This coefficient is used to quantify the compactness of text content within the viewport. The calculation steps are as follows: Traversing text nodes: Use the document.createTreeWalker method to create an iterator, set the NodeFilter.SHOW_TEXT filter, and perform a depth-first traversal of the current document's DOM tree to visit each text node.

[0045] Get and accumulate the area of ​​the text region: For each visited text node, execute: a. Find its nearest parent element that contains a block-level layout (usually by looping through the element until the element's getComputedStyle(element).display property value is block, inline-block, flex, grid, etc.).

[0046] b. Call the getBoundingClientRect() method of the parent element to obtain its rectangle information (rect) relative to the viewport.

[0047] c. Calculate the area of ​​the rectangle: area = rect.width * rect.height. To avoid duplicate calculations, skip subsequent text nodes contained within the parent element if it has already been visited during this iteration.

[0048] d. Add the accumulated area to the total text area variable totalTextArea.

[0049] The content density factor, contentDensityFactor, is calculated as follows: contentDensityFactor = totalTextArea / (viewportWidth * viewportHeight). This result is a dimensionless ratio. To prevent division by zero errors, the factor is set to 1.0 by default when the viewport area is 0.

[0050] Step S103 involves processing and standardizing the raw data. It transforms sensor data and API outputs from different sources and in different formats into a unified set of structured numerical parameters and feature identifiers that can be directly used for subsequent calculations. In particular, by calculating the content density coefficient, the scale of visual content is taken into consideration, providing crucial context for subsequent intelligent style decisions.

[0051] In summary, through three distinct steps S101 to S103 in step S1, the system completes a full chain from low-level hardware signal acquisition to event-driven response, and then to high-level parameter fusion and calculation. Each step clearly defines the native browser interface used, data processing method, and key outputs, ensuring that those skilled in the art can reproduce the device's state awareness function in a browser environment that supports the corresponding API, based on this description.

[0052] After completing step S1 above, which involves real-time and accurate perception of the device's physical form and display environment, the system has acquired a complete and standardized set of raw parameters. These parameters will then be transformed into a unified representation that is machine-understandable and computable, and processed by an intelligent model.

[0053] Therefore, the goal of step S2 is to efficiently and accurately map the multi-dimensional parameters output from S1 into the decision-making basis required for subsequent style generation. Essentially, this involves building an intelligent bridge from "device status" to "style rules." This is not merely a simple packaging of data, but rather crucial data preparation and preprocessing for the subsequent nonlinear, high-precision inference of the neural network.

[0054] Step S2: Constructing the State Vector and Executing Neural Network Inference. After obtaining and calculating a series of precise physical shape and viewport feature parameters in Step S1, this step aims to transform these parameters into a format suitable for processing by the machine learning model, and infer the optimal CSS style control parameters through a pre-trained lightweight neural network. The specific implementation process is as follows: S201: Normalize the raw parameters obtained from step S1 according to their type to eliminate dimensional differences and improve the stability of model training and inference accuracy.

[0055] Folding angle: Used directly, its value range is usually [0, 180] degrees, which is within a physically reasonable range.

[0056] Coordinate and size parameters (hinge position x-coordinate, main / secondary viewport width and height, secondary viewport starting x-coordinate): These pixel values ​​are scaled by dividing them by a preset base size (e.g., 1920 pixels) and mapped to a range around [0, 1].

[0057] Screen unfolded state indicator: This is a boolean value, mapped to 0 for collapsed state and 1 for unfolded state.

[0058] Content density coefficient: This coefficient is a dimensionless ratio, which is usually within a reasonable range of [0, 5]. It can be used directly or smoothly constrained to the interval [-1, 1] by the tanh function.

[0059] Device Pixel Ratio (DPR): This parameter is not directly used as an input feature, but is used in the final calculation of subsequent style parameters such as font size.

[0060] The purpose of step S201 is to transform sensor data and geometric data of different types and dimensions into a standardized set of real numbers with a relatively stable numerical distribution, suitable for neural network processing. This is crucial for ensuring effective model learning and accurate generalization.

[0061] S202: Assembly equipment state vector. The eight key parameters, normalized by S201, are assembled into an 8-dimensional real vector in a fixed order, serving as the unified input to the neural network. The dimensions of this vector correspond to: Folding angle (after normalization) Hinge position x-coordinate (normalized) Screen unfolded status indicator (0 or 1) Main viewport width (normalized) Main viewport height (normalized) The starting x-coordinate of the secondary viewport (after normalization) Secondary viewport width (normalized) Content density coefficient (after processing) This vector is a compact digital summary of the current physical state, display environment, and content density of the foldable screen device.

[0062] S203: Prepare and load a lightweight inference model in a dedicated thread. To ensure that real-time inference does not block user interface interaction, this step initializes and loads a neural network model optimized for the browser environment in a separate Web Worker thread.

[0063] S2031: Create and initialize a Web Worker thread. In the main thread, create a dedicated Web Worker thread using the `new Worker('. / js / foldable-layout-worker.js')` constructor, specifying the path to the script file that will host the model and inference logic. Then, establish a bidirectional communication channel between the main thread and the Worker thread using the `worker.onmessage` and `worker.postMessage()` methods. This channel is used by the main thread to send the device state vector to be inferred to the Worker and to receive the CSS control parameter set returned by the Worker.

[0064] S2032: Define the model structure and implement dependency-free ensemble. The lightweight neural network used by the system is a fully connected feed-forward neural network specifically designed for foldable screen style mapping. Its specific structure is defined as follows: Input layer: 8 nodes, which strictly correspond to the 8-dimensional standardized device state vector constructed by S202.

[0065] Hidden layers: Contain two fully connected (dense) layers. The first hidden layer has 64 neurons, and the second hidden layer has 32 neurons. Both hidden layers use the ReLU (Rectified Linear Unit) function as the activation function to introduce non-linear mapping capabilities.

[0066] Output layer: A fully connected layer with 16 nodes, corresponding to 16 key CSS style adjustment parameters (such as grid baseline column width, font size baseline value, padding scaling factor, etc.). This layer uses a linear activation function to output continuous parameter values.

[0067] To eliminate runtime dependencies on network resources, the trained TensorFlow.js model is integrated into the client in the following way: Use the model.save() method in TensorFlow.js to export the model topology file (model.json) and the weight binary file (group1-shard.bin).

[0068] In the build process of a front-end project (e.g., using Webpack or Vite), the contents of the above model files can be converted into Base64 encoded strings by configuring the corresponding plugins or loaders (such as webpack-asset-inline or custom conversion scripts).

[0069] These Base64 strings are treated as JavaScript constants and directly inlined into the Web Worker's script source file (foldable-layout-worker.js). In this way, the model data becomes part of the script itself.

[0070] Step S2031 establishes a parallel computing environment, ensuring UI smoothness. Step S2032 defines a model structure with controllable complexity suitable for real-time inference, and achieves "zero network request" loading of the model through resource inlining technology during construction. This is the key to ensuring reliable operation of the solution in offline and weak network environments.

[0071] S2033: Load the model from memory in the Worker thread. The model loading and initialization are completed within the execution context of the foldable-layout-worker.js script. The script already includes inline string constants representing model data (such as MODEL_JSON_BASE64 and WEIGHTS_BASE64).

[0072] When the Worker thread starts, it first decodes these Base64 strings into raw JSON strings and binary weight data using the atob() function.

[0073] Use the `tf.io.fromMemory()` tool provided by TensorFlow.js to create an in-memory storage interface that points to the model data in memory. This requires constructing an object that meets the required format, containing three key fields: `modelTopology` (a JSON object representing the model topology), `weightSpecs` (weight specifications), and `weightData` (decoded binary weight data).

[0074] The `tf.loadLayersModel()` function is called, passing the memory storage interface created in the previous step as a parameter, to directly load and instantiate the neural network model from memory data. The loaded model instance is then cached in the global scope of the Worker, awaiting inference calls.

[0075] In summary, S202 and S203 together completed the environment and data preparation before inference. S202 generated standardized input vectors; S203 prepared a thread-safe computing environment (Web Worker) without external dependencies and a pre-trained, well-structured inference model (lightweight neural network). Model embedding is key, as it eliminates performance bottlenecks and network uncertainties.

[0076] S204: Perform neural network inference and generate style parameters. This step completes the intelligent mapping from device state vectors to CSS style parameters in the Web Worker thread.

[0077] S2041: Send inference request.

[0078] The main thread encapsulates the standardized device state vector obtained in step S202 into a message and sends it to the Web Worker thread via the postMessage method to request the execution of inference computation.

[0079] S2042: Perform forward propagation computation of the model. After receiving the request, the Web Worker thread performs the following core operations: Prepare model input: Convert the received state vector data into the tensor input format required by the neural network model.

[0080] Model Invocation: Feed the prepared input tensor into the lightweight neural network model that has been loaded in step S203, triggering the forward propagation computation of the model.

[0081] Obtaining the output result: After the model calculation is completed, an array containing 16 values ​​is obtained from its output layer. This array is the set of CSS style adjustment parameters corresponding to the current device state (such as the adjustment values ​​of core properties such as layout, font, and spacing).

[0082] S2043: Returns the inference result. The Web Worker thread returns the calculated 16-dimensional parameter array to the main thread via the postMessage method for use in subsequent style generation steps.

[0083] Performance characteristics: By adopting a lightweight model structure and optimization technology, the inference process can be completed within milliseconds on typical mobile devices with minimal memory overhead, thus meeting the real-time adaptation requirements of continuous form changes of foldable screens.

[0084] Step S204 defines the data flow and operation flow for intelligent inference completed in an independent thread. It transforms the abstract "state vector" into concrete, executable "style parameters" through a pre-trained nonlinear model, which is the key computational step in automating and intelligentizing the entire dynamic optimization scheme.

[0085] In summary, step S2 is the core of the entire solution for achieving "intelligent" adaptation. Through S201 and S202, it abstracts complex real-time sensor data into a machine-understandable vector; then, through S203 and S204, in an independent and efficient thread, it instantly calculates the optimal style parameters for the current specific state using pre-learned complex mapping relationships. This process replaces the cumbersome and imprecise manual breakpoint rules or heuristic calculations of traditional solutions. At this point, the system has completed the transition from "perceiving the state" to "generating decision parameters." Next, step S3 will interpret and apply these decision parameters, transforming them into CSS style rules that the browser can directly execute.

[0086] Step S3: Interpreting and Applying the CSS Style Rule Parameters Output by the Neural Network. After obtaining the 16-dimensional CSS control parameter set output by the neural network in Step S2, the core task of this step (S3) is to interpret, calculate, and transform these abstract parameters to generate specific, executable CSS style rule logic. This process maps numerical values ​​to style decisions that directly affect layout, typography, and rendering behavior. The specific implementation process is as follows: S301: Parse and transform layout and grid parameters. This sub-step processes parameters related to the macro-page structure and generates CSSGrid layout rules.

[0087] S3011: Calculate the dynamic baseline column width: Read the maximum width of the main content area (denoted as W_main, in pixels) and the weight of the split-screen area allocation (denoted as α, a real number in the range of 0 to 1.5) from the parameter set. The baseline column width C_base is calculated using the formula C_base=W_main / (1+α). This formula dynamically adjusts the width allocation between the main content area and the sidebar (or secondary screen area) based on the weight α. The larger the value of α, the higher the allocation ratio obtained by the sidebar, and the lower the baseline column width is accordingly.

[0088] S3012: Generate Flexible Grid Column Definitions: Uses the calculated C_base value to construct the column definitions for the CSSGrid. The generated CSS property is: grid-template-columns:repeat(auto-fit,minmax(C_basepx,1fr));. This rule indicates that the number of grid columns automatically adapts to the container width (auto-fit), and the width of each column is flexible, with a minimum of C_base pixels and a maximum of 1fr (equal distribution of the remaining space).

[0089] S3013: Set Adaptive Line Height Ratio: Set the global text line height based on the content density coefficient (denoted as D, dimensionless) obtained from the device status. A conditional rule is used: if D > 1.5, set line-height: 1.6; otherwise, set line-height: 1.4;. This ensures more spacious line spacing for enhanced readability when content is dense, and a more compact layout to utilize space when content is sparse.

[0090] Steps S3011 to S3013 together achieve the intelligent dynamic generation of the main layout framework of the page. S3011 dynamically calculates the baseline size of the layout unit based on the screen segmentation weight; S3012 uses the characteristics of modern CSSGrid to transform this size into a highly adaptable column layout rule; and S3013 optimizes the vertical spatial rhythm based on content density. These three steps constitute the layout foundation for responding to changes in the form factor of foldable screens.

[0091] S302 (Full Public Version): Handles visual metrics and flexible container parameters. This sub-step processes style parameters that directly affect visual comfort and the arrangement of internal components, converting the numerical output of the neural network into specific CSS visual and layout rules.

[0092] S3021: Determine adaptive font size. Read the font size baseline value (denoted as F_base, in logical pixels) from the parameter set output by the neural network. To ensure font clarity at different screen densities and constrain its variation range, use the CSS `clamp()` function for dynamic calculation and incorporate the device pixel ratio (DPR). The specific generated CSS rules are as follows: font-size:clamp(14px,F_base*DPR,22px); This rule limits the final font size to a visually safe range of 14 to 22 pixels, and uses the product of F_base and DPR as the ideal value to achieve high-definition adaptation and smooth scaling based on screen precision.

[0093] S3022: Sets the spacing between elements and components. Inner padding setting: Directly converts the element's inner padding base value (denoted as P_base, in pixels) in the parameter set into the CSS padding property. For example, it can be uniformly applied to container elements: `padding: P_basepx;`.

[0094] Spacing settings: The margin scaling factor (denoted as M_scale, dimensionless) from the parameter set is applied to the CSS property controlling the spacing of child elements. Specifically, a baseline spacing constant BASE_GAP = 0.5rem is preset (this value originates from the basic spacing unit in a typical design system). The final spacing CSS rule is: gap:calc(M_scale*BASE_GAP); Here, `calc()` is a CSS calculation function, and `BASE_GAP` can be adjusted according to the actual design system. This rule is mainly used to set the `gap` property in `grid-gap` or `flexbox` to dynamically control the spacing between grid or flexbox items.

[0095] S3023: Configures the layout direction and alignment of the flexbox container. Maps the values ​​in the parameter set representing the flexbox layout mode to standard CSS properties.

[0096] Layout direction mapping: The main axis direction parameter (denoted as FD_val) of the flex container in the parameter set is an enumeration value. The mapping rule is: when FD_val equals 0, flex-direction:row; (horizontal arrangement); when FD_val equals 1, flex-direction:column; (vertical arrangement).

[0097] Alignment mapping: The cross axis alignment parameter (denoted as AI_val) in the parameter set is an enumeration value. The following complete mapping rules are adopted: when AI_val equals 0, align-items:flex-start; (start-point alignment); when AI_val equals 1, align-items:center; (center alignment); when AI_val equals 2, align-items:stretch; (stretch alignment).

[0098] Technical effect summary: S3021 ensures the readability and visual consistency of the core text content; S3022 establishes a comfortable internal spatial rhythm through quantitative control of inner margins and gaps; and S3023 provides clear direction and alignment instructions for flexible layout. Together, these three translate the abstract parameters of "comfort" and "arrangement intention" into layout instructions that the browser can precisely execute.

[0099] S303: Formulate content display and rendering optimization strategies. This sub-step determines the display method of text content and the browser rendering optimization mechanism based on the device's physical state and viewport geometry, and converts relevant parameters into specific display rules and control instructions.

[0100] S3031: Dynamically select text wrapping strategy. The CSS `text-wrap` property is set based on the current folding angle (denoted as θ, in degrees) obtained from the device status awareness module. Specific rules are as follows: When θ < 45° or θ > 135°, the device is determined to be in a stable state that is close to closed or fully extended. The normal line wrapping mode is adopted, and the CSS rule is generated as: text-wrap:normal;.

[0101] When 45°≤θ≤135°, the device is determined to be in a transitional state such as half-open or closed. In order to optimize the visual effect of paragraphs under widescreen or special screen ratios, a balanced line wrapping mode is adopted, and the CSS rule is generated: text-wrap:balance;.

[0102] S3032: Method for handling overflow of decision content.

[0103] The CSS overflow property is set based on the secondary viewport width (denoted as W_secondary, in pixels) obtained from the device status awareness module to prevent content from being improperly truncated in narrow areas. The specific rules are as follows: If W_secondary < 300px, the secondary viewport area is considered relatively narrow. To ensure content accessibility, a CSS rule is generated: overflow:scroll;, allowing the content in this area to be viewed by scrolling.

[0104] Otherwise, generate the CSS rule: overflow:visible;, allowing the content to display normally.

[0105] S3033: Generate rendering performance optimization instructions.

[0106] The forced reflow suppression flag (denoted as F_opt) in the parameter set is a Boolean parameter directly output by the lightweight neural network model. This flag is generated based on the model's analysis of the current device state and style update pattern (e.g., predicting whether the layout is in a high-frequency change phase), and is used to control whether to enable the enhanced layout jitter suppression mechanism in subsequent style injection processes. The logic is as follows: if the value of F_opt is true, it indicates that subsequent steps should enable optimization; if it is false, it is processed according to the normal process.

[0107] Steps S302 and S303 work together to precisely control visual presentation details and interactive adaptation strategies. S302 ensures text readability, reasonable spacing, and flexibility of internal layout; S303, on the other hand, intelligently selects the most suitable text layout method and content container behavior for the unique shape (angle) and limitations (narrow viewport) of foldable screens, and provides performance optimization clues to comprehensively improve user experience and rendering efficiency.

[0108] S304: Integrate style rules and optimization instructions. This step is the final step of S3 and aims to integrate the scattered style decisions and optimization instructions generated in the previous steps into a unified, structured dataset so that they can be applied efficiently and accurately in subsequent style injection steps.

[0109] S3041: Aggregates generated style properties and directives. This aggregates all independent CSS style properties generated in S301 through S303 and their corresponding values. Additionally, the forced reflow suppression flag generated in S303 is included as a separate rendering optimization control directive.

[0110] S3042: Construct a structured rule set. Organize all the information gathered above into a data set with a well-defined internal structure. This set fully includes all visual presentation rules (CSS properties and values) generated by the neural network model and applicable to the current device state, as well as a performance optimization control flag.

[0111] S3043: Output the final style rule set. This completed structured data set is the final output of step S3. As a complete "style scheme" that can be directly delivered to the style application process, it precisely defines how to visually adapt and optimize the rendering of web pages in the current foldable screen form.

[0112] Step S3 transforms these rules into style "instructions" that the browser can directly understand and execute through a series of explicit calculation formulas, conditional logic, and CSS syntax mappings. This process fully demonstrates the intelligence of the invention: layout rules (S301) dynamically adapt to screen segmentation and content density; visual rules (S302) finely adjust the reading experience and component layout; and interaction and performance strategies (S303) cleverly address the unique challenges brought about by changes in folding form. At this point, a complete, precise, and customized style solution is ready. Next, step S4 will be responsible for dynamically injecting and applying these rules to the webpage in an efficient and lossless manner, achieving the final step from intelligent decision-making to perfect visual presentation.

[0113] Step S4: Dynamically inject the style rule set into the page and optimize rendering. After the structured style rule set was generated in step S3, this step (S4) is responsible for efficiently and accurately applying these rules to the web page document and implementing rendering optimization to complete the final stage from decision-making to presentation.

[0114] S401: Serialize the style rule set into standard CSS text. This step converts the structured style rule set output by S304 into a standard CSS rule string that the browser can directly parse and apply.

[0115] S4011: Prepare CSS property value strings. Iterate through the style rule object output by S304. For each property key-value pair in the object, ensure that its "value" part is a complete value string that conforms to the W3C CSS syntax specification.

[0116] If the "value" itself is already a syntactically correct string generated by the S3 step (e.g., '1.6', 'balance', 'scroll'), then use it directly.

[0117] If the "value" is a raw numerical value representing length, size, etc. (for example, the number 256, which represents the baseline column width, directly output from a neural network), it needs to be formatted into a CSS value string with units at this step. For example, format the number 256 as '256px'. If the value needs to be embedded in a more complex CSS function (such as for grid-template-columns), it can be further constructed into a complete expression such as 'minmax(256px,1fr)' or 'repeat(auto-fit,minmax(256px,1fr))'.

[0118] S4012: Concatenate CSS declaration strings. For each property in the rule object, perform the following: Treat the property's "key" as the CSS property name. Followed by a colon character (:). Concatenate the valid CSS property value strings processed by S4011. Finally, end with a semicolon character (;).

[0119] Thus, a single property is transformed into a complete CSS declaration (such as grid-template-columns:repeat(auto-fit,minmax(256px,1fr));).

[0120] S4013: Generate complete CSS rule text. Concatenates the CSS declaration strings obtained from the conversion of all properties in the rule object into a single, continuous string. This string contains the complete CSS rule text, including all dynamically generated styles.

[0121] S402: Prepare the page stylesheet and clean up historical dynamic rules. Before injecting new style rules, ensure that only one set of dynamic rules generated by this system exists on the page. This step is responsible for locating the target stylesheet and removing any existing old rule blocks.

[0122] Identify and retrieve the target stylesheet. Use the `document.styleSheets` property to retrieve the collection of all stylesheets in the current document. Select the most suitable stylesheet from this collection as the target for dynamic rule injection; typically, choose the earliest created stylesheet in the document or the root stylesheet that serves as the style base. One deterministic approach is: Iterate through the document.styleSheets collection.

[0123] Examine the ownerNode property of each stylesheet object (CSSStyleSheet). This property points to the DOM element that imported this stylesheet (such as...). <link> or <style>）。

[0124] 选择ownerNode位于document.head元素内，且是其中第一个<style>元素或最后一个<linkrel=”stylesheet”>元素所对应的样式表作为目标样式表。此选择逻辑确保了规则注入的基础性和广泛的应用范围。

[0125] 遍历规则列表并识别动态规则块。获取目标样式表对象后，访问其cssRules属性（或rules属性）以获取其包含的所有CSS规则列表。遍历此列表中的每一条规则（CSSRule对象）。

[0126] 对于每条规则，通过访问其cssText属性来获取该规则的完整文本表示。然后，判断此cssText字符串是否以动态规则块的唯一标识注释 / *DYNAMIC-FOLDABLE-STYLE-BLOCK* / 开头。

[0127] 移除已识别的历史动态规则。在遍历过程中，如果发现某条规则的cssText以标识注释开头，则记录下该规则在cssRules列表中的索引位置。随后，调用目标样式表对象的deleteRule(index)方法，传入该索引值，即可将这条旧有的动态规则块从样式表中移除。若未找到，则此步骤不执行任何操作。

[0128] 步骤S401和S402共同为样式注入做好数据与环境准备。S401将内部数据格式转换为浏览器可解析的标准CSS；S402则通过"先清理后注入”的机制，确保了样式表状态的纯净与可预测性，避免了新旧动态规则冲突或累积，这是实现样式精准、无副作用更新的前提。

[0129] S403：将新CSS文本注入样式表末尾。将S401生成的CSS文本包裹上标识注释，构造出一条完整的CSS规则。例如：其格式可为： / *DYNAMIC-FOLDABLE-STYLE-BLOCK* / [选择器]{[由S401生成的CSS文本]}，其中[选择器]为页面中接收动态样式的容器元素的选择器。”其中，.dynamic-container是一个预先定义在页面HTML结构中的容器元素选择器，或是一个由系统添加的特定类名。随后，调用样式表对象的insertRule(ruleString,index)方法，将这条新规则插入到样式表规则列表的末尾（即index参数设置为样式表当前规则的总数）。将规则插入末尾能利用CSS的层叠规则，确保其优先级高于前面已定义（尤其是静态媒体查询）的样式，从而有效覆盖旧有规则。

[0130] S404：触发样式生效与选择性回流抑制。注入规则后，需要确保浏览器应用新样式，并根据需要优化渲染性能。

[0131] 触发样式计算：通过执行一个微任务（例如Promise.resolve().then(()=>{})）或读取一个元素的offsetHeight属性，促使浏览器清空微任务队列并开始下一轮的样式计算与布局，从而让新样式在下一渲染帧中生效。

[0132] 条件性执行回流抑制：检查从S3传递来的强制回流抑制标志位(F_opt)。

[0133] 若F_opt为假(false)，则跳过此优化步骤。

[0134] 若F_opt为真(true)，则执行以下优化操作以抑制"布局抖动”：a.注册回调：立即调用requestAnimationFrame()函数，注册一个回调函数。

[0135] b.强制同步计算：在该回调函数内部，对应用了新样式的目标元素执行window.getComputedStyle(element)操作。此操作会强制浏览器立即进行同步的样式计算。

[0136] c.阻断后续阶段：通过在该回调中不执行任何可能触发重排或重绘的DOM操作，并确保其快速执行完毕，使得浏览器在这次requestAnimationFrame周期内，仅完成样式计算，而将实际的布局(Layout)与绘制(Paint)阶段推迟到下一个自然的浏览器渲染周期中。这样，便将一次潜在的"强制同步回流”合并到了异步渲染流程里，避免了高频更新下连续同步回流带来的性能卡顿。

[0137] 步骤S4是整个技术方案中实现"无感”或"平滑”视觉适配的关键执行层。它通过S401-S403，以原子操作的方式，将智能生成的样式规则精准、高效地替换到网页中，覆盖了静态规则。更重要的是，S404引入了一种智能的、条件触发的渲染优化机制，它通过一个标志位，只在预测到可能产生性能损耗（如布局不稳定）的场景下，才启动高级的回流抑制策略，从而在"确保样式及时更新”与"维持渲染高性能”之间取得了卓越的平衡。

[0138] 至此，系统完成了从实时感知设备状态（S1），到智能推理样式参数（S2-S3），再到高效无扰更新样式（S4）的完整闭环。这一闭环使得折叠屏网页能够在其任意形态变化过程中，自动保持布局的稳定性、内容的可读性与交互的流畅性，从根本上解决了背景技术中提出的核心问题。

[0139] 另一方面，网站动态自动优化系统包括设备状态感知模块、设备状态向量构建模块、轻量化神经网络推理模块以及样式规则注入模块。设备状态感知模块通过浏览器原生设备状态感知接口实时获取折叠屏设备的物理形态参数与视口几何特征。设备状态向量构建模块将物理形态参数与视口几何特征组合为八维设备状态向量。轻量化神经网络推理模块将设备状态向量输入至部署于Web Worker线程中的轻量化神经网络模型，输出十六维CSS样式规则参数集。样式规则注入模块将参数集转换为标准CSS规则字符串，并通过CSSStyleSheet.insertRule方法注入至页面根样式表末尾，完成原子级样式更新。系统各模块间通过结构化克隆算法传递数据，不涉及全局对象引用，确保线程安全与内存隔离。轻量化神经网络模型以内嵌形式存在于Web Worker脚本中，无外部依赖，适用于弱网环境与低端设备。

[0140] 本实施例在三星Z Fold4设备上进行实测验证。测试页面包含复杂网格布局、弹性容器与文本密集区域。传统Bootstrap方案在设备从折叠态展开至完全展开态过程中，出现三次布局错位，水平滚动条持续存在，文字重叠率达百分之十二点三。本发明方案全程保持布局稳定，网格区域自适应分屏，主次内容区比例平滑过渡，文字重叠率降至百分之零点三以下。Lighthouse性能评测显示，页面交互延迟降低四十五毫秒，强制回流频次减少至传统方案的百分之二十八，首屏渲染时间不受额外资源加载影响，在模拟弱网环境下布局渲染失败率为零。系统内存占用峰值为七点六兆字节，主线程CPU占用率提升不超过百分之三，满足移动端实时性要求。

[0141] 综上，本发明通过原生接口获取高维设备状态，利用轻量化神经网络实现非线性映射，结合原子级样式注入机制，有效解决了折叠屏设备动态适配的技术难题，实现了高性能、高精度、无依赖的客户端自动优化。

[0142] 对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明，因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的。

[0143] 此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。< / style>

Claims

1. A method for dynamic automatic optimization of a website, characterized in that, include: The physical form parameters and viewport geometric features of the foldable screen device are obtained in real time through the browser's native device status awareness interface. The physical form parameters include folding angle, hinge position coordinates, and screen unfolding status indicator. The viewport geometric features include main viewport width, main viewport height, secondary viewport starting horizontal coordinate, secondary viewport width, device pixel ratio, and content density coefficient. The physical morphology parameters and viewport geometric features are combined into a device state vector, and the device state vector is input into a pre-trained lightweight neural network model, which is deployed in a browser-dedicated worker thread. The lightweight neural network model outputs a set of CSS style rule parameters; The CSS style rule parameter set is converted into a standard CSS rule string, and then injected into the end of the root stylesheet of the page through the stylesheet object interface of the document object model, overriding the original static media query rules, thus completing an atomic style update. The update process does not trigger a re-layout or redraw operation of the document object model tree.

2. The website dynamic automatic optimization method according to claim 1, characterized in that, The browser's native device state awareness interface is used to obtain the physical shape parameters and viewport geometry features of the foldable screen device in real time, including: The device's current physical orientation and folding angle are obtained through the screen orientation sensor interface; Listen for device state transition events from folded to unfolded or vice versa using a device attitude event listener; Capture geometric changes between the primary and secondary viewports using the viewport change event handler; The hinge area coordinates and screen segment information are read through the experimental foldable screen device interface. The returned data structure contains a segment array, and each array element defines the top-left corner coordinates and width and height dimensions of a continuous display area.

3. The website dynamic automatic optimization method according to claim 1, characterized in that, The physical morphological parameters are combined with the viewport geometric features to form a device state vector, including: The folding angle, hinge position x-coordinate, screen unfolding status indicator, main viewport width, main viewport height, secondary viewport starting x-coordinate, secondary viewport width, and content density coefficient are combined into an eight-dimensional real vector as the device state vector, where the content density coefficient is the ratio of the main viewport area to the text content area.

4. The website dynamic automatic optimization method according to claim 1, characterized in that, Inputting the device state vector into a pre-trained lightweight neural network model includes: The device state vector is transmitted to the Web Worker thread using a structured cloning algorithm; The Web Worker thread loads a lightweight neural network model in TensorFlow.js format, stored in an embedded form. Perform model inference to generate a sixteen-dimensional CSS style rule parameter set.

5. The website dynamic automatic optimization method according to claim 1, characterized in that, The lightweight neural network model outputs a set of CSS style rule parameters, including: The baseline column width is calculated based on the maximum width of the main content area and the weights assigned to the split-screen areas, and a grid template column definition in the form of repeat(auto-fit, minmax(baseline column width, 1fr)) is generated. The line height ratio is dynamically set based on the content density coefficient. When the content density coefficient is greater than 1.5, the line height ratio is 1.6; otherwise, it is 1.

4. The `clamp` function is used to express the font size baseline value, with a minimum value of 14 pixels and a maximum value of 22 pixels. The ideal value is the font size baseline value output by the neural network multiplied by the device pixel ratio. Set the text wrapping strategy according to the folding angle. Set it to normal when the folding angle is less than 45 degrees or greater than 135 degrees, and set it to balance when the folding angle is in the middle range. The overflow handling mode is set according to the width of the secondary viewport. When the width of the secondary viewport is less than 300 pixels, it is set to scroll; otherwise, it is set to visible.

6. The website dynamic automatic optimization method according to claim 1, characterized in that, Convert the CSS style rule parameter set into a standard CSS rule string, including: Map the grid template column definition parameters to a CSS declaration of the form: `grid-template-columns: repeat(auto-fit, minmax(XXXpx, 1fr));` Convert the line height ratio, font size baseline value, padding baseline value, and margin scaling factor into valid CSS numeric expressions for line-height, font-size, padding, and margin, respectively. Convert the main axis direction, cross axis alignment, text wrapping strategy, and overflow handling mode of the flex container into standard keyword values ​​for the flex-direction, align-items, text-wrap, and overflow properties, respectively.

7. The website dynamic automatic optimization method according to claim 1, characterized in that, Injecting the standard CSS rule string into the end of the page root stylesheet includes: Check if there are dynamic rule blocks marked with the comment / * DYNAMIC-FOLDABLE-STYLE-BLOCK * / in the page root stylesheet; If it exists, call the CSSStyleSheet.deleteRule method to remove the rule block; Calling the CSSStyleSheet.insertRule method inserts the newly generated standard CSS rule string at the end index of the stylesheet rule list.

8. The website dynamic automatic optimization method according to claim 1, characterized in that, Complete atomic style updates without triggering a rearrangement or redraw operation of the Document Object Model tree, including: After injecting a new style rule, if the forced reflow suppression flag is true, the callback function registered by requestAnimationFrame will be called. The getComputedStyle method is executed inside the callback function to trigger synchronous style calculation; Prevent subsequent layout and drawing phases from executing, and merge potential forced reflows into the next natural rendering cycle.

9. A website dynamic automatic optimization system, characterized in that, include: The device status awareness module is used to obtain the physical form parameters and viewport geometric features of the foldable screen device in real time through the browser's native device status awareness interface. The physical form parameters include folding angle, hinge position coordinates, and screen unfolding status indicator. The viewport geometric features include main viewport width, main viewport height, secondary viewport starting horizontal coordinate, secondary viewport width, device pixel ratio, and content density coefficient. The device state vector construction module is used to combine the physical morphological parameters with the viewport geometric features into a device state vector. The lightweight neural network inference module is used to input the device state vector into a pre-trained lightweight neural network model. The lightweight neural network model is deployed in a browser-dedicated worker thread. Its input layer has eight nodes, and the hidden layer contains two fully connected layers with sixty-four and thirty-two nodes respectively. The activation function uses a modified linear unit. The output layer has sixteen nodes, corresponding to the numerical control parameters of sixteen key CSS properties. The lightweight neural network model outputs a set of CSS style rules parameters, which includes grid template column definitions, grid template row definitions, maximum width of the main content area, minimum width of the sidebar, font size baseline value, line height ratio, element padding baseline value, margin scaling factor, flex container main axis direction, cross axis alignment, text wrapping strategy, overflow handling mode, viewport unit baseline value, media query equivalent breakpoint threshold, split-screen area allocation weight, and forced reflow suppression flag. The style rule injection module is used to convert the CSS style rule parameter set into a standard CSS rule string, and inject the standard CSS rule string into the end of the root style sheet of the page through the style sheet object interface of the document object model, overriding the original static media query rules, completing the atomic style update, and the update process does not trigger the re-layout or redrawing operation of the document object model tree.

Images