Front-end rendering optimization method based on WebAssembly

Abstract

The invention particularly relates to a front end rendering optimization method based on WebAssembly (WebAssembly). According to the front-end rendering optimization method based on WebAssessment, independent linear memory blocks are created based on multi-memory characteristics, and the independent linear memory blocks are a GPU memory block, an SIMD memory block and a CPU memory block; receiving and analyzing a front-end task request, and calling a dynamic memory allocation algorithm to match a memory block of a corresponding type; the method comprises the following steps of: matching a GPU (Graphics Processing Unit) memory block for a rendering task, matching an SIMD (Single Instruction Multiple Data) memory block for a physical simulation or data processing task and matching a CPU (Central Processing Unit) memory block for other tasks to realize physical isolation of a compute-intensive task and a UI (User Interface) rendering task; in an SIMD (Single Instruction Multiple Data) memory block, implementing parallel processing through a WebAssey SIMD instruction set; and completing low-delay data interaction between the WebAssembly module and the JavaScript, and outputting a calculation result to drive rendering. According to the front-end rendering optimization method based on WebAssessment, through a multi-memory isolation mechanism and an SIMD acceleration rendering technology, the performance bottleneck problem of Web front-end application is effectively solved, and the WebGL rendering efficiency and the application response speed are remarkably improved.

Description

Technical Field

[0001] This invention relates to the field of computer front-end development technology, and in particular to a front-end rendering optimization method based on WebAssembly. Background Technology

[0002] As web applications become increasingly complex, especially with the widespread adoption of 3D graphics rendering, real-time data visualization, and interactive application scenarios, front-end performance bottlenecks are becoming increasingly prominent. Currently, web front-end applications mainly face the following three major performance bottlenecks:

[0003] WebGL rendering performance is insufficient: in complex 3D scenes, the frame rate is usually below 30fps, and on mobile devices it even drops below 10fps, which seriously affects the user experience;

[0004] Memory management flaws: When processing large amounts of data, JavaScript memory leak rates can be as high as 25%, causing frequent application stuttering or even crashes;

[0005] Cross-thread communication latency: The average latency between WebGL and JavaScript is 15ms, which cannot meet the requirements of real-time interaction scenarios.

[0006] In existing technologies, Yonyou Auto's front-end memory optimization patent (CN120929080A) only solves the memory leak problem caused by event listening, and does not involve WebAssembly's multi-memory isolation mechanism; Sugon Information Industry's memory isolation patent (CN120045365A) is mainly designed for server environments and is not suitable for front-end rendering scenarios; although the Unity WebGL packaging optimization solution improves resource loading efficiency, it does not solve the core rendering pipeline performance bottleneck.

[0007] While WebAssembly 3.0 supports features such as 64-bit memory, garbage collection, and SIMD instruction sets, there is still no systematic solution to combine multi-memory isolation with SIMD acceleration technology for optimizing WebAssembly-based front-end rendering. Therefore, an innovative technical solution that can effectively address these issues is urgently needed.

[0008] Based on the above, this invention proposes a front-end rendering optimization method based on WebAssembly. Summary of the Invention

[0009] To overcome the shortcomings of existing technologies, this invention provides a simple and efficient front-end rendering optimization method based on WebAssembly.

[0010] This invention is achieved through the following technical solution:

[0011] A front-end rendering optimization method based on WebAssembly, characterized by the following steps:

[0012] Step S1: Based on the multi-memory features of WebAssembly 3.0, create at least three independent linear memory blocks, which are defined as GPU memory block, SIMD memory block and CPU memory block respectively;

[0013] Among them, the GPU memory block is dedicated to storing WebGL texture and buffer data, the SIMD memory block is used to carry out vector operation-type computation tasks, and the CPU memory block is used to implement ordinary JavaScript operations;

[0014] Step S2: Receive the front-end task request, parse the task type and memory requirement parameters, and call the dynamic memory allocation algorithm to match the corresponding type of memory block;

[0015] The task types include rendering tasks, computationally intensive tasks, and general tasks;

[0016] The memory requirement parameters include capacity and access frequency;

[0017] In step S2, the dynamic memory allocation algorithm includes the following steps:

[0018] Step S2.1: Assess the task type and memory requirements.

[0019] Match GPU memory blocks for rendering tasks, SIMD memory blocks for physics simulation or data processing tasks, and CPU memory blocks for other tasks.

