未加星标

How to get a performance boost using WebAssembly

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

How to get a performance boost using WebAssembly

New year has just started and with it new resolutions to accomplish. How about learning how to use WebAssembly and get a performance boost?

This article continues a serie of articles that we are writing about performance, go and check “ How to get a performance boost using Node.js native addons ” and “ A 1300% performance gain with Ruby time parsing optimization! ” :v:

I want to demonstrate you today how to create and use WebAssembly modules and later on consume them from the browser like they were js modules. In order to do so I will take the Fibonacci algorithm, which we already discussed here and we will compare its performance running it as a normal javascript function vs a WebAssembly module.

Implementations

We are going to cover the same 3 techniques we already covered in the previous article:

Loop Recursion Memoization

The following snippets cover those implementations in Javascript and C.

Javascript

C

I will not explain how those functions work since this post is not about that, if you want to know more about it check this or this .

A bit ofhistory WebAssembly was born with the premise of creating a safe, portable and fast to load and execute format suitable for the web. WebAssembly its not a programing language, its a compilation target which has a text and binary specs. That means that other low level languages like C/C++, Rust, Swift, etc. can compile with a WebAssembly output. It shares the stack with javascript, thats why is different from things like java-applets and its design its a community effort with all browser vendors on it. Emscripten its an LLVM-to-JavaScript Compiler. That means that languages like C/C++ or any language that speaks LLVM can be compile it to JavaScript. It provides a set of Apis to port your code to the web, the project has been running for years and was typically used to port games to the browser. Emscripten achieves its performance outputting asm.js but recently it has integrated successfully a WebAssembly compilation target. ASM.js , a low-level optimized subset of Javascript, linear memory access via TypedArrays and type annotations. Again its not a new programing language, any browser which no asm.js support will still work when running asm.js, it will just be not get the performance benefits.

As 10 01 2017 the current status is that works in Chrome Canary and Firefox under a feature flag and is under development in Safari . And from the V8 side, it just got enabled by default :rocket:

This video from the Chrome Dev Summit 2016 shares the current state of JavaScript and script tooling in V8, and discusses the future with WebAssembly.

Building + Loadingmodule

Lets take a look at how we transform our C program into wasm . To do so, I decided to go with the Standalone output which instead of returning a combination of.js and WebAssembly, will return just WebAssembly code without the system libraries included.

This approach is based on Emscripten’s side module concept. A side module makes sense here, since it is a form of dynamic library, and does not link in system libraries automatically, it is a self-contained compilation output.

$ emcc fibonacci.c -Os -s WASM=1 -s SIDE_MODULE=1 -o fibonacci.wasm

Once we have the binary we just need to load it in the browser, to do so, WebAssembly js api exposes a top level object WebAssembly which contains the methods we need to compile and instantiate the module. Here is a simple method based on Alon Zakai gist which works as generic loader:

Cool thing here is that everything happens asynchronously. First we fetch the file content and convert it into an ArrayBuffer which contains the raw binary data in a fixed length, you can’t manipulate it directly and that’s why next we pass it to WebAssembly.compile which returns a WebAssembly.Module which you can finally instantiate with WebAssembly.Instance .

Take a look into the Binary-encoding format that WebAssembly uses if you want to go deeper into that topic.

Benchmarking

Now is time to see how we can use the module and test its performance against the javascript implementations. We will use 4 0 as input to be consistent with what we did in our previous article:

Results (You can check a live demo here )

JS loop x 8,605,838 ops/sec ±1.17% (55 runs sampled) JS recursive x 0.65 ops/sec ±1.09% (6 runs sampled) JS memoization x 407,714 ops/sec ±0.95% (59 runs sampled) Native loop x 11,166,298 ops/sec ±1.18% (54 runs sampled) Native recursive x 2.20 ops/sec ±1.58% (10 runs sampled) Native memoization x 30,886,062 ops/sec ±1.64% (56 runs sampled)

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaJavaScriptC++ChromeRustSwiftRubyNode.jsLVDU
分页:12
转载请注明
本文标题:How to get a performance boost using WebAssembly
本站链接:http://www.codesec.net/view/524052.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(46)