Multi-interface collaborative optimization method and system for quickjs of embedded device

Abstract

The application discloses a QuickJS multi-interface collaborative optimization method and system of embedded equipment, relates to the technical field of JS multi-interface optimization, and comprises the following steps: S1, collecting interface task data, performing data preprocessing, identifying control difference and state change before and after the task; S2, setting a basic frame budget, constructing a task frame time consumption model, outputting a predicted frame time consumption, and comparing the current frame actual time consumption with the basic frame budget; S3, calculating the interface task priority, performing real-time sorting and scheduling, and establishing an asynchronous coroutine and task splitting and sticking mechanism; S4, outputting a structured rendering command, evaluating the redundancy of the control, and taking control adjustment measures; S5, constructing an error description vector, quantifying the deviation degree of the actual rendering result, and taking a rollback recovery measure; the problems that interface response depends on an event loop in the interaction between QuickJS and the underlying UI system, and that multiple JS interface tasks are simultaneously activated, resulting in abnormal interface rendering, are solved.

Description

Technical Field

[0001] This invention relates to the field of JS multi-interface optimization technology, specifically to a QuickJS multi-interface collaborative optimization method and system for embedded devices. Background Technology

[0002] As embedded devices rapidly evolve towards graphical and interactive interfaces, an increasing number of low- and medium-power terminals, such as smart home panels, industrial controllers, and vehicle information screens, are adopting lightweight JavaScript engines, such as QuickJS, Duktape, and JerryScript, as runtime support for interface logic control. This aims to lower the development threshold and enhance interface dynamism. Among these, QuickJS has become the preferred choice for embedding the JS layer of mainstream UI engines due to its small size, high execution efficiency, support for ES2020, and native C interface friendliness.

[0003] For example, invention patent CN119536613A discloses an interface rendering method, a lightweight device, and a server. The method includes: acquiring a rendering file of target resource data, wherein the rendering file is obtained by the server processing the target resource data; and rendering the rendering file onto a display interface according to a target interface layout. This invention aims to improve the smoothness of the interface rendering process on lightweight devices, enabling them to meet diverse interface rendering needs.

[0004] For example, invention patent CN116820457A discloses a lightweight UI operation method and system based on OpenGL. It employs initialization and drawing / refresh steps, creating a context, frame buffer, texture and render buffer, vertex array and vertex buffer, index array and index buffer, and vertex shader and fragment shader. It receives user operation commands from the user's operating device, performs fragment-by-fragment operations on the image to be processed, renders the fragment-by-fragment image to the texture in the created texture and render buffer, and swaps the rendered image with the drawn buffer and screen buffer to display the image on the screen. In this invention, programmers do not need to design the graphical interface by providing coordinates or using a visual UI editor; controls are automatically organized according to an optional, given hierarchical structure. In most cases, adding a new variable to the adjustment bar requires only one line of code.

[0005] However, in the process of implementing the inventive technical solution in the embodiments of this application, it was found that the above-mentioned technology has at least the following technical problems:

[0006] In embedded graphics systems, QuickJS works in conjunction with the underlying UI framework. However, this structure heavily relies on the event loop mechanism to drive interface responses, such as setTimeout, setInterval, user interaction events, and animation callbacks. When multiple UI tasks are active simultaneously, QuickJS's event loop becomes cluttered with numerous asynchronous tasks, leading to severe contention for underlying rendering resources. This makes it impossible to distinguish task priorities or rendering costs, resulting in UI anomalies, including stuttering, frame drops, control misalignment, state remnants, and animation flickering.

[0007] Therefore, in order to address the above issues, there is an urgent need for a QuickJS multi-interface collaborative optimization method and system for embedded devices. Summary of the Invention

[0008] Technical problems to be solved

[0009] To address the shortcomings of existing technologies, this invention provides a QuickJS multi-interface collaborative optimization method and system for embedded devices. In the interaction between QuickJS and the underlying UI system, the interface response depends on the event loop, and the simultaneous activation of multiple JS interface tasks leads to abnormal interface rendering.

[0010] Technical solution

[0011] To achieve the above objectives, this invention provides the following technical solution: a QuickJS multi-interface collaborative optimization method for embedded devices, comprising the following steps: S1, collecting interface task data that triggers and affects the UI, preprocessing the interface task data, generating snapshots of the control tree before and after the task, and identifying differences and state changes; S2, setting a base frame budget, constructing a task frame time consumption model based on the differences and state changes between control tree snapshots, outputting the estimated frame time consumption, and comparing the actual time consumption of the current frame with the base frame budget after rendering execution; S3, obtaining the preprocessed interface task data and normalized... S4: After optimizing the estimated frame time, the task priority of each interface is obtained. Real-time sorting and scheduling are performed based on task priority and time slice, and an asynchronous coroutine mechanism and task splitting and stickiness mechanism are established. S5: Differential comparison is performed on the control tree snapshot. Based on the differential comparison result, a structured rendering command is output, and the redundancy of the control is evaluated based on the differential comparison result. Control adjustment measures are taken based on the redundancy evaluation result. S6: Based on the structured rendering command, the control state is compared with the actual rendering result, an error description vector is constructed, the degree of deviation of the actual rendering result is quantified based on the error description vector, and rollback recovery measures are taken based on the degree of deviation.

[0012] Furthermore, the process involves collecting UI task data that triggers and affects the UI, preprocessing this data, generating snapshots of the control tree before and after each task, and identifying differences and state changes. Specifically, this includes intercepting and managing QuickJS timer functions, user interaction binding events, and microtasks; collecting UI task data for each trigger that affects the UI, including: storing task trigger type, task trigger timestamp, JS call stack, and UI target controls; capturing user trigger events; converting these events into a unified format and encapsulating them into tasks; and generating a unique ID for each task. A UI task database is established to store UI task data, and the UI task data is standardized and normalized. MiniVDOM snapshots of the control tree before and after the task are obtained, and the structure and attributes of the two UI control tree snapshots are compared to obtain the number of control changes in the UI control structure unit, i.e., the number of differential controls, and recorded. The number of differential controls is divided by the total number of UI controls to obtain the control influence intensity value. At the same time, each differential control node is traversed, and the number of bound event functions is counted and recorded. The event density is obtained by summing the number of event functions bound to all differential controls and then dividing by the number of differential controls.

[0013] Furthermore, a base frame budget is set, and a task frame time consumption model is constructed based on the differences and state changes between control tree snapshots. The estimated frame time is output, and the actual time consumption of the current frame is compared with the base frame budget after rendering execution. The specific process is as follows: a fixed base frame budget is set, and the available rendering time slice is adjusted in real time according to the device load; the maximum nesting level of the affected nodes in the control tree is traversed to obtain the UI level depth, and the number of differential controls, the density of bound events, and the UI level depth are obtained as task complexity feature vectors. At the same time, the actual rendering time of each type of task under different hardware environments is recorded during the operation, and the task complexity feature vector is fitted using a linear regression algorithm to construct a task frame time consumption model. The estimated frame time consumption of the task under the current device and state is output in real time, and the estimated frame time consumption is normalized as the basis for the asynchronous coroutine mechanism; after each frame rendering is completed, the actual time consumption of the current frame is compared with the set base frame budget in real time. If the rendering time of a certain frame exceeds the time consumption threshold, it is marked as an abnormal frame, and the degradation strategy control process is immediately triggered. The frame time consumption, frame drop rate, and task backlog are recorded for each frame rendering to construct an operation profile.