[0020] Step S2.2: Locate available memory blocks

[0021] Search within the corresponding type of memory pool to find free memory blocks, and record the address and capacity of the free memory blocks in a list;

[0022] Step S2.3: Select the optimal memory block

[0023] Based on the principle of combining minimum memory fragmentation and maximum access speed, the memory blocks in the list are filtered; the optimal memory block is a contiguous memory block with a capacity not less than the requirement and a remaining space closest to the requirement.

[0024] Step S2.4, Marking and Returning

[0025] Mark the selected memory block as used and return its starting address and access permissions;

[0026] Step S2.5: New block creation

[0027] If no matching free block is found, a new memory block is created with an initial capacity equal to the required capacity and a maximum capacity of twice the required capacity, and then added to the corresponding memory pool.

[0028] Step S3: By matching GPU memory blocks for rendering tasks, SIMD memory blocks for physics simulation or data processing tasks, and CPU memory blocks for other tasks, physical isolation between computationally intensive tasks and UI rendering tasks is achieved to avoid memory contention and out-of-bounds access.

[0029] Step S4: In the SIMD memory block, the core computational logic of the WebGL rendering pipeline, including vertex shading and physical simulation, is converted into a SIMD-compatible vector format and parallelized through the WebAssembly SIMD instruction set.

[0030] In step S4, accelerating the WebGL rendering pipeline in the SIMD memory block includes the following steps:

[0031] Step S4.1, Data Conversion

[0032] Convert vertex coordinates and transformation matrices to a SIMD-compatible vector format, ensuring memory alignment to adapt to the WebAssembly SIMD instruction set;

[0033] Step S4.2, Parallel computation

[0034] The WebAssembly SIMD instruction set is used to perform vertex transformation vector operations in batches, processing the coordinate transformation of no less than two vertices at a time.

[0035] Step S4.3, Result Optimization

[0036] Batch processing is performed on the transformed vertex data to remove duplicates, thereby reducing redundant rendering instructions;

[0037] Step S4.4, Format Adaptation

[0038] The calculation results of the SIMD memory block are converted into a WebGL-compatible floating-point array format and output to the rendering layer.

[0039] In step S4, during the vertex shading transformation process, the coordinates of four vertices are processed at once using the f32x4 instruction, and parallel transformation is achieved by combining matrix and vector operations.

[0040] In physical simulations, WebAssembly SIMD instructions are used to process density and pressure data in batches, significantly improving computational efficiency.

[0041] Step S5: Utilize the pre-allocated shared memory pool and atomic operation mechanism to construct a low-latency sandbox communication interface based on the shared memory pool, complete the low-latency data interaction between the WebAssembly module and JavaScript, and output the calculation results to drive rendering.

[0042] In step S5, the traditional high-latency postMessage communication method is abandoned. A 16MB SharedArrayBuffer shared memory pool is pre-allocated on the JavaScript side, and the memory region status is managed through an Int32Array view.

[0043] Atomics are used to achieve synchronization between threads. The sender updates the status flag after writing data, and the receiver listens for status changes and reads and processes the data, reducing the communication latency to less than 1ms.

[0044] In step S5, the low-latency data interaction between the WebAssembly module and JavaScript includes the following steps:

[0045] Step S5.1: Memory pool pre-allocation

[0046] Create a 16MB SharedArrayBuffer shared memory pool on the JavaScript side;

[0047] Step S5.2, Area Marking

[0048] Three memory region states are defined: Free, Used, and Rendering. View management is implemented using Int32Array.

[0049] Step S5.3, Synchronization Mechanism

[0050] Atomics.store / notify atomic operations are used to implement inter-thread communication synchronization to avoid data races;

[0051] Step S5.4, Memory Alignment

[0052] Ensure data is aligned to 16-byte boundaries to optimize SIMD instruction access efficiency;

[0053] Step S5.5, Sequence Guarantee

[0054] Memory barriers ensure the sequential consistency of data read and write operations.

[0055] A WebAssembly-based front-end rendering optimization system for implementing the above method includes:

[0056] Presentation layer: Responsible for rendering the user interface and handling interactive responses based on JavaScript and CSS;

[0057] Rendering layer: An integrated WebGL 3D graphics rendering engine responsible for handling model drawing, texture mapping, and frame rate control;

