By now it’s pretty clear that JavaScript needs WebAssembly (Wasm) to perform heavy computational tasks. In the past few weeks we’ve covered the basics, did a side-by-side image processing comparison, and saw the benefits of using Wasm with web workers.
In this next tutorial, let’s apply the same principle to real-world data using large CSV files. Instead of images or web worker computations, we’ll fetch and count millions of rows directly in the browser to compare JavaScript versus Wasm performance side by side. This will show how Wasm can make even seemingly simple tasks like counting rows lightning fast.
We’ve been switching between Rust and C (Rust for the image processing comparison and C for web workers). Though they both compile to a highly efficient Wasm with little to no performance differences for this project, we’re going to use Rust today. Rust offers safer, faster development and better JavaScript interoperability.
Before getting started, please make sure you have the following:
Node.js and npm: download here
Python 3 (we’ll be generating our large CSV using Python): download here
Rust and cargo
Local server
View the code on Gist.
Let’s build our CSV processing app with Wasm, Rust, JavaScript, and Python
First, we’re going to build our project structure. Other files and folders will be built automatically through the terminal, but here’s our starting point. Please build this structure in your code editor:
Initialize Rust
Next, we’re going to open a new terminal in your project. Open thecsv_processor/folder with the commandcd csv_processor/. Once in the file, you can initialize Rust with the command cargo init --lib.
This will createCargo.toml and src/lib.rs. Cargo.tomlis the Rust equivalent to thepackage.json. lib.rs is similar to a main JavaScript module file. Think of it like the Rust equivalent toindex.js.
Add Rust/ Wasm code
csv_processor/src/lib.rs
Our Rust application logic lives in this file. This code will power Wasm’s browser functionality. The top line of the file includeswasm_bindgren. wasm_bindgrenis a Rust library that makes it easy to call Rust functions from JavaScript and vice versa when compiling to WebAssembly. It handles type conversion and glue code so your Wasm module can interact seamlessly with the browser or JS code.
csv_processor/Cargo.toml
Cargo.tomldefines the project name, version, and dependencies, and tells Rust to build the library as a WebAssembly-compatible (cdylib) crate that useswasm_bindgenfor JavaScript interoperability.
Build Wasm package
Once those files are built, we’re ready to build the Wasm package. Your terminal should already be pointed to the csv_processorfolder. If not please cd csv_processor. Once there, the following command will compile your Rust code to Wasm binary.
Upon successful execution, you will see apkg/folder containing the Wasm files your browser needs to run your Rust logic.
Adding JavaScript code
index.jsis the main JavaScript file. It fetches the CSV file, initializes the WebAssembly module, counts the rows using both the Rust/Wasm function (count_rows) and pure JavaScript. It also measures how long each takes, and displays the fetch time, JS processing time, and Wasm processing time on the page when the user clicks the “Run Performance Test” button.
Build the HTML code
index.html is our main HTML page. It provides the structure and styling and includes a button to run the performance test. The page also has a paragraph to display the results. It loads index.js, which initializes the Wasm module, fetches the CSV, and compares row-counting performance.
Generate CSV using Python
generate_csv.pyincludes the simple script for building the CSV file. I chose this rather than a file download so you could change the number of rows (NUM_ROWS) to see performance differences between Wasm and JavaScript based on file size. For a file size of about 500,000 (500_000) JavaScript performs slightly faster which is similar to what we found in the web workers tutorial (smaller size = faster JavaScript). Once we get into file sizes over 2,000,000 (2_000_000), Wasm will be and stay faster.
Before building the CSV, make sure your terminal is pointed to the main project file. If you’re still incsv_processor/(which is the last place we performed terminal actions in) you can get back to the main folder with the commandcd ...
Build the CSV with the code python3 generate_csv.py. Upon successful execution, you will see a file called big.csvappear in your main project file.
Run the server and see Wasm vs JavaScript results!
Run the server with the commandserve .. You should see a response that says “Serving” with a local host address (localhost:3000). Navigate to localhost:3000in your browser and you should see the page we created. It will look like this:
Click the “Run Performance Test” button and you’ll see the speed comparison shortly. For the image below, I built my CSV with 2,000,000 rows and these are the results I had.
What results did you get? Do you see where Wasm gets faster than JavaScript?
The post Wasm vs. JavaScript: Who wins at a million rows? appeared first on The New Stack.
Log in