[0014] Further, the specific process of obtaining the preprocessed interface task data and the normalized estimated frame time to obtain the task priority of each interface is as follows: Obtain the interface task data and the normalized estimated frame time; determine the user interaction value based on the task trigger type; if the task type is actively triggered by the user, the user interaction value is 1, otherwise the user interaction value is 0; subtract the task trigger time from the current time to obtain the trigger delay; sum the control influence strength value and the bound event density to obtain the interface influence strength value; take the reciprocal of the sum of the trigger delay and 1 to obtain the response urgency factor; add 1 to the interface influence strength value and then take the logarithmic function to obtain the interface influence factor; subtract the estimated frame time from 1 to obtain the complexity penalty factor; add the user interaction value, response urgency factor, and interface influence factor to obtain the comprehensive task value; multiply the comprehensive task value by the complexity penalty factor to obtain the interface task priority value.

[0015] Furthermore, the specific process of real-time sorting and scheduling based on task priority and time slice, and the establishment of an asynchronous coroutine mechanism and a task splitting and sticking mechanism, is as follows: Tasks are sorted from high to low according to their interface task priority value and enter the asynchronous task queue. High-scoring tasks are scheduled first within the basic frame budget. The rendering granularity is dynamically adjusted using the interface task priority value. Tasks with consecutive priorities less than the priority threshold are merged, and the interface task priority value of each task is recorded. The estimated frame timeout is obtained. In the execution flow of the task scheduler, the frame budget time slice is polled. By reading the remaining available time and load of the current frame, the number of tasks that can be accommodated in the current frame and their execution order are determined. The scheduler selects the head of the task queue with the highest current interface task priority value and uses the asynchronous coroutine mechanism to asynchronously call the rendering process. A task splitting and sticking mechanism is established. Tasks whose estimated frame timeout exceeds the basic frame budget are split into subtasks. Each subtask corresponds to a small UI structure and is distributed across multiple consecutive frames and executed sequentially according to priority. Once a subtask is scheduled, its corresponding area will be kept stable in subsequent frames until the complete rendering is completed, during which time other low-priority tasks are prevented from inserting and covering the area.

[0016] Furthermore, the specific process of performing differential comparison on the control tree snapshot, outputting structured rendering commands based on the differential comparison results, and evaluating the redundancy of controls based on the differential comparison results is as follows: Receive the MiniVDOM snapshot of the control tree, extract the control structure, control attributes, and bound events of the current control tree, and simultaneously maintain a cache of the previous frame's MiniVDOM snapshot. Perform differential comparison on the control structure, control attributes, and bound events in the MiniVDOM snapshots of the previous and next frames respectively, and comprehensively analyze the differential comparison results to construct the state evolution path; generate a minimum difference patch based on the differential comparison results of the control tree, and apply the difference patch... The differences in the data are mapped one by one to specific underlying control structured rendering commands, and drawing instructions are issued. Multiple control operations are aggregated and packaged into a set of structured rendering commands, expressed in a compact JSON format, and the updates of adjacent controls are merged and asynchronously pushed to the UI rendering thread and event pipeline. The difference comparison results of control properties are obtained to get the number of control property changes, the difference comparison results of control structure are obtained to get the number of control structure changes, and the difference comparison results of bound events are obtained to get the number of bound event changes. The control property change count, control structure change count, and bound event change count are added together and 1 is added, and then the reciprocal is taken to get the control redundancy evaluation value.

[0017] Furthermore, the specific process of taking control adjustment measures based on the redundancy assessment results is as follows: The control redundancy assessment value is compared with the redundancy threshold. When the control redundancy assessment value is greater than or equal to the redundancy threshold, it is determined to be a static control, that is, the attributes, structure and events have not changed in multiple dimensions. The control is added to the frozen candidate area, and the generation of control structured rendering commands and the issuance of drawing instructions are skipped in this round of differential analysis. If the control redundancy assessment value is greater than or equal to the redundancy threshold for three consecutive frames, it is determined to have reached a stable convergence state, and a locking operation is automatically performed. The locked control will skip differential comparison analysis and rendering by default in future frames until attribute mutation, structure insertion and binding event changes are detected and then it will be unlocked again. When the control redundancy assessment value is less than the redundancy threshold, it is determined to be an active control, indicating that the control has frequently undergone attribute changes, structure rearrangement and event updates in the most recent frames. The control continues to participate in differential comparison analysis and generate drawing instructions.

[0018] Furthermore, the process of comparing the control state with the actual rendering result based on the structured rendering command to construct an error description vector, and quantifying the degree of deviation of the actual rendering result based on the error description vector, is as follows: The structured rendering command and drawing instructions are received, and validation logic is automatically injected after each drawing. A snapshot of the control tree MiniVDOM is taken and compared with the actual rendering result for the control attribute values, layout position, and hierarchical structure. Based on the comparison result, an error description vector for this frame is constructed. The error description vector includes: attribute comparison, layout deviation, hierarchical structure, and control response state. The attribute comparisons in the error description vector are obtained, and the number of differences is counted. The number of control attribute anomalies is obtained; based on the layout deviation and hierarchical structure in the error description vector, the coordinate position information is recursively compared with the parent-child hierarchical structure, and the number of differences is counted to obtain the control layout deviation number; the execution result of each issued drawing command is monitored through the UI engine's feedback mechanism, and the number of failures is accumulated to obtain the number of drawing failures; the total time of the current frame is recorded, and the set base frame budget is subtracted to obtain the rendering frame over-budget duration; the rendering frame over-budget duration is added by 1 and then the logarithmic function is used to obtain the timeout penalty factor; the number of control attribute anomalies, the number of control layout deviations, and the number of drawing failures are added together, and then multiplied by the timeout penalty factor to obtain the rendering anomaly evaluation value.

[0019] Furthermore, the specific process for taking rollback and recovery measures based on the degree of deviation is as follows: The rendering anomaly evaluation value is compared with the anomaly threshold. When the rendering anomaly evaluation value is less than the anomaly threshold, it indicates that the UI state is consistent with expectations and the frame consumption is reasonable; the current control state is updated to the latest cache. When the rendering anomaly evaluation value is greater than or equal to the anomaly threshold, it indicates that there is a significant rendering error and frame performance exceeds limits; a partial rollback is performed to restore the abnormal control attributes and styles, reissue drawing instructions, clear the control tree, reconstruct the MiniVDOM snapshot, and then fully render it, restoring it to the state of the last validated snapshot. The task ID, control tree path, frame consumption, and stack are recorded. The abnormal control and rendering anomaly evaluation value are pushed to the cloud operation and maintenance interface, and an anomaly analysis report is generated. The rendering anomaly evaluation value and system response results are displayed through the rendering anomaly evaluation and response status monitoring view, and the high-frequency error control area is located.

