认识 WebAssembly 与 Rust 实践

编程语言2024-10-22 13:23:13

绠€浠?/h2>
鍏堟潵璇翠笅鍦?WebAssembly(鍚庣画绉癢ASM) 瀹樼綉涓婄殑浠嬬粛锛屼富瑕佹湁鍥涚偣锛?/p>

楂樻晥锛歐ASM 鏈変竴濂楀畬鏁寸殑璇箟锛屽疄闄呬笂 WASM 鏄綋绉皬涓斿姞杞藉揩鐨勪簩杩涘埗鏍煎紡锛?鍏剁洰鏍囧氨鏄厖鍒嗗彂鎸ョ‖浠剁殑鑳藉姏浠ヨ揪鍒板師鐢熻瑷€鐨勬墽琛屾晥鐜?/li>

瀹夊叏锛歐ASM 杩愯鍦ㄤ竴涓唴瀛樺畨鍏紝娌欑鍖栫殑鎵ц鐜涓紝鐢氳嚦鍙互鍦ㄧ幇鏈夌殑 JavaScript 铏氭嫙鏈轰腑瀹炵幇銆傚湪 Web 鐜涓?锛學ASM 灏嗕細涓ユ牸閬靛畧鍚屾簮绛栫暐浠ュ強娴忚鍣ㄥ畨鍏ㄧ瓥鐣?/li>

寮€鏀撅細WASM 璁捐浜嗕竴涓潪甯歌鏁寸殑鏂囨湰鏍煎紡鐢ㄦ潵銆佽皟璇曘€佹祴璇曘€佸疄楠屻€佷紭鍖栥€佸涔犮€佹暀瀛︽垨鑰呯紪鍐欑▼搴忋€傚彲浠ヤ互杩欑鏂囨湰鏍煎紡鍦?Web 椤甸潰涓婃煡鐪?WASM 妯″潡鐨勬簮鐮?/li>

鏍囧噯锛歐ASM 鍦?Web 涓璁捐鎴愭棤鐗堟湰銆佺壒鎬у彲娴嬭瘯銆佸悜鍚庡吋瀹圭殑銆俉ASM 鍙互琚?JavaScript 璋冪敤锛岃繘鍏?JavaScript 涓婁笅鏂囷紝涔熷彲浠ュ儚 Web API 涓€鏍疯皟鐢ㄦ祻瑙堝櫒鐨勫姛鑳姐€俉ASM 涓嶄粎鍙互杩愯鍦ㄦ祻瑙堝櫒涓婏紝涔熷彲浠ヨ繍琛屽湪闈?Web 鐜涓嬶紙濡?Node.js銆丏eno銆佺墿鑱旂綉璁惧绛夈€?/li>

鍙戝睍鍘嗗彶

1. 2013骞达細Asm.js 鍙戝竷锛岃櫄骞诲紩鎿庤缂栬瘧鎴?Asm.js 绉绘鍒版祻瑙堝櫒涓紝杩欐槸 WASM 鐨勫墠韬?/li>
1. 2015骞达細鍚勫ぇ娴忚鍣ㄥ巶鍟嗗紑濮嬪悎浣滃紑鍙?WASM锛屾垚绔?W3C WebAssembly Community Group
1. 2017骞达細鍚勫ぇ娴忚鍣ㄥ紑濮嬫敮鎸?WASM
1. 2018骞达細2鏈堝彂甯冮涓叕寮€鐨勮崏妗?/li>
1. 2019骞达細WASM 鍙戝竷 1.0 姝ｅ紡鐗?/li>
1. 2022骞达細4鏈堝彂甯冧簡 2.0 鐨勮崏妗?/li>

鍏煎鎬?/h2>

鍙互鐪嬪埌鐩墠鐨勪富娴佹祻瑙堝櫒锛欳hrome銆丒dge銆丼afari銆丗irefox銆丱pera 閮藉凡缁忔敮鎸侊紝Safari 11鐗堟湰锛堝搴?IOS 11锛変互涓婄殑绉诲姩绔浜?WASM 鐨勬敮鎸佷篃姣旇緝濂戒簡锛屽鏋滄槸浣庝簬 IOS 11 浠ヤ笅鐨勭郴缁熷氨闇€瑕佸仛閫昏緫鍏滃簳鐨勫鐞嗕簡銆傛墍浠ュ鏋滄槸 B 绔殑椤圭洰锛屽彲浠ユ斁蹇冨ぇ鑳嗙殑鍘诲湪椤圭洰涓繘琛岃惤鍦帮紝濡傛灉鏄?C 绔殑椤圭洰锛屽彲鑳戒細鏈変竴灏忛儴鍒嗙敤鎴风殑绯荤粺浼氫笉鏀寔锛岃繖鏃跺€欏彲浠ヤ娇鐢?wasm2js 宸ュ叿鏉ュ仛浠ｇ爜杞崲鍏滃簳銆?/p>
鍦ㄦ寮忓幓浜嗚В WASM 涔嬪墠鎴戜滑鍏堟潵浜嗚В涓€涓?LLVM 馃憞

LLVM

LLVM 鏄ā鍧楀寲鍜屽彲閲嶇敤鐨勭紪璇戝櫒鍜屽伐鍏烽摼鎶€鏈殑闆嗗悎锛屽畠鏄敱 C++ 缂栧啓鐨勩€傚敖绠″彨鍋?LLVM锛屼絾瀹冭窡浼犵粺铏氭嫙鏈哄嚑涔庢病鍟ュ叧绯汇€傗€淟LVM鈥?杩欎釜鍚嶇О鏈韩骞朵笉鏄瀛楁瘝缂╁啓锛堝苟涓嶆槸 Low Level Virtual Machine锛夛紝LLVM 灏辨槸瀹冪殑鍏ㄧО銆傚畠鐢ㄤ簬浼樺寲浠ヤ换鎰忕殑缂栫▼璇█缂栧啓鐨勭▼搴忕殑缂栬瘧鏃堕棿銆侀摼鎺ユ椂闂淬€佽繍琛屾椂闂翠互鍙婄┖闂叉椂闂达紝缁忚繃鍚勭浼樺寲鍚庯紝杈撳嚭涓€濂楅€傚悎缂栬瘧鍣ㄧ郴缁熺殑涓棿璇█锛岀洰鍓嶉噰鐢ㄥ畠鏉ュ仛杞崲鐨勮瑷€鏈夊緢澶氾細Swift銆丱bject-C銆丆#銆丷ust銆丣ava瀛楄妭鐮佺瓑銆俉ASM 缂栬瘧鍣ㄥ簳灞備篃浣跨敤浜哃LVM 鍘诲皢鍘熺敓浠ｇ爜锛堝Rust銆丆銆丆++绛夛級杞崲鎴?WASM 浜岃繘鍒朵唬鐮併€?/p>

缂栬瘧鍣?/h4>
缂栬瘧鍣ㄥ寘鎷笁閮ㄥ垎:

鍓嶇锛氳礋璐ｅ鐞嗘簮璇█

浼樺寲鍣細璐熻矗浼樺寲浠ｇ爜

鍚庣锛氳礋璐ｅ鐞嗙洰鏍囪瑷€

鍓嶇

鍓嶇鍦ㄦ帴鏀跺埌浠ｇ爜鐨勬椂鍊欏氨浼氬幓瑙ｆ瀽瀹冿紝鐒跺悗妫€鏌ヤ唬鐮佹槸鍚︽湁璇硶鎴栬娉曢棶棰橈紝鐒跺悗浠ｇ爜灏变細杞崲鎴愪腑闂磋〃绀轰骇鐗╋紙intermediate representation) IR銆?/p>

浼樺寲鍣?/h4>
浼樺寲鍣ㄤ細鍘诲垎鏋?IR 骞跺皢鍏惰浆鎹㈡垚鏇村姞楂樻晥鐨勪唬鐮侊紝寰堝皯鏈夌紪璇戝櫒浼氭湁澶氫釜涓棿浜х墿銆備紭鍖栧櫒鐩稿綋浜庝竴涓腑闂翠骇鐗╁埌涓棿浜х墿鐨勮浆鎹㈠櫒锛屽叾瀹炲氨鏄湪涓棿鍋氫簡涓€灞傚姞宸ヤ紭鍖栧鐞嗭紝浼樺寲鍣ㄥ寘鎷Щ闄ゅ啑浣欑殑璁＄畻锛屽幓鎺夋墽琛屼笉鍒扮殑鍐椾綑浠ｇ爜锛岃繕鏈変竴浜涘叾瀹冪殑鍙互杩涜浼樺寲鐨勯€夐」銆?/p>

鍚庣

鍚庣浼氭帴鏀朵腑闂翠骇鐗╁苟杞崲瀹冨埌鍏跺畠璇█锛堝鏈哄櫒鐮侊級锛屽畠涔熷彲浠ラ摼鎺ュ涓悗绔幓杞崲浠ｇ爜鍒颁竴浜涘叾瀹冭瑷€銆備负浜嗕骇鐢熼珮鏁堢殑鏈哄櫒浠ｇ爜锛屽悗绔簲璇ョ悊瑙ｆ墽琛屼唬鐮佺殑浣撶郴缁撴瀯銆?/p>

LLVM 鐨勫姛鑳?/h4>
LLVM 鐨勬牳蹇冩槸璐熻矗鎻愪緵鐙珛浜庢簮銆佺洰鏍囩殑浼樺寲锛屽苟涓鸿澶?CPU 鏋舵瀯鐢熸垚浠ｇ爜銆傝繖浣垮緱璇█寮€鍙戜汉鍛樺彲浠ュ彧鍒涘缓涓€涓墠绔紝浠庢簮璇█鐢熸垚 LLVM 鍏煎鐨?IR 鎴?LLVM IR銆侺LVM 涓嶆槸涓€涓崟涓€椤圭洰锛屽畠鏄瓙椤圭洰鍜屽叾浠栭」鐩殑闆嗗悎銆?/p>

LLVM 浣跨敤涓€绉嶇畝鍗曠殑浣庣骇璇█锛岄鏍肩被浼糃璇█

LLVM 鏄己绫诲瀷鐨?/li>

LLVM 鏈変弗鏍煎畾涔夌殑璇箟

