Webassembly concept

WebAssembly is a new type of code that runs in modern Web browsers and provides new performance features and effects. It is designed not to write code by hand but to provide an efficient compilation target for low-level source languages such as C, C++, and Rust. What are the compilation goals? When we write TypeScript, the resulting JavaScript files that Webpack end up packing are the compile goal. That is, you don’t need to write WebAssembly code directly, you can compile it from another high-level language.

What are the advantages of WebAssembly

  1. Fast and efficient

WebAssembly binaries are much smaller than JavaScript text files and thus faster to download. It also parses and executes faster. In contrast to JavaScript, JavaScript is a dynamically typed language that does not require variable types to be defined or compiled in advance. This makes coding easy and quick, but it also means a lot of extra work for the JavaScript engine. When running JavaScript code, a JavaScript engine must parse, compile, and optimize the code. WebAssembly itself is provided in binary form, parsing is faster, it is statically typed, its engine requires no type inference, no garbage collection, and so on at compile time. WebAssembly code can run at near-native speed on different platforms.

Js and WebAssembly execution process comparison:WebAssembly executes fast for more detailed reasonsLook here

  1. Portable and flexible

With WebAssembly, with just one compile, your application will run in every modern browser. Using “native” modules is less complicated, and if developers can share the same scripting or low-level language code base across different platforms (for example, in Web and desktop applications), it can save development time and reduce maintenance costs. WebAssembly gives you a way to do this without compromising the performance of these platforms.

  1. security

WebAssembly provides you with a lightweight sandbox by default, and like other web code, it follows the same origin and authorization policies of the browser.

Objective investigation

  1. The advantage of WebP images lies in its better image data compression algorithm, which brings smaller image volume under the premise of image quality that can not be recognized by the naked eye. But in terms of support, as shown in the figure:

Ios is supported only if the version is 14 or above. Android is supported mostly. So when we want to use it, we have to downgrade it. Is there a way to render webP images without webP support? Video uploading & Video editing

  • Cover is slow to come out, and non-standard video does not capture pictures
  • Slow video upload (video compression)
  • Non-video files or undecoded files need to be uploaded to the background before being known (video transcoding/decoding)
  1. Cloud native WebAssembly development and application

conclusion

Support webP image rendering

WebAssembly can support webP format picture rendering, and the implementation scheme is relatively mature.

  1. Wechat official applet supports image rendering in WebP format when the base library version is older than 2.9.0. But it’s not officially WebAssembly-based.

While WebAssembly’s decoding performance is considerably faster than JavaScript’s, it lags far behind client-side decoding performance when it comes to webP with very large resolutions (such as 1920 x 1080). After a comprehensive comparison of the performance and compatibility of various solutions, the solution based on the iOS client custom protocol Webphttps is adopted, and the general steps are as follows:

  • First of all, wechat applet base library judges that the developer uses webP format in image component, and adds webP header in image SRC, such as webphttps://example.png.
  • The client then hijacks the WebPHTTps request through the NSURLProtocol and downloads the corresponding webP data for decoding.
  • Finally, the decoded image data is returned to the browser for rendering and display.

The webAssembly-based implementation principle can be found here

  1. Computer open small program, temporarily does not support webP format picture rendering (computer open, its network environment is relatively better. Or push client support)
  2. For H5 pages, there are mature webAssembly-based image rendering schemes that support WebP format, refer to here

Upload video

Mainly with FFmpeg WebAssembly in the front end to achieve video frame cutting/transcoding/compression.

  1. Video clips have been converted to a wASM ready-to-use library: github.com/jordiwang/w…

As in the2.3 GBig video, intercept no5453Frames, you just need to273ms:But there’s a problem:

  • The granularity of “frames” defined by the library is not fine enough. There will be a large distance between two “frames”, and some video frames cannot be captured. (Manually adjust the frame capture rules and repackage a WASM version of FFMPEG)
  • This package only implements frame capture
  1. You can also use ImageMagick to convert to WASM and then convert the image format
  2. Can be based on FFmpeg image synthesis video, audio video synthesis, video text editing and so on

Here are some points to explore:

  1. Frame capture optimization (combine tensorflow to capture multiple images for user selection)
  2. Handle the memory usage problem of file data
  3. Local media elements (images, audio, text, etc.) compose video and edit video
  4. Video/picture transcoding

Cloud native WebAssembly development and application

WebAssembly is a lightweight, fast, secure and multilingual “container” of functions. WebAssembly brings the cloud-native programming model pioneered by Kubernetes and Docker to the realm of edge computing and microservices from large data centers.

Wasm can be used as a generic runtime for cloud native applications. WebAssembly Runtime achieves higher performance with lower resource consumption than docker-like application containers. Common use cases for WebAssembly in the cloud include the following:

  • Runtime for Serverless Function-as-a-Service (FaaS), github.com/second-stat…
  • To embed the user defined function SaaS application or database, reactor. Secondstate. Info/en/docs /
  • Runtime for service Mesh Sidecar
  • WasmEdge WebAssembly Runtime supports calling C/C++ or Rust functions from JavaScript in WebAssembly Runtime to take full advantage of WebAssembly computing efficiency.

Learn more about this: www.zhihu.com/column/c_13…

WebAssembly practice

In fact, the basic will not write their own, but some low-level language good library compiled with or use low-level language to compile the corresponding library, to generate the corresponding.wasmfileBecause I am mainly research nature this time, so mainly want to see what low-level language libraries, can be better used in. Instead of compiling from scratch, I went straight to the compiled library to test it. If you want to try it yourself, here’s how to do it:

  • Quickapp.vivo.com.cn/webassembly…
  • Cloud.tencent.com/developer/a…

More WebAssembly applications

  • www.zhihu.com/question/26…
  • zhuanlan.zhihu.com/p/339952783

Chrome’s latest update to WebAssembly

Chrome default opened 91 WebAssembly SIMD (www.chromestatus.com/feature/653… SIMD significantly improves performance, with a noticeable difference between using SIMD and not using SIMD (both can be tested directly), with higher frame rates and smoother graphics.

See: zhuanlan.zhihu.com/p/375356675

Reference Document links

  • Developer.mozilla.org/zh-CN/docs/…
  • Webassembly basics and applications
  • www.infoq.cn/article/lwl…
  • zhuanlan.zhihu.com/p/42718990
  • zhuanlan.zhihu.com/p/411017703
  • zhuanlan.zhihu.com/p/375356675

The last

  • Read more about this article
  • Welcome to add my wechat (Winty230), pull you into the technology group, long-term exchange learning…
  • Welcome to pay attention to “front-end Q”, seriously learn front-end, do a professional technical people…