TypeScript & WebAssembly

WASM

(module
(func (param $lhs i32) (param $rhs i32) (result i32)
local.get $lhs
local.get $rhs
i32.add))
function computeSum(arr: i32[]): i32 {
var sum = 0
arr.forEach(value => {
sum += value // fails
})
return sum
}
var sum: i32 // becomes a WebAssembly Global
function computeSum(arr: i32[]): i32 {
sum = 0
arr.forEach(value => {
sum += value // works
})
return sum
} //..................
function computeSum(arr: i32[]): i32 {
var sum = 0
for (let i = 0, k = arr.length; i < k; ++i) {
sum += arr[i] // works
}
return sum
}

npm

$ npm init

$ npm i @assemblyscript/loader
$ npm i -D assemblyscript $ npx asinit . $ npm run asbuild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p class="title">Web Assembly Example</p> <script>
WebAssembly.instantiateStreaming(fetch("./build/optimized.wasm"), {
main: {
sayHello() {
console.log("Hello from WebAssembly!");
}
},
env: {
abort(_msg, _file, line, column) {
console.error("abort called at main.ts:" + line + ":" + column);
}
},
}).then(result => {
const exports = result.instance.exports;
document.getElementById("container").textContent = "Result: " + exports.add(19, 23);
}).catch(console.error); </script>
<p id="container"></p>
</body>
</html>

refs

https://blog.bitsrc.io/typescript-to-webassembly-the-what-the-how-and-the-why-3916a2561d37

https://webassembly.org/

https://www.assemblyscript.org/

https://bit.dev/

https://github.com/teambit/bit



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


TypeScript & WebAssembly的更多相关文章

  1. WebAssembly学习(三):AssemblyScript - TypeScript到WebAssembly的编译

    虽然说只要高级语言能转换成 LLVM IR,就能被编译成 WebAssembly 字节码,官方也推荐c/c++的方式,但是让一个前端工程师去熟练使用c/c++显然是有点困难,那么TypeScript ...

  2. WebAssembly完全入门——了解wasm的前世今身

    前言 接触WebAssembly之后,在google上看了很多资料.感觉对WebAssembly的使用.介绍.意义都说的比较模糊和笼统.感觉看了之后收获没有达到预期,要么是文章中的例子自己去实操不能成 ...

  3. 初探WebAssembly

    1.前言 参加完2018年上海的QCon大会,想到了会议中来自Microsoft的朱力旻大佬讲的WebAssembly,感触颇深. 我之前完全没有了解过WebAssembly,之前没有了解的原因也很简 ...

  4. JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript 之间转换

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  5. 使用Typescript实现依赖注入(DI)

    前言DI总是和ico相辅相成的,如果想对DI有更多的了解,可以移步我的另一篇文章 依赖注入(DI)和控制反转(IOC),再次我就不多做赘述了. 前几天看见一道面试题,今天借这个话题想跟大家分享一下: ...

  6. WebAssembly是解决JavaScript 痼疾的银弹?

    写在前面 <没有银弹>是 Fred Brooks 在 1987 年所发表的一篇关于软件工程的经典论文.该论文的主要论点是,没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍. ...

  7. webassembly

    为什么需要 WebAssembly 自从 JavaScript 诞生起到现在已经变成最流行的编程语言,这背后正是 Web 的发展所推动的.Web 应用变得更多更复杂,但这也渐渐暴露出了 JavaScr ...

  8. 微软下一代Web前端技术Blazor(C#编译为WebAssembly)

    W3C Web标准化机构在制定下一代的网页技术WebAssembly.目前版本是1.0,主流浏览器的最新版本都已经支持.其特点是浏览器可以执行编译后的二进制程序,不需要像之前的程序,浏览器下载Java ...

  9. 翻译:WebAssembly简介:我们为什么要关心这个技术? ​​​​

    原文: https://tomassetti.me/introduction-to-webassembly/ WebAssembly简介:我们为什么要关心这个技术? ​​​​ 在对抗js的伟大战斗中有 ...

随机推荐

  1. top命令详解-性能分析

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,常用于服务端性能分析. top命令说明 [www.linuxidc.com@linuxidc-t-tomcat-1 ...

  2. HA工作机制

    HA工作机制 HA:高可用(7*24小时不中断服务) 主要的HA是针对集群的master节点的,即namenode和resourcemanager,毕竟DataNode挂掉之后影响 不是特别大,重启就 ...

  3. Python学习【第2篇】:循环

    For循环 pass while 循环 pass 练习题: 1.使用while循环输入 1 2 3 4 5 6     8 9 10,不输出7 n = 1while n< 11: if n == ...

  4. LibreOJ #10047

    应同机房某大佬的要求来写这篇题解 Description 给定一个字符串 \(S\) 和一个数 \(K\),要求求出 \(S\) 的所有形似 \(A+B+A\) 的子串数量,其中 \(\mid A\m ...

  5. tricks - 实现

    笔记总页面 目录 负下标 动态开点 花括号 负下标 有的时候我们需要存一些负的东西,比如我就只要一个 \(-1\),或者说值域是 \([-10^6,10^6]\),而我懒得写平移 (写平移不仅麻烦,而 ...

  6. loj10006数列分段

    题目描述 对于给定的一个长度为 N 的正整数数列 A,现要将其分成连续的若干段,并且每段和不超过 M(可以等于 M),问最少能将其分成多少段使得满足要求. 输入格式 第一行包含两个正整数 N,M表示了 ...

  7. Spark 将DataFrame所有的列类型改为double

    Spark 将DataFrame所有的列类型改为double 1.单列转化方法 2.循环转变 3.通过:_* 1.单列转化方法 import org.apache.spark.sql.types._ ...

  8. equals()方法和hashCode()方法

    1.equal()方法 2.hasCode()方法 2.1 Object的hashCode() 2.2 hashCode()的作用 3.String中equals()和hashCode()的实现 4. ...

  9. HarmonyOS三方件开发指南(8)——RoundedImage

    [小年答谢,新春送礼]免费抽取1000元京东卡+更多新春好礼~查看详情>>> 目录: 1. RoundedImage组件功能介绍 2. RoundedImage使用方法 3. Rou ...

  10. python中变量值改变地址也会跟着改变

    先上图. 图里,分别用三个整数进行了验证.可以发现当a和b值相同时,a与b地址也一致.改变a的值,a的地址也跟着改变了. 原因 python的宗旨之一,万物皆对象.(单身狗狂喜) 而对象又被分为可变对 ...