LLVM 鍏锋湁绮剧‘鐨勫瀮鍦惧洖鏀?/li>

LLVM 鎻愪緵浜嗗悇绉嶄紭鍖栵紝鍙互鏍规嵁闇€姹傞€夋嫨銆傚畠鍏锋湁绉瀬鐨勩€佹爣閲忕殑銆佽繃绋嬮棿鐨勩€佺畝鍗曞惊鐜殑鍜屾瑕佹枃浠堕┍鍔ㄧ殑浼樺寲

LLVM 鎻愪緵浜嗗悇绉嶇紪璇戞ā鍨嬨€傚垎鍒槸閾炬帴鏃堕棿銆佸畨瑁呮椂闂淬€佽繍琛屾椂鍜岃劚鏈?/li>

LLVM 涓哄悇绉嶇洰鏍囨灦鏋勭敓鎴愭満鍣ㄧ爜

LLVM 鎻愪緵 DWARF 璋冭瘯淇℃伅锛圖WARF 鏄竴绉嶈皟璇曟枃浠舵牸寮忥紝璁稿缂栬瘧鍣ㄥ拰璋冭瘯鍣ㄩ兘浣跨敤瀹冩潵鏀寔婧愪唬鐮佺骇鍒殑璋冭瘯锛?/li>

浜嗚В浜?LLVM 鎴戜滑灏辨寮忚繘鍏?WASM 鐨勫唴瀹逛粙缁嶃€?/p>

WASM 鍜?JS

瀹冭璁捐鐢ㄤ簬楂樻晥鎵ц鍜岀揣鍑戣〃杈撅紝瀹冨彲浠ヤ互鎺ヨ繎鍘熺敓浠ｇ爜鐨勯€熷害鍦ㄦ墍鏈?JS 寮曟搸涓婃墽琛?(鎵嬫満銆佺數鑴戞祻瑙堝櫒銆丯ode.js)銆傛瘡涓?WASM 鏂囦欢閮芥槸涓€涓珮鏁堛€佹渶浼樹笖鑷粰鑷冻鐨勬ā鍧楋紝绉颁负 WASM 妯″潡锛屽畠杩愯鍦ㄦ矙鐩掍笂锛屽唴瀛樺畨鍏紝娌℃湁鏉冮檺鑾峰彇瓒呭嚭娌欑洅闄愬埗浠ュ鐨勪笢瑗匡紝WASM 鏄竴涓櫄鎷熸寚浠ら泦缁撴瀯銆?/p>

JavaScript 鏄浣曟墽琛岀殑锛?*

1. 鎶婃暣涓枃浠跺姞杞藉畬鎴?/li>
1. 灏嗕唬鐮佽В鏋愭垚鎶借薄璇硶鏍?/li>
1. 瑙ｉ噴鍣ㄨ繘琛岃В閲婄劧鍚庣紪璇戝啀鎵ц
1. 鏈€鍚庡啀杩涜鍨冨溇鍥炴敹

JavaScript 鏃㈡槸瑙ｉ噴璇█鍙堟槸缂栬瘧璇█锛屾墍浠?JavaScript 寮曟搸鍦ㄨВ鏋愬悗鍚姩鎵ц銆傝В閲婂櫒鎵ц浠ｇ爜鐨勯€熷害寰堝揩锛屼絾瀹冩瘡娆¤В閲婃椂閮戒細缂栬瘧浠ｇ爜銆侸avaScript 寮曟搸鏈夌洃瑙嗗櫒 (鍦ㄦ煇浜涙祻瑙堝櫒涓О涓哄垎鏋愬櫒)銆傜洃瑙嗗櫒璺熻釜浠ｇ爜鎵ц鎯呭喌锛屽鏋滀竴涓壒瀹氱殑浠ｇ爜鍧楄棰戠箒鍦版墽琛岋紝閭ｄ箞鐩戣鍣ㄥ皢鍏舵爣璁颁负鐑唬鐮併€傚紩鎿庝娇鐢ㄥ嵆鏃?(JIT) 缂栬瘧鍣ㄧ紪璇戜唬鐮佸潡銆傚紩鎿庝細鑺辫垂涓€浜涙椂闂磋繘琛岀紪璇戯紝姣斿浠ョ撼绉掍负鍗曚綅銆傝姳鍦ㄨ繖閲岀殑鏃堕棿鏄€煎緱鐨勶紝鍥犱负涓嬫璋冪敤鍑芥暟鏃讹紝鎵ц閫熷害浼氭瘮涔嬪墠蹇緱澶氾紝鍥犱负缂栬瘧鍨嬩唬鐮佹瘮瑙ｉ噴鍨嬩唬鐮佽蹇紝杩欎釜闃舵鏄紭鍖栦唬鐮侀樁娈点€侸avaScript 寮曟搸澧炲姞浜嗕竴(鎴栦袱)灞備紭鍖栵紝鐩戣鍣ㄤ細鎸佺画鐩戣浠ｇ爜鐨勬墽琛岋紝鐩戣鍣ㄦ爣璁伴偅浜涜鎵ц棰戞鏇撮珮鐨勪唬鐮佷负楂樼儹鐐逛唬鐮侊紝寮曟搸灏嗚繘涓€姝ヤ紭鍖栬繖娈典唬鐮侊紝杩欎釜浼樺寲闇€瑕佸緢闀挎椂闂淬€傝繖涓樁娈典骇鐢熻繍琛岄€熷害闈炲父蹇殑楂樺害浼樺寲杩囩殑浠ｇ爜锛岃闃舵鐨勪紭鍖栦唬鐮佹墽琛岄€熷害瑕佹瘮涓婁竴娈佃鐨勪紭鍖栬繃鐨勪唬鐮佽繕瑕佸揩寰楀銆傛樉鐒讹紝寮曟搸鍦ㄨ繖涓€闃舵鑺辫垂浜嗘洿澶氭椂闂达紝姣斿浠ユ绉掍负鍗曚綅锛岃繖閲岃€楄垂鐨勬椂闂村皢鐢变唬鐮佹€ц兘鍜屾墽琛屾晥鐜囨潵杩涜琛ュ伩銆侸avaScript 鏄竴绉嶅姩鎬佺被鍨嬬殑璇█锛屽紩鎿庢墍鑳藉仛鐨勬墍鏈変紭鍖栭兘鏄熀浜庣被鍨嬬殑鎺ㄦ柇銆傚鏋滄帹鏂け璐ワ紝閭ｄ箞灏嗛噸鏂拌В閲婂苟鎵ц浠ｇ爜锛屽苟鍒犻櫎浼樺寲杩囩殑浠ｇ爜锛岃€屼笉鏄姏鍑鸿繍琛屾椂寮傚父銆侸avaScript 寮曟搸瀹炵幇蹇呰鐨勭被鍨嬫鏌ワ紝骞跺湪鎺ㄦ柇鐨勭被鍨嬪彂鐢熷彉鍖栨椂鎻愬彇浼樺寲鐨勪唬鐮侊紝浣嗘槸濡傛灉閲嶆柊鎺ㄦ柇绫诲瀷锛岄偅鑺卞湪涓婅堪浠ｇ爜浼樺寲闃舵鐨勫姛澶氨鐧借垂浜嗐€?/p>