[0058] Computation layer: Deployed with WebAssembly modules, responsible for carrying out computationally intensive tasks such as physics simulation and vertex transformation;

[0059] Memory management module: Responsible for implementing multiple memory isolation mechanisms, realizing dynamic memory allocation, monitoring, and reclamation, including:

[0060] Memory type identification unit: Matches memory block types based on the computational characteristics and data types of the task;

[0061] Memory allocation unit: Executes dynamic memory allocation algorithms to complete memory block filtering, marking, and address return;

[0062] Memory monitoring unit: Detects memory usage status every 100ms and reclaims idle memory that has not been accessed for more than 5 minutes;

[0063] Memory protection unit: Prevents out-of-bounds access across memory blocks through the WebAssembly memory boundary checking mechanism;

[0064] SIMD optimization module: Responsible for providing end-to-end acceleration for data format conversion, parallel computing, and result adaptation, including:

[0065] Data conversion unit: Converts WebGL standard data formats into SIMD vector formats such as f32x4 / u8x16;

[0066] Parallel computing unit: calls the WebAssembly SIMD instruction set to perform parallel operations such as vertex transformation and fluid simulation;

[0067] Result optimization unit: performs batch processing to remove duplicates and calibrate the accuracy of parallel computing results;

[0068] Format Conversion Unit: Converts SIMD vector results into a floating-point array format compatible with the WebGL rendering engine;

[0069] Communication optimization module: responsible for building a low-latency sandbox communication interface based on a shared memory pool.

[0070] A WebAssembly-based front-end rendering optimization device is characterized by comprising a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to implement the above-described method steps.

[0071] A readable storage medium, characterized in that: a computer program is stored on the readable storage medium, and the computer program, when executed by a processor, implements the above-described method steps.

[0072] The beneficial effects of this invention are: the WebAssembly-based front-end rendering optimization method effectively solves the performance bottleneck problem of Web front-end applications through multi-memory isolation mechanism and SIMD accelerated rendering technology, and significantly improves WebGL rendering efficiency and application response speed. Attached Figure Description

[0073] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0074] Appendix Figure 1 This is a schematic diagram of the front-end rendering optimization system architecture based on WebAssembly of the present invention.

[0075] Appendix Figure 2 This is a schematic diagram of the front-end rendering optimization method based on WebAssembly according to the present invention.

[0076] Appendix Figure 3 This is a schematic diagram of the logic flow of the dynamic memory allocation algorithm of the present invention. Detailed Implementation

[0077] To enable those skilled in the art to better understand the technical solutions of this invention, the technical solutions in the embodiments of this invention will be clearly and completely described below in conjunction with the embodiments of this invention. Obviously, the described embodiments are merely some embodiments of this invention, and not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this invention.

[0078] This WebAssembly-based front-end rendering optimization method includes the following steps:

[0079] Step S1: Based on the multi-memory features of WebAssembly 3.0, create at least three independent linear memory blocks, which are defined as GPU memory block, SIMD memory block and CPU memory block respectively;

[0080] Among them, the GPU memory block is dedicated to storing WebGL texture and buffer data, the SIMD memory block is used to carry out vector operation-type computation tasks, and the CPU memory block is used to implement ordinary JavaScript operations;

[0081] Step S2: Receive the front-end task request, parse the task type and memory requirement parameters, and call the dynamic memory allocation algorithm to match the corresponding type of memory block;

[0082] The task types include rendering tasks, computationally intensive tasks, and general tasks;

[0083] The memory requirement parameters include capacity and access frequency;

[0084] In step S2, the dynamic memory allocation algorithm includes the following steps:

[0085] Step S2.1: Assess the task type and memory requirements.

[0086] Match GPU memory blocks for rendering tasks, SIMD memory blocks for physics simulation or data processing tasks, and CPU memory blocks for other tasks.

[0087] Step S2.2: Locate available memory blocks

[0088] Search within the corresponding type of memory pool to find free memory blocks, and record the address and capacity of the free memory blocks in a list;

[0089] Step S2.3: Select the optimal memory block

[0090] Based on the principle of combining minimum memory fragmentation and maximum access speed, the memory blocks in the list are filtered; the optimal memory block is a contiguous memory block with a capacity not less than the requirement and a remaining space closest to the requirement.

[0091] Step S2.4, Marking and Returning

[0092] Mark the selected memory block as used and return its starting address and access permissions;

