GitLab Create Code Review Group, 9 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Comparison of highlighting via WASM vs using pure javascript

Description

In order to try to figure out whether we can replace our syntax highlighting library with a faster WASM version, I decided to benchmark different solutions out there.

I'm using Highlight.js and comparing it to Chroma (go) and Syntect (rust)

The code can be found here:
https://gitlab.com/shekharpatnaik/wasm-syntax-highlighting-comparison

A

Hi everyone, um so in last week's performance discussion that we had we discussed about highlighting Solutions and one of the things we discussed is whether vasam can help us here. So what I thought is I'll go ahead and and POC um some awesome Solutions um that that potentially could help us do syntax, highlighting and see whether those help in performance, so I'm, comparing this to the Baseline of using highlight DS so highlight yes, is what we use today, I believe, which is doing the syntax highlighting um I compared it to using two libraries.

A

So one is chroma, which is a syntax highlighter in go and again. This is a pretty fast library that does syntax lighting and converts it to HTML or unsight X Etc in go and I also compared it to syntax, which is an again a fast syntax Library written in Rust.

A

So the idea was to compile both of these things into basm, move it to the client side and see whether those will lead to performance improvements uh so again, just uh showing you what I've done for the boc is I'm running a simple web server uh I've got to build targets which is for go and for rust, I'm building, both so for go I'm using uh standard go build instead of tiny go and I'm I'm, using the architecture vasim to compile to JavaScript awesome instead of Rossi and then I'm, also using Basin back uh to be able to uh do the same thing for rust right and if you see the go code and the rust code, um uh it's a little Go chords, really simple!

A

All I'm doing is really exposing. This highlight function to JavaScript, which basically calls that chroma Library, which I mentioned and it all it does it takes this input and and converts it to um HTML and syntax highlights it same for us so for rust, I'm using that syntax Library, which what it's doing is it's um again.

A

It's just um taking a string, syntax highlighting it and exposing that highlight function um uh to the to the browser, right um and and so, and of course, I'm comparing it to my Baseline, which is basically um hide IDs, which is using uh highlight, um which is just you know, using standard highlight the solution, which is this one here, which basically is just using hlds I do to highlight the code. Luckily, all these functions synchronous, so it is easy to sort of compare performance.

A

So all it's doing is calculating the start time and end time, and if you see the code which I'll share, a link to all of them are very, very similar. Okay, so showing you the results now um so I've, um you could compile it with make very easily and run this on your own machine. If you wanted to so I'm going to go to first solution, which is the oops, let me just run the.

A

Solution first.

A

It's compiling all the options, so I go ahead and run the server I'll show you the go highlight solution first, so this is UPS, not the Highlight solution. Back we're back.

A

um Let me show you playing JavaScript here, and so, if you see, if I do inspector on the console, I'm writing how long it takes so, this roughly took 210 milliseconds. It takes roughly 200 milliseconds um in in plain JavaScript using highlight yes, if I go to the same solution and I go to go highlight this is The. Go Solution um you'll see it's much much slower, so it uses um uh it uses the go Library which is chroma, but it is under vacuum.

A

Compilation taking almost 5000 milliseconds or 4 800 milliseconds on average um you'll also see the source here, so it's actually using the hl.wassim file that I was compiling using go uh and so that that's what it's using for its processing.

A

um Now, if you go to the rust solution as well, you could see the rust solution also takes around 2, 800, milliseconds or so.

A

It seems to be taking longer here. I have one second um I think I made a mistake: I was trying to clean up the code here. Just a second.

A

Apologies for this.

A

A

And hopefully this time will work, you see the gallography 2900 milliseconds or so, and this is using that syntax library from rust, uh so the door rust is faster than go. It seems um it's still not fast enough as pure JavaScript. Thank you.