寮€鍙戜腑鎴戜滑鍙互閫氳繃浣跨敤 TypeScript 鏉ラ槻姝竴浜涗笌绫诲瀷鐩稿叧鐨勯棶棰橈紝浣跨敤 TypeScript锛屽彲浠ラ伩鍏嶄竴浜涘鎬佷唬鐮?(鎺ュ彈涓嶅悓绫诲瀷鐨勪唬鐮? 鐨勫嚭鐜般€傚湪 JavaScript 寮曟搸涓紝鍙帴鍙椾竴绉嶇被鍨嬬殑浠ｇ爜鎬绘槸姣斿鎬佷唬鐮佽繍琛屽緱蹇紝浣嗘槸濡傛灉鏄?TS 閲屽甫鏈夋硾鍨嬬殑浠ｇ爜锛岄偅涔熶細琚奖鍝嶅埌鎵ц閫熷害銆傛渶鍚庝竴姝ユ槸鍨冨溇鍥炴敹锛屽皢鍒犻櫎鍐呭瓨涓殑鎵€鏈夋椿鍔ㄥ璞★紝JavaScript 寮曟搸涓殑鍨冨溇鍥炴敹閲囩敤鏍囪娓呴櫎绠楁硶锛屽湪鍨冨溇鍥炴敹杩囩▼涓紝JavaScript 寮曟搸浠庢牴瀵硅薄 (绫讳技浜?Node.js 涓殑鍏ㄥ眬瀵硅薄) 寮€濮嬨€傚畠鏌ユ壘浠庢牴瀵硅薄寮€濮嬪紩鐢ㄧ殑鎵€鏈夊璞★紝骞跺皢瀹冧滑鏍囪涓哄彲璁块棶瀵硅薄锛屽畠灏嗗墿浣欑殑瀵硅薄鏍囪涓轰笉鍙闂殑瀵硅薄锛屾渶鍚庢竻闄や笉鍙闂殑瀵硅薄銆?/p>

WASM 鏄€庝箞鎵ц鐨勶紵

WASM 鏄簩杩涘埗鏍煎紡骞朵笖宸茬粡琚紪璇戝拰浼樺寲杩囦簡锛岄鍏?JS 寮曟搸浼氬幓鍔犺浇 WASM 浠ｇ爜锛岀劧鍚庤В鐮佸苟杞崲鎴愭ā鍧楃殑鍐呴儴琛ㄨ揪锛堝嵆 AST)銆傝繖涓樁娈垫槸瑙ｇ爜闃舵锛岃В鐮侀樁娈佃杩滆繙姣?JS 鐨勭紪璇戦樁娈佃蹇€傛帴涓嬫潵锛岃В鐮佸悗鐨?WASM 杩涘叆缂栬瘧闃舵锛屽湪杩欎釜闃舵锛屽妯″潡杩涜楠岃瘉锛屽湪楠岃瘉鏈熼棿锛屽浠ｇ爜杩涜鏌愪簺鏉′欢妫€鏌ワ紝浠ョ‘淇濇ā鍧楁槸瀹夊叏鐨勶紝娌℃湁浠讳綍鏈夊鐨勪唬鐮侊紝鍦ㄩ獙璇佽繃绋嬩腑瀵瑰嚱鏁般€佹寚浠ゅ簭鍒楀拰鍫嗘爤鐨勪娇鐢ㄨ繘琛岀被鍨嬫鏌ワ紝鐒跺悗灏嗛獙璇佽繃鐨勪唬鐮佺紪璇戜负鏈哄櫒鐮併€傜敱浜?WASM 浜岃繘鍒朵唬鐮佸凡缁忔彁鍓嶇紪璇戝拰浼樺寲杩囦簡锛屾墍浠ュ湪鍏剁紪璇戦樁娈典細鏇村揩锛屽湪杩欎釜闃舵锛學ASM 浠ｇ爜浼氳杞崲涓烘満鍣ㄧ爜銆傛渶鍚庣紪璇戣繃鐨勪唬鐮佽繘鍏ユ墽琛岄樁娈碉紝鎵ц闃舵锛屾ā鍧椾細琚疄渚嬪寲骞舵墽琛屻€傚湪瀹炰緥鍖栫殑鏃跺€欙紝JS 寮曟搸浼氬疄渚嬪寲鐘舵€佸拰鎵ц鏍堬紝鏈€鍚庡啀鎵ц妯″潡銆俉ASM 鐨勫彟涓€涓紭鐐规槸妯″潡鍙互浠庣涓€涓瓧鑺傚紑濮嬬紪璇戝拰瀹炰緥鍖栵紝鍥犳锛孞S 寮曟搸涓嶉渶瑕佺瓑鍒版暣涓ā鍧楄涓嬭浇锛岃繖鍙互杩涗竴姝ユ彁楂?WASM 鐨勬€ц兘銆俉ASM 蹇殑鍘熷洜鏄洜涓哄畠鐨勬墽琛屾楠よ姣?JS 鐨勬墽琛屾楠ゅ皯锛屽叾浜岃繘鍒朵唬鐮佸凡缁忕粡杩囦簡浼樺寲鍜岀紪璇戯紝骞朵笖鍙互杩涜娴佸紡缂栬瘧銆備絾鏄€荤殑鏉ヨ锛學ASM 骞朵笉鏄€绘槸姣斿師鐢烰S 浠ｇ爜鎵ц閫熷害瑕佸揩鐨勶紝鍥犱负 WASM 浠ｇ爜鍜?JS 寮曟搸浜や簰鍜屽疄渚嬪寲涔熸槸瑕佽€楄垂鏃堕棿鐨勶紝鎵€浠ラ渶瑕佽€冭檻濂戒娇鐢ㄥ満鏅紝鍦ㄤ竴浜涚畝鍗曠殑璁＄畻鍦烘櫙閲岋紝WASM 鍜?JS 寮曟搸鐨勪氦浜掓椂闂撮兘浼氳繙杩滆秴鍑哄叾鏈韩鐨勬墽琛屾椂闂达紝杩欑鏃跺€欒繕涓嶅鐩存帴浣跨敤 JS 鏉ョ紪鍐欎唬鐮佹潵寰楀揩锛屽彟涓€鏂归潰锛屼篃瑕佸噺灏?WASM 鍜?JS 寮曟搸涔嬮棿鐨勬暟鎹氦浜掞紝鍥犱负姣忔涓よ€呯殑鏁版嵁浜や簰閮戒細鑰楄垂涓€瀹氱殑鏃堕棿銆?/p>

鍩虹閮ㄥ垎浜嗚В浜嗭紝涓嬮潰鎴戜滑鏉ョ湅涓€涓?WASM 鐨勫紑鍙戦儴鍒嗐€?/p>

WASM 寮€鍙戣瑷€鐨勯€夋嫨

瑕佸啓 WASM 搴旂敤鐨勮瘽棣栧厛涓嶈兘閫夌敤鏈?GC 鐨勮瑷€锛屼笉鐒跺瀮鍦炬敹闆嗗櫒鐨勪唬鐮佷篃浼氬崰鐢ㄥ緢澶т竴閮ㄥ垎鐨勪綋绉紝瀵?WASM 鏂囦欢鐨勫垵濮嬪寲鍔犺浇骞朵笉鍙嬪ソ锛屾瘮杈冨ソ鐨勯€夋嫨灏辨槸 C/C++/Rust 杩欏嚑涓病鏈?GC 鐨勮瑷€锛屽綋鐒朵娇鐢?Go銆丆#銆乀ypeScript 杩欎簺涔熸槸鍙互鐨勶紝浣嗘槸鎬ц兘涔熶細娌℃湁C/C++/Rust 杩欎箞濂姐€備粠涓婇潰鍑犱釜璇█鏉ョ湅 Rust 瀵逛簬鍓嶇閫夋墜鏉ヨ浼氱◢寰翰鍒囦竴浜涳紝浠庤娉曚笂鐪嬪拰 TS 鏈変竴鐐圭偣鐨勭浉浼硷紙浣嗘槸瀛︿笅鍘昏繕鏄姣?TS 闅惧緱澶氱殑锛夛紝 Rust 鐨勫畼鏂瑰拰绀惧尯瀵逛簬 WASM 閮芥湁鐫€涓€娴佺殑鏀寔锛岃€屼笖瀹冧篃鏄竴闂ㄧ郴缁熺骇缂栫▼璇█锛屾湁涓€涓拰 NPM 涓€鏍峰ソ鐢ㄧ殑鍖呯鐞嗗櫒 Cargo锛屽悓鏃?Rust 涔熸嫢鏈夌潃寰堝ソ鐨勬€ц兘锛岀敤鏉ュ啓 WASM 鍐嶅ソ涓嶈繃浜嗐€傚悓鏃跺畠鐨勭ぞ鍖虹儹搴︿篃鍦ㄤ笉鏂殑涓婂崌涓€?/p>

Rust 寮€鍙?WASM

Rust 鎻愪緵浜嗗 WASM 涓€娴佺殑鏀寔锛孯ust 鏃犻渶 GC 銆侀浂杩愯鏃跺紑閿€鐨勭壒鐐逛篃璁╁畠鎴愪负浜?WASM 鐨勫畬缇庡€欓€夎€呫€俁ust 鏄€庝箞缂栬瘧鎴?WASM 浠ｇ爜鐨勶細

浠庨浂寮€濮?WASM 椤圭洰

Rust 瀹夎

棣栧厛闇€瑕佸畨瑁呭ソ Rust鐨勫紑鍙戠幆澧冦€傚畨瑁呭ソ涔嬪悗鎺у埗鍙拌繍琛?rustc --version 鏄剧ず鐗堟湰鍙峰嵆鍙€?/p>

wasm-pack(WASM 鎵撳寘鍣?

涓€涓笓闂ㄧ敤浜庢墦鍖呫€佸彂甯?WASM 鐨勫伐鍏凤紝鍙互鐢ㄤ簬鏋勫缓鍙湪 NPM 鍙戝竷鐨?WASM 宸ュ叿鍖呫€傚綋鎴戜滑寮€鍙戝畬 WASM 妯″潡鏃讹紝鍙互鐩存帴浣跨敤 wasm-pack publish 鍛戒护鎶婃垜浠紑鍙戠殑 WASM 鍖呭彂甯冨埌 NPM 涓娿€備娇鐢╟argo install wasm-pack 鍛戒护鏉ヨ繘琛屽畨瑁呫€?/p>

寮€鍙戠幆澧冩惌****寤?/h4>

鎺ヤ笅鏉ユ垜浠妇涓緥瀛愪粠闆跺紑濮嬫惌寤轰竴涓?WASM 寮€鍙戠洰褰?/p>

鍒涘缓 Rust 宸ョ▼

棣栧厛鍒涘缓 Rust 宸ョ▼鐩綍锛?code>cargo new example --lib
鐒跺悗鍦ㄥ叾鐩綍涓嬫帶鍒跺彴杩愯
npm init -y
package.json 鍐呭濡備笅锛岄厤缃ソ package.json 涔嬪悗鍏堝畨瑁呬緷璧栵紝鎵ц npm install


{
  "name": "example",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rimraf dist pkg && webpack",
    "start": "rimraf dist pkg && webpack-dev-server",
    "test": "cargo test && wasm-pack test --headless"
  },
  "devDependencies": {
    "@wasm-tool/wasm-pack-plugin": "^1.6.0",
    "html-webpack-plugin": "^5.5.0",
    "rimraf": "^3.0.2",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

cargo.toml 渚濊禆濡備笅锛?/p>


[package]
categories = ["wasm"]
description = ""
edition = "2021"
name = "example"
version = "0.1.0"

[lib]
# 涓€涓姩鎬佺殑绯荤粺搴撳皢浼氫骇鐢燂紝绫讳技浜嶤鍏变韩搴撱€傚綋缂栬瘧涓€涓粠鍏跺畠璇█鍔犺浇璋冪敤鐨勫姩鎬佸簱鏃惰繖灞炴€у皢浼氳浣跨敤
crate-type = ["cdylib"]

[features]

[dependencies]
# 鐢ㄤ簬灏嗗疄浣撲粠 Rust 缁戝畾鍒?JavaScript锛屾垨鍙嶈繃鏉ャ€?
# 鎻愪緵浜?JS 鍜?WASM 涔嬮棿鐨勯€氶亾锛岀敤鏉ヤ紶閫掑璞°€佸瓧绗︿覆銆佹暟缁勮繖浜涙暟鎹被鍨?
wasm-bindgen = "0.2.83"
wee_alloc = {version = "0.4.5", optional = true}

# web-sys 鍙互鍜?JS 鐨?API 杩涜浜や簰锛屾瘮濡?DOM
[dependencies.web-sys]
features = ["console"]
version = "0.3.60"

[dev-dependencies]
# 鐢ㄤ簬鎵€鏈塉S鐜 (濡侼ode.js鍜屾祻瑙堝櫒)涓殑 JS 鍏ㄥ眬瀵硅薄鍜屽嚱鏁扮殑缁戝畾
js-sys = "0.3.60"

# 0 鈥?涓嶄紭鍖?
# 1 鈥?鍩虹浼樺寲
# 2 鈥?鏇村浼樺寲
# 3 鈥?鍏ㄩ噺浼樺寲锛屽叧娉ㄦ€ц兘鏃跺缓璁紑鍚椤?
# s 鈥?浼樺寲浜岃繘鍒跺ぇ灏?
# z 鈥?浼樺寲浜岃繘鍒跺ぇ灏忓悓鏃跺叧闂惊鐜悜閲忥紝鍏虫敞浣撶Н鏃跺缓璁紑鍚椤?
[profile.dev]
debug = true
# link time optimize LLVM 鐨勯摼鎺ユ椂闂翠紭鍖栵紝false 鏃跺彧浼氫紭鍖栧綋鍓嶅寘锛宼rue/fat浼氳法渚濊禆瀵绘壘鍏崇郴鍥鹃噷鐨勬墍鏈夊寘杩涜浼樺寲
# 鍏跺畠閫夐」杩樻湁 off-鍏抽棴浼樺寲锛宼hin鏄痜at鐨勬洿蹇増鏈?
lto = true
opt-level = 'z'

[profile.release]
debug = false
lto = true
opt-level = 'z'

鍐呭瓨鍒嗛厤鍣紙鍙€夛級

涓婇潰鎴戜滑鍦ㄤ緷璧栦腑鍔犲叆浜?wee_alloc 杩欎釜鍐呭瓨鍒嗛厤鍣紝瀵规瘮榛樿鐨?10kb 澶у皬鐨勫垎閰嶅櫒锛屽畠鍙湁 1kb 鐨勫ぇ灏忥紝浣嗘槸瀹冭姣旈粯璁ょ殑鍒嗛厤鍣ㄩ€熷害瑕佹參锛屾墍浠ラ粯璁や笉寮€鍚紝涓哄噺灏戞ā鍧楁墦鍖呮椂鐨勫ぇ灏忥紝鍙互浣跨敤杩欎釜鍐呭瓨鍒嗛厤鍣ㄣ€傚湪src/lib.rs 涓娇鐢ㄧ殑浠ｇ爜濡備笅锛?/p>


#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

鍏ュ彛鏂囦欢

椤圭洰鏍圭洰褰曚笅鍒涘缓 index.html 鏂囦欢锛屽啓鍏ヤ互涓嬪唴瀹癸細

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WASM Hello World</title>
  </head>
  <body></body>
  <script src="index.js"></script>
</html>

Webpack 閰嶇疆

椤圭洰鏍圭洰褰曚笅鏂板缓 webpack.config.js 骞舵柊寤?js/index.js 鏂囦欢鐢ㄤ簬璋冪敤 WASM 渚ф毚闇茬殑鍑芥暟銆俉asmPackPlugin 杩欎釜鎻掍欢浼氬府鎴戜滑鍦ㄨ繍琛?Webpack 鏃惰嚜鍔ㄥ幓鎵撳寘 WASM 锛岀敓鎴愬彲鐩存帴鐢ㄤ簬鍙戝竷鐨?NPM 妯″潡銆?/p>


const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

const dist = path.resolve(__dirname, "dist");

module.exports = {
  mode: "development",
  entry: {
    index: "./js/index.js",
  },
  output: {
    path: dist,
    filename: "[name].js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"),
      inject: false,
    }),
    new WasmPackPlugin({
      crateDirectory: __dirname,
    }),
  ],
  experiments: {
    asyncWebAssembly: true,
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
};

