Hello everyone, I am the front-end watermelon brother.
It seems like a good choice to use wasm as a graphical editor on the web.
Because graphics processing will have quite a lot of CPU-intensive calculations that cannot take advantage of WebGL GPU acceleration. For example, triangulate a complex Bezier curve, and perform Boolean operations on complex graphics on multiple graphics.
Graphics editor performance ceiling Figma uses wasm, should we use it too?
Performance improvements for Figma
When it comes to wasm and graphics editors, it's often mentioned that Figma loads three times faster . From this article in Figma:
《WebAssembly cut Figma’s load time by 3x》
After reading it, I have gained a lot.
Figma has been written in C++ from the beginning . Before wasm was supported by browsers, Figma used asm.js, the predecessor of wasm, to convert it into JavaScript so that it could run on the browser.
Wasm was implemented by browsers in 2017, and Figma naturally uses wasm without too much transformation cost .
At that time, Figma found that running wasm in Chrome had a bug and would fail. Firefox works fine. Edge and Safari will not be implemented for several months.
Therefore, the comparison data in this article is only for Firefox . It is the performance comparison between C++ compiled into js through asm.js and compiled into wasm, not the comparison between native js and wasm.
The first is that the loading speed has been increased by 3 times . Loading refers to the process of opening the page and finally displaying the drawing effect of the drawing.
For a large design drawing, it used to take about 12s to load, but now it only takes 4s. I have to say that this improvement is really good, and it greatly improves the user experience, especially when users often need to open some large drawings.
Here are the reasons for the wasm speed increase:
- Wasm's bytecode is parsed quickly and compiled directly, while JavaScript requires JIT to gradually determine whether to compile and optimize specific code during the running process;
- There are quite a lot of complex calculations on the CPU, and wasm is faster than js when added up;
- Another advantage is that the machine code compiled by wasm will be cached, and the second load does not need to be compiled directly. JavaScript is parsed as usual.
In fact, I am more concerned about the performance in Chrome, which has the highest market share, and the performance of the v8 engine it uses is better than that of Firefox. But the optimization of asm.js is more aimed at Firefox, and I don't know if it has any effect on v8.
Then comparing their volume changes, the volume reduction is not very obvious . Especially after compression.
Theoretically, wasm saves bytes instead of text, and the data will be more compact, and the volume is generally much smaller.
However, it should be noted that this is also the output of asm.js compilation, not natively written JS logic.
I'm actually quite curious why Figma chose to use C++ to develop?
I guess the team members may be more familiar with C++, and there should be many bigwigs from image processing software companies. What is the software written in? Mostly C++. Choosing C++ is the best choice for the team.
In addition, the server also needs to run the rendering logic of the editor (such as generating preview images). C++ has much higher performance than nodejs and consumes less resources. Nodejs doesn't even have a Canvas environment. An optional way is to generate SVG and then use some third-party tools to convert it into a picture.
Or you might need to use some C++ graphics library that JavaScript doesn't have. I found that some domestic graphics editor manufacturers seem to like to use Skia (Canvas 2D's underlying call library, open source), and wasm is quite suitable.
Do you use wasm?
As a graphics editor, if you want to optimize performance to the extreme, you still have to look at what the head company is doing and what the latest technology in the industry is.
For the ultimate performance, it is still necessary to use wasm. Of course, this must be used when the product is first made, just like Figma. C++ is required when recruiting.
If you already use JavaScript, and then want to use C++ refactoring to switch to wasm, I think it is unlikely. The input-output ratio is too low, and the team does not have this gene. You still want to make a genetic mutation.
If only part of the functions are made into wasm, I can't say, I don't know if there will be communication problems, it may be a bit messy.
It’s just a simple graphics editor with low performance requirements, as long as it can be used, such as whiteboard tools and forms, there is no need to use wasm, and even WebGL can be used, and Canvas 2D can be used directly.
The last point that needs to be emphasized is that the reason why Figma is powerful lies in the hardware acceleration of WebGL , and wasm is more of an icing on the cake. You have to make sure where the bottleneck of your graphics editor is.
end
I am the front-end watermelon brother, welcome to follow me and learn more front-end graphics knowledge.