”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > WebAssembly:您不知道自己需要的超能力

WebAssembly:您不知道自己需要的超能力

发布于2024-11-08
浏览:810

WebAssembly: The Superpower You Didn’t Know You Needed

如果你在开发圈里潜伏了足够长的时间,你可能听说过关于 WebAssembly(或 Wasm,因为开发者喜欢缩写词,就像我喜欢的那样)咖啡)。

它曾经被誉为“下一件大事”,这是一款闪亮的新工具,承诺将您的浏览器从一个不起眼的文档查看器转变为一个成熟的超级英雄。好吧,WebAssembly 已经存在几年了,你猜怎么着?它仍然在这里,兑现着这一承诺。 JavaScript 并没有退居二线,但 Wasm 一直在后台默默地做着一些繁重的工作,它已经成为 Web 性能游戏中坚实的合作伙伴。

那么,WebAssembly 到底是什么?

想象一下:JavaScript 和 C 出去喝酒,深入讨论速度和效率,然后繁荣 - WebAssembly 诞生了? Wasm 是一种低级的、类似汇编的语言,可以在浏览器中运行,旨在使 Web 应用程序更快、更高效,并且能够运行您从未认为浏览器可以处理的事情。可以将其视为您的浏览器,其连帽衫下有一个六块腹肌,准备好提升比 JavaScript 所能承受的更多的能力。

用简单的英语? WebAssembly 是一种编译代码格式,执行速度几乎与本机机器代码一样快,它旨在与 JavaScript 一起工作,而不是取代它。所以不,你不必将所有来之不易的 JS 技能都扔进垃圾桶。

为什么你应该关心? (或者:我们为什么要对此感到好奇?)

网络非常适合在 Twitter 上展示猫模因和无限滚动,但从历史上看,它在处理任何过于激烈的事情方面表现不佳 - 比如 3D 游戏、视频编辑或实时模拟。这就是 Wasm 介入的地方,看起来像一个超级英雄,准备将你的代码从低效的魔掌中拯救出来?

以下是 WebAssembly 带来的功能:

  • 速度:Wasm 运行真的快。就像,快速“缩短加载时间”。就像,“突然间,你为自己让 JavaScript 陷入困境而感到难过”。
  • 语言灵活性:您不必再将自己限制在 JavaScript 上。您可以使用 C、C、Rust 等语言进行编码。 WebAssembly 不在乎——它会将所有这些转化为浏览器中超快的性能。这是编程语言的瑞士:中立,但秘密强大。
  • 浏览器的超能力:想要直接在浏览器中运行 3D 游戏、CAD 软件或机器学习模型,而不让计算机在后台运行? Wasm 使之成为可能。您的浏览器不再是“文字处理器”,而是变得更像“钢铁侠套装”。

“但我是一名 Web 开发人员,JavaScript 就是我的选择!”

首先,你不必与 JavaScript 分手。 Wasm 玩得很好吗?将 Wasm 视为 JavaScript 的肌肉伙伴,当 JS 在运行几个循环后变得喘不过气来时,它可以帮助解决繁重的工作。

事实上,WebAssembly 确实可以让你的 JS 代码更好。如果您有一些对性能要求较高的任务(例如复杂的计算、文件解析或视频渲染),您可以将它们交给 Wasm,并让它处理繁重的工作,而 JS 则专注于其通常的 DOM 操作魔法。

JavaScript 和 WebAssembly 之间的关系就像超级英雄团队一样,聪明的人 (JS) 和强壮的人 (Wasm) 共同努力拯救世界。两者都没有被取代——它们只是在一起变得更好。比如花生酱和果冻。或者制表符和空格(开玩笑,别引发口水战)。

“好吧,好吧……但是我如何开始使用 WebAssembly?”

第一步:呼吸。 Wasm 可能听起来很吓人,但它并不难使用 - 特别是如果您曾经使用 C、C 或 Rust 等编译语言编写过。如果你还没有?好吧,恭喜! WebAssembly 是一个很好的借口,可以帮助您最终学习一直回避的令人生畏的语言。