涓婇潰鐨勬墍鏈夐厤缃兘瀹屾垚涔嬪悗锛屽懡浠よ鎵ц npm start 鍗冲彲鍚姩椤圭洰锛岀劧鍚庝細鑷姩鐢熸垚 pkg 鐩綍锛岃繖涓氨鏄渶缁堝彲浠ュ彂甯冩墦鍖呭埌 NPM 涓婄殑鐨?WASM 搴撱€傛渶缁堢殑椤圭洰鐩綍闀胯繖涓牱瀛愶細

Hello World

鍦ㄤ笂闈㈢殑鐜鎼缓濂戒箣鍚庯紝鎴戜滑灏卞紑濮嬭瘯鐫€鍦ㄦ祻瑙堝櫒鎺у埗鍙颁笂鎵撳嵃鍑?Hello World 鍚э紝杩涘叆鍒?src/lib.rs 鏂囦欢锛屽啓鍏ヤ互涓嬩唬鐮侊細


use wasm_bindgen::prelude::*;
use web_sys::console;

#[wasm_bindgen]
pub fn hello_world() {
    console::log_1(&JsValue::from_str("Hello World!"));
}

鐒跺悗鍒?JS 渚у幓杩涜璋冪敤锛屽湪 js/index.js 鏂囦欢涓啓鍏ヤ互涓嬩唬鐮侊細

async function main() {
  const module = await import('../pkg/index');
  module.hello_world();
}

main();

杩愯 npm start 涔嬪悗锛屾墦寮€ localhost:8080 绔彛锛屽氨鑳界湅鍒?Hello World 琚墦鍗板嚭鏉ュ挴銆?/p>

JS 鍜?Rust 涔嬮棿鐨勬暟鎹紶閫?/h4>

JS 璋冪敤 Rust

杩欓噷鎴戜滑鍦?src/lib.rs 閲屽啓涓€涓枑娉㈤偅濂戝嚱鏁帮紝鍙互杩斿洖涓€涓?i32 鏁板瓧绫诲瀷锛孞S 绔氨鍙互鎷垮埌瀵瑰簲鐨勮繑鍥炵粨鏋滐細


// 鏂愭尝閭ｅ鏁板垪锛屾椂闂村鏉傚害 O(2^n)
#[wasm_bindgen]
pub fn fib(n: i32) -> i32 {
    match n {
        1 => 1,
        2 => 1,
        _ => fib(n - 1) + fib(n - 2),
        }
}

鐒跺悗鍦ㄦ牴鐩綍涓嬬殑 js/index.js 涓紪鍐欏涓嬩唬鐮佽繘琛岃皟鐢細

async function main() {
  const module = await import("../pkg/index");
  console.log(module.fib(30));
}

main();

鎺у埗鍙颁笂灏辫兘鐪嬪埌瀵瑰簲鐨勭粨鏋滀簡锛?/p>

鍐嶇湅 wasm-pack 缁欐垜浠敓鎴愮殑 WASM 鑳舵按浠ｇ爜锛屽畠鍦?pkg/index_bg.js 涓紝鍙互鐪嬪埌鐢熸垚鐨勪唬鐮佷腑宸茬粡甯垜浠仛濂戒簡涓€浜涜竟鐣屽垽鏂拰寮傚父澶勭悊锛岀劧鍚?JS 渚х洿鎺ュ紩鍏ヨ繖涓枃浠跺幓璋冪敤鎴戜滑缂栧啓濂界殑鍑芥暟鍗冲彲銆傚鏋滀綘涓嶆兂浣跨敤 webpack 鐨勬彃浠舵潵鐢熸垚 WASM 鍖咃紝涔熷彲浠ヨ嚜宸辨墜鍔ㄦ墽琛?wasm-pack build 鍛戒护鏉ョ敓鎴愩€?/p>

import * as wasm from './index_bg.wasm';

const lTextDecoder = typeof TextDecoder === 'undefined' (0, module.require)('util').TextDecoder : TextDecoder;

let cachedTextDecoder = new lTextDecoder('utf-8', { ignoreBOM: true, fatal: true });

cachedTextDecoder.decode();

let cachedUint8Memory0 = new Uint8Array();

function getUint8Memory0() {
  if (cachedUint8Memory0.byteLength === 0) {
    cachedUint8Memory0 = new Uint8Array(wasm.memory.buffer);
  }
  return cachedUint8Memory0;
}

function getStringFromWasm0(ptr, len) {
  return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
}

function _assertNum(n) {
  if (typeof(n) !== 'number') throw new Error('expected a number argument');
}
/**
* @param {number} n
* @returns {number}
*/
export function fib(n) {
  _assertNum(n);
  const ret = wasm.fib(n);
  return ret;
}

export function __wbindgen_throw(arg0, arg1) {
  throw new Error(getStringFromWasm0(arg0, arg1));
};

杩斿洖鏁扮粍


#[wasm_bindgen]
pub fn send_array_to_js() -> Box<[JsValue]> {
    vec![
        JsValue::NULL,
        JsValue::UNDEFINED,
        JsValue::from_str("123"),
        JsValue::TRUE,
        JsValue::FALSE,
    ]
    .into_boxed_slice()
}

杩斿洖瀵硅薄

鍦?cargo.toml 鐨?dependencies 鍔犲叆涓嬮潰涓や釜渚濊禆锛?/p>


[dependencies]
serde = { version = "1.0", features = ["derive"] }
serde-wasm-bindgen = "0.4"

src/lib.rs 涓紪鍐欎唬鐮侊細

use std::collections::HashMap;
use serde::{Deserialize, Serialize};
use wasm_bindgen::prelude::*;

#[derive(Serialize, Deserialize)]
pub struct Obj {
    pub field1: HashMap<u32, String>,
    pub field2: Vec<Vec<i32>>,
    pub field3: [f32; 4],
    pub field4: bool,
    pub field5: String,
}

#[wasm_bindgen]
pub fn send_obj_to_js() -> JsValue {
    let mut map = HashMap::new();
    map.insert(0, String::from("ex"));

    let obj = Obj {
        field1: map,
        field2: vec![vec![1, 2], vec![3, 4]],
        field3: [1., 2., 3., 4.],
        field4: true,
        field5: "鍝堝搱鍝?.to_string(),
    };

    serde_wasm_bindgen::to_value(&obj).unwrap()
}

JS 渚ц繘琛岃皟鐢細


async function main() {
  const module = await import('../pkg/index');
  console.log(module.send_obj_to_js());
  console.log(module.send_array_to_js());
}

main();

鎵撳嵃缁撴灉锛?/p>

Rust 璋冪敤 JS

椤圭洰鏍圭洰褰曚笅鍒涘缓涓€涓?js2rust 鐩綍锛岀劧鍚庢柊寤?point.js 鏂囦欢锛岄噷闈㈢殑浠ｇ爜鏄粰 Rust 渚ц皟鐢ㄧ殑锛?/p>

