An element dragging method based on vue framework and native js

Abstract

The application discloses an element dragging method based on a vue framework and native js, relates to the technical field of computer software, and comprises the following steps: constructing a data buffer through a pre-established inter-thread communication channel, storing element state information related to a dragging operation, and realizing transmission between a main thread and a working thread to obtain a preliminarily optimized data interaction result; the element dragging method based on the vue framework and the native js effectively improves the real-time response capability of the dragging operation, improves the user experience in a high-load scene, and realizes stable optimization of system performance.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer software, in particular to an element dragging method based on vue framework and native js. BACKGROUND

[0002] In modern interactive application development, optimizing user experience is a crucial goal, especially in scenarios involving a large number of elements and complex logic, such as the implementation of drag-and-drop operations. Efficient thread coordination and resource allocation can significantly improve the responsiveness and smoothness of applications, ensuring real-time and intuitive user operations. Research in this field not only concerns the improvement of technical performance, but also directly affects user satisfaction and efficiency of application use.

[0003] However, existing methods often face significant limitations when dealing with large-scale data and complex interactions. Many traditional solutions rely on a single thread to handle all tasks, resulting in the main thread being easily blocked when performing complex calculations, causing noticeable delays in user operations such as dragging. In addition, although some solutions introduce worker threads, the data exchange and state synchronization mechanisms between threads are not perfect, often causing data inconsistency or resource competition problems, which further affect the smoothness of operations. These limitations stem from several interrelated core challenges. First, the data exchange efficiency between the main thread and the worker thread is low. Since drag-and-drop operations require frequent transmission of a large number of element state information, the overhead of inter-thread communication can cause delays, especially when the number of elements is large, this overhead will be significantly amplified. Inefficient data exchange further complicates state synchronization, as the main thread needs to reflect the results of worker thread calculations in real time, and if the synchronization mechanism between threads is not properly designed, it can cause state updates to lag or conflict. The complexity of state synchronization directly affects the efficiency of computing resource allocation, as the execution time allocation of the main thread and the worker thread, if not reasonable, can cause one party to occupy too many resources, and the other party to be unable to respond to user operations in a timely manner. These challenges are interrelated and collectively limit the smoothness of drag-and-drop operations in high-load scenarios. SUMMARY

[0004] The purpose of the present application is to provide an element dragging method based on vue framework and native js, which efficiently coordinates data exchange and state synchronization between the main thread and the worker thread, and through reasonable computing resource allocation and execution time scheduling, ensures that drag-and-drop operations can maintain a smooth user experience when dealing with a large number of elements and complex logic.

[0005] To achieve the above purpose, the present application provides the following technical solution: an element dragging method based on vue framework and native js, the method comprising:

[0006] By establishing a pre-defined inter-thread communication channel, a data buffer is constructed to store the element state information involved in the drag-and-drop operation, and the data is transferred between the main thread and the worker thread to obtain preliminary optimized data interaction results.

[0007] Based on the preliminary optimized data interaction results, the running mode of the worker thread is determined. By using the running mode of the worker thread, improvement data on the operation latency problem is obtained. The response time of drag-and-drop operations is continuously monitored. If the response time exceeds the preset threshold, the data exchange optimization mechanism is triggered to obtain the processing result of reduced latency.

[0008] Based on the results of the latency reduction process, the control strategy for thread communication overhead is adjusted according to the number of elements in high-load scenarios. The transmission burden is reduced by compressing the amount of state information data, and the final communication optimization scheme is determined.

[0009] By implementing the final communication optimization solution, we can obtain data on the improvement in real-time response capabilities, establish a feedback mechanism for user experience quality, continuously record the smoothness indicators of drag-and-drop operations, and determine the overall stability of the system performance.

[0010] Preferably, determining the operating mode of the worker thread based on the preliminary optimized data interaction results includes:

[0011] Based on the preliminary optimized data interaction results, a dynamic adjustment strategy using a state synchronization mechanism is adopted. The element state information is processed in batches in the worker thread, and updates are pushed to the main thread through the buffer to ensure the real-time performance of state synchronization.

[0012] Preferably, determining the operating mode of the worker thread based on the preliminary optimized data interaction results further includes:

[0013] To ensure real-time state synchronization, dynamic data on the main thread load is obtained. While the main thread is processing user operations, the execution time of unnecessary tasks is limited, and the available resource range of the main thread is determined.

[0014] Preferably, determining the operating mode of the worker thread based on the preliminary optimized data interaction results further includes:

[0015] If the available resources of the main thread are lower than the preset threshold, non-real-time computing tasks are transferred to worker threads for processing. By splitting tasks, the load on the main thread is reduced, resulting in an adjusted thread allocation scheme.

[0016] Preferably, determining the operating mode of the worker thread based on the preliminary optimized data interaction results further includes:

[0017] Based on the adjusted thread allocation scheme, the execution time scheduling is dynamically adjusted for the computing resources allocated to worker threads, prioritizing state update tasks related to drag-and-drop operations, and determining the running mode of worker threads.

[0018] Preferably, the data buffer is constructed based on shared memory or structured clone objects, and is used to temporarily store multiple state parameters of the dragged element without blocking the main thread, including position, size, level and event binding information, so as to reduce the data copying and synchronization costs caused by frequent interactions.

[0019] Preferably, the operating mode of the worker thread is dynamically adjusted according to the frequency of drag-and-drop operations and the computing load. The operating mode includes a full-time mode that is always active and an event-driven mode that is woken up on demand after a drag-and-drop event is triggered.

[0020] Preferably, the optimization mechanism for data exchange includes reducing the volume of state data through differential compression algorithm, batch merging multiple consecutive drag events, and dynamically adjusting the communication trigger frequency according to the interaction frequency.

