」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > WebAssembly:您不知道自己需要的超能力

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

發佈於2024-11-08
瀏覽:525

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]刪除
最新教學 更多>
  • JavaScript 如何控制逾時執行並確定剩餘時間?
    JavaScript 如何控制逾時執行並確定剩餘時間?
    JavaScript 中的暫停和恢復逾時使用 JavaScript 時,可能需要控制非同步操作的流程,例如逾時。在這裡,我們探索暫停和恢復活動逾時的方法,以及檢索當前逾時的剩餘時間。 暫停和恢復逾時要暫停逾時,您可以使用包裝器攔截 window.setTimeout 呼叫並提供必要功能的函數。包裝函...
    程式設計 發佈於2024-11-08
  • 提高 Spring Boot 應用程式的效能 - 第一部分
    提高 Spring Boot 應用程式的效能 - 第一部分
    啟動Spring Boot應用程式時,我們通常使用啟動器提供的預設設置,這對於大多數情況來說已經足夠了。但是,如果我們需要效能,則可以進行具體調整,如本文第一部分所示。 將 Tomcat 替換為另一個 servlet 容器 應用程式web、RESTFul,使用Spring MVC,...
    程式設計 發佈於2024-11-08
  • 如何在 PHP 中高效合併關聯數組並實現健全的單元測試?
    如何在 PHP 中高效合併關聯數組並實現健全的單元測試?
    在 PHP 中合併關聯數組:高效選項和單元測試策略在 PHP 中合併關聯數組:高效選項和單元測試策略簡介組合關聯數組是 PHP 程式設計中的常見任務。在本文中,我們將探討將兩個或多個關聯數組合併為單一內聚數組的最佳實踐。我們還將討論有效的方法並提供詳細的單元測試策略。 array_merge 與&q...
    程式設計 發佈於2024-11-08
  • 抽象:一種程式化的思考方式
    抽象:一種程式化的思考方式
    「為什麼程式設計師拒絕起床?他們陷入了太多的抽象層!」 在程式設計中,就像在生活中一樣,我們經常需要簡化複雜的事情以使它們更易於管理。想像一下,試圖向從未見過電腦的人解釋互聯網,您不會從談論伺服器和協定開始。相反,你可以使用類比、故事或簡化版本來傳達這個想法。這就是程式設計中抽象的意義所在:簡化複雜...
    程式設計 發佈於2024-11-08
  • 您可以將內聯腳本與 JavaScript 中的「src」屬性結合嗎?
    您可以將內聯腳本與 JavaScript 中的「src」屬性結合嗎?
    JavaScript 中具有SRC 屬性的內聯腳本在JavaScript 中,通常使用 標籤包含腳本,其中src 屬性指定外部腳本檔案。然而,有時會想知道是否可以將內聯腳本與 src 屬性組合起來。 規則官方行為受 HTML 4.01 規範管轄,該規範聲明 src 屬性優先於 標記的主體。這意味著...
    程式設計 發佈於2024-11-08
  • 不可變資料結構:ECMA 4 中的記錄和元組
    不可變資料結構:ECMA 4 中的記錄和元組
    不可變資料結構:ECMAScript 2024 中的新功能 ECMAScript 2024 引入了幾個令人興奮的更新,但對我來說最突出的一個功能是引入了不可變資料結構。這些新結構——記錄和元組——改變了 JavaScript 中資料管理的遊戲規則。它們提供了一種令人滿意的方式來保持...
    程式設計 發佈於2024-11-08
  • 如何在 PHP 中為註冊用戶自訂 URL?
    如何在 PHP 中為註冊用戶自訂 URL?
    在PHP 中為註冊用戶設定自訂URL對於電子商務平台來說,為每個用戶提供唯一的URL 對於展示他們的產品至關重要單獨的產品。透過產生單獨的網址(例如 www.seloncart.com/customername),您可以顯示客戶的特定產品。為此,請按照下列步驟操作:設定伺服器路由: 修改伺服器設定以...
    程式設計 發佈於2024-11-08
  • 我如何用 Python 建立 QR 碼產生器
    我如何用 Python 建立 QR 碼產生器
    這將是一篇簡短的文章,介紹我如何在 Python 中建立一個簡單的二維碼產生器 對於此步驟,您需要使用 qrcode 函式庫:https://pypi.org/project/qrcode/ 建立專案資料夾後我所做的第一步就是建立一個虛擬環境。 Python 中的虛擬環境只是電腦上另一個獨立的工作區...
    程式設計 發佈於2024-11-08
  • 如何在 PHP 中驗證整數資料型態?
    如何在 PHP 中驗證整數資料型態?
    在驗證 PHP 中的整數資料類型在 PHP 中處理數位資料時,確定變數是否表示整數至關重要。為了解決這個問題,通常會使用 is_int() 函數。然而,它的行為有時可能是意想不到的,導致混亂。 為了修正這個問題,我們引入了驗證整數資料型別的替代方法:FILTER_VALIDATE_INT使用該方法,...
    程式設計 發佈於2024-11-08
  • 為什麼 DOMSubtreeModified 在 DOM Level 3 中被棄用以及替代方案是什麼?
    為什麼 DOMSubtreeModified 在 DOM Level 3 中被棄用以及替代方案是什麼?
    在DOM Level 3 中棄用DOMSubtreeModified 事件DOMSubtreeModified 事件曾經是跟踪文檔子樹中更改的基本元素,現在已被跟踪在DOM level 3 中已過時。了解這種棄用背後的基本原理並確定合適的替代方案至關重要。 DOM Level 3 規範對 DOMSu...
    程式設計 發佈於2024-11-08
  • 將 PDO 連線設為 NULL 是否真正關閉連線並釋放資源?
    將 PDO 連線設為 NULL 是否真正關閉連線並釋放資源?
    關閉PDO連線在PHP中,有兩種​​流行的資料庫連線介面:MySQLi和PDO。雖然兩者的用途相似,但它們處理連接關閉的方式不同。 MySQLi 需要明確關閉函數呼叫來釋放連接:$this->connection->close();相反,PDO 使用空賦值來終止連線:$this->...
    程式設計 發佈於2024-11-08
  • 動態資料管理:了解 Vue.js 中的資料屬性
    動態資料管理:了解 Vue.js 中的資料屬性
    Vue.js 是用於開發現代 Web 應用程式的最受歡迎的 JavaScript 框架之一。它提供了一種創建互動式動態應用程式的有效方法。在本文中,我們將深入研究 Vue.js 中的 data 屬性,並探討它的工作原理、為什麼要使用它以及圍繞它的最佳實踐。 什麼是資料屬性? 在Vu...
    程式設計 發佈於2024-11-08
  • 如何有效地檢查 Python 字串中是否存在列表元素?
    如何有效地檢查 Python 字串中是否存在列表元素?
    檢查Python 中字串中清單元素的存在Python 程式設計中的一個常見任務是驗證字串是否包含給定的元素列表。傳統方法採用 for 循環,如下面的程式碼所示:extensionsToCheck = ['.pdf', '.doc', '.xls'] for extension in extensio...
    程式設計 發佈於2024-11-08
  • \'window.JSON\' 如何在現代瀏覽器中提供本機 JSON 支援?
    \'window.JSON\' 如何在現代瀏覽器中提供本機 JSON 支援?
    瀏覽器原生JSON 支援:window.JSON 物件瀏覽器原生JSON 支援:window.JSON 物件window.JSON 物件為現代Web 瀏覽器提供原生JSON 解析與序列化功能,實現結構化資料的高效能、安全處理。本文探討了該物件的詳細信息,包括其支援的方法和瀏覽器相容性。 window...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3