[0093] Step S2.5: New block creation

[0094] If no matching free block is found, a new memory block is created with an initial capacity equal to the required capacity and a maximum capacity of twice the required capacity, and then added to the corresponding memory pool.

[0095] Step S3: By matching GPU memory blocks for rendering tasks, SIMD memory blocks for physics simulation or data processing tasks, and CPU memory blocks for other tasks, physical isolation between computationally intensive tasks and UI rendering tasks is achieved to avoid memory contention and out-of-bounds access.

[0096] Step S4: In the SIMD memory block, the core computational logic of the WebGL rendering pipeline, including vertex shading and physical simulation, is converted into a SIMD-compatible vector format and parallelized through the WebAssembly SIMD instruction set.

[0097] In step S4, accelerating the WebGL rendering pipeline in the SIMD memory block includes the following steps:

[0098] Step S4.1, Data Conversion

[0099] Convert vertex coordinates and transformation matrices to a SIMD-compatible vector format, ensuring memory alignment to adapt to the WebAssembly SIMD instruction set;

[0100] Step S4.2, Parallel computation

[0101] The WebAssembly SIMD instruction set is used to perform vertex transformation vector operations in batches, processing the coordinate transformation of no less than two vertices at a time.

[0102] Step S4.3, Result Optimization

[0103] Batch processing is performed on the transformed vertex data to remove duplicates, thereby reducing redundant rendering instructions;

[0104] Step S4.4, Format Adaptation

[0105] The calculation results of the SIMD memory block are converted into a WebGL-compatible floating-point array format and output to the rendering layer.

[0106] In step S4, during the vertex shading transformation process, the coordinates of four vertices are processed at once using the f32x4 instruction, and parallel transformation is achieved by combining matrix and vector operations.

[0107] In physical simulations, WebAssembly SIMD instructions are used to process density and pressure data in batches, significantly improving computational efficiency.

[0108] Step S5: Utilize the pre-allocated shared memory pool and atomic operation mechanism to construct a low-latency sandbox communication interface based on the shared memory pool, complete the low-latency data interaction between the WebAssembly module and JavaScript, and output the calculation results to drive rendering.

[0109] In step S5, the traditional high-latency postMessage communication method is abandoned. A 16MB SharedArrayBuffer shared memory pool is pre-allocated on the JavaScript side, and the memory region status is managed through an Int32Array view.

[0110] Atomics are used to achieve synchronization between threads. The sender updates the status flag after writing data, and the receiver listens for status changes and reads and processes the data, reducing the communication latency to less than 1ms.

[0111] In step S5, the low-latency data interaction between the WebAssembly module and JavaScript includes the following steps:

[0112] Step S5.1: Memory pool pre-allocation

[0113] Create a 16MB SharedArrayBuffer shared memory pool on the JavaScript side;

[0114] Step S5.2, Area Marking

[0115] Three memory region states are defined: Free, Used, and Rendering. View management is implemented using Int32Array.

[0116] Step S5.3, Synchronization Mechanism

[0117] Atomics.store / notify atomic operations are used to implement inter-thread communication synchronization to avoid data races;

[0118] Step S5.4, Memory Alignment

[0119] Ensure data is aligned to 16-byte boundaries to optimize SIMD instruction access efficiency;

[0120] Step S5.5, Sequence Guarantee

[0121] Memory barriers ensure the sequential consistency of data read and write operations.

[0122] This WebAssembly-based front-end rendering optimization system is used to implement the above methods, including:

[0123] Presentation layer: Responsible for rendering the user interface and handling interactive responses based on JavaScript and CSS;

[0124] Rendering layer: An integrated WebGL 3D graphics rendering engine responsible for handling model drawing, texture mapping, and frame rate control;

[0125] Computation layer: Deployed with WebAssembly modules, responsible for carrying out computationally intensive tasks such as physics simulation and vertex transformation;

[0126] Memory management module: Responsible for implementing multiple memory isolation mechanisms, realizing dynamic memory allocation, monitoring, and reclamation, including:

[0127] Memory type identification unit: Matches memory block types based on the computational characteristics and data types of the task;

[0128] Memory allocation unit: Executes dynamic memory allocation algorithms to complete memory block filtering, marking, and address return;

[0129] Memory monitoring unit: Detects memory usage status every 100ms and reclaims idle memory that has not been accessed for more than 5 minutes;