export class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  get_x() {
    return this.x;
  }

  get_y() {
    return this.y;
  }

  set_x(x) {
    this.x = x;
  }

  set_y(y) {
    this.y = y;
  }

  add(p1) {
    this.x += p1.x;
    this.y += p1.y;
  }
}

鎴戜滑涓婇潰鍒涘缓浜嗕竴涓?JS 渚х殑 Point 瀵硅薄锛岀劧鍚庡湪 Rust 绔垜浠湅鐪嬪浣曡繘琛岃皟鐢細鍏堝幓鍒?src/lib.rs 鐩綍涓嬶紝鍔犲叆涓嬮潰鐨勪唬鐮侊細

// 璋冪敤 JS 涓殑鏂规硶
#[wasm_bindgen(module = "/js2rust/point.js")]
extern "C" {
    pub type Point;

    #[wasm_bindgen(constructor)]
    fn new(x: i32, y: i32) -> Point;

    #[wasm_bindgen(method, getter)]
    fn get_x(this: &Point) -> i32;

    #[wasm_bindgen(method, getter)]
    fn get_y(this: &Point) -> i32;

    #[wasm_bindgen(method, setter)] //5
    fn set_x(this: &Point, x: i32) -> i32;

    #[wasm_bindgen(method, setter)]
    fn set_y(this: &Point, y: i32) -> i32;

    #[wasm_bindgen(method)]
    fn add(this: &Point, p: Point);
}

// 杩欎釜鍑芥暟 JS 渚у彲浠ョ户缁繘琛岃皟鐢紝鏈€缁堜細杩斿洖涓€涓?point 瀵硅薄瀹炰緥
#[wasm_bindgen]
pub fn test_point() -> Point {
    let p = Point::new(10, 10);
    let p1 = Point::new(6, 3);
    p.add(p1);
    p
}

鍙戝竷

褰撴垜浠皟璇曞ソ浠ｇ爜涔嬪悗锛屽氨鍙互鍦?NPM 涓婂彂甯冩垜浠殑 WASM 鍖呬簡銆傜洿鎺?cd 鍒?pkg 鐩綍涓嬶紝淇敼鎴戜滑鐨?package.json 鐨?name 涓?example-fib锛?鐒跺悗鎵ц npm publish 灏卞彲浠ュ彂甯冨埌 NPM 涓婁簡锛屽悗缁彲浠ュ湪鎴戜滑鑷繁鐨勯」鐩腑 npm install example-fib 涓嬭浇鏉ヨ皟鐢細


import { fib } from "example-fib";

async function main() {
  // const module = await import("../pkg/index");
  // console.log(module.fib(30));

  console.log(fib(40));
}

main();

鎴戜滑閫氳繃 NPM 鍖呯殑褰㈠紡寮曞叆鎴戜滑鐨?WASM 鏂愭尝閭ｅ鍑芥暟锛屽彲浠ョ湅鍒颁竴鏍峰彲浠ヨ皟鐢ㄦ垚鍔熴€?/p>

WASM 鍜?JS 鎬ц兘姣旇緝

鎴戝啓浜嗕竴娈垫祴璇曚唬鐮佹祴璇曚笂闈㈠啓鐨勬枑娉㈤偅濂戞暟鍒楁墽琛屾椂闂达紝WASM 鐗堟湰鍜?JS 鐗堟湰鐨勬墽琛屾椂闂存瘮杈冨涓嬶細

(娴嬭瘯鐢佃剳鐨凜PU涓?0浠7锛屼笉鍚岀數鑴戙€佷笉鍚屾祻瑙堝櫒鐨勬墽琛屾椂闂村彲鑳介兘浼氫笉涓€鏍?

JS 鐗堟湰鐨?Fibonacci 鍑芥暟锛?/p>

function jsFib(n) {
  if (n === 1 || n === 2) return 1;
  return jsFib(n - 1) + jsFib(n - 2);
}

浠庣粨鏋滀腑鎴戜滑鍙互鐪嬪埌锛屽湪鏃堕棿澶嶆潅搴︿负 O(2^n) 鐨勭畻娉曚腑锛?WASM 鐨勬€ц兘鏄濂戒簬 JS 鐨勶紝i 鐨勫€艰秺澶э紝WASM 鐨勪紭鍔垮氨浼氳秺鏄庢樉锛屼絾鏄鏋?i 鐨勫€兼瘮杈冨皬锛學ASM 鐨勬€ц兘涓嶄竴瀹氭瘮寰楄繃 JS锛屽洜涓哄叾涓?JS 鍜?WASM 鐨勪氦浜掑氨鏈変竴瀹氱殑鏃堕棿鎴愭湰锛屽綋鐒惰繖閲岀殑姣旇緝涔熸槸鍦?WASM 鍜?JS 渚ф暟鎹氦浜掓瘮杈冨皯鐨勬儏鍐碉紝濡傛灉鏁版嵁浜や簰閲忓ぇ浜嗭紝閭ｄ箞閫熷害涔熸槸浼氬彈鍒颁竴瀹氱殑褰卞搷鐨勶紝鎵€浠ュ湪涓氬姟寮€鍙戜腑濡傛灉浣跨敤鍒?WASM 妯″潡锛岄偅涔堝氨闇€瑕佸敖鍙兘鍑忓皯 JS 鍜?WASM 涔嬮棿鐨勬暟鎹紶杈撱€?/p>

鍚屾椂杩欓噷涔熸斁涓€绡囩浉鍏崇殑鏂囩珷渚涘ぇ瀹跺弬鑰冿紝杩欑瘒鏂囩珷涓昏璁?Rust 鐗堟湰鐨?Markdown 瑙ｆ瀽鍣ㄧ紪璇戝埌 WASM 鍚庡拰 JS 鐗堟湰鐨?Markdown 瑙ｆ瀽鍣ㄥ仛鎬ц兘瀵规瘮锛歨ttps://sendilkumarn.com/blog/increase-rust-wasm-performance/

涓昏瀵规瘮鐨勬槸 Rust 鐨?comrak 搴?鍜?JS 鐨?marked 搴?/p>

涓嬮潰璐翠竴涓嬩綔鑰呯殑鏈€缁堝姣旂粨鏋?/p>

鏈粡杩囦紭鍖栫殑 WASM 浠ｇ爜锛學ASM 琛ㄧ幇涓嶄匠

Rust 寮€鍚?lto 浼樺寲鍜屼紭鍖栫骇鍒€?鈥濓紝鎬ц兘鏈€浼?/p>

Rust 寮€鍚?lto 鍜?浼樺寲绾у埆 "z"锛屾€ц兘鏈夋墍闄嶄綆锛屼絾鏄墦鍖呭嚭鏉ョ殑 WASM 妯″潡浣撶Н浼氭洿灏忋€?/p>

浠庢瘮瀵圭粨鏋滀腑鍙互鐪嬪埌锛?WASM 鍦ㄥ紑鍚簡浼樺寲鐨勬儏鍐典笅鎬ц兘姣?JS 瑕佸ソ

浠ｇ爜浣撶Н浼樺寲

WASM 鍐呭瓨妯″瀷

鍦?JS 寮曟搸鍐呴儴锛學ASM 鍜?JS 鍦ㄤ笉鍚岀殑浣嶇疆杩愯銆傝法瓒婂畠浠箣闂寸殑杈圭晫杩涜浜や簰鏄湁鎴愭湰鐨勩€傛祻瑙堝櫒鍐呴儴鐢ㄤ簡涓€浜涙墜娈垫潵闄嶄綆杩欎釜鎴愭湰锛屼絾鏄綋绋嬪簭璺ㄨ秺杩欎釜杈圭晫鏃讹紝杩欎釜琛屼负寰堝揩灏变細鎴愪负绋嬪簭鐨勪富瑕佹€ц兘鐡堕銆備互鍑忓皯杈圭晫璺ㄨ秺鐨勬柟寮忚璁?WASM 绋嬪簭鏄緢閲嶈銆備絾鏄竴鏃︾▼搴忓彉澶э紝灏卞緢闅炬帶鍒躲€備负浜嗛槻姝㈣竟鐣岃法瓒婏紝WASM 妯″潡闄勫甫浜嗗唴瀛樻ā鍨嬨€俉ASM 妯″潡涓殑鍐呭瓨鏄嚎鎬у唴瀛樼殑鍚戦噺銆傜嚎鎬у唴瀛樻ā鍨嬫槸涓€绉嶅唴瀛樺鍧€鎶€鏈紝鍏朵腑鍐呭瓨琚粍缁囧湪涓€涓潡绾挎€у湴鍧€绌洪棿涓紝瀹冧篃琚О涓烘墎骞冲唴瀛樻ā鍨嬨€傜嚎鎬у唴瀛樻ā鍨嬩娇鐞嗚В銆佺紪绋嬪拰琛ㄧず鍐呭瓨鍙樺緱鏇村鏄撱€備絾鏄畠涔熸湁宸ㄥぇ鐨勭己鐐癸紝渚嬪閲嶆柊鎺掑垪鍐呭瓨涓殑鍏冪礌闇€瑕佸ぇ閲忕殑鎵ц鏃堕棿锛屽苟涓斾細娴垂澶ч噺鐨勫唴瀛樺尯鍩熴€傚湪杩欓噷锛屽唴瀛樿〃绀轰竴涓寘鍚湭瑙ｉ噴鏁版嵁鐨勫師濮嬪瓧鑺傚悜閲忋€俉ASM 浣跨敤鍙皟鏁村ぇ灏忕殑鏁扮粍缂撳啿鍖烘潵淇濆瓨鍐呭瓨鐨勫師濮嬪瓧鑺傘€傚垱寤虹殑鍐呭瓨鍙互浠?JS 鍜?WASM 妯″潡涓繘琛岃闂拰鏀瑰彉銆?/p>

WASM 鍐呭瓨鍒嗘瀽

浣跨敤 twiggy 杩欎釜 crate

cargo install twiggy

浣跨敤杩欎釜鍖呭彲浠ョ湅鍒扮浉鍏充唬鐮佸ぇ灏忓崰鐢ㄤ互鍙婂鎵炬煇浜涚紪璇戝櫒涓嶇煡閬撳浣曡繘琛屼紭鍖栫殑鍐椾綑浠ｇ爜銆?/p>

杩欐牱鐨勪竴娈典唬鐮佺紪璇戞垚 WASM 涔嬪悗锛屾垜浠湅涓€涓嬪叾澶у皬锛岃緭鍏ュ懡浠?twiggy top -n 10 ./pkg/index_bg.wasm 瀵硅緭鍑虹殑 pkg/index_bg.wasm 鏂囦欢杩涜浠ｇ爜鍒嗘瀽鍙互鐪嬪埌涓嬮潰鐨勭粨鏋滐紝top -n 10 琛ㄧず鍙栨帓鍚嶅墠鍗佺殑鏂囦欢锛屾垜浠彲浠ョ湅鍒拌繖涓?WASM 鏂囦欢鎬诲叡鍗犱簡 8kb 鐨勫ぇ灏忥紝鎴戜滑鍙互鏍规嵁鐩稿叧鐨勪俊鎭潵杩涜浠ｇ爜浼樺寲锛岃秺澶嶆潅鐨勫簲鐢ㄦ渶鍚庡睍绀虹殑淇℃伅浼氳秺鏄庢湕锛屽洜涓烘垜浠繖閲岀殑浠ｇ爜姣旇緝绠€鍗曪紝灞曠ず鍑烘潵鐨勫熀鏈兘鏄竴浜涘唴缃嚱鏁扮殑浠ｇ爜澶у皬锛屾洿澶氱浉鍏充俊鎭彲浠ユ煡鐪?twiggy 鏂囨。銆?/p>

杩涗竴姝ュ帇缂╀綋绉?/h4>

浣跨敤 wasm-opt杩欎釜 C++ 缂栧啓鐨勫伐鍏峰彲浠ヨ繘涓€姝ュ幓鍘嬬缉 WASM 妯″潡鐨勪綋绉ぇ灏忋€備笅杞藉畬鍚庡皢鍏惰В鍘嬫斁鍒?~/.cargo/bin 鐩綍涓嬶紝鐒跺悗 wasm-opt -h 涔嬪悗鎺у埗鍙拌兘鎵撳嵃鍑哄府鍔╀俊鎭〃绀哄畨瑁呮垚鍔熶簡銆傛垜浠嬁涓婇潰璇村埌鐨?8kb 鐨?WASM 鏂囦欢璇曠潃鍘嬬缉涓€涓嬶紝鍦ㄩ」鐩牴鐩綍涓嬫墽琛?wasm-opt -Oz pkg/index_bg.wasm -o pkg/index_opt_bg.wasm锛孫z 閫夐」浠ｈ〃鏋佽嚧鍘嬬缉澶у皬銆傜劧鍚庢煡鐪嬬敓鎴愮殑 index_opt_bg.wasm 鏂囦欢锛屽帇缂╁墠 7.86 kb锛屽帇缂╁悗 6.12 kb銆傛牴鎹畼缃戠殑浠嬬粛锛屽叾姝ｅ父鐨勫帇缂╂晥鐜囦細鍦?10%~20% 宸﹀彸銆?/p>

WASM 鍖呭彂甯?/h4>

cd 鍒版牴鐩綍涓嬬殑 pkg 鐩綍涓嬶紝鐒跺悗鎵ц npm publish 灏辫兘鎶婂寘鍙戝竷鍒?NPM 浠撳簱涓婏紝鐒跺悗鍦?JS 绔?Webpack 寮€鍚?WASM 瀹為獙鎬ч厤缃紝灏辫兘浣跨敤璧锋潵浜嗭紝鍦ㄤ竴浜涘鏉傜殑璁＄畻鍦烘櫙涓彲浠ヤ娇鐢?WASM 鏉ユ彁楂樺ぇ閲忕殑鎬ц兘锛屼娇鐢?WASM 涔嬪悗鍙互灏嗕竴浜涘鏉傝绠楅€昏緫鏀惧埌瀹㈡埛绔潵鍋氾紝杩欐牱灏辫兘澶熷噺灏戞湇鍔″櫒鐨勫帇鍔涗簡锛岃妭鐪佹湇鍔″櫒鐨勪竴浜涙垚鏈€?/p>

杩涗竴姝ヨ璇?WASM

鍏跺畠WASM 寮€鍙戝伐鍏?/h4>
缂栬瘧鍣ㄥ彲浠ュ皢楂樼骇浠ｇ爜杞崲涓?WASM 浜岃繘鍒朵唬鐮侊紝浣嗘槸鐢熸垚鐨勪簩杩涘埗鏂囦欢閮芥槸缁忚繃浜嗙浉鍏崇殑鍘嬬缉鍜屾€ц兘浼樺寲鐨勩€傚畠寰堥毦鐞嗚В銆佽皟璇曞拰楠岃瘉 (瀹冩槸涓€鍫嗗崄鍏繘鍒舵暟)銆傝浆鎹?WASM 浜岃繘鍒跺埌鍘熷婧愪唬鐮佸緢闅俱€俉ebAssembly 浜岃繘鍒跺伐鍏峰寘 (WABT) 甯姪灏?WASM 浜岃繘鍒惰浆鎹负浜虹被鍙鐨勬牸寮忥紝渚嬪 WASM 鏂囨湰 (WAST) 鏍煎紡鎴?C 璇█鍘熺敓浠ｇ爜銆俉ABT 宸ュ叿鍖呭湪 WASM 鐨勫紑鍙戠敓鎬佷腑寰堥噸瑕侊紝鏄垜浠紑鍙?WASM 涓殑閲嶈涓€鐜€俉ABT锛圵ebAssembly Binary ToolKit) 鏈変互涓嬬殑鑳藉姏锛?/p>

