Wasm vs. JavaScript: Who wins at a million rows?

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

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:

👁 Image

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.

👁 Image

What results did you get? Do you see where Wasm gets faster than JavaScript?