[0130] Memory protection unit: Prevents out-of-bounds access across memory blocks through the WebAssembly memory boundary checking mechanism;

[0131] SIMD optimization module: Responsible for providing end-to-end acceleration for data format conversion, parallel computing, and result adaptation, including:

[0132] Data conversion unit: Converts WebGL standard data formats into SIMD vector formats such as f32x4 / u8x16;

[0133] Parallel computing unit: calls the WebAssembly SIMD instruction set to perform parallel operations such as vertex transformation and fluid simulation;

[0134] Result optimization unit: performs batch processing to remove duplicates and calibrate the accuracy of parallel computing results;

[0135] Format Conversion Unit: Converts SIMD vector results into a floating-point array format compatible with the WebGL rendering engine;

[0136] Communication optimization module: responsible for building a low-latency sandbox communication interface based on a shared memory pool.

[0137] The WebAssembly-based front-end rendering optimization device includes a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to implement the above-described method steps.

[0138] The readable storage medium stores a computer program that, when executed by a processor, implements the above-described method steps.

[0139] Compared with existing technologies, this WebAssembly-based front-end rendering optimization method has the following characteristics:

[0140] (1) Through a multi-memory isolation mechanism, the memory leak rate was reduced from 25% to below 0.05%, which significantly improved application stability;

[0141] (2) Through SIMD acceleration technology, the speed of 3D model vertex transformation is increased by 12 times and the efficiency of fluid simulation calculation is increased by 8 times;

[0142] (3) By optimizing the sandbox communication interface, the interaction latency between WebAssembly and JavaScript was reduced from 15ms to less than 1ms;

[0143] (4) Through systematic architecture design, the overall memory usage is reduced by 43.8%, providing a near-native performance experience for complex Web applications.

[0144] The embodiments described above are merely one specific implementation of the present invention. Ordinary changes and substitutions made by those skilled in the art within the scope of the technical solution of the present invention should be included within the protection scope of the present invention.

Claims

1. A WebAssembly-based front-end rendering optimization method, characterized in that: The method comprises the following steps: Step S1, based on the WebAssembly 3.0 multi-memory feature, at least three independent linear memory blocks are created, which are defined as GPU memory block, SIMD memory block and CPU memory block respectively; Wherein, the GPU memory block is used to store WebGL texture and buffer data, the SIMD memory block is used to carry out vector operation type computing task, and the CPU memory block is used to realize JavaScript operation; Step S2, receiving a front-end task request, parsing the task type and memory requirement parameters, and calling a dynamic memory allocation algorithm to match the corresponding type of memory block; The task type includes rendering task, computing intensive task and general task; The memory requirement parameter includes capacity and access frequency; Step S3, matching GPU memory block for rendering task, matching SIMD memory block for physical simulation or data processing task, and matching CPU memory block for the rest of the tasks, so as to realize physical isolation of computing intensive task and UI rendering task, and to avoid memory competition and out-of-bound access; Step S4, in the SIMD memory block, the core computing logic of WebGL rendering pipeline, including vertex shading and physical simulation, is converted into SIMD compatible vector format, and parallel processing is implemented through WebAssembly SIMD instruction set; Step S5, using pre-allocated shared memory pool and atomic operation mechanism, a low-latency sandbox communication interface based on shared memory pool is constructed, low-latency data interaction between WebAssembly module and JavaScript is completed, and the calculation result is output to drive rendering.

2. The WebAssembly-based front-end rendering optimization method according to claim 1, wherein: In step S2, the dynamic memory allocation algorithm comprises the following steps: Step S2.1, evaluating the task type and memory requirement Matching GPU memory block for rendering task, matching SIMD memory block for physical simulation or data processing task, and matching CPU memory block for the rest of the tasks; Step S2.2, searching for available memory block In the corresponding type of memory pool, the idle memory block is found out, and the address and capacity of the idle memory block are recorded in the list; Step S2.3, selecting the optimal memory block Based on the principle of combining the smallest memory fragmentation and the highest access speed, the memory blocks in the list are screened; the optimal memory block is a continuous memory block whose capacity is not lower than the requirement and whose remaining space is closest to the requirement; Step S2.4, marking and returning The selected memory block is marked as used, and its starting address and access permission are returned; Step S2.5, new block creation If there is no available idle block, a new memory block is created according to the initial capacity equal to the requirement capacity and the maximum capacity equal to twice the requirement capacity, and is added to the corresponding memory pool.