wat2wasm锛氳浆鎹?WAST 鍒?WASM

wasm2wat锛氳浆鎹?WASM 鍒?WAST

wasm2c锛氳浆鎹?WASM 鍒?C 璇█

wast2json锛氳浆鎹?WAST 鍒?JSON

wasm-validate锛氶獙璇?WASM 鏄惁鎸夌収瑙勮寖鏉ユ瀯寤?/p>

wasm-decomplie锛氬弽缂栬瘧 WASM 浠ｇ爜鍒扮被浼间簬 C 璇█鐨勮娉曠殑鍙浠ｇ爜

杩樻湁涓€浜涘叾瀹冪殑鑳藉姏鍙互鍙傝€冧笂闈㈢殑鍦板潃

鈻? WASM 寮€鍙?*妗嗘灦**

寮€鍙戣蒋浠舵椂浣跨敤 WASM 鐨勬柟寮忔湁鍑犵锛?/p>

绾?WASM 瀹炵幇锛屽寘鎷?UI 鍜岄€昏緫
UI 浣跨敤 HTML/CSS/JS锛岄€昏緫璁＄畻浣跨敤 WASM
澶嶇敤鍏跺畠璇█涓殑搴擄紝浣跨敤 WASM 鏉ョЩ妞嶅埌宸叉湁鐨?Web 杞欢涓?/p>

濡傛灉闇€瑕佷娇鐢ㄧ函 WASM 鏉ュ紑鍙戝簲鐢紝涓嶅悓璇█鍜?WASM 寮€鍙戠浉鍏崇殑妗嗘灦锛?/p>

Rust锛歒ew(璇硶绫讳技浜?React)銆丼eed銆丳erseus
Go锛歏ecty銆乂ugu
C#锛欱lazor

铏界劧鐜板湪鍙互鐢?WASM 鏉ョ紪鍐?Web 搴旂敤浜嗭紝浣嗘槸杩樺瓨鍦ㄤ竴瀹氱殑灞€闄愭€э紝灏辨槸鏃犳硶鐩存帴浠?WASM 涓洿鎺ユ搷浣?DOM 鍜屼竴浜涘叾瀹冪殑娴忚鍣?API锛岃繕鏄渶瑕侀€氳繃 FFI (澶栭儴鍑芥暟鎺ュ彛) 鏉ヨ繘琛岃皟鐢?JS 鎻愪緵鐨勮兘鍔涖€?/p>

鈻? WASM 鐩稿叧鐨勫簱

鍥剧墖澶勭悊锛歅hoton锛岃繖鏄竴涓珮鎬ц兘鐨?Rust 缂栧啓鐨勫浘鐗囧鐞嗗簱锛屾敮鎸?Rust 鍘熺敓璋冪敤銆佹祻瑙堝櫒涓娇鐢?WASM 璋冪敤銆佸湪 Node 涓娇鐢?WASM 璋冪敤銆?/p>

闊宠棰戝鐞嗭細ffmpeg.wasm锛孋璇█缂栧啓鐨勯煶瑙嗛澶勭悊宸ュ叿锛岄€氳繃 WASM 绉绘鍒颁簡娴忚鍣ㄥ唴銆?/p>

WASM 杩愯鏃讹細Wasmer锛學asmtime锛屽叾鍙互宓屽叆鍒颁换浣曠紪绋嬭瑷€骞朵笖鍙互鍦ㄥ绉嶈澶囦笂鍘昏繍琛?WASM 銆傛牴鎹?Wasmer 瀹樼綉浠嬬粛锛宷uick.js 寮曟搸鐨?WASM 鐗堟湰涔熷彲浠ュ湪涓€浜涜劚绂讳簬娴忚鍣ㄤ箣澶栫殑鍏跺畠鐜涓婂幓杩愯锛岀敋鑷充綘杩樺彲浠ュ湪娴忚鍣ㄧ殑 V8 Js 寮曟搸涓幓璺?WASM 鐗堟湰鐨?quick.js 寮曟搸锛屾嬁鍏舵潵鍋氫竴浜涘姩鎬佷唬鐮佷笅鍙戠殑浜嬫儏锛屽悓鏃惰揪鎴愬濞冩垚灏便€?/p>

鈻? 鐜版湁鐨勪娇鐢?WASM 缂栧啓鐨勫簲鐢?/strong>

PSPDFKit

鍏朵骇鍝佸畼缃戜粙缁嶄簡浠栦滑鐨?Web 鐗堟湰鏄浣曚娇鐢?WASM 杩涜浼樺寲鐨勶紝鍏朵粙缁嶇殑鐩稿叧鏂囩珷锛氫紭鍖?WASM 鐨勫惎鍔ㄦ€ц兘锛屼粬浠富瑕佸仛鐨勫姞杞戒紭鍖栦富瑕佹槸浠ヤ笅鐨?4 涓柟闈細