[0020] The second aspect of this invention provides a QuickJS multi-interface collaborative optimization system for embedded devices, comprising: a data acquisition and preprocessing module, used to acquire interface task data that triggers and affects the UI, perform data preprocessing on the interface task data, generate snapshots of the control tree before and after the task, and identify differences and state changes; a rendering frame budget allocation and monitoring module, used to set a base frame budget, construct a task frame time consumption model based on the differences and state changes between control tree snapshots, output the estimated frame time consumption, and compare the actual time consumption of the current frame with the base frame budget after rendering execution; and an asynchronous rendering scheduling engine module, used to obtain the preprocessed interface task data and the normalized estimated frame time consumption. The system obtains the task priority for each interface, sorts and schedules tasks in real time based on task priority and time slice, and establishes an asynchronous coroutine mechanism and a task splitting and sticky mechanism. The JS layer differential engine and control mapping module are used to perform differential comparison on control tree snapshots, output structured rendering commands based on the differential comparison results, evaluate the redundancy of controls based on the differential comparison results, and take control adjustment measures based on the redundancy evaluation results. The rendering consistency verification and rollback recovery module is used to compare the control state with the actual rendering result based on the structured rendering command, construct an error description vector, quantify the degree of deviation of the actual rendering result based on the error description vector, and take rollback recovery measures based on the degree of deviation.

[0021] Beneficial effects

[0022] The present invention has the following beneficial effects:

[0023] (1) This invention collects QuickJS layer trigger events and task context in real time, and combines the quantifiable features of task type, trigger delay, control influence intensity and frame consumption time to construct the calculation of interface task priority value, realize the differentiated scheduling and sorting of concurrent multi-interface tasks, significantly improve the intelligence of task scheduling and the timeliness of interface response, and effectively avoid UI response lag and rendering resource mismatch problems.

[0024] (2) This invention introduces MiniVDOM snapshots to collect control attributes, structure and event states, performs efficient differential calculations before and after rendering, generates minimum drawing patches and maps them to structured rendering commands; combined with control redundancy evaluation and freezing mechanisms, it can avoid repeated drawing operations on areas with no actual changes, greatly reduce drawing redundancy and resource waste, and improve the upper limit of rendering performance of embedded devices.

[0025] (3) This invention constructs a task frame time prediction model by using the differential control number, binding event density and control hierarchy depth complexity characteristics. During operation, it dynamically estimates the proportion of the task's occupation of the system frame budget. For tasks exceeding the budget, it automatically executes granular splitting and sticky strategies to ensure the continuity of the main thread and the smoothness of interaction, and avoids frequent frame overflow and system lag.

[0026] (4) This invention compares the structure and attributes of the control state with the expected state of MiniVDOM after each round of rendering, constructs an error description vector and quantifies the degree of rendering anomaly; once the rendering deviation exceeds the limit, it immediately starts local attribute rollback, instruction resending, or full snapshot restoration, and generates an error report to be uploaded to the operation and maintenance end, realizing automatic discovery and adaptive recovery of anomaly closed-loop processing, and improving the robustness and stability of embedded devices under extreme load.

[0027] Of course, any product implementing this invention does not necessarily need to achieve all of the advantages described above at the same time. Attached Figure Description

[0028] Figure 1 Flowchart of QuickJS multi-interface collaboration optimization method for embedded devices;

[0029] Figure 2 System architecture diagram for QuickJS multi-interface collaborative optimization of embedded devices;

[0030] Figure 3 Render a histogram of anomaly evaluation values ​​for each task;

[0031] Figure 4 The sequence diagram of the interaction of the five modules of the embedded QuickJS multi-interface collaborative optimization system. Detailed Implementation

[0032] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. As those skilled in the art will understand, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, those skilled in the art who have not made any innovative embodiments are all within the scope of protection of the present invention.

[0033] Please see Figures 1-4This invention provides a technical solution: a QuickJS multi-interface collaborative optimization method and system for embedded devices, comprising the following steps: S1, collecting interface task data that triggers and affects the UI, performing data preprocessing on the interface task data, generating snapshots of the control tree before and after the task, and identifying differences and state changes; S2, setting a base frame budget, constructing a task frame time consumption model based on the differences and state changes between control tree snapshots, outputting the estimated frame time consumption, and comparing the actual time consumption of the current frame with the base frame budget after rendering execution; S3, obtaining the preprocessed interface task data and the normalized data... The process involves: S4) estimating frame latency, obtaining the task priority for each interface, performing real-time sorting and scheduling based on task priority and time slice, and establishing an asynchronous coroutine mechanism and a task splitting and sticking mechanism; S5) performing differential comparison on the control tree snapshot, outputting structured rendering commands based on the differential comparison results, evaluating the redundancy of controls based on the differential comparison results, and taking control adjustment measures based on the redundancy evaluation results; S6) comparing the control state with the actual rendering result based on the structured rendering command, constructing an error description vector, quantifying the degree of deviation of the actual rendering result based on the error description vector, and taking rollback recovery measures based on the degree of deviation.

[0034] Specifically, the process involves collecting UI task data that triggers and affects the UI, preprocessing this data, generating snapshots of the control tree before and after each task, and identifying differences and state changes. This process includes: intercepting and managing QuickJS timer functions, user interaction binding events, and microtasks; collecting UI task data for each trigger that affects the UI; storing task trigger type, task trigger timestamp, JS call stack, and UI target controls; and using a Hook mechanism to establish an indexed association between these trigger events and control states, forming a time-sequential event queue; capturing user trigger events; converting these various trigger events into a unified format and encapsulating them into tasks; generating a unique ID for each task; and establishing an UI task database to store the UI task data. The system uses a lightweight key-value pair structure to store basic task information and context snapshots, facilitating subsequent scheduling queries and backtracking analysis. It standardizes and normalizes UI task data. MiniVDOM snapshots of the control tree before and after the task are obtained. The snapshot structure includes the attribute keys of control nodes, bound event names, and hierarchical position information, ensuring consistency with the actual DOM structure. A differential comparison of the structure and attributes of the two UI control tree snapshots is performed to obtain the number of control changes resulting from the change in UI control structure units, i.e., the number of differential controls, and this number is recorded. The influence strength value of the control is obtained by dividing the number of differential controls by the total number of UI controls. Simultaneously, each differential control node is traversed, and the number of bound event functions is counted and recorded. The event density is obtained by summing the number of event functions bound to all differential controls and then dividing by the number of differential controls.