[0021] Preferably, in the process of compressing the state information, an asynchronous differential compression algorithm and a redundant field removal mechanism are used to encode the changes based on the differences between the current state and the previous state.

[0022] Preferably, the feedback mechanism for user experience quality collects three key interaction indicators: operation frame rate during dragging, interface response smoothness, and average response latency between drag triggering and feedback, and these indicators are fused together using a weighted function.

[0023] As can be seen from the above technical solution, the present invention has the following beneficial effects:

[0024] This element drag-and-drop method, based on the Vue framework and native JavaScript, achieves rapid data exchange between the main thread and worker threads by establishing a lightweight data buffer. It employs a dynamically adjusted state synchronization mechanism to batch process element states and push updates in worker threads. Based on the main thread's load, non-real-time computation tasks are transferred to worker threads, reducing the main thread's pressure. Worker thread task scheduling is optimized, prioritizing drag-and-drop related state updates. By continuously monitoring response time, a data exchange optimization mechanism is triggered, compressing the amount of state information data and reducing transmission burden. This invention effectively improves the real-time response capability of drag-and-drop operations, enhances the user experience in high-load scenarios, and achieves stable system performance optimization. Attached Figure Description

[0025] Figure 1 This is a flowchart of the method of the present invention. Detailed Implementation

[0026] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0027] like Figure 1 As shown, this invention provides a technical solution: a method for dragging and dropping elements based on the Vue framework and native JavaScript, the method comprising:

[0028] By establishing a pre-defined inter-thread communication channel, a data buffer is constructed to store the element state information involved in the drag-and-drop operation, and the data is transferred between the main thread and the worker thread to obtain preliminary optimized data interaction results.

[0029] Based on the preliminary optimized data interaction results, the running mode of the worker thread is determined. By using the running mode of the worker thread, improvement data on the operation latency problem is obtained. The response time of drag-and-drop operations is continuously monitored. If the response time exceeds the preset threshold, the data exchange optimization mechanism is triggered to obtain the processing result of reduced latency.

[0030] Based on the results of the latency reduction process, the control strategy for thread communication overhead is adjusted according to the number of elements in high-load scenarios. The transmission burden is reduced by compressing the amount of state information data, and the final communication optimization scheme is determined.

[0031] By implementing the final communication optimization solution, we can obtain data on the improvement in real-time response capabilities, establish a feedback mechanism for user experience quality, continuously record the smoothness indicators of drag-and-drop operations, and determine the overall stability of the system performance.

[0032] This method, based on the Vue framework, achieves high-performance responsiveness during page element dragging through collaborative communication between the main thread and worker threads (i.e., Web Workers). Its implementation includes the following main steps and detailed parameter settings:

[0033] First, during system initialization, the main thread creates worker threads by calling the Web Worker interface and initializes the state buffer using memory buffering technology. This buffer can use shared memory objects, such as SharedArrayBuffer, and is encapsulated by TypedArray types such as Uint8Array for efficient read and write operations. The buffer's data structure includes a unique identifier for each element, the coordinates of the drag start time, the current mouse coordinates, the drag start time, the current timestamp, and the sequence number of the data packet.

[0034] When a user triggers a drag-and-drop operation, the main thread captures the initial position and current coordinates, and records the time span from the start of the drag to the current position in real time. This coordinate information and timestamp are obtained through the browser's event object and performance monitoring interface, and are precisely measured using the `clientX` and `clientY` fields in `MouseEvent` and `performance.now()`, respectively. Subsequently, the main thread packages this state data and passes it to the worker threads.

[0035] After receiving the data packet, the worker thread parses the drag displacement path, calculating the distance from the initial position to the current position. It then compares this distance to the elapsed time to indirectly calculate the drag speed. This speed is used to assess the smoothness of the user's operation and serves as a control parameter in determining the thread's processing load. All of this data is precisely calculated within a millisecond timescale.

[0036] To ensure stable system response under high load, the main thread continuously monitors the time interval between the drag event trigger and the front-end page redrawing. This time value is called response latency, and it is generally recommended to keep it below 16 milliseconds to ensure the page can maintain a refresh rate of 60 frames per second. If the detected latency exceeds the system's maximum tolerance value (e.g., 16 milliseconds), the system automatically switches to performance optimization mechanisms.

[0037] Performance optimization mechanisms include data compression strategies, transmission frequency limits, and data batch processing or differential updates. For example, if the main thread sends too many data packets per unit time, and each data packet is large, it will increase the communication load. In this case, the system will reduce the amount of data sent per second or merge multiple state changes into a single data block before transmission, thereby reducing the communication frequency between the main thread and worker threads.

[0038] In addition, the system dynamically adjusts communication parameters based on historical data statistics and drag-and-drop load. For example, the status update frequency is usually set between 20 and 60 times per second, with an initial recommended value of 30 times per second; the maximum capacity of the buffer is dynamically set based on the number of draggable elements on the current page, in bytes; the minimum effective movement threshold during dragging is also set, for example, only when the mouse displacement exceeds 5 pixels will it be considered a valid drag, to avoid redundant data transmission.

[0039] The evaluation of drag-and-drop performance also relies on user experience feedback mechanisms. The system has a built-in interaction scoring model that evaluates each drag-and-drop operation, such as whether the smoothness is stable and the response is timely. The score ranges from 0 to 1, and if the average score is below 0.85, thread reallocation and communication strategy optimization will be triggered.