鏂囦欢缂撳瓨锛屽洜涓?.wasm 鏂囦欢鍜?.js 鏂囦欢绫讳技锛岄潤鎬佽祫婧愭槸浠庣綉缁滆繘琛屽姞杞界殑锛屾墍浠ュ彲浠ヨ繘琛屾祻瑙堝櫒缂撳瓨锛屽彲浠ュ己鍒舵垨鑰呭崗鍟嗙紦瀛樺埌鏈湴锛岃繖涓竴鑸渶瑕佹湇鍔＄鏉ラ厤鍚堛€?/p>

浣跨敤娴佸疄渚嬪寲

鎶婂凡缁忕紪璇戝ソ鐨?WASM 妯″潡缂撳瓨鍒?IndexDB 涓姞蹇悗缁姞杞介€熷害

浣跨敤瀵硅薄姹犵紦瀛橀鐑疄渚?/p>

杩欐槸浠栦滑缁欏嚭鐨勪竴娈典富瑕佷唬鐮侊細

const MODULE_VERSION = 1; // 浠?IndexDB 鍔犺浇缂撳瓨 const cache = await getCache('WASMCache'); let compiledModule = await cache.get(MODULE_VERSION); // 鍒涘缓涓€涓?WebAssembly.Module 瀹炰緥锛屽鏋滅紦瀛樹腑瀛樺湪鍒欑洿鎺ヨ繑鍥炵紦瀛? if (compiledModule) { return WebAssembly.instantiate(compiledModule, imports); } const fetchPromise = fetch('module.wasm'); let instantiatePromise; // 妫€娴嬫祻瑙堝櫒鏄惁鏀寔 WebAssembly.instantiateStreaming 娴佸紡瀹炰緥鍖? const isInstantiateStreamingSupported = typeof WebAssembly.instantiateStreaming == 'function'; if (isInstantiateStreamingSupported) { instantiatePromise = WebAssembly.instantiateStreaming( fetchPromise, imports, ); } else { // 涓嶆敮鎸佸垯閲囩敤鍘熷鐨勫疄渚嬪寲鏂瑰紡 instantiatePromise = fetchPromise .then((response) => response.arrayBuffer()) .then((buffer) => WebAssembly.instantiate(buffer, imports)); } const result = await instantiatePromise; // 灏嗗姞杞界粨鏋滅紦瀛樺埌 IndexDB 涓? cache.put(MODULE_VERSION, result.module); return result.instance;

鍏朵腑娴佸疄渚嬪寲杩欎釜鏂瑰紡杩樻槸姣旇緝鏂扮殑鐗规€э紝鐩墠鍏煎鎬у苟涓嶆槸鐗瑰埆濂斤紝鎵€浠ラ渶瑕佸仛濂藉厹搴曞鐞嗭紝浠庝笅鍥惧彲浠ョ湅鍒板湪 Safari 15 浠ヤ笂鎵嶆敮鎸併€?/p>

PSPDFKit 浣跨敤娴佸疄渚嬪寲鍜屾湭浣跨敤娴佸疄渚嬪寲锛屽湪 Firefox 涓婃祴璇曠粨鏋滐紝浣跨敤鍚庡揩浜?1.8 鍊嶃€?/p>

璋锋瓕鍦扮悆

鍙互鐪嬪埌璋锋瓕鍦扮悆鐨勫姞杞借繃绋嬩腑闄や簡 WASM 妯″潡鏂囦欢澶栬繕鏈夊ぇ閲忕殑 WebWorker 鐩稿叧鐨勬枃浠讹紝鍙互璇翠负浜嗗湪娴忚鍣ㄨ窇璧疯繖涓ぇ鍨?3D 搴旂敤鏄笅瓒充簡鑻﹀績鐨勩€?/p>

Figma

涓€涓熀浜庢祻瑙堝櫒鐨勫浜哄疄鏃跺崗浣?UI 璁捐宸ュ叿锛屼互鍓嶇殑 Figma 浣跨敤 asm.js 鏉ュ姞蹇枃浠惰鍙栭€熷害锛岀幇鍦ㄦ敼鐢?WASM 鍚庯紝瀹冪殑閫熷害鍙堥鍗囦簡寰堝銆備粠瀹冪殑瀹樼綉涓婏紝涔熸槸鍙互鐬勫埌鏈?WASM 鐨勭棔杩癸紝 wasm.br 缁撳熬鐨勬枃浠舵槸浣跨敤 Brotil 鎶€鏈潵杩涜鍘嬬缉杩囩殑锛屽叾鍘嬬缉鐜囨瘮 gzip 閮借楂橈紝Brotil 鐩墠宸茬粡琚ぇ澶氭暟娴忚鍣ㄥ疄鐜帮紝濡傛灉瀹㈡埛绔０绉版帴鍙?Accept-Encoding: br锛屾湇鍔″櫒灏卞彲浠ヨ繑鍥?wasm.br 鏂囦欢銆?/p>

AutoCAD Web

AutoCAD 鏄竴娆捐嚜鍔ㄨ绠楁満杈呭姪璁捐杞欢锛岀敤浜庣粯鍒朵簩缁村埗鍥惧拰鍩烘湰涓夌淮璁捐锛岀敤浜庡湡鏈ㄥ缓绛戯紝瑁呴グ瑁呮舰锛屽伐涓氬埗鍥撅紝宸ョ▼鍒跺浘锛岀數瀛愬伐涓氾紝鏈嶈鍔犲伐绛夊鏂归潰棰嗗煙銆?/p>

ebay鐨勬潯褰㈢爜鎵弿妗堜緥

澶ф鎰忔€濆氨鏄?eBay 鎯冲湪浠栦滑鐨?H5 椤甸潰涓婂仛鏉″舰鐮佹壂鎻忓姛鑳斤紝璧峰垵鐢ㄧ函 JS 瀹炵幇鐨勭増鏈壂鎻忔垚鍔熺巼鍦?20% 宸﹀彸锛岀劧鍚庝粬浠氨鎶婅嚜鐮旂殑鐨?C++ 缂栧啓鐨勬壂鎻忓簱閫氳繃 WASM 绉绘鍒?Web 涓婁箣鍚庯紝鎴愬姛鐜囧埌浜?60%锛屾渶鍚庝粬浠氨鍘诲皾璇曚簡鐢?C 璇█缂栧啓鐨?ZBar 寮€婧愬簱锛屼娇寰楁垚鍔熺巼鍒颁簡 80%锛岀劧鍚庡墿涓嬬殑 20% 鐨勬儏鍐佃嚜鐮斿簱鍗磋〃鐜板緱鑹ソ锛岀劧鍚庝粬浠氨浣跨敤 Web Worker 灏嗚繖涓よ€呯粨鍚堜娇鐢紝閲囩敤绔炰簤鍙栬儨锛岀湅鍝釜绾跨▼鍏堣繑鍥炵粨鏋滐紝鏈€鍚庢壂鎻忔垚鍔熺巼鍒颁簡 95%锛屽湪鏈€鍚庡啀鎶?JS 鐗堟湰鐨勫姞鍏ュ彟涓€涓嚎绋嬪悗锛屾壂鎻忔垚鍔熺巼鎺ヨ繎浜?100%銆備笂绾夸竴娈垫椂闂村悗锛屼粬浠鏉″舰鐮佹壂鎻忔儏鍐佃繘琛屼簡缁熻锛岀粨鏋滃彂鐜版湁 53% 鐨勬垚鍔熸壂鎻忔潵鑷簬 ZBar锛?4% 鏉ヨ嚜浜庤嚜鐮旂殑 C++ 搴撱€傚墿涓嬬殑 13% 鍒欐潵鑷簬绗笁鏂圭殑 JS 搴撳疄鐜般€傚叾涓€氳繃 WASM 瀹炵幇锛堣嚜鐮?C++ 搴撱€乑bar锛夊緱鍒扮殑鎵弿缁撴灉鍗犳嵁浜嗘€绘垚鍔熸鏁扮殑 87%銆?/p>

TensorflowJS

TensorflowJS鍋氱殑涓€涓?Benchmark 浜鸿劯妫€娴嬭交閲忔ā鍨嬫€ц兘瀵规瘮锛屽湪杩欎釜妯″瀷鍦烘櫙涓嬶紝WASM 璁＄畻鍚庣骞冲潎姣旂函 JS 璁＄畻鍚庣蹇?8锝?0鍊嶅乏鍙筹紝鍜?WebGL 璁＄畻鍚庣姣旓紝鍙栧喅浜庢満鍣ㄨ澶囷紝WASM 鏈変簺璁惧姣?WebGL 蹇紝鏈変簺姣斿畠鎱€備絾褰?WASM 鍚敤浜嗗崟鎸囦护澶氭暟鎹祦(SIMD) 鍜?澶氱嚎绋?threads) 鐗规€э紝閫熷害杩樹細鎻愬崌寰堝銆?/p>

鍏跺畠

褰撶劧杩樻湁寰堝杞欢涔熺敤浜?WASM锛屾瘮濡?B 绔欑殑瑙嗛鎶曠椤点€乄eb 鐗堟湰 PhotoShop 绛夈€?/p>

WASM 鍏锋湁 Native 鎬ц兘鐨勫叧閿?/h4>
SIMD 鍜?澶氱嚎绋嬫槸 WASM 瀹ｇО鍏舵帴杩?Native 鎬ц兘鐨勪袱澶ч噸瑕佺壒鐐广€俉ASM 澶氱嚎绋嬪拰 JS 鐨?Web Worker 涓嶅悓锛屽叾涓嶉渶瑕佸鍒舵暟鎹紝骞堕€氳繃 PostMessage 鍦ㄤ笉鍚岀嚎绋嬩箣闂翠娇鐢ㄤ簨浠跺惊鐜潵杩涜閫氫俊锛屽紑鍚绾跨▼鍚庯紝WASM 鏁版嵁绾挎€у唴瀛樹細浠?ArrayBuffer 鍙樻垚 ShareArrayBuffer锛?鎵€鏈夌殑绾跨▼閮藉彲浠ョ洿鎺ュ幓璇诲啓璇ユ鍐呭瓨涓殑鏁版嵁锛屼笉闇€瑕佸儚 JS 涓€鏍疯€楄垂鏃堕棿杩涜绾跨▼闂寸殑浜嬩欢閫氫俊銆係IMD 鎸囩殑鏄崟鎸囦护澶氭暟鎹祦锛屾瘮濡傜洰鍓嶆祻瑙堝櫒宸茬粡鏀寔鐨?128 浣嶅畾瀹?SIMD锛屽彲浠ョ敤涓€鏉℃眹缂栨寚浠ゆ墽琛?4涓?32 浣嶇殑璁＄畻锛岃€屼笉浣跨敤 SIMD 鍒欓渶瑕佷娇鐢?4鏉℃寚浠ゅ幓鍗曠嫭鎵ц姣忎竴涓?32浣嶈绠椼€?/p>