3. The WebAssembly-based front-end rendering optimization method according to claim 1, wherein: In step S4, accelerating WebGL rendering pipeline in SIMD memory block comprises the following steps: Step S4.1, data conversion Convert vertex coordinates and transformation matrix to SIMD-compatible vector format, ensure memory alignment to adapt to WebAssembly SIMD instruction set; Step S4.2, parallel operation Batch execute vertex transformation vector operation through WebAssembly SIMD instruction set, process not less than 2 vertex coordinates at a time; Step S4.3, result optimization Implement batch deduplication on transformed vertex data to reduce redundant rendering instructions; Step S4.4, format adaptation Convert the calculation results of the SIMD memory block to a WebGL-compatible floating-point array format and output to the rendering layer.

4. The WebAssembly-based front-end rendering optimization method according to claim 3, characterized in that: In step S4, during vertex color transformation, 4 vertex coordinates are processed at a time through f32x4 instructions, and parallel transformation is realized through matrix-vector operation; In physical simulation, use WebAssembly SIMD instructions to batch process density and pressure data to improve computing efficiency.

5. The WebAssembly-based front-end rendering optimization method according to claim 1, characterized in that: In step S5, pre-allocate a 16MB SharedArrayBuffer shared memory pool on the JavaScript side, and manage the memory area state through an Int32Array view; Use Atomics atomic operations to realize thread synchronization, the sender updates the state flag after writing data, and the receiver reads and processes after listening to the state change, reducing communication delay to within 1ms.

6. The WebAssembly-based front-end rendering optimization method according to claim 1, characterized in that: In step S5, low-latency data interaction between the WebAssembly module and JavaScript includes the following steps: Step S5.1, memory pool pre-allocation Create a 16MB capacity SharedArrayBuffer shared memory pool on the JavaScript side; Step S5.2, area marking Define 3 memory area states, including Free, Used, and Rendering, and implement view management through Int32Array; Step S5.3, synchronization mechanism Use Atomics.store / notify atomic operations to realize thread communication synchronization to avoid data competition; Step S5.4, memory alignment Ensure data alignment at 16-byte boundaries to optimize SIMD instruction access efficiency; Step S5.5, sequence guarantee Ensure the sequence consistency of data read-write operations through memory barrier mechanism.

7. A WebAssembly-based front-end rendering optimization system, characterized in that: For implementing the method of any one of claims 1-6, comprising Presentation layer: responsible for implementing user interface rendering and interaction response based on JavaScript and CSS; Rendering layer: 3D graphics rendering engine integrated with WebGL, responsible for handling model drawing, texture mapping, and frame rate control; Compute Layer: Deployed with WebAssembly modules, responsible for carrying out computationally intensive tasks such as physics simulation, vertex transformation, etc. Memory Management Module: Responsible for implementing multi-memory isolation mechanisms, including dynamic memory allocation, monitoring and recycling, including: Memory Type Identification Unit: Matches memory block types based on the computational characteristics and data types of tasks; Memory Allocation Unit: Executes dynamic memory allocation algorithms, completes memory block screening, marking and address return; Memory Monitoring Unit: Detects memory usage status every 100ms, and recycles idle memory that has not been accessed for more than 5 minutes; Memory Protection Unit: Prevents cross-memory block out-of-bound access through WebAssembly memory boundary check mechanisms; SIMD Optimization Module: Responsible for providing full-process acceleration for data format conversion, parallel computing and result adaptation, including: Data Conversion Unit: Converts WebGL standard data formats to SIMD vector formats such as f32x4 / u8x16; Parallel Computing Unit: Calls WebAssembly SIMD instruction sets to perform parallel operations such as vertex transformation and fluid simulation; Result Optimization Unit: Implements batch processing deduplication and precision calibration on parallel computing results; Format Conversion Unit: Converts SIMD vector results into floating-point array formats compatible with WebGL rendering engines; Communication Optimization Module: Responsible for building low-latency sandbox communication interfaces based on shared memory pools.

8. A WebAssembly-based front-end rendering optimization device, characterized by: A memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to realize the method of any one of claims 1-6.

9. A readable storage medium characterized by: The computer program is stored on the readable storage medium, and the computer program is executed by the processor to realize the method of any one of claims 1-6.

Images