[0040] Finally, to determine whether the system is in a stable performance state, it continuously records and analyzes key performance indicators. These indicators include frame rate per second (FPS), CPU utilization, and browser-allocated memory usage. When the frame rate is found to be below 30 FPS for an extended period, or memory usage consistently exceeds a preset threshold, the system will enter a light-load mode, automatically simplifying the data transmission structure and transmitting only coordinate differences and time change information, thereby reducing resource consumption while ensuring a smooth drag-and-drop experience.

[0041] The above methods significantly improve the real-time responsiveness of drag-and-drop operations under the Vue framework, effectively alleviate main thread blocking issues, and reduce operation latency in high-concurrency or complex DOM environments. Through the design of asynchronous inter-thread communication and state data buffering strategies, the interaction information transmission path is optimized, improving data processing efficiency. To address transmission bottlenecks under high load, data compression and transmission strategy adjustments are employed, significantly reducing communication overhead. In terms of user experience, the system can record interaction smoothness metrics in real time and dynamically adjust the operating mode through a feedback mechanism, enhancing overall performance stability and responsiveness, thereby improving the consistency and satisfaction of user operations.

[0042] Based on the preliminary optimized data interaction results, the operating modes of the worker threads are determined to include:

[0043] Based on the preliminary optimized data interaction results, a dynamic adjustment strategy using a state synchronization mechanism is adopted. The element state information is processed in batches in the worker thread, and updates are pushed to the main thread through the buffer to ensure the real-time performance of state synchronization.

[0044] In this implementation, the system dynamically determines the running mode of the worker threads based on the preliminary optimization data provided by the main thread, and adopts a dynamic adjustment strategy with a state synchronization mechanism to achieve batch processing and efficient feedback of the state of dragged elements, thereby ensuring the real-time nature of state updates and the stability of system performance.

[0045] The operation mode initialization and judgment logic involves the worker thread detecting the data arrival frequency after initially receiving optimized data from the main thread. Within each preset time window, such as every 100 milliseconds, the system counts the number of received status update requests. If more than 20 data entries are received within this time period, the system determines that it is currently in a high interaction density state and immediately switches to batch processing mode. Otherwise, it maintains the default single-update synchronization mode.

[0046] Once in batch mode, the system processes all received status updates within a fixed processing cycle, such as every 30 milliseconds, merging them into a single batch. This batch contains multiple status objects, each recording a dragged element's unique identifier, current coordinates, drag speed, drag direction, and timestamp. The merged data is then written to a buffer queue, awaiting subsequent synchronization pushes.

[0047] This merging method significantly reduces communication overhead and prevents performance degradation caused by the main thread frequently receiving single data entries. The buffer queue can be implemented using a circular or linked list structure to ensure data write efficiency and structural stability.

[0048] To ensure that state updates are reflected in a timely manner on the user's end, the system defines a real-time detection mechanism. Each time a worker thread finishes processing a batch of state data, it begins recording the time and monitors when the data is successfully read by the main thread and the DOM is updated. If the time interval between processing completion and the main thread's update exceeds 50 milliseconds, it indicates a synchronization delay. In this case, the system will immediately trigger the push process to ensure that the update is promptly delivered to the user interface.

[0049] Conversely, when the time interval is less than 50 milliseconds and the system load is low, the system can wait for the preset push period (e.g., 40 milliseconds) to arrive before uniformly transmitting the data in the buffer to the main thread to improve communication efficiency.

[0050] The system dynamically adjusts the batch processing cycle and push cycle based on the latency of previous data processing and the amount of data in the buffer queue. If the synchronization latency for three consecutive records exceeds 50 milliseconds, the system will shorten the batch processing window and push cycle by 20% each, until the minimum processing cycle is no less than 10 milliseconds. If the latency for five consecutive records is less than 50 milliseconds, and the amount of data processed each time is less than 5 records, the system considers the current state to be low-load and will appropriately extend the synchronization cycle by 5 milliseconds each time, with a maximum of 100 milliseconds.

[0051] When a worker thread detects that the number of data entries received per unit time is consistently too low, i.e. below the aforementioned criterion of 20 entries every 100 milliseconds, the system will exit batch processing mode and return to single-entry real-time push mode to ensure that drag-and-drop status can be reflected more quickly in the user interface under low load.

[0052] The synchronization threshold, cycle, and number of data entries in this system were all obtained through actual testing and optimization. Using 20 data entries every 100 milliseconds as the judgment criterion is based on typical user operation frequency. The initial processing cycle is set to 30 milliseconds to balance performance and real-time performance. The maximum allowable synchronization latency of 50 milliseconds stems from interactive experience requirements, ensuring a smooth visual response without noticeable lag. Adjusting the ratio and cycle range has been tested to enable the system to switch smoothly under high and low loads, effectively preventing frequent thread jitter or performance fluctuations.

[0053] Worker threads and the main thread exchange data via shared memory or a message channel-based structure. This shared memory is used in non-standard HTTP environments or older browser environments. The data structures employed support state compression and packetized transmission, improving transmission efficiency while preventing frame loss. This overall mechanism significantly reduces resource consumption and enhances system stability while maintaining synchronization timeliness.

[0054] This implementation addresses the performance bottleneck caused by frequent DOM updates in high-frequency interaction scenarios using a dynamically adjusted state synchronization mechanism. The batch processing strategy effectively reduces the communication frequency between worker threads and the main thread, minimizing system resource consumption, and improves synchronization flexibility and stability by automatically adjusting the synchronization frequency. The batch processing strategy is applicable under normal high-load conditions. Furthermore, this mechanism automatically optimizes operating parameters based on actual workload, ensuring real-time performance is maintained even during intensive drag-and-drop operations or resource-constrained scenarios, thereby enhancing overall system performance and user experience.

[0055] Based on the preliminary optimized data interaction results, the operating mode of the worker thread also includes:

[0056] To ensure real-time state synchronization, dynamic data on the main thread load is obtained. While the main thread is processing user operations, the execution time of unnecessary tasks is limited, and the available resource range of the main thread is determined.

[0057] This implementation introduces a main thread load awareness mechanism in determining the worker thread's running mode. The aim is to improve the overall system scheduling efficiency and responsiveness while ensuring real-time state synchronization. This mechanism primarily works by dynamically monitoring the main thread's running load, determining the main thread's resource availability, and dynamically adjusting the worker thread's data push behavior accordingly, achieving efficient drag-and-drop status feedback.

[0058] The main thread execution status acquisition mechanism involves the system first collecting the main thread's task execution status within each frame cycle. The default frame cycle is set to 16 milliseconds to meet the rendering requirement of 60 frames per second. Within this time period, the system divides the main thread's time into three categories: time for handling user operations, time for page rendering and DOM updates, and idle time for other non-task activities. These time periods are sampled and recorded using the browser performance monitoring interface, accurate to the millisecond level. For example, the system records the start and end times of the main thread's function execution when a drag event is triggered, as well as the page repaint time caused by that event. The remaining unused time is the main thread's idle time.

[0059] The main thread load assessment method, based on the collected time data, calculates the percentage of total time spent processing user operations and rendering tasks within a single frame cycle. If this percentage exceeds 80% of the total frame time for three consecutive frame cycles, the main thread is considered to be under high load. In this case, the system will activate a non-critical task limiting mechanism, stopping or postponing tasks such as log collection, low-priority animation rendering, and background data updates to ensure the main thread has sufficient resources to respond to user interaction requests in real time.

[0060] The system determines the available resources for the main thread by defining the remaining idle time in each frame cycle as the current available resources. If this idle time is less than 5 milliseconds, the main thread is considered temporarily unable to handle additional data processing tasks; if the idle time is between 5 and 10 milliseconds, it is considered a medium resource availability state; if the idle time exceeds 10 milliseconds, it indicates that the main thread's load is relatively light and it can accept more data pushes from worker threads. For example, under high load, the system only allows worker threads to synchronize one high-priority status message to the main thread; under medium load, a maximum of five messages are allowed; and under low load, a maximum of 10 status update messages are allowed. All these thresholds were obtained through experimental testing and user interaction performance evaluation.

[0061] To prevent page lag caused by a backlog of tasks on the main thread, the system sets a maximum allowed execution time limit for each type of low-priority task. For example, the execution time for log collection tasks cannot exceed 2 milliseconds, and for animation frame interpolation tasks, it cannot exceed 4 milliseconds. Once a task exceeds the set duration in the current frame, it will be interrupted and delayed until the next idle period to attempt execution again. Meanwhile, core tasks such as event listening and drag-and-drop state synchronization are classified as high-priority tasks, and their scheduling is not subject to time limits to ensure timely operation response.

[0062] The worker thread strategy feedback mechanism involves the main thread transmitting the idle time value and load assessment result recorded in the current frame to the worker threads via a message channel. The worker threads automatically adjust their data push plan based on this feedback data. If the main thread has sufficient resources, the worker threads can merge multiple data entries for batch push; if resources are limited, only key status fields are sent, or the current push is delayed to avoid further burdening the main thread. This feedback mechanism executes periodically, typically updating the main thread status information every 3 frames, ensuring the system always dynamically optimizes scheduling based on the latest resource conditions.

[0063] By introducing a dynamic resource awareness mechanism for the main thread in the drag-and-drop method, the system can identify the main thread's running status in real time and adjust the data push strategy and synchronization rhythm of worker threads accordingly, effectively reducing the risk of thread contention. Limiting the execution time of non-critical tasks helps avoid response stuttering caused by the accumulation of main thread tasks, thereby improving the overall smoothness of the page. This mechanism is particularly effective in high-load scenarios, ensuring stable response during critical interactions such as drag-and-drop, improving the consistency of user experience and system operating efficiency.

[0064] Based on the preliminary optimized data interaction results, the operating mode of the worker thread also includes:

[0065] If the available resources of the main thread are lower than the preset threshold, non-real-time computing tasks are transferred to worker threads for processing. By splitting tasks, the load on the main thread is reduced, resulting in an adjusted thread allocation scheme.

[0066] This implementation dynamically assesses the available resources of the main thread. When the detection result falls below a set threshold, some non-real-time computing tasks are migrated to worker threads for execution. This approach not only effectively reduces the load on the main thread but also optimizes system performance and ensures the real-time nature of drag-and-drop operations through task splitting and thread coordination.

[0067] The main thread resource monitoring mechanism uses a 16-millisecond refresh cycle per frame as a reference to monitor the main thread's task consumption within that cycle. The main thread's runtime is divided into three parts: time for handling user interactions, time for page rendering and layout updates, and remaining idle time. Whenever a new frame is entered, the system records the total time consumed by these three types of tasks and subtracts this time from the total frame duration to obtain the remaining idle time for the main thread in the current frame. If this idle time is less than 5 milliseconds, the main thread is considered overloaded and unable to handle additional tasks. For example, in a typical 16-millisecond frame cycle, if user interaction takes 6 milliseconds, DOM rendering takes 5 milliseconds, and low-priority tasks such as animation frame interpolation and log updates take a total of 2 milliseconds, then the idle time is only 3 milliseconds, which is below the 5-millisecond threshold.