[0035] In this implementation scheme, a unified task encapsulation and control snapshot differential analysis mechanism is constructed to achieve fine-grained capture and state modeling of QuickJS interface tasks. By establishing an indexed association between event triggering and control state through a Hook mechanism and generating a lightweight, time-series event database, not only is the efficiency of task scheduling and backtracking improved, but the integrity and traceability of the task context are also ensured. The MiniVDOM structure is used to perform high-fidelity snapshots and differential processing on the control tree state, effectively extracting key indicators such as the range of control changes and interaction density, significantly improving the accuracy of complexity assessment and the system's responsiveness to resource scheduling. This mechanism provides structured feature support for subsequent task frame time prediction models and priority evaluation, comprehensively enhancing the UI response stability and rendering consistency of embedded devices in multi-tasking, high-interaction scenarios.

[0036] Specifically, the process involves setting a base frame budget, constructing a task frame time consumption model based on the differences and state changes between control tree snapshots, outputting the estimated frame time, and comparing the actual time of the current frame with the base frame budget after rendering execution. The specific steps are as follows: A fixed base frame budget is set, such as 16.67ms on a 60Hz screen, and the available rendering time slices are adjusted in real-time based on device load to ensure the schedulability of high-priority tasks; the maximum nesting level of affected nodes in the control tree is traversed to obtain the UI level depth, and the number of differential controls, the density of bound events, and the UI level depth are used as task complexity feature vectors, reflecting the structural complexity and interaction intensity of the current rendering task; simultaneously, the actual rendering time of each type of task under different hardware environments is recorded during execution, and linear regression is used to calculate the actual time. The algorithm fits the task complexity feature vector to construct a task frame time model, outputting the estimated frame time of the task under the current device and state in real time. This enables resource-adaptive predictive scheduling capabilities. The estimated frame time is normalized and used as the basis for the asynchronous coroutine mechanism, guiding the asynchronous scheduler to rationally arrange task framing, pre-splitting, and sticky operations. After each frame rendering is completed, the actual frame time is compared with the set base frame budget in real time. If the rendering time of a frame exceeds the time threshold, it is marked as an abnormal frame, and a degradation strategy control process is immediately triggered, such as frame skipping rendering, dynamic resolution reduction, and animation frame rate reduction. For each frame rendering, the frame time, frame drop rate, and task backlog are recorded to construct a runtime profile, providing data support for subsequent rendering anomaly assessment, performance trend prediction, and automatic optimization strategies.

[0037] This implementation scheme achieves precise control over the multi-task rendering process in the embedded UI system by constructing a task frame time consumption model and introducing a dynamic frame budget mechanism, effectively solving the frame latency and stuttering problems caused by resource bottlenecks. Through quantitative evaluation of control differences, event density, and UI hierarchy, the system can predict task execution costs in real time and adapt them according to device load, ensuring that critical tasks are completed smoothly within a limited time slice. Simultaneously, the linkage between abnormal frame identification and degradation strategies ensures the stable operation of the system. The construction of the operational profile provides a data foundation for subsequent optimization and anomaly diagnosis, comprehensively improving the smoothness, stability, and user experience quality of the embedded interface.

[0038] Specifically, the process of obtaining the preprocessed interface task data and the normalized estimated frame time to determine the task priority of each interface is as follows: Obtain the interface task data and the normalized estimated frame time; determine the user interaction value based on the task trigger type; if the task type is actively triggered by the user, such as clicking or inputting, the user interaction value is 1; otherwise, the user interaction value is 0, in order to distinguish between task types with strong and weak user perception; subtract the task trigger time from the current time to obtain the trigger delay, which reflects the waiting time of the task in the queue and is used to measure the urgency of the task response; sum the control influence strength value and the bound event density to obtain the interface influence strength value. This indicates the potential scope of UI structure and interaction impact of the task; the reciprocal of the sum of the trigger delay and 1 yields the response urgency factor, which avoids division by zero errors while enhancing the response priority for short-latency tasks; the interface impact factor is obtained by adding 1 to the interface impact strength value and then taking the logarithm function; the complexity penalty factor is obtained by subtracting the expected frame time from 1, which smooths the growth trend of the score for high-complexity tasks and controls the excessive expansion of priority scores; the comprehensive task value is obtained by adding the user interaction value, response urgency factor, and interface impact factor; the interface task priority value is obtained by multiplying the comprehensive task value by the complexity penalty factor, which suppresses the excessive preemption of frame budget by high-cost rendering tasks.

[0039] The specific formula for the priority value of the interface task is as follows:

[0040] ;

[0041] In the formula, This indicates the priority value of the UI task, used to evaluate the priority of each UI task for the scheduler to sort. This represents the user interaction value. If the task type is triggered by the user, it is 1; otherwise, it is 0, indicating whether the task was triggered by the user. This indicates the trigger delay, representing the waiting time between a task being registered and scheduled. The smaller the value, the shorter the waiting time and the higher the responsiveness; the larger the value, the more likely the task will be delayed. This represents the strength of the interface impact, reflecting the degree to which the task affects the interface structure and behavior. This indicates the estimated frame time, representing the level of system resource consumption during task execution. Higher consumption means the scheduler is more likely to postpone the task to avoid blocking the main thread. Prioritize tasks with high overhead.

[0042] This implementation scheme achieves a comprehensive trade-off between the urgency of interface tasks, the scope of system impact, and execution cost by constructing interface task priority values. This significantly improves the system's responsiveness to critical user interaction tasks. Furthermore, by introducing urgency and interface impact factors, the system can dynamically perceive and differentiate the timeliness and scope of impact of tasks. On this basis, the introduction of a complexity penalty factor further enhances the suppression and scheduling control of time-consuming tasks, avoiding excessive consumption of rendering resources and task congestion. In addition, all scoring parameters are derived from real-time collected task context, control change information, and frame time evaluation results, ensuring that this priority mechanism has high practical adaptability and optimization effect in multi-task concurrent scenarios.

[0043] Specifically, the process of real-time sorting and scheduling based on task priority and time slice, and establishing an asynchronous coroutine mechanism and task splitting and stickiness mechanism, is as follows: Tasks are sorted from highest to lowest according to their interface task priority value and entered into the asynchronous task queue. High-scoring tasks are prioritized for scheduling within the basic frame budget to ensure that critical interactive tasks are responded to first. The rendering granularity is dynamically adjusted using the interface task priority value. Tasks consecutively below the priority threshold are merged to prevent resource waste and rendering frame skipping caused by frequent scheduling of fragmented tasks. The interface task priority value is recorded to provide historical data for subsequent task behavior analysis. The estimated frame timeout is obtained. In the execution flow of the task scheduler, the frame budget time slice is polled. By reading the remaining available time and load of the current frame, the number of tasks that can be accommodated in this frame and the execution timeout are determined. The rendering process is ordered to ensure efficient execution of tasks within the limits of rendering resources. The scheduler selects the head of the task queue with the highest priority value for the current interface task and uses an asynchronous coroutine mechanism to asynchronously call the rendering process, improving the concurrent execution capability of tasks and reducing the probability of main thread blocking. A task splitting and sticky mechanism is established to split tasks whose estimated frame time exceeds the basic frame budget into subtasks. Each subtask corresponds to a small part of the UI structure and is distributed across multiple consecutive frames and executed sequentially according to priority. This not only effectively alleviates the single-frame timeout problem but also implements a progressive rendering strategy. Once a subtask is scheduled, its corresponding area will be given priority to maintain a stable state in subsequent frames to avoid midway interference until the complete rendering is completed. During this period, other low-priority tasks are prevented from inserting into and covering the area, thereby eliminating flickering and UI jitter caused by frequent changes.