第2步:获取可以生成Wasm的编译器。有很多工具可以获取您的代码(C、C、Rust 等)并将其编译为 Wasm。 Emscripten 是 C/C 项目的热门选择,而 wasm-pack 非常适合 Rust 项目。

第三步:将其放入浏览器中。将代码编译到 WebAssembly 后,您可以将其加载到浏览器中并开始利用这些令人愉悦的性能提升。不过,Wasm 并不引人注目——它旨在与 JavaScript 协调工作。您的 JavaScript 代码将调用 WebAssembly 函数,就像它们只是该组的一部分一样。没有剧情。

第四步:利润。或者,至少,坐下来享受观看您的网络应用程序突破性能瓶颈的过程,就像它有一个氮气按钮一样。

WebAssembly 会统治世界吗?

听着,我们并不是说 WebAssembly 会让 JavaScript 过时,或者你的浏览器会因为运行近乎本机代码的强大力量而开始自发燃烧。但是……也许

实际上,WebAssembly 的未来更多的是补充现有的 Web 生态系统,而不是取代任何东西。这是一个工具。是的,这是一个强大的工具 - 但它只是为了提供帮助,而不是为了推翻 JavaScript 君主制。虽然 Wasm 成为整个网络的主流可能还需要几年的时间,但它已经在游戏、多媒体应用程序甚至区块链领域掀起了波澜。是的,区块链。因为显然,没有 Wasm 不会去的地方。

最后的想法:Wasm 是真正的交易

如果 WebAssembly 是一个人,那么这个朋友就会突然出现,帮助你搬动沉重的家具,然后离开时不问披萨。它在这里做肮脏的工作:繁重的计算、性能优化,以及将浏览器转变为一个强大的引擎,其功能比我们想象的要多得多。

因此,如果您希望突破 Web 应用程序的极限,或者只是想让您的浏览器感觉像是经过了一些超级英雄训练,那么 WebAssembly 会为您提供支持?请记住,强大的功能会带来出色的编译时间?.

关于我

嗨,我是programORdie,这是我的第一篇真正的文章,我希望得到您的反馈,所以请随时发表评论!
您还可以查看我的项目或访问 GitHub:programORdie2.

希望您喜欢这篇文章,祝您有美好的一天!?