[0068] The task filtering and migration mechanism works as follows: When the system determines that the main thread resources are insufficient, it immediately analyzes all tasks currently executing on the main thread. These tasks are divided into two categories: those that must be processed in real-time, such as updating drag coordinates and responding to user events (these tasks must remain on the main thread); and those that can be executed later or asynchronously, such as logging, layout statistics, and non-critical animation calculations. For tasks belonging to the second category, the system further analyzes their execution time and migration feasibility. If the historical average execution time of a task exceeds 2 milliseconds, and its logic can run independently without relying on the DOM, the task is considered to be migrated. The system encapsulates the task's parameters and execution logic into a task unit and sends it to the worker thread through the browser's thread message channel.

[0069] Worker thread task management and concurrency limits: After receiving tasks from the main thread, worker threads add them to the task queue. To control the number of concurrent tasks from exceeding system resource load, the system allows a maximum of 4 to 8 tasks to run simultaneously in worker threads. This number is dynamically set based on the number of CPU cores in the user's device, typically one core less than the number of cores. If the current number of running tasks has reached the limit, new tasks will be temporarily queued and will only enter the execution state after a task is completed. Worker threads capture task completion events through event listeners and return the results to the main thread via message channels.

[0070] The result synchronization and state consistency guarantee mechanism works as follows: when the main thread resources recover to a state where the idle time is greater than 5 milliseconds, the system then receives the task execution results returned by the worker threads and determines how to apply these results based on the task type. If the task results will cause DOM updates, such as those involving statistical value display or animation control, the system will execute these updates during the idle period to avoid interfering with critical operations. Furthermore, the main thread assigns a unique identifier to each task and checks the execution order using this identifier when receiving the returned results to ensure state consistency. If a task is found to have been replaced (e.g., due to a change in statistical methods), outdated results are discarded to avoid redundant rendering.

[0071] The parameter settings and implementation details are as follows: the 16-millisecond time base per frame is derived from the browser rendering standard to ensure approximately 60 refreshes per second; the main thread idle threshold is set to 5 milliseconds, which is determined based on the responsiveness of drag-and-drop operations to ensure that the user interaction experience is not delayed; the non-real-time task migration condition is set to take more than 2 milliseconds, which, combined with multiple rounds of testing, has shown the most significant performance improvement; the maximum number of concurrent tasks in the worker thread is controlled between 4 and 8, which is a result of balancing resource utilization and thread scheduling latency.

[0072] By constructing a dynamic adjustment mechanism for thread allocation, the method of this invention can automatically release load pressure when the main thread is under resource pressure, transferring non-real-time computing logic to independent threads for execution. This not only reduces the risk of main thread blocking but also improves the responsiveness and usability of the page in high-frequency operation scenarios. This mechanism is applicable to various scenarios where tasks can be decomposed, helping to improve the system's multi-threaded concurrent processing capabilities, enhance overall operating efficiency, and improve user interaction experience.

[0073] Based on the preliminary optimized data interaction results, the operating mode of the worker thread also includes:

[0074] Based on the adjusted thread allocation scheme, the execution time scheduling is dynamically adjusted for the computing resources allocated to worker threads, prioritizing state update tasks related to drag-and-drop operations, and determining the running mode of worker threads.

[0075] In this implementation, after adjusting the task allocation between the main thread and worker threads, the system further optimizes the execution order and resource scheduling strategy of tasks in the worker threads. The core objective is to prioritize scheduling state update tasks directly related to drag-and-drop operations within limited thread resources, thereby ensuring a balance between the real-time responsiveness of the interface and the overall performance of the system.

[0076] The system scores all tasks entering the worker thread to determine their execution order. Each task's priority score consists of three parts: the first is the task type score (e.g., drag-and-drop status update task scores 10, statistical analysis task scores 5, log recording task scores 1); the second is the interval between the task's submission time and the most recent user interaction event (shorter intervals result in higher scores); and the third is the inverse of the task's historical average completion time (meaning faster completion times result in higher scores). These three scores are multiplied by system-defined weighting coefficients: type score multiplied by 0.6, interval score multiplied by 0.3, and task completion time score multiplied by 0.1. The final weighted average score yields the task's overall priority score. All tasks are then arranged in a priority queue from highest to lowest score.

[0077] Within each scheduling cycle, the system assesses the maximum execution time available to worker threads, for example, set to 10 milliseconds. Within this time window, a thread can schedule several tasks for execution until its allocated time is exhausted. The system sequentially selects tasks from the priority queue, determining if their estimated execution time falls within the remaining time. If it does, the task is scheduled for execution, and its estimated execution time is deducted from the remaining time. If not, the system skips the task and tries the next shorter task, until the current time slice is exhausted. This mechanism ensures that high-priority tasks are processed first and that as many tasks as possible are completed within resource limits, improving thread utilization.

[0078] The system sets a mandatory completion time window for drag-and-drop related tasks, for example, 10 milliseconds. This means that the time from when the main thread issues a drag-and-drop operation request to when the worker thread returns the processing result cannot exceed 10 milliseconds. To ensure this timeliness, the system continuously monitors the task execution time. If the estimated processing time of a drag-and-drop task exceeds 10 milliseconds, the system splits it into two or more sub-tasks, which are executed in different scheduling cycles. For example, a drag-and-drop task estimated to take 18 milliseconds will be split into two sub-tasks, each executed within 9 milliseconds, ensuring that each sub-task can be completed within a single scheduling cycle and avoiding response timeouts.

[0079] To avoid response jitter in high-priority tasks due to scheduling delays, the system introduces a sliding time window scheduling strategy. This strategy re-evaluates task priorities every two cycles and forces early processing of consecutively incomplete high-priority tasks, ensuring that drag-and-drop operations maintain low-latency response.