[0044] This implementation effectively addresses scheduling bottlenecks in embedded environments with multi-task concurrency by constructing a real-time sorting and asynchronous coroutine mechanism based on task priority. This ensures that critical interface tasks are executed first, improving the immediacy of interface responsiveness. Simultaneously, through task splitting and a sticky mechanism, over-budget rendering tasks are divided into controllable subtasks and executed progressively according to priority. This not only reduces the risk of single-frame timeouts but also avoids interface flickering caused by frequent region changes, thus achieving a more efficient and stable UI rendering process. This enhances the system's scheduling flexibility and rendering continuity in resource-constrained environments.

[0045] Specifically, the process of performing differential comparison on the control tree snapshot, outputting structured rendering commands based on the differential comparison results, and evaluating the redundancy of controls based on the differential comparison results is as follows: A MiniVDOM snapshot of the control tree is received. MiniVDOM, as a lightweight mirror of the real control tree, contains unique identifiers of control nodes, attribute sets, hierarchical paths, and event binding relationships. The control structure, control attributes, and bound events of the current control tree are extracted, while a cache of the previous frame's MiniVDOM snapshot is maintained as a reference baseline for differential calculation. Differential comparisons are performed on the control structure (e.g., node insertion and deletion), control attributes (e.g., color, position, size changes), and bound events (e.g., listener function updates) in the MiniVDOM snapshots of the previous and next frames, generating a list of control state changes. The differential comparison results are comprehensively analyzed, and a state evolution path is constructed by combining timestamps and control paths to support subsequent update tracking and dynamic backtracking. A minimum difference patch, i.e., an update command containing only the changed parts, is generated based on the differential comparison results of the control tree. The differences in the patch are mapped one by one to specific underlying control structured rendering commands, and drawing instructions are issued. Cross-UI platform compatibility is achieved through abstraction layer transformation. Multiple control operations are aggregated and packaged into a set of structured rendering commands, expressed in compact JSON format. Fields such as control ID, operation type, and attribute value are compressed, and updates of adjacent controls are merged to reduce communication and scheduling overhead, improve rendering throughput, and be asynchronously pushed to the UI rendering thread and event pipeline. The difference comparison results of control attributes are obtained to get the number of control attribute changes, the difference comparison results of control structure are obtained to get the number of control structure changes, and the difference comparison results of bound events are obtained to get the number of bound event changes. The control attribute change count, control structure change count, and bound event change count are added together, 1 is added, and the reciprocal is taken to get the control redundancy evaluation value.

[0046] The specific formula for the control redundancy evaluation value is as follows:

[0047] ;

[0048] In the formula, This represents the redundancy evaluation value of the control, indicating whether control i has remained stable over the most recent few frames. The closer the value is to 1, the more likely the control has not changed significantly over several consecutive frames, and it can be considered to skip rendering. This indicates the number of changes in the control's property. After each state snapshot difference, if the value of the control's property changes, it is incremented once. This indicates the number of changes to the control structure, specifically the number of times a control has changed within the control tree structure, such as being inserted, deleted, or having its parent node changed. This indicates the number of events that have changed. When an event binding operation on a control is added, deleted, or modified, an event change is recorded.

[0049] In this implementation scheme, by constructing a MiniVDOM snapshot and performing precise structural and attribute differential analysis, efficient identification of control state changes and minimum patch generation are achieved, effectively avoiding the performance loss caused by full redraw. Simultaneously, by leveraging the instruction compression and asynchronous push mechanism of structured rendering commands, the system significantly improves the throughput and real-time performance of control updates. The introduction of a mechanism for calculating and freezing control redundancy evaluation values ​​further enables intelligent skipping and resource reuse of static controls. While ensuring interface rendering consistency, this significantly reduces rendering overhead and energy consumption, providing a stable and efficient multi-interface collaborative optimization strategy for embedded devices in complex UI scenarios.

[0050] Specifically, the process of taking control adjustment measures based on the redundancy assessment results is as follows: The control redundancy assessment value is compared with the redundancy threshold. When the control redundancy assessment value is greater than or equal to the redundancy threshold, it is determined to be a static control, that is, the attributes, structure and events have not changed in multiple dimensions, indicating that the control has not caused any UI-perceptible changes in the current and recent frames, and no longer needs to be rendered repeatedly; the control is added to the freeze candidate area, and the generation of control structured rendering commands and the issuance of drawing instructions are skipped in this round of differential analysis, thereby effectively releasing rendering bandwidth and computing resources and improving the overall frame rate performance; if the control redundancy assessment value is greater than or equal to the redundancy threshold for three consecutive frames, it is determined to have reached a stable convergence state, and a locking operation is automatically executed, that is, the attribute snapshot of the control is cached and its differential monitoring channel is closed. The locked control will skip differential comparison analysis and rendering by default in future frames until attribute mutation, structure insertion and binding event changes are detected and then unlocked again; when the control redundancy assessment value is less than the redundancy threshold, it is determined to be an active control, that is, the control has frequently undergone attribute changes, structure rearrangement and event updates in recent frames, and has high dynamic characteristics. The control continues to participate in differential comparison analysis and generate drawing instructions.

[0051] This implementation scheme achieves precise differentiation between static and active controls in the interface by constructing a control redundancy evaluation and freeze-locking mechanism, significantly reducing repetitive differential comparisons and invalid rendering operations. In the context of resource-constrained embedded devices, this mechanism effectively alleviates rendering bandwidth and computational load pressure, improving the overall rendering performance and response speed of the system. Simultaneously, the combination of freezing the candidate area and the state locking strategy enables minimal necessary updates to dynamic controls, balancing system performance and UI real-time performance. It offers excellent energy-saving and scalability benefits, making it suitable for efficient graphical interface management in multi-task concurrent scenarios.

