{"id":361932,"date":"2024-05-21T01:24:00","date_gmt":"2024-05-21T01:24:00","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=361932"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=361932","title":{"rendered":"<span>\u041e JavaScript \u0438 WebAssembly<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/ma\/po\/lv\/mapolvqq4uunxfqoaviv3g9km9y.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/ma\/po\/lv\/mapolvqq4uunxfqoaviv3g9km9y.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  Hello world!<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u043d\u044f\u0445 \u044f \u0431\u0430\u043b\u043e\u0432\u0430\u043b\u0441\u044f \u0441 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/WebAssembly\" rel=\"nofollow noopener noreferrer\">WebAssembly<\/a> \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438 \u0445\u043e\u0447\u0443 \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435.<\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 JS\/<a href=\"https:\/\/nodejs.org\/en\" rel=\"nofollow noopener noreferrer\">Node.js<\/a> \u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e WASM \u0438 <a href=\"https:\/\/www.rust-lang.org\/\" rel=\"nofollow noopener noreferrer\">Rust<\/a>.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li>Chrome 119.0.6045.199<\/li>\n<li>Node.js 20.9.0<\/li>\n<li>Rust 1.74.0<\/li>\n<li>VSCode 1.80.2<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Node.js-\u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"># \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f mkdir js-wasm cd js-wasm  # \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0441 JS-\u043a\u043e\u0434\u043e\u043c mkdir js-code cd js-code  # \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Node.js-\u043f\u0440\u043e\u0435\u043a\u0442 # \u044d\u0442\u043e \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f npm init -yp<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>index.js<\/code>. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u0430\u043a\u0443\u044e-\u043d\u0438\u0431\u0443\u0434\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function longRunningFunction(n) {   let result = 0    for (let i = 0; i &lt; n; i++) {     result += i   }    return result }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0437\u043c\u0435\u0440\u0438\u043c \u0432\u0440\u0435\u043c\u044f \u0435\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c <code>100_000_000<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function main() {   const startJS = performance.now()   const resultJS = longRunningFunction(100_000_000)   console.log('[JS] \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:', resultJS)   const timeJS = performance.now() - startJS   console.log('[JS] \u0412\u0440\u0435\u043c\u044f:', timeJS) } main()<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>js-code<\/code>, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>node index.js<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/6n\/eb\/u0\/6nebu0ynthlp0f4qiaiodtslnki.png\" data-src=\"https:\/\/habrastorage.org\/webt\/6n\/eb\/u0\/6nebu0ynthlp0f4qiaiodtslnki.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f VSCode <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ritwickdey.LiveServer\" rel=\"nofollow noopener noreferrer\">Live Server<\/a>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ss\/pr\/a1\/sspra14vr0fz_4jzqddpmiivkns.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ss\/pr\/a1\/sspra14vr0fz_4jzqddpmiivkns.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u0440\u0435\u0434\u043d\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 50 \u043c\u0441.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0430\u0441\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435? \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u044b \u043c\u043d\u043e\u0433\u043e \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 WebAssembly? \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>longRunningFunction()<\/code> \u043d\u0430 WASM?<\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0438\u0434\u0435\u044f, \u043d\u043e \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u042f \u0437\u043d\u0430\u044e 2 \u0441\u043f\u043e\u0441\u043e\u0431\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430 WAT.<\/li>\n<li>\u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u044f\u0437\u044b\u043a\u043e\u0432, \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0432 WASM.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043a\u0430\u043a <a href=\"https:\/\/www.assemblyscript.org\/\" rel=\"nofollow noopener noreferrer\">AssemblyScript<\/a>, \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 <a href=\"https:\/\/www.typescriptlang.org\/\" rel=\"nofollow noopener noreferrer\">TypeScript<\/a>-\u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 WASM, \u043d\u043e \u044f \u0435\u0435 \u043d\u0435 \u0442\u0435\u0441\u0442\u0438\u043b.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 WAT.<\/p>\n<p>  <\/p>\n<p>WAT \u2014 \u044d\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 WebAssembly (\u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 WebAssembly. \u041f\u0430\u0440\u043e\u0447\u043a\u0430 \u0441\u0441\u044b\u043b\u043e\u043a \u0434\u043b\u044f \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0443:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/WebAssembly\/Understanding_the_text_format\" rel=\"nofollow noopener noreferrer\">MDN<\/a><\/li>\n<li><a href=\"https:\/\/webassembly.github.io\/spec\/core\/text\/index.html\" rel=\"nofollow noopener noreferrer\">\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/EmNudge\/watlings\" rel=\"nofollow noopener noreferrer\">Watlings<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/eliben\/wasm-wat-samples\" rel=\"nofollow noopener noreferrer\">WebAssembly WAT samples<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 WAT \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f VSCode:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=NateLevin.wati\" rel=\"nofollow noopener noreferrer\">WATI<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dtsvet.vscode-wasm\" rel=\"nofollow noopener noreferrer\">WebAssembly<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>js-code<\/code> \u0444\u0430\u0439\u043b <code>fn.wat<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">(module   (func (export \"long_running_function\") (param $n i64) (result i64)     (local $i i64)     (local $result i64)      (local.set $i (i64.const 0))     (local.set $result (i64.const 0))      (block $my_block       (loop $my_loop         (i64.ge_u (local.get $i) (local.get $n))         (br_if $my_block)          (local.set $result (i64.add (local.get $result) (local.get $i)))         (local.set $i (i64.add (local.get $i) (i64.const 1)))          (br $my_loop)       )     )      (local.get $result)   ) )<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u0448\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0430 WAT (\u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0430\u0438\u0432\u043d\u0430\u044f, \u043a\u0430\u043a \u043c\u044b \u0432\u0441\u043a\u043e\u0440\u0435 \u0443\u0432\u0438\u0434\u0438\u043c).<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f WAT \u0432 WASM \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <code>wat2wasm<\/code> \u0438\u0437 <a href=\"https:\/\/github.com\/WebAssembly\/wabt\" rel=\"nofollow noopener noreferrer\">WABT: The WebAssembly Binary Toolkit<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>js-code<\/code>, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>wat2wasm fn.wat<\/code>. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0430\u0439\u043b\u0430 <code>fn.wasm<\/code>. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u0432 <code>index.js<\/code> \u0438 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>main()<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function main() {   \/\/ ...    let startWasm = performance.now()   \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/WebAssembly\/JavaScript_interface\/instantiateStreaming_static   WebAssembly.instantiateStreaming(     fetch('http:\/\/localhost:3000\/fn.wasm'),   ).then((obj) => {     \/\/ `export \"long_running_function\"` \u0432 WAT     const { long_running_function } = obj.instance.exports     \/\/ \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 BigInt     const resultWasm = long_running_function(BigInt(100_000_000))     console.log('[WASM] \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:', Number(resultWasm))     const timeWasm = performance.now() - startWasm     console.log('[WASM] \u0412\u0440\u0435\u043c\u044f:', timeWasm)     \/\/ \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0447\u0442\u043e WASM \u0431\u0443\u0434\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435     console.log('\u0420\u0430\u0437\u043d\u0438\u0446\u0430:', (timeJS \/ timeWasm).toFixed(2))   }) } main()<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b WASM \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c (\u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043e\u043d\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b). \u0414\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043f\u0430\u043a\u0435\u0442 NPM <a href=\"https:\/\/www.npmjs.com\/package\/serve\" rel=\"nofollow noopener noreferrer\">serve<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">npm i -g serve # \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 `js-code` serve -C # -C \u0438\u043b\u0438 --cors \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 CORS # Live Server \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 5000, \u0430 serve - \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 3000: \u0440\u0430\u0437\u043d\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 (origins)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>node index.js<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/aq\/36\/df\/aq36dfzxhwl946-tm4ohlfhi1hk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/aq\/36\/df\/aq36dfzxhwl946-tm4ohlfhi1hk.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>Chrome:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ow\/qh\/-o\/owqh-onr5drfcp1uburzldun2zo.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ow\/qh\/-o\/owqh-onr5drfcp1uburzldun2zo.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412 Chrome WASM \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u0432 2 \u0440\u0430\u0437\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 JS, \u0430 \u0432 Node.js \u2014 \u0432 3 \u0440\u0430\u0437\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function calculateAverageTime(fn, n) {   let totalTime = 0    for (let i = 0; i &lt; n; i++) {     const start = performance.now()     fn()     const time = performance.now() - start     totalTime += time   }    const averageTime = totalTime \/ n   return averageTime }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0434\u043e\u043f\u0438\u0448\u0435\u043c <code>main()<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function main() {   \/\/ ...    WebAssembly.instantiateStreaming(fetch('http:\/\/localhost:3000\/fn.wasm')).then(     (obj) => {       \/\/ ...        const averageTimeJS = calculateAverageTime(function () {         longRunningFunction(100_000_000)       }, 100)       const averageTimeWasm = calculateAverageTime(function () {         long_running_function(BigInt(100_000_000))       }, 100)       console.log('[JS] \u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f:', averageTimeJS)       console.log('[WASM] \u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f:', averageTimeWasm)       console.log('\u0420\u0430\u0437\u043d\u0438\u0446\u0430:', (averageTimeJS \/ averageTimeWasm).toFixed(2))     },   ) } main()<\/code><\/pre>\n<p>  <\/p>\n<p>Node.js:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/kp\/4b\/qe\/kp4bqeg_oazb1bqejuqlnrlngp0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/kp\/4b\/qe\/kp4bqeg_oazb1bqejuqlnrlngp0.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>Chrome:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/r9\/bn\/h9\/r9bnh9pgz3j0m2ltsyotjaz5kkk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/r9\/bn\/h9\/r9bnh9pgz3j0m2ltsyotjaz5kkk.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412 Chrome WASM \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0442\u0440\u0435\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 JS, \u0430 \u0432 Node.js \u2014 \u0432 2 \u0440\u0430\u0437\u0430 \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0421\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435 \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430 Rust.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u043c\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>js-wasm<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Rust \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e cargo:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"># rust-code - \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\/\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 # --lib - \u0444\u043b\u0430\u0433 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u0447\u043d\u043e\u0433\u043e \u043a\u0440\u0435\u0439\u0442\u0430\/\u043f\u0440\u043e\u0435\u043a\u0442\u0430 cargo new rust-code --lib<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Rust \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f VSCode:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=swellaby.rust-pack\" rel=\"nofollow noopener noreferrer\">Rust Extension Pack<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 Rust \u0432 WASM \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f 2 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>CLI <a href=\"https:\/\/github.com\/rustwasm\/wasm-pack\" rel=\"nofollow noopener noreferrer\">wasm-pack<\/a> (\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u2014 <code>curl https:\/\/rustwasm.github.io\/wasm-pack\/installer\/init.sh -sSf | sh<\/code>)<\/li>\n<li>\u043a\u0440\u0435\u0439\u0442 <a href=\"https:\/\/github.com\/rustwasm\/wasm-bindgen\" rel=\"nofollow noopener noreferrer\">wasm-bindgen<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <code>Cargo.toml<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">[dependencies] wasm-bindgen = \"0.2\"  [lib] crate-type = [\"cdylib\", \"rlib\"]<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0444\u0430\u0439\u043b\u0435 <code>src\/lib.rs<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"rust\">use wasm_bindgen::prelude::*;  #[wasm_bindgen] pub fn long_running_function(n: u64) -> u64 {     let mut result = 0;      for i in 0..n {         result += i;     }      result }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0435. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>src\/main.rs<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"rust\">use std::time::Instant;  use rust_code::long_running_function;  fn main() {     let start = Instant::now();     let result = long_running_function(100_000_000);     println!(\"[RUST] \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: {result}\");     let time = start.elapsed();     println!(\"[RUST] \u0412\u0440\u0435\u043c\u044f: {:?}\", time); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>rust-code<\/code>, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>cargo run<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/wm\/s2\/rt\/wms2rtuibhfvqxp1lcouv_lft1c.png\" data-src=\"https:\/\/habrastorage.org\/webt\/wm\/s2\/rt\/wms2rtuibhfvqxp1lcouv_lft1c.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 300 \u043c\u0441. \u041d\u0435 \u0441\u043f\u0435\u0448\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434\u044b \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>cargo build --release<\/code>. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0430\u0439\u043b <code>target\/release\/rust-code.exe<\/code> (<code>.exe<\/code> \u043d\u0430 Windows, \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u041e\u0421 \u0443 \u0444\u0430\u0439\u043b\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f). \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/8o\/yt\/b-\/8oytb-8fi1lenrrlfv0b_ute-r4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/8o\/yt\/b-\/8oytb-8fi1lenrrlfv0b_ute-r4.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 0,3 \u043c\u0441. \u041d\u0435 \u0441\u043f\u0435\u0448\u0438\u043c \u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c Rust \u0432 WASM \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>wasm-pack build --target web<\/code>. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>pkg<\/code> \u0441 \u043a\u0443\u0447\u0435\u0439 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 (\u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 NPM), \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <code>rust_code_bg.wasm<\/code>. \u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <code>js-code<\/code> \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0432 <code>fetch()<\/code> \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>main()<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">WebAssembly.instantiateStreaming(     fetch('http:\/\/localhost:3000\/rust_code_bg.wasm'),   )<\/code><\/pre>\n<p>  <\/p>\n<p>Node.js:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/jk\/jx\/ml\/jkjxmlkgfqbgvw29rs79gezxslo.png\" data-src=\"https:\/\/habrastorage.org\/webt\/jk\/jx\/ml\/jkjxmlkgfqbgvw29rs79gezxslo.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>Chrome:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/pc\/qr\/gs\/pcqrgst8ne4ccz66h3v9wervblm.png\" data-src=\"https:\/\/habrastorage.org\/webt\/pc\/qr\/gs\/pcqrgst8ne4ccz66h3v9wervblm.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412 Node.js WASM \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 2 \u0440\u0430\u0437\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 JS \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u043e \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 44 000 \u0440\u0430\u0437 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0432 Chrome \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 WASM \u0431\u044b\u0441\u0442\u0440\u0435\u0435 JS \u043f\u043e\u0447\u0442\u0438 \u0432 3 \u0440\u0430\u0437\u0430, \u0430 \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432 43 000 \u0440\u0430\u0437 \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0418\u043d\u043e\u0433\u0434\u0430 \u0432 Chrome \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0431\u0430\u0432\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/oo\/lw\/e7\/oolwe7litfzr3oqjyldn-kx3wqi.png\" data-src=\"https:\/\/habrastorage.org\/webt\/oo\/lw\/e7\/oolwe7litfzr3oqjyldn-kx3wqi.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>WASM \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 JS! \u0428\u0443\u0442\u043a\u0430, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 0, \u043d\u043e, \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, 0 \u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442.<\/p>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 \u043d\u0430\u0448\u0435\u0439 &#171;\u0433\u043e\u0440\u044f\u0447\u0435\u0439&#187; \u0444\u0443\u043d\u043a\u0446\u0438\u0438 WASM \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 JS \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e (\u0438\u043b\u0438 \u044f \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u044e \u043d\u0435 \u0442\u0430\u043a).<\/p>\n<p>  <\/p>\n<p>\u041e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432 \u0441\u0440\u043e\u0447\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c JS \u043d\u0430 WASM? \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435\u0442. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 WASM \u043f\u043e\u043a\u0430 \u043c\u043d\u043e\u0433\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 (\u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a DOM, \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 (\u0441\u043c. WASI) etc.). \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438, WASM \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c JS \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 (\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e). \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0437\u0430\u0434\u0430\u0447 \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0442 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 JS \u0438 WASM \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0427\u0443\u0442\u044c \u043d\u0435 \u0437\u0430\u0431\u044b\u043b \u2014 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b <code>wasm-pack<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>wasm2wat rust_code_bg.wasm > rust_code_bg.wat<\/code> (<code>wasm2wat<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0430 <code>wabt<\/code>).<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0434 &#171;\u043f\u0440\u043e\u0435\u043a\u0442\u0430&#187; \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/github.com\/harryheman\/blog-posts\/tree\/master\/js-wasm\" rel=\"nofollow noopener noreferrer\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>Happy coding!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/778240\/\"> https:\/\/habr.com\/ru\/articles\/778240\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/ma\/po\/lv\/mapolvqq4uunxfqoaviv3g9km9y.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/ma\/po\/lv\/mapolvqq4uunxfqoaviv3g9km9y.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  Hello world!<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u043d\u044f\u0445 \u044f \u0431\u0430\u043b\u043e\u0432\u0430\u043b\u0441\u044f \u0441 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/WebAssembly\" rel=\"nofollow noopener noreferrer\">WebAssembly<\/a> \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0438 \u0445\u043e\u0447\u0443 \u0441 \u0432\u0430\u043c\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435.<\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435 JS\/<a href=\"https:\/\/nodejs.org\/en\" rel=\"nofollow noopener noreferrer\">Node.js<\/a> \u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043e WASM \u0438 <a href=\"https:\/\/www.rust-lang.org\/\" rel=\"nofollow noopener noreferrer\">Rust<\/a>.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-361932","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/361932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=361932"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/361932\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=361932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=361932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=361932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}