涓嬮潰鏄竴浜涘埆浜轰娇鐢?SIMD 鐨勬€ц兘娴嬭瘯缁撴灉

WASM 閫傜敤鍜屼笉閫傜敤鍦烘櫙

閫傜敤鍦烘櫙

绉绘 C/C++/Rust/Go 绛夎瑷€寮€鍙戠殑搴撳埌 Web 绔?/li>
闇€瑕侀珮绠楀姏鐨勫満鏅紝濡備笅闈㈣繖浜涳細鍥剧墖/瑙嗛缂栬緫銆佹父鎴忋€佹祦濯掍綋搴旂敤銆佸浘鍍忚瘑鍒€佺洿鎾€佽櫄鎷熺幇瀹炪€丆AD杞欢銆佸姞瀵?瑙ｅ瘑宸ュ叿銆佸彲瑙嗗寲/浠跨湡骞冲彴

灏忓瀷鐗╄仈缃戣澶囥€佷簯璁＄畻骞冲彴绛?/li>

涓嶉€傜敤鍦烘櫙

闇€瑕?JS 鍜?WASM 棰戠箒杩涜鏁版嵁浜や簰鐨勫満鏅?/li>
璁＄畻閲忚緝灏戯紝涓旈渶瑕佽繘琛屽弻鍚戞暟鎹紶閫掞紝姝ゆ椂鐨勬暟鎹紶杈撴椂闂村彲鑳戒細澶т簬閫昏緫鏈韩鐨勬墽琛屾椂闂?/li>

WASM 鏄惁瑕佸幓浠ｆ浛 JavaScript锛?/h4>
绛旀鏄惁锛屽畠涓昏鏄璁捐涓?JavaScript 鐨勪竴涓畬鍠勮ˉ鍏咃紝鑰屼笉鏄唬鏇垮搧銆傚叾瀹冭瑷€缂栧啓鐨勫簱鍙互寰堝ソ鐨勫幓绉绘鍒?Web 涓紝鍜?JavaScript 鐨勫唴瀹圭粨鍚堝埌涓€璧蜂娇鐢紝澶у鏁?HTML/CSS/JavaScript 搴旂敤缁撳悎鍑犱釜楂樻€ц兘鐨?WASM 妯″潡锛堜緥濡傦紝缁樺浘锛屾ā鎷燂紝鍥惧儚/澹伴煶/瑙嗛澶勭悊锛屽彲瑙嗗寲锛屽姩鐢伙紝鍘嬬缉绛夌瓑鎴戜滑浠婂ぉ鍙互鍦?Asm.js 涓湅鍒扮殑渚嬪瓙锛夎兘澶熷厑璁稿紑鍙戣€呭儚浠婂ぉ鎴戜滑鎵€鐢ㄧ殑 JS 搴撲竴鏍峰幓閲嶇敤娴佽鐨?WASM 搴撱€?/p>
WASM 鐩墠鐨勫眬闄愭€?/h4>

鍑℃槸鑳藉浣跨敤 WASM 鏉ュ疄鐜扮殑鍔熻兘锛岀幇闃舵閮藉彲浠ラ€氳繃 JavaScript 鏉ュ疄鐜帮紱鑰岃兘澶熶娇鐢?JavaScript 鏉ュ疄鐜扮殑鍔熻兘锛屽叾涓儴鍒嗚繕鏃犳硶鐩存帴閫氳繃 WASM 瀹炵幇锛堟瘮濡傛搷浣?DOM锛?/p>

澶嶆潅鏁版嵁绫诲瀷闇€瑕佽繘琛岀紪瑙ｇ爜锛屽浜庨櫎鈥滄暟瀛椼€佸瓧绗︿覆鈥濅互澶栫殑绫诲瀷锛堜緥濡傦細瀵硅薄銆佹暟缁勶級闇€瑕佸厛缂栫爜鎴愪簩杩涘埗鍐嶅瓨鏀惧埌 WASM 鐨勫唴瀛樻閲屻€?/p>

涓?JavaScript 鑳舵按浠ｇ爜鐨勪氦浜掑甫鏉ョ殑鎬ц兘鎹熻€楀湪涓€瀹氱▼搴︿笂鎶垫秷浜?WASM 鏈韩甯︽潵鐨勬€ц兘绾㈠埄銆?/p>

WASM 鐨勬湭鏉?/h4>
WASI锛圵ebAssembly System Interface锛夛紝涓€绉嶄娇鐢ㄦ爣鍑嗗寲绯荤粺鎺ュ彛鍦ㄤ换浣曠郴缁熶笂鍙Щ妞嶅湴杩愯 WebAssembly 鐨勬柟娉曘€傞殢鐫€ WASM 鐨勬€ц兘瓒婃潵瓒婇珮锛學ASI 鍙互璇佹槑鏄湪浠讳綍鎿嶄綔绯荤粺涓婅繍琛屼换浣曚唬鐮佺殑鍙鏂瑰紡锛屽叾涓嶅彈鎿嶄綔绯荤粺闄愬埗鍘绘搷浣滅郴缁熺骇鎺ュ彛/璧勬簮锛屽畠鏄爣鍑嗗寲 WASM 鐨勬ā鍧楀拰 Native 瀹夸富鐜涔嬮棿鐨勪竴涓皟鐢ㄦ帴鍙ｏ紝杩欎釜鎺ュ彛鍜屼笂灞傜殑缂栫▼璇█鏄棤鍏崇殑銆傛瘮濡傚湪鍏跺疄鐜颁腑鐨?wasi-libc 鎻愪緵浜?libc 鐨勬敮鎸侊紝鎶婂師鏉ョ殑鍍忓簳灞傚拰鍐呮牳瀵规帴鐨勭郴缁熻皟鐢ㄦ帴鍙ｆ崲鎴愪簡 WASI 鐨?Interface锛岃繖鏍峰ぇ瀹跺彲浠ュ湪 WebAssembly 閲岄潰缁х画璋冪敤绫讳技浜?FileOpen 杩欐牱鐨勭郴缁熻皟鐢紝鍙互鍦ㄦ墍鏈夌殑 Runtime 涓婅繍琛岋紝杈惧埌涓€涓緢濂界殑璺ㄥ钩鍙扮壒鎬с€?/p>
WASM 鐨勫嚭鐜板埌浠婂ぉ杩樹笉澶?10 骞达紝WASM 鍦?2019 骞村彂甯?1.0 鐗堟湰锛?022 骞?4 鏈堝彂甯冧簡 2.0 鐗堟湰鐨勮崏妗堬紝鐩墠杩樺湪钃媰鐨勫彂灞曞綋涓€傞璁″嚑骞村悗锛岄殢鐫€ WASM 鐨勫畬鍠勶紝灏嗕細鍦ㄨ秺鏉ヨ秺澶氱殑鍦烘櫙涓嬫湁鎵€浣滀负銆?/p>
鏈€鍚庤创涓€涓?WASM 鐨勭壒鎬ф敮鎸佸垪琛紝鎴嚦浠婂ぉ锛屽彲浠ョ湅鍒板畾瀹絊IMD锛團ixed-width SIMD锛夈€佸绾跨▼锛圱hreads锛夐兘宸茬粡鏀寔浜嗭紝瀹芥澗 SIMD锛圧elaxed SIMD锛夈€佸熬閮ㄨ皟鐢ㄤ紭鍖栵紙Tail Call锛夌洰鍓嶈繕娌℃敮鎸侊紝杩欎簺閮芥槸涓轰簡鎻愬崌 WASM 瀛楄妭鐮佸湪鐗瑰畾鎯呭喌涓嬬殑鎵ц鎬ц兘锛屾渶缁堜负浜嗗敖鍙兘鍦拌 WASM 鐨勬墽琛屾晥鐜囪兘澶熸渶澶у寲銆?/p>
[鍥剧墖涓婁紶涓?..(image-da7974-1678372748793-29)]

[鍥剧墖涓婁紶涓?..(image-da3436-1678372748790-0)] 鍐欏湪鏈€鍚?/p>
杩欑瘒鏂囩珷鏄敱浜庢垜瀵逛簬 WASM 鐨勫叴瓒ｈ€屽啓涓嬶紝杩欐彁渚涗簡涓€绉嶆湭鏉ュ湪涓氬姟涓亣鍒版€ц兘闂鏃剁殑浼樺寲鎵嬫鍜屾€濊矾銆傚浜庨潪鍓嶇绋嬪簭鍛樻潵璇达紝WASM 涓轰粬浠彁渚涗簡涓€鎵囪繘鍏?Web 鐨勭獥鍙ｏ紱鑰屽浜庡墠绔▼搴忓憳鏉ヨ锛學ASM 灏嗕細鏄墠绔湭鏉ュ熀寤轰腑鐨勯噸瑕佷竴閮ㄥ垎锛屾垜浠浠ュ彂灞曠殑鐪煎厜鍘荤湅寰呬簨鐗╋紝鐜板湪 WASM 杩樺湪钃媰鐨勫彂灞曚腑锛屽嵆浣垮彧鏄姳鐫€瀛︿範鐨勫績鎬佸幓浜嗚В锛屾垜浠篃浠嶈兘浠庤繖涓涔犺繃绋嬪綋涓鍒板緢澶氳秴鍑烘墍瀛︿範浜嬬墿鏈韩鐨勯澶栫煡璇嗐€?/p>
鍙傝€?/h4>

銆奝ratical WebAssembly銆?/p>

銆奧ebAssembly 鍏ラ棬銆?/p>