[0052] Specifically, the process of comparing the control state with the actual rendering result based on the structured rendering command to construct an error description vector, and quantifying the degree of deviation of the actual rendering result based on the error description vector, is as follows: The structured rendering command and drawing instructions are received, and verification logic is automatically injected after each drawing. This verification logic is embedded as a hook in the rendering completion callback. The control attribute values, layout position, and hierarchical structure are compared with the actual rendering result using a MiniVDOM snapshot of the control tree to ensure the integrity verification of the rendering result for each frame. Based on the comparison results, an error description vector for this frame is constructed. The error description vector includes: attribute comparison, layout deviation, hierarchical structure, and control response state, covering several common sources of deviation in UI rendering. The attribute comparisons in the error description vector are obtained, and the number of differences is counted to obtain the control attributes. The number of anomalies reflects whether the visual style of the control is consistent with the settings. Based on the layout deviation and hierarchical structure in the error description vector, the coordinate position information is recursively compared with the parent-child hierarchical structure, and the number of differences is counted to obtain the control layout deviation number. The UI engine's feedback mechanism listens to the execution result of each issued drawing command and accumulates the number of failures to obtain the number of drawing failures, enhancing the ability to identify control rendering failures and resource conflicts. The total time of the current frame is recorded, and the set base frame budget is subtracted to obtain the over-budget duration of the rendering frame, which measures the actual pressure on the rendering performance of the frame. The over-budget duration of the rendering frame is added by 1 and then the logarithm function is used to obtain the timeout penalty factor, avoiding extreme values ​​from dominating the evaluation and improving the evaluation stability. The number of control attribute anomalies, the number of control layout deviations, and the number of drawing failures are added together and then multiplied by the timeout penalty factor to obtain the rendering anomaly evaluation value.

[0053] The specific formula for the rendering anomaly evaluation value is as follows:

[0054] ;

[0055] In the formula, This represents the rendering anomaly assessment value, used to quantitatively evaluate the degree of rendering anomalies in each frame. It combines two dimensions: control-level rendering deviation and performance pressure, serving as the core indicator for whether to trigger rollback, redraw, or optimization suggestions. This indicates the number of control property errors, reflecting the number of times the actual property value of the control is inconsistent with the expected value in MiniVDOM, such as text, color, and size errors; This indicates the number of control layout deviations, reflecting the number of significant discrepancies between the actual position and hierarchy and the expected position, such as misalignment or occlusion. This indicates the number of drawing failures, reflecting the number of instructions that failed to execute control update operations by the underlying UI engine; This indicates the time it takes for a rendering frame to exceed its budget, reflecting the time the current frame takes longer than the frame budget, and measuring system stress.

[0056] Different tasks are generated based on different events triggered by the user. The number of control property anomalies, control layout deviations, over-budget rendering frame duration, and drawing failures caused by the execution of each task are different. Rendering anomaly evaluation values ​​for different tasks are calculated, as shown in Table 1.

[0057] Table 1. Rendering Anomaly Evaluation Values

[0058]

[0059] like Figure 3 The image shows a bar chart of the rendering anomaly evaluation values ​​for each task provided in this embodiment. The anomaly threshold is set to 23, according to Table 1 and... Figure 3 As can be seen, the number of control property anomalies, control layout deviations, over-budget rendering frame duration, and number of drawing failures caused by the execution of each task are different, resulting in significant differences in the rendering anomaly evaluation value. Among them, task T003 has a larger number of control property anomalies, control layout deviations, over-budget rendering frame duration, and number of drawing failures, and its rendering anomaly evaluation value is the largest; conversely, task T002 has the smallest.

[0060] In this implementation scheme, by constructing an error description vector and quantifying rendering deviations, the accuracy and response efficiency of anomaly detection in embedded systems under multi-task concurrent rendering are significantly improved. Through fine-grained comparisons of attribute differences, layout deviations, control hierarchy, and response states, the system can comprehensively capture control rendering anomalies. Combined with UI engine feedback and frame time exceeding limits, a unified rendering anomaly evaluation value is formed. This evaluation value not only supports dynamic rollback and partial redrawing but also serves as the basis for anomaly reporting and policy triggering, providing reliable support for subsequent debugging, control optimization, and operational decisions, thereby achieving a higher-performance and more robust graphical interface rendering guarantee mechanism.

[0061] Specifically, the process of taking rollback and recovery measures based on the degree of deviation is as follows: The rendering anomaly evaluation value is compared with the anomaly threshold. When the rendering anomaly evaluation value is less than the anomaly threshold, it indicates that the UI state is consistent with expectations and the frame consumption is reasonable. The current control state is updated to the latest cache, thereby ensuring the synchronization of the cache state and the accuracy of subsequent differential comparisons, which helps to build a long-term stable rendering path. When the rendering anomaly evaluation value is greater than or equal to the anomaly threshold, it indicates that there is a significant rendering error and frame performance exceeding limits. First, it is determined whether the area to which the abnormal control belongs can be locally repaired. If it can be repaired, a partial rollback is performed to restore the abnormal control's attributes and styles, and re-issue drawing instructions to complete the partial rendering repair. If the partial repair fails or the control tree structure... If the structure is severely damaged, the control tree is cleared, the MiniVDOM snapshot is reconstructed and fully rendered, restoring the state to the last validated snapshot state to ensure interface consistency and interactive usability; the task ID, control tree path, frame time, and stack are recorded to form a complete exception context log for easy debugging and reproduction; the abnormal control and rendering exception evaluation value are pushed to the cloud operation and maintenance interface, and an exception analysis report is generated. The report covers key dimensions such as control exception type, frequency, affected area, and recovery success rate. The rendering exception evaluation and response status monitoring view displays the rendering exception evaluation value and system response results, and locates the high-frequency error control area, effectively supporting UI performance optimization, resource allocation adjustment, and operation and maintenance risk warning.

[0062] In this implementation scheme, a value-driven anomaly detection and rollback mechanism dynamically ensures state consistency during UI rendering. When the rendering anomaly evaluation value is below a threshold, the system can quickly confirm that the interface state is stable and synchronize the latest cache, improving the continuity and reliability of the rendering path. When the anomaly evaluation value exceeds the limit, the system can automatically determine and execute partial rollback or full redraw, effectively mitigating issues such as control misalignment and style anomalies. Simultaneously, by combining complete recording of the anomaly context with cloud-push analysis, not only is precise location of high-frequency anomaly areas achieved, but quantitative data is also provided for system maintenance and subsequent optimization, significantly improving the fault tolerance, self-healing capabilities, and intelligent tuning level of the embedded UI system.

[0063] Reference Figure 2As shown, the second aspect of the present invention provides a QuickJS multi-interface collaborative optimization system for embedded devices, applied to the aforementioned QuickJS multi-interface collaborative optimization method for embedded devices, comprising: a data acquisition and preprocessing module, used to acquire interface task data that triggers and affects the UI, perform data preprocessing on the interface task data, generate snapshots of the control tree before and after the task, and identify differences and state changes; a rendering frame budget allocation and monitoring module, used to set a base frame budget, construct a task frame time consumption model based on the differences and state changes between control tree snapshots, output the estimated frame time consumption, and compare the actual time consumption of the current frame with the base frame budget after rendering execution; and an asynchronous rendering scheduling engine module, used to obtain the interface after data preprocessing. The task priority for each interface is obtained by comparing the task data with the normalized estimated frame time. Real-time sorting and scheduling are performed based on task priority and time slice, and an asynchronous coroutine mechanism and task splitting and stickiness mechanism are established. The JS layer differential engine and control mapping module are used to perform differential comparison on control tree snapshots, output structured rendering commands based on the differential comparison results, evaluate the redundancy of controls based on the differential comparison results, and take control adjustment measures based on the redundancy evaluation results. The rendering consistency verification and rollback recovery module is used to compare the control state with the actual rendering result based on the structured rendering command, construct an error description vector, quantify the degree of deviation of the actual rendering result based on the error description vector, and take rollback recovery measures based on the degree of deviation.