版本声明 本文转载于:https://dev.to/programordie/webassembly-the-superpower-you-didnt-know-you-needed-c9o?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在无序集合中为元组实现通用哈希功能?
    如何在无序集合中为元组实现通用哈希功能?
    在未订购的集合中的元素要纠正此问题,一种方法是手动为特定元组类型定义哈希函数,例如: template template template 。 struct std :: hash { size_t operator()(std :: tuple const&tuple)const {...
    编程 发布于2025-05-01
  • 在程序退出之前,我需要在C ++中明确删除堆的堆分配吗?
    在程序退出之前,我需要在C ++中明确删除堆的堆分配吗?
    在C中的显式删除 在C中的动态内存分配时,开发人员通常会想知道是否需要手动调用“ delete”操作员在heap-exprogal exit exit上。本文深入研究了这个主题。 在C主函数中,使用了动态分配变量(HEAP内存)的指针。当应用程序退出时,此内存是否会自动发布?通常,是。但是,即使在这...
    编程 发布于2025-05-01
  • 如何使用Depimal.parse()中的指数表示法中的数字?
    如何使用Depimal.parse()中的指数表示法中的数字?
    在尝试使用Decimal.parse(“ 1.2345e-02”中的指数符号表示法表示的字符串时,您可能会遇到错误。这是因为默认解析方法无法识别指数符号。 成功解析这样的字符串,您需要明确指定它代表浮点数。您可以使用numbersTyles.Float样式进行此操作,如下所示:[&& && && ...
    编程 发布于2025-05-01
  • Go语言垃圾回收如何处理切片内存?
    Go语言垃圾回收如何处理切片内存?
    Garbage Collection in Go Slices: A Detailed AnalysisIn Go, a slice is a dynamic array that references an underlying array.使用切片时,了解垃圾收集行为至关重要,以避免潜在的内存泄...
    编程 发布于2025-05-01
  • Java字符串非空且非null的有效检查方法
    Java字符串非空且非null的有效检查方法
    检查字符串是否不是null而不是空的if (str != null && !str.isEmpty())Option 2: str.length() == 0For Java versions prior to 1.6, str.length() == 0 can be二手: if(str!= n...
    编程 发布于2025-05-01
  • 如何使用替换指令在GO MOD中解析模块路径差异?
    如何使用替换指令在GO MOD中解析模块路径差异?
    在使用GO MOD时,在GO MOD 中克服模块路径差异时,可能会遇到冲突,其中3个Party Package将另一个PAXPANCE带有导入式套件之间的另一个软件包,并在导入式套件之间导入另一个软件包。如回声消息所证明的那样: go.etcd.io/bbolt [&&&&&&&&&&&&&&&&...
    编程 发布于2025-05-01
  • 如何避免Go语言切片时的内存泄漏?
    如何避免Go语言切片时的内存泄漏?
    ,a [j:] ...虽然通常有效,但如果使用指针,可能会导致内存泄漏。这是因为原始的备份阵列保持完整,这意味着新切片外部指针引用的任何对象仍然可能占据内存。 copy(a [i:] 对于k,n:= len(a)-j i,len(a); k
    编程 发布于2025-05-01
  • 为什么HTML无法打印页码及解决方案
    为什么HTML无法打印页码及解决方案
    无法在html页面上打印页码? @page规则在@Media内部和外部都无济于事。 HTML:Customization:@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bo...
    编程 发布于2025-05-01
  • 如何连接表格中带逗号分隔值的列?
    如何连接表格中带逗号分隔值的列?
    使用逗号分隔值数据库归一化对于有效的数据管理至关重要,但是有时,项目可能需要以非正相化形式处理遗产数据。 This article explores a technique for joining two tables with comma-separated values in a given ...
    编程 发布于2025-05-01
  • 如何将来自三个MySQL表的数据组合到新表中?
    如何将来自三个MySQL表的数据组合到新表中?
    mysql:从三个表和列的新表创建新表 答案:为了实现这一目标,您可以利用一个3-way Join。 选择p。*,d.content作为年龄 来自人为p的人 加入d.person_id = p.id上的d的详细信息 加入T.Id = d.detail_id的分类法 其中t.taxonomy =...
    编程 发布于2025-05-01
  • 为什么不使用CSS`content'属性显示图像?
    为什么不使用CSS`content'属性显示图像?
    在Firefox extemers属性为某些图像很大,&& && && &&华倍华倍[华氏华倍华氏度]很少见,却是某些浏览属性很少,尤其是特定于Firefox的某些浏览器未能在使用内容属性引用时未能显示图像的情况。这可以在提供的CSS类中看到:。googlepic { 内容:url(&#...
    编程 发布于2025-05-01
  • Laravel Blade中使用Bootstrap分页教程
    Laravel Blade中使用Bootstrap分页教程
    [2 本教程演示了如何在Laravel Blade应用程序中实现Bootstrap分页。我们将创建一个应用程序,该应用程序填充了一个具有10,000个电影记录的数据库,并使用Bootstrap的Styling和Laravel的Blade Templating Engine将它们显示在分页列表中。 ...
    编程 发布于2025-05-01
  • After Effects脚本项目与合成指南
    After Effects脚本项目与合成指南
    [2 内容 介绍 应用 项目 文件夹和构图 例子 快速提示 结论 介绍 在本文中,我将使用脚本浏览效果项目和作品的一些基本知识。我将参考脚本指南中一些最有用的部分,并展示一些实用的实践示例。 开始开始。 应用 应用程序 应用程序引用应用程序效果本身的应用程序。...
    编程 发布于2025-05-01
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-05-01
  • 版本5.6.5之前,使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制?
    版本5.6.5之前,使用current_timestamp与时间戳列的current_timestamp与时间戳列有什么限制?
    在时间戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源于遗留实现的关注,这些限制需要对当前的_timestamp功能进行特定的实现。 创建表`foo`( `Productid` int(10)unsigned not n...
    编程 发布于2025-05-01

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3