[0080] Task type scores are automatically assigned based on the system's built-in task classification; user interaction time is determined by the system timestamp obtained when the event is triggered; the historical average execution time of tasks is calculated by averaging the execution times of the last 10 executions of each task recorded by the log module. The scheduling time window is set to 10 milliseconds to ensure that task processing cycles can be completed within the browser's 16-millisecond frame refresh cycle, while reserving time for the main thread to perform necessary UI rendering and user interaction processing. The priority weighting ratios (0.6, 0.3, 0.1) are based on system experimental results, balancing responsiveness and resource utilization efficiency.

[0081] By introducing a task priority scheduling mechanism based on thread allocation strategies, this method can prioritize the response speed of drag-and-drop tasks in high-load interactive scenarios, reducing the perceived latency for users. Dynamically adjusting the execution time allocation within worker threads effectively improves the real-time performance and resource utilization efficiency of task processing, enhancing the system's operational flexibility and stability. Especially under multi-task concurrency, it ensures smooth drag-and-drop, significantly optimizing the user experience.

[0082] The data buffer is built on shared memory or structured clone objects and is used to temporarily store multiple state parameters of the dragged element without blocking the main thread, including position, size, hierarchy and event binding information, so as to reduce the data copying and synchronization costs caused by frequent interactions.

[0083] In this implementation, to improve data transmission efficiency during drag-and-drop operations, the system constructs a data buffer for state synchronization between the main thread and worker threads. This buffer supports two implementation methods: one based on shared memory mechanisms (such as SharedArrayBuffer) or the other based on structured cloned objects (such as MessageChannel objects passed using postMessage). During drag-and-drop operations, whenever the user triggers an element drag event, the system immediately writes the core state parameters of the current element into this buffer. These parameters include: the element's position information (such as x-axis and y-axis coordinates), size information (such as width and height), hierarchy information (such as z-index value), and the event identifier or callback function reference information it is bound to.

[0084] When using shared memory mode, the main thread writes this data to a TypedArray view, such as a Uint8Array or Float64Array, via direct mapping, achieving fast storage and retrieval and avoiding copying costs. In structured cloning mode, the system serializes the state object into a structure, sends it to the worker thread via postMessage, and the browser automatically handles cross-thread copying. The entire data transfer process is minimized on the main thread and does not rely on DOM synchronization, thus avoiding main thread blocking caused by frequent data exchanges.

[0085] This data buffer also features a state update mechanism, which triggers a buffer update operation only when an element's state changes significantly (such as when its position moves beyond a certain threshold or when the bound event changes), thereby further reducing communication frequency. In high-frequency interaction scenarios, this mechanism can effectively reduce the communication load between threads, improve drag-and-drop response speed, and enhance overall system performance.

[0086] By introducing a shared memory or structured cloning mechanism to create a buffer between the main thread and worker threads, this method enables efficient temporary storage and transfer of element states, avoiding performance bottlenecks caused by repeated data copying during frequent interactions. Especially in concurrent drag-and-drop or continuous drag-and-drop operations involving a large number of elements, it significantly reduces the load on the main thread and improves data synchronization efficiency, thereby ensuring the smoothness and responsiveness of the user interface. The state determination mechanism further reduces invalid communication and resource waste, enhancing system stability and scalability.

[0087] The working thread's operating mode is dynamically adjusted based on the frequency of drag-and-drop operations and the computational load. The operating modes include a full-time mode that is always active and an event-driven mode that is woken up on demand after a drag-and-drop event is triggered.

[0088] In this implementation, the system is designed with an adaptive control mechanism for the worker thread operation mode based on the frequency of drag-and-drop operations and the current computing load of the system. This mechanism supports two operation modes: full-time mode and event-driven mode.

[0089] In 24 / 7 mode, worker threads remain continuously active from page initialization and are not dynamically started or stopped by events. In this mode, the thread continuously listens for state changes in the main thread's data buffer or message channel and processes drag-and-drop related data immediately upon receipt. This mode is suitable for high-frequency drag-and-drop operations or scenarios with concurrent drag-and-drop of multiple elements, ensuring minimal processing latency and maximum response efficiency.

[0090] In event-driven mode, worker threads are initially suspended or idle until the main thread detects a user drag-and-drop operation (e.g., by listening to a mousedown or touchstart event), at which point the worker thread is awakened via a message. The awakened thread remains active for a set period to handle continuous drag-and-drop events. If no new interaction events occur within this period, the thread re-enters the suspended state to conserve resources. This mode is suitable for scenarios with low drag-and-drop operation frequency and where overall page resource usage needs optimization.

[0091] The system statistically analyzes the frequency of drag-and-drop events. For example, if more than 20 drag-and-drop events occur within one second, or if more than three elements are dragged concurrently within a short period, it is considered a high-frequency interaction state and automatically switches to full-time mode. When no valid drag-and-drop operations are detected within the past five seconds, or when the computational load continuously exceeds a set threshold (e.g., CPU utilization exceeds 80%), the system automatically switches to event-driven mode to reduce resource consumption. The mode switching process is controlled by shared state flags or semaphores to avoid thread state jitter and scheduling delays.

[0092] This dynamic adjustment mechanism allows for flexible selection of the optimal thread scheduling method based on user interaction frequency and system load. It ensures high-performance response during periods of frequent user interaction, while reducing energy consumption and thread scheduling burden under conditions of low system resources or sparse interaction. This dual-mode architecture effectively enhances the system's scalability and adaptability, providing more stable technical support for complex interactive applications, and is particularly suitable for richly interactive web applications and cross-platform front-end systems.

[0093] The optimization mechanisms for data exchange include reducing the volume of state data through differential compression algorithms, merging multiple consecutive drag events in batches, and dynamically adjusting the communication trigger frequency based on the interaction frequency.