[0064] like Figure 4 The diagram shown illustrates the interaction sequence of the five modules of the embedded QuickJS multi-interface collaborative optimization system provided in this embodiment. It demonstrates the interaction flow of the five core modules within the system. Starting with task acquisition and control change detection, the system sequentially passes data to frame budget modeling, task scheduling, and differential rendering. Finally, the rendering consistency verification and rollback recovery module completes rendering verification and exception rollback. Through standardized data interaction, asynchronous scheduling, and differential control, the modules achieve an efficient and stable collaborative interface rendering process, suitable for multi-task UI optimization scenarios in resource-constrained devices.

[0065] This implementation significantly improves the UI responsiveness and rendering stability of embedded devices under multi-interface concurrency by constructing a full-link modular architecture covering task awareness, temporal modeling, rendering scheduling, state differentiation, and anomaly repair. The data acquisition and preprocessing module ensures comprehensive capture of triggered behaviors and accurate quantification of control changes, laying a data foundation for subsequent calculations. The frame budget allocation and monitoring module introduces a task complexity modeling mechanism, enabling dynamic estimation of frame latency and identification of abnormal frames. The asynchronous rendering scheduling engine, combined with task priority scoring, time slice allocation, and subtask stickiness mechanisms, improves scheduling accuracy and UI transition smoothness. The differentiation engine module avoids redundant rendering and reduces resource consumption through structure mapping and redundancy detection. The rendering consistency verification and rollback module ensures the final consistency of UI states and anomaly self-healing capabilities. Overall, the system constructs an efficient, robust, and traceable QuickJS multi-interface collaborative optimization mechanism, balancing response efficiency and system robustness.

[0066] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus.

[0067] The preferred embodiments of the present invention disclosed above are merely illustrative of the invention. These preferred embodiments do not exhaustively describe all details, nor do they limit the invention to the specific implementations described. As those skilled in the art will understand, many modifications and variations can be made based on the content of this specification. This specification selects and specifically describes these embodiments to better explain the principles and practical applications of the invention, thereby enabling those skilled in the art to better understand and utilize the invention. The invention is limited only by the claims and their full scope and equivalents.

Claims

1. A method for multi-interface collaborative optimization of QuickJS of embedded devices, characterized in that, The method comprises the following steps: S1, collecting interface task data affecting the UI, pre-processing the interface task data, generating snapshots of the control trees before and after the task, identifying differences and state changes; S2, setting a basic frame budget, constructing a task frame time consumption model based on the differences and state changes between the control tree snapshots, outputting the predicted frame time consumption, and comparing the actual frame time consumption with the basic frame budget after rendering execution; S3, obtaining the interface task data after data preprocessing and the normalized predicted frame time consumption, obtaining the task priority of each interface, real-time sorting and scheduling according to the task priority and time slice, and establishing an asynchronous coroutine mechanism and a task splitting and sticking mechanism; S4, comparing the control tree snapshots by difference, outputting the structured rendering command according to the difference comparison result, evaluating the redundancy of the control according to the difference comparison result, and taking control adjustment measures according to the redundancy evaluation result; S5, comparing the control state with the actual rendering result according to the structured rendering command, constructing an error description vector, quantifying the deviation degree of the actual rendering result according to the error description vector, and taking rollback recovery measures according to the deviation degree.

2. The method of claim 1, wherein, The specific process of collecting interface task data affecting the UI, pre-processing the interface task data, and generating snapshots of the control trees before and after the task is as follows: Intercept and take over the timer function, user interaction binding event, and micro task of QuickJS, collect interface task data affecting the UI triggered each time, the interface task data includes: storage task trigger type, task trigger timestamp, JS call stack, UI target control, capture user trigger behavior events, convert the captured various trigger behavior events into a unified format and encapsulate them as tasks, generate a unique ID for each task, and establish an interface task database to store the interface task data, standardize and normalize the interface task data; Obtain the MiniVDOM snapshots of the control trees before and after the task, compare the structure and attributes of the two UI control tree snapshots by difference, obtain the number of control changes, i.e. the number of difference controls, and record them, divide the number of difference controls by the total number of UI controls to obtain the control influence intensity value, and simultaneously traverse each difference control node, count and record the number of bound event functions, and obtain the binding event density by accumulating the number of bound event functions of all difference controls and dividing by the number of difference controls.

3. The method of claim 1, wherein, The specific process of setting a basic frame budget, constructing a task frame time consumption model based on the differences and state changes between the control tree snapshots, outputting the predicted frame time consumption, and comparing the actual frame time consumption with the basic frame budget after rendering execution is as follows: Set a fixed basic frame budget, and adjust the available rendering time slice in real time combined with device load; The UI level depth is obtained by traversing the maximum nesting level of the affected node in the control tree, and the difference control quantity, binding event density, and UI level depth are obtained as the task complexity feature vector. During the running process, the real rendering time consumption of each type of task in different hardware environments is recorded, and the linear regression algorithm is used to fit the task complexity feature vector to construct a task frame time consumption model, which can output the predicted frame time consumption of the task in the current device and state in real time. The predicted frame time consumption is normalized and used as the basis for the asynchronous coroutine mechanism; After each frame rendering is completed, the actual time consumption of the current frame is compared with the set basic frame budget in real time. If the rendering time consumption of a frame exceeds the time consumption threshold, it is marked as an abnormal frame, and the degradation strategy control process is triggered immediately. The frame time consumption, frame loss rate, and task backlog are recorded for each frame rendering to build a running portrait.

4. The method of claim 1, wherein, The specific process of obtaining the preprocessed interface task data and the normalized predicted frame time consumption to obtain the task priority of each interface is as follows: The interface task data and the normalized predicted frame time consumption are obtained, the user interaction value is determined according to the task trigger type, the user interaction value is 1 if the task type is triggered by the user, otherwise the user interaction value is 0, the trigger delay is obtained by subtracting the task trigger time from the current time, and the interface influence intensity value is obtained by summing the control influence intensity value and the binding event density; The response urgency factor is obtained by taking the inverse of the sum of the trigger delay and 1, the interface influence factor is obtained by taking the logarithmic function of the interface influence intensity value plus 1, the complexity penalty factor is obtained by subtracting the predicted frame time consumption from 1, the comprehensive task value is obtained by adding the user interaction value, the response urgency factor, and the interface influence factor, and the interface task priority value is obtained by multiplying the comprehensive task value by the complexity penalty factor.

5. The method of claim 1, wherein, The specific process of real-time sorting and scheduling according to the task priority and time slice, establishing an asynchronous coroutine mechanism, and establishing a task splitting and sticking mechanism is as follows: The tasks are sorted into an asynchronous task queue according to the interface task priority from high to low, and high-priority tasks are preferentially scheduled within the basic frame budget. The rendering granularity is dynamically adjusted using the interface task priority value. Tasks with a priority threshold value are combined, and the interface task priority value of each task is recorded. The output predicted frame time consumption is obtained, and in the execution process of the task scheduler, the frame budget time slice is polled. By reading the remaining available time and load of the current frame, the number of tasks that can be accommodated and the execution order are determined. The scheduler selects the task queue head with the highest interface task priority value, and uses the asynchronous coroutine mechanism to asynchronously call the rendering process. A task splitting and sticking mechanism is established to split tasks with predicted frame time consumption exceeding the basic frame budget into subtasks, each subtask corresponding to a small UI structure, and distributed in multiple consecutive frames for execution according to priority. Once a subtask is scheduled, the corresponding region will remain stable until the complete rendering is completed, during which other low-priority tasks are prevented from inserting and covering the region.

6. The method of claim 1, wherein, The specific process of the differential comparison of the control tree snapshots, the output of the structured rendering command according to the differential comparison result, and the evaluation of the redundancy of the control according to the differential comparison result is as follows: The MiniVDOM snapshot of the control tree is received, the control structure, control attribute, and bound event of the current control tree are extracted, and a MiniVDOM snapshot cache of the previous frame is maintained. The control structure, control attribute, and bound event in the MiniVDOM snapshots of the previous frame and the current frame are compared differentially, and a state evolution path is constructed by comprehensively analyzing the differential comparison results; A minimum difference patch is generated according to the differential comparison results of the control tree, the difference items in the difference patch are mapped to specific underlying control structured rendering commands one by one, and the drawing instructions are issued. A plurality of control operations are aggregated and packaged into a structured rendering command set, and a compact JSON format is used for expression. The updates of adjacent controls are merged, and are pushed to the UI rendering thread and the event pipeline asynchronously. The number of changes in the control attribute is obtained by the differential comparison result of the control attribute, the number of changes in the control structure is obtained by the differential comparison result of the control structure, and the number of changes in the bound event is obtained by the differential comparison result of the bound event. The control redundancy evaluation value is obtained by taking the inverse of the sum of the number of changes in the control attribute, the number of changes in the control structure, the number of changes in the bound event, and 1.

7. The method of claim 1, wherein, The specific process of taking control adjustment measures according to the redundancy evaluation result is as follows: The control redundancy evaluation value is compared with the redundancy threshold value. When the control redundancy evaluation value is greater than or equal to the redundancy threshold value, it is determined that the control is a static control, i.e., the attribute, structure, and event have not changed in multiple dimensions. The control is added to the freezing candidate area, and the generation of the control structured rendering command and the issuance of the drawing instruction are skipped in this round of differential comparison. If the control redundancy evaluation value is greater than or equal to the redundancy threshold value for three consecutive frames, it is determined that the stable convergence state is reached, and the locking operation is automatically performed. The locked control will be skipped in the future frame by default, and will be unlocked again when a property mutation, a structure insertion, or a bound event change is detected. When the control redundancy evaluation value is less than the redundancy threshold value, it is determined that the control is an active control, i.e., the control frequently changes in the recent frames. The control continues to participate in the differential comparison and generates the drawing instruction.

8. The method of claim 1, wherein, The specific process of comparing the control state with the actual rendering result according to the structured rendering command, constructing an error description vector, and quantifying the deviation degree of the actual rendering result according to the error description vector is as follows: The structured rendering command and the drawing instruction are received, and the verification logic is automatically injected after each drawing is completed. The control tree MiniVDOM snapshot and the actual rendering result are compared in terms of the control attribute value, the layout position, and the hierarchical structure. The error description vector of the current frame is constructed according to the comparison result. The error description vector includes: attribute comparison, layout deviation, hierarchical structure, and control response state. Obtain the attribute contrast in the error description vector, count the number of differences to obtain the number of control attribute abnormalities; according to the layout deviation and hierarchical structure in the error description vector, recursively compare the coordinate position information and the parent-child hierarchical structure, count the number of differences to obtain the number of control layout deviations; through the feedback mechanism of the UI engine, the execution result of each issued drawing instruction is monitored and the number of failures is accumulated to obtain the number of drawing failures; record the total time consumption of the current frame, subtract the set basic frame budget to obtain the rendering frame over budget duration; Add 1 to the rendering frame over budget duration and take the logarithmic function to obtain the timeout penalty factor, add the number of control attribute abnormalities, the number of control layout deviations, and the number of drawing failures, and then multiply by the timeout penalty factor to obtain the rendering abnormality evaluation value.

9. The method of claim 1, wherein, The specific process of taking rollback recovery measures according to the deviation degree is: Compare the rendering abnormality evaluation value with the abnormality threshold value, when the rendering abnormality evaluation value is less than the abnormality threshold value, it means that the UI state is consistent with the expectation, and the frame time consumption is reasonable, update the current control state to the latest cache; When the rendering abnormality evaluation value is greater than or equal to the abnormality threshold value, it means that there are obvious rendering errors and frame performance overruns, perform local rollback to restore the abnormal control attribute and style, reissue the drawing instruction, clear the control tree, and re-render after reconstructing the MiniVDOM snapshot, restore to the last snapshot state that passes the verification, record the task ID, control tree path, frame time consumption and stack; Push the abnormal control and the rendering abnormality evaluation value to the cloud operation interface, and generate an abnormality analysis report, display the rendering abnormality evaluation value and the system response result through the rendering abnormality evaluation and response state monitoring view, and locate the high-frequency error control area.

10. A QuickJS multi-interface collaborative optimization system for embedded devices, characterized in that, It includes: A data acquisition and preprocessing module for collecting interface task data that triggers the UI, preprocessing the interface task data, generating snapshots of the control tree before and after the task, identifying differences and state changes; A rendering frame budget allocation and monitoring module for setting a basic frame budget, constructing a task frame time consumption model based on the differences and state changes between control tree snapshots, outputting the predicted frame time consumption, and comparing the actual frame time consumption with the basic frame budget after rendering execution; An asynchronous rendering scheduling engine module for obtaining the interface task data after data preprocessing and the normalized predicted frame time consumption, obtaining the task priority of each interface, and performing real-time sorting and scheduling according to the task priority and time slice, and establishing an asynchronous coroutine mechanism and a task splitting and sticking mechanism; A JS layer difference engine and control mapping module for comparing the control tree snapshots, outputting structured rendering commands according to the comparison results, evaluating the redundancy of the controls according to the comparison results, and taking control adjustment measures according to the evaluation results; A rendering consistency verification and rollback recovery module for comparing the control state with the actual rendering result according to the structured rendering command, constructing an error description vector, quantifying the deviation degree of the actual rendering result according to the error description vector, and taking rollback recovery measures according to the deviation degree.

Images