[0094] In this embodiment, to cope with the large amount of high-frequency status data generated during drag-and-drop operations, the system introduces a multi-dimensional data exchange optimization mechanism, specifically including three strategies: difference compression, batch merging, and communication frequency adjustment.

[0095] First, the system applies a difference compression algorithm to the state data generated by each drag operation. This algorithm records only the changes, not the complete state values, based on the difference between each drag event and its predecessor. For example, if the previous position was x=100, y=200, and the current position is x=102, y=203, then only the change in x (+2) and y (+3) is recorded. This method significantly compresses data volume during minor element movements or slow drags, reducing the data burden of inter-thread communication.

[0096] Secondly, the system supports batch merging of drag-and-drop events triggered consecutively within a short period. For example, if five drag-and-drop events occur within 40 milliseconds, the system will package the data from these five events into a single batch, parse and process them sequentially in the worker thread, and then provide a unified result. This batching mechanism avoids communication for each event, effectively reducing communication frequency and thread scheduling overhead, while also minimizing response jitter caused by the main thread frequently receiving small data packets.

[0097] Furthermore, the system dynamically adjusts the timing of data push notifications based on the interaction frequency. Specifically, the system counts the total number of drag-and-drop events per second. If the event frequency exceeds 30 times per second, the communication trigger interval is adjusted from the default of pushing once per event to pushing once after every 3 events. If the frequency further increases to over 50 times per second, the trigger interval is extended to pushing once after every 5 events. Conversely, when the drag-and-drop frequency drops below 10 times per second, the system reverts to an instant push mode for each event to ensure response accuracy.

[0098] This optimization mechanism is managed uniformly by the scheduling controller. Each optimization strategy can be dynamically combined or selected to be enabled based on actual data characteristics, ensuring stable data synchronization capabilities under conditions of high-frequency interaction, high load, and low resources.

[0099] This optimization mechanism significantly reduces the bandwidth and resources consumed by drag-and-drop state data transmission between the main thread and worker threads, effectively controlling the risk of system load escalation caused by high-frequency operations. Differential compression improves transmission efficiency, batch merging reduces communication scheduling overhead, and dynamic frequency control achieves a balance between communication load and response efficiency. The synergistic effect of these three optimization strategies helps build a drag-and-drop data processing system that is timely, resource-constrained, and highly scalable, significantly enhancing the system's stability and usability in complex interactive environments.

[0100] During the compression of state information, an asynchronous differential compression algorithm and a redundant field removal mechanism are used to encode the changes based on the differences between the current state and the previous state.

[0101] In this implementation, to further optimize the transmission efficiency of drag-and-drop state data between the main thread and worker threads, the system introduces an asynchronous differential compression algorithm and a redundant field removal mechanism to construct an efficient data compression encoding scheme. The core of this scheme is to compress and encode only the state-changing parts, without repeatedly transmitting duplicate or unchanged data.

[0102] First, during the asynchronous interpolation compression phase, the system establishes a pre-state cache module on the main thread side to record copies of the previously sent state parameters in real time. Whenever a new drag event generates new state information, the system compares the current state with the cached state, calculating the changes in each field, such as coordinate offsets and size increases or decreases. Only these differences are encoded into the compressed package content and sent to the worker thread. The entire process employs an asynchronous processing model, meaning that the interpolation calculation and encoding work does not block the main thread's main flow; it is completed by independent asynchronous task scheduling to ensure page rendering and interaction performance.

[0103] Secondly, the system employs a redundant field removal mechanism to automatically identify and remove invalid or duplicate fields when constructing compressed data packages. For example, static element attributes (such as fixed style class names, IDs, etc.) that remain unchanged during multiple drag-and-drop processes will not be repeatedly packaged and sent. The system uses field change flags to determine whether each attribute has been updated in the current drag-and-drop cycle; if no change has occurred, the field is omitted from the compressed package. Upon receiving the difference data, the worker thread uses the most recent complete state maintained locally for restoration and merging to ensure data consistency.

[0104] Ultimately, the compressed data packets generated by the system contain only field names, changed values, and identifier headers, resulting in significantly reduced data size, lower transmission latency, and strong real-time performance. The encoding process supports JSON interpolation structures, fixed-length binary compressed structures, or custom lightweight formats to adapt to the performance requirements of different terminals and transmission protocols.

[0105] By employing asynchronous interpolation compression and redundant field removal mechanisms, this method significantly reduces the volume of state synchronization data and lowers the data exchange overhead between the main thread and worker threads while ensuring real-time drag-and-drop responsiveness. Compared to traditional complete state transmission methods, this method can improve data transmission efficiency by over 50% in high-frequency interaction scenarios, significantly alleviate thread communication bottlenecks, and enhance system scalability and stability. Furthermore, the asynchronous execution method further ensures the smooth operation of the main thread, effectively improving user interface responsiveness.

[0106] The feedback mechanism for user experience quality collects three key interaction metrics: operation frame rate during dragging, smoothness of interface response, and average response latency between drag triggering and feedback. These metrics are then combined using a weighted function to generate the final result.

[0107] In this implementation, to comprehensively evaluate the user experience quality of drag-and-drop operations, the system constructs a feedback mechanism based on multi-indicator collection and weighted fusion. This mechanism provides a basis for subsequent system optimization and performance judgment by real-time monitoring and statistical analysis of key interactive performance indicators generated during the drag-and-drop process.

[0108] First, the system continuously collects the frame rate during drag-and-drop operations, which is the number of frames the page renders per second during the dragging process. This metric is implemented by counting within a unit of time using the browser's requestAnimationFrame function, and is used to measure the smoothness of the page's visual feedback. Generally, a frame rate close to 60 frames per second indicates smooth page operation; if the frame rate is consistently below 30 frames per second, the system considers there to be a risk of stuttering.

[0109] Secondly, the system quantifies the smoothness of the interface response by calculating the smoothness of the dragged element's motion trajectory and the continuity of the interface response. This process is derived by analyzing the continuity of displacement, rate of change of speed, and consistency of rendering latency between adjacent drag states, and then normalizing it according to the device refresh rate standard. Small speed jitter and smooth displacement increments indicate good interface response.

[0110] Secondly, the system records the time difference between each drag event being triggered and the visual feedback on the page, and calculates the average of this delay data throughout the entire drag process as the average response latency metric. A response latency of less than 10 milliseconds is generally considered imperceptible to users, while a latency exceeding 16 milliseconds may result in a feeling of sluggish operation.

[0111] Finally, the system integrates the three core metrics into a single user experience score by setting a weighting function. The weighting can be set according to the actual application scenario; for example, frame rate weight is 0.4, smoothness weight is 0.3, and response latency weight is 0.3, with the total score normalized to the range of 0 to 1. This score is used by the system as a reference for the current performance status and can also be used to determine the threshold for triggering drag-and-drop optimization mechanisms.

[0112] This feedback mechanism provides a comprehensive, quantitative, and real-time user interaction performance evaluation framework, enabling the system to dynamically determine the smoothness and responsiveness of interface dragging based on actual operational data. By integrating multiple key interaction indicators and weighting them to generate a unified score, it effectively avoids the distortion problem of single-dimensional evaluation. This mechanism not only improves the system's sensitivity to performance changes but also provides a scientific basis for system optimization, resource scheduling, and operating mode switching, enhancing the system's adaptability and user experience consistency.

[0113] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A method for dragging and dropping elements based on the Vue framework and native JavaScript, characterized in that... The method includes: By establishing a pre-defined inter-thread communication channel, a data buffer is constructed to store the element state information involved in the drag-and-drop operation, and the data is transferred between the main thread and the worker thread to obtain preliminary optimized data interaction results. Based on the preliminary optimized data interaction results, the running mode of the worker thread is determined. By using the running mode of the worker thread, improvement data on the operation latency problem is obtained. The response time of drag-and-drop operations is continuously monitored. If the response time exceeds the preset threshold, the data exchange optimization mechanism is triggered to obtain the processing result of reduced latency. Based on the results of the latency reduction process, the control strategy for thread communication overhead is adjusted according to the number of elements in high-load scenarios. The transmission burden is reduced by compressing the amount of state information data, and the final communication optimization scheme is determined. By obtaining data on the improvement of real-time response capabilities through the final communication optimization solution, and by continuously recording the smoothness indicators of drag-and-drop operations based on the feedback mechanism for user experience quality, the overall stability of the system performance can be determined. The data buffer is built based on shared memory or structured clone objects and is used to temporarily store multiple state parameters of the dragged element without blocking the main thread, including position, size, hierarchy and event binding information, so as to reduce the data copying and synchronization costs caused by frequent interactions. The optimization mechanism for data exchange includes reducing the volume of state data through differential compression algorithm, merging multiple consecutive drag events in batches, and dynamically adjusting the communication trigger frequency according to the interaction frequency.

2. The element drag-and-drop method based on the Vue framework and native JavaScript as described in claim 1, characterized in that: The process of determining the operating mode of the worker thread based on the preliminary optimized data interaction results includes: Based on the preliminary optimized data interaction results, a dynamic adjustment strategy using a state synchronization mechanism is adopted. The element state information is processed in batches in the worker thread, and updates are pushed to the main thread through the buffer to ensure the real-time performance of state synchronization.

3. The element drag-and-drop method based on the Vue framework and native JavaScript as described in claim 2, characterized in that: The process of determining the operating mode of the worker thread based on the preliminary optimized data interaction results also includes: To ensure real-time state synchronization, dynamic data on the main thread load is obtained. While the main thread is processing user operations, the execution time of unnecessary tasks is limited, and the available resource range of the main thread is determined.

4. The element drag-and-drop method based on the Vue framework and native JavaScript as described in claim 3, characterized in that: The process of determining the operating mode of the worker thread based on the preliminary optimized data interaction results also includes: If the available resources of the main thread are lower than the preset threshold, non-real-time computing tasks are transferred to worker threads for processing. By splitting tasks, the load on the main thread is reduced, resulting in an adjusted thread allocation scheme.

5. The element drag-and-drop method based on the Vue framework and native JavaScript as described in claim 4, characterized in that: The process of determining the operating mode of the worker thread based on the preliminary optimized data interaction results also includes: Based on the adjusted thread allocation scheme, the execution time scheduling is dynamically adjusted for the computing resources allocated to worker threads, prioritizing state update tasks related to drag-and-drop operations, and determining the running mode of worker threads.

6. The element drag-and-drop method based on the Vue framework and native JavaScript as described in claim 1, characterized in that: The operating mode of the worker thread is dynamically adjusted based on the frequency of drag-and-drop operations and the computational load. The operating modes include a full-time mode that is always active and an event-driven mode that is woken up on demand after a drag-and-drop event is triggered.

7. The element drag-and-drop method based on the Vue framework and native JavaScript as described in claim 1, characterized in that: In the process of compressing the state information, an asynchronous differential compression algorithm and a redundant field removal mechanism are used to encode the changes based on the differences between the current state and the previous state.

8. The element drag-and-drop method based on the Vue framework and native JavaScript as described in claim 1, characterized in that: The feedback mechanism for user experience quality collects three key interaction metrics: operation frame rate during dragging, smoothness of interface response, and average response latency between drag triggering and feedback. These metrics are then fused together using a weighted function to generate the final result.

Images