来谈谈WebAssembly是个啥?为何说它会影响每一个Web开发者?

什么是WebAssembly?它在前端开发中有什么用途? WebAssembly(简称Wasm)是一种新型的二进制指令格式,旨在为现代Web浏览器提供高性能、跨平台的执行环境。它允许开发者使用多种编程语言(如C、C++、Rust等)编写代码,并将其编译为WebAssembly模块,然后在浏览器中运行。这种格式的设计目标是接近原生性能,同时保持高效、安全和可移植性。 阅读详情

作者:link

原文:What is WebAssembly and why it affects web developers!

你听说过WebAssembly吗?这是由Google, Microsoft, Mozilla,Apple等几家大公司合作发起的一个关于面向Web的通用二进制和文本格式的项目。
现在就让我们来看看WebAssembly到底是个啥?为什么它的出现和未来的发展跟我们每个人都息息相关,即使你并不是一个程序猿/媛~

至少在某种程度上,它将改变Web生态。

helloworld

JavaScript–Web世界的汇编语言

我们有许多面向Web应用的开发规范,这些设计优良的规范让Web开发者们的工作变得更加的简单。我们很难想象自己所创建和网站或应用没有任何规则、编程语言、框架和开发理念可以遵循。

而将所有这些事情组合到一起的Web规范有一个众所周知的名字:JavaScript!

JavaScript基本上已经成为了Web平台的标准开发语言。而随着越来越多的软件成为了Web应用,JavaScript更是获得了极大的发展。

但在过去几年,我们看到越来越多的项目问世,它们试图通过开发编译程序,将其他语言代码转化为 JavaScript,以此让开发者克服 JavaScript 自身存在的一些短板。其中一些项目专注于给编程语言增加新的功能,比如微软的 TypeScript和Google的Dart,或是加快 JavaScript 的执行速度,例如 Mozilla 的 asm.js 项目和Google的PNaCI。

在默认环境下,JavaScript 文档其实就是简单的文本文件,先是从服务器下载,然后由浏览器中的 JavaScript 引擎解析并编译。用户可以通过Ajax技术在浏览网页时与服务器进行通信。

这里写图片描述

在浏览器端目前是使用JavaScript来实现与用户进行动态交互等功能,虽然很多JavaScript框架都致力于性能优化,但是一套基于字节码的系统仍然会有更快更好的性能表现。

所以,WebAssembly到底是个什么鬼?

WebAssembly是一种新的字节码格式。它的缩写是".wasm",.wasm 为文件名后缀,是一种新的底层安全的二进制语法。。它被定义为“精简、加载时间短的格式和执行模型”,并且被设计为Web 多编程语言目标文件格式。
这意味着浏览器端的性能会得到极大提升,它也使得我们能够实现一个底层构建模块的集合,例如,强类型和块级作用域。(原文:And it gives us access to a set of low level building blocks, such as a range of types and operations.这句话我实在不知如何翻译。。。)
不过别搞错了,这并不意味着WebAssmbly是为了取代 JavaScript而生哟~
就像Bjarne Stroustup说的:“JS会活得很好,因为世界上只有两种类型的语言:一类语言被人们不断的地吐槽,而另一类语言压根儿没人用!”而Eric Elliott认为:“最好不要把WebAssembly仅仅当做一门编程语言,实际上它更像是一个编译器。”

从asm.js到WebAssembly?

asm.js是一个JavaScript的一个严格的子集,可以被用来作为一个底层的、高效的编译器目标语言。asm.js提供了一个类似于C/C++虚拟机的抽象实现,包括一个可有效负载和存储的大型二进制堆、整型和浮点运算、高阶函数定义、函数指针等。

asm.js的思想是使用它所规定的方法来编写JavaScript代码,支持asm.js的引擎会将代码转变为十分高效的机器码。如果你是将C++代码编译为asm.js,将在浏览器端获得极大的性能提升。
webassembly-asm-javascript
webassembly相较于asm.js的优势主要是涉及到性能方面。根据WebAssembly FAQ的描述:在移动设备上,对于很大的代码库,asm.js仅仅解析就需要花费20-40秒,而实验显示WebAssembly的加载速度比asm.js快了20倍,这主要是因为相比解析 asm.js 代码,JavaScript 引擎破译二进制格式的速度要快得多。

这玩意儿到底好在哪?

你很可能会问:“为啥所有人都在谈论WebAssembly?”这是因为WebAssembly对于JS来说绝对是一个巨大的改进,但我们常常会问自己:“这样,就够了吗?”当然不是,WebAssembly对于浏览器来说也有着非同一般的意义。
支持WebAssembly的浏览器可以识别二进制格式的文本,它有能力编译比JS文本小得多的二进制包。
这将给web应用带来类似与本地应用的性能体验!这四不四听起来很棒啊?!如果浏览器不得不解析完整的JS代码,这将会耗去好多时间(特别是在移动平台上),而浏览器对WebAssembly格式的解码速度显然要快得多得多得多:)
下面献上JS作者BE大神的演讲视频地址(油管,需翻墙):Brendan Eich on JavaScript Taking Both the High and Low Roads - O'Reilly Fluent 2014

都有谁入了WebAssembly的坑?

包括Google, Microsoft,Mozilla只是这一长串名单中的少数几家公司。项目带头人们发起了WebAssembly Community Group这一社区,这个团队的愿景是“在一种新的,轻量的web编码格式的基础上,促进浏览器厂商们的合作.”
不过,WebAssembly项目还只是刚刚启动,虽然它有一个美妙的开头,但在WebAssembly成为一个大众认可的web标准之前,它还有很长的路要走。

为啥这玩意会影响每一个web开发者

因为webassembly让开发者有能力选择之前那些不能用来开发web应用的语言来进行web开发,或者他们也可以继续使用简单易用的JavaScript!
W3C WebAssembly Community group给出了一些WebAssembly的用例,它们展示了WebAssembly如何使得web开发者更加轻松的工作:

  • 一些执行效率更高的语言可以被编译成在Web平台上执行的代码。
  • 提供了在浏览器端的开发者工具
  • 更加快捷的企业级应用客户端(例如:数据库)

WebAssembly的用途很多。举几个栗子:WebAssembly可以被嵌入到已经开发好的JavaScript/HTML代码中;或者某款应用的主要框架可以使用 WebAssembly 模块(如动画、可视化和压缩等),而用户界面仍然可以主要使用 JavaScript/HTML语言编写。

精简的代码,更好的性能,更少的bug?

据WebAssembly的开发团队描述,使用WebAssembly意味着更少的原代码。与asm.js相比,它减少了大约25%的代码量。虽然这仅仅是一个原型。
现在你可能很想知道如何获取关于WebAssembly的最新进展,下面这些资源将会对你很有帮助:


Python 进入 WASM 时代:WebAssembly 会成为 Python 的下一个突破点吗? WebAssembly 是一种新兴的技术,旨在让高性能的代码能够在浏览器中运行。与传统的 JavaScript 不同,WASM 是一种二进制指令格式,设计上更加紧凑且执行效率更高。开发者可以使用多种语言(如 C、C++ 和 Rust)编译为 WASM 文件,并在浏览器中直接运行这些代码。高性能:WASM 的执行速度接近原生代码。跨平台性:由于 WASM 是一种抽象化的字节码,因此它可以运行在任何支持 WASM 的环境中。安全性:WASM 在沙盒环境中运行,确保了系统的安全性和稳定性。 阅读详情

相关推荐

WebAssembly相关技术介绍

本文将介绍Wasm的背景、工具栈、研发示例、工程应用以及未来发展。

leyang0910的博客 2153

WebAssembly 是啥东西

WebAssembly (通常缩写为 Wasm) 是一种为了在网页浏览器中高效执行代码而设计的技术。它不是一种编程语言,而是一种编译目标,允许开发者用高级语言(如 C、C++、Rust 和其他)编写代码,然后将这些代码编译成 WebAssembly。编译后的代码可以在网页浏览器中以接近原生性能运行,无论使用者的操作系统是什么。

chunmiao3032的专栏 4315

反爬虫: WebAssembly反爬详解,并设计一个对应的反爬的网站(.wasm文件处理)

本文介绍了WebAssembly(Wasm)在反爬虫中的应用原理及实现方法。Wasm通过将关键逻辑(如签名生成、加密参数)编译为低可读性的字节码,提高逆向难度,有效防御自动化爬虫。文章以FastAPI构建的新闻网站为例,演示了Wasm模块的C语言实现、编译流程及前后端交互设计。服务端通过验证时间戳和签名确保请求合法性,而前端调用Wasm生成的token实现反爬。最终强调算法复现是破解关键,并建议结合HMAC-SHA256等增强安全性。 (字数:149)

数据知道的博客 4239

WebAssembly初认识

WebAssembly是什么?WebAssembly即WASM, WebAssembly是一种新的编码格式并且可以在浏览器中运行,WASM可以与JavaScript并存,WASM更类似一种低级的汇编语言。

十二点的洛杉矶的博客 1713

基于STM32与HRTIM的四开关Buck-Boost双向DC-DC电源设计实战(附源码、仿真与设计解析)

本文详细介绍了基于STM32F334的HRTIM高分辨率定时器实现四开关Buck-Boost双向DC-DC电源的设计实战。通过精准的PWM控制、双环PID算法和智能模式切换逻辑,解决了电压震荡与效率优化等关键问题,并提供了完整的源码、PSIM仿真及参数计算,为高性能电源设计提供了实用参考。

7z8x2c4v6b9的博客 299

SceneSplat

目标:训练一个网络,输入高斯参数 → 输出与自然语言空间对齐的特征。考虑到标注语义的 3DGS 数据有限,作者设计了。策略,让模型在无标签场景上学到有用表征。都有一个与自然语言对齐的语义特征。这是整个方法的第一步,目标是让。

weixin_61091146的博客 1284

webassembly是什么?

WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。 您可能会将WebAssembly当做是另外一种目标汇编语言。这是真的,这些机器语言(x86,ARM等)中的每一种都对应于特定的机器架构。当你的代码运行在用户的机器的web平台上的时候,你不知道你的代码将会运行在那种机器结构上。所以WebAssembly和别的汇编语言是有一些不同的。所以他是一个概念机上的机器语言,不是在一个真正存在的物理机上运行的机器语言。正因如此,WebAssem...

Sim0Hayha的博客 1347

DeepMD-kit描述子机制解析:从原子坐标到不变性特征

本文深入解析DeepMD-kit描述子机制,详细阐述如何将原子坐标转换为具有平移、旋转和排列不变性的特征表示。探讨了se_e2_a、se_e3等不同描述子的适用场景及性能优化技巧,帮助读者掌握这一关键技术在分子模拟中的应用实践。

weixin_42520661的博客 340

来谈谈 WebAssembly 是个啥?为何说它会影响每一个 Web 开发者?

作者:link 原文:What is WebAssembly and why it affects web developers! 你听说过WebAssembly吗?这是由Google,Microsoft,Mozilla,Apple等几家大公司合作发起的一个关于面向Web的通用二进制和文本格式的项目。现在就让我们来看看WebAssembly到底是个啥?为什么它的出现和未来...

angxiao9133的博客 255

(UE4 4.27) HISM性能优化:从空间剔除到合批渲染的实战解析

本文深入解析了UE4 4.27中HISM(UHierarchicalInstancedStaticMesh)组件的性能优化原理与实战技巧。核心在于利用其N叉树空间结构实现高效的CPU视锥剔除,并结合GPU实例化进行合批渲染。文章详细探讨了从控制叶子节点粒度、平衡剔除精度与渲染效率,到结合LOD系统等关键参数的调优方法,为开放世界或大场景的植被性能瓶颈提供了系统解决方案。

weixin_29015051的博客 327

手把手教你离线部署Jupyter Notebook及高效插件配置

本文详细介绍了如何在离线环境中部署Jupyter Notebook及配置高效插件,包括离线安装步骤、依赖管理、核心扩展安装及常见问题排查。特别针对金融、科研等封闭网络场景,提供完整的whls包和requirements.txt解决方案,帮助开发者和数据分析师突破网络限制,提升工作效率。

weixin_28839549的博客 583

Wasm3与Nginx:在Web服务器中嵌入WebAssembly模块

WebAssembly(Wasm)技术正迅速改变软件部署模式,而Wasm3作为轻量级高效的WebAssembly解释器,为资源受限环境提供了强大的WASM运行能力。本文将探讨如何在Nginx服务器中集成Wasm3运行时,实现WebAssembly模块的高性能嵌入执行,从而扩展服务器功能并提升安全性。 ## 技术架构概述 Wasm3与Nginx的集成架构基于"宿主-模块"模型,Nginx作为宿主...

gitblog_00125的博客 878

优化翼型形状的遗传算法实现

在每一代种群中,通过计算每个个体的适应度值,选择具有较高适应度值的个体,并使用交叉和变异算子对它们进行操作,从而生成新的个体。具体而言,我们将采用一个参数化的翼型模型,其中包括几何设计变量,如角度、弯曲和厚度等,以及性能指标,如升阻比和扭矩等。总之,本文提供了一个基于遗传算法的优化方法,用于寻找最优的翼型形状,并提供MATLAB源代码。需要注意的是,上述代码中的objFunc函数是一个示例性质的目标函数,实际应用中需要根据具体的问题进行修改。1.初始化一个随机的种群,其中每个个体代表一个参数化的翼型模型。

与其临渊羡鱼,不如退而结网 517

wasm-mt:为Rust和WebAssembly提供多线程支持

wasm-mt:为Rust和WebAssembly提供多线程支持 在WebAssembly的世界中,多线程一直是一个令人期待的功能。如今,wasm-mt开源项目为Rust和WebAssembly开发者提供了一种创建和执行基于Web Worker的线程的简便方式。以下是关于wasm-mt项目的详细介绍。 项目介绍 wasm-mt是一个Rust编写的库,旨在帮助开发者在使用Rust语言编写WebAss...

gitblog_01001的博客 1200

NTC热敏电阻选型快速指南

NTC(Negative Temperature Coefficient Thermistor)负温度系数热敏电阻器,是由锰Mn,镍Ni,铜Cu,一氧化碳Co等烧结而成的氧化物。其电阻值随温度的升高而减小,即具有复温度系数,故被称为负温度系数热敏电阻。本文对热敏电阻的应用场景,结构特点和选型参数进行总结。

fydar的博客 1295

PON架构(全光网络)

目前组网架构世界上有一种最快的速度又是光,以前传统以太网络规划满足不了现在的需求。有线网 无线网 全光网络方案场景 全光网络分类 以太全光网络 PON(Pas-sive-Optical Network 无源光网络) 再典型的中大型高校网络中 推荐万兆入室 千兆到桌面的带宽设计 一般三层 (终端-接入层-汇聚层-核心层-出口(安全设备)-互联网) 单校区核心设备 一般采用两台高性能的核心交换机 双机的方式采用的是 M-LAG 多校区之间核心交换机采用1

qq_56248592的博客 6269

WebAssembly (WASM)智能合约

对中国农话网与交换机产业的一点看法 中国农话的现状及发展趋势 中国是一个农业大国,农村地域和农业人口占了总数的80%左右。这几年,随着国家经济的蓬勃发展,农村经济特别乡镇企业发展非常迅猛,从而促使农村电话的大发展,潜力很大。但也不能用资本主义国家的方法来测算。我国农村总体文化不发达,商品经济还未成熟,通信是要发展,不会这么快,这么急迫;现在的估计过大了一些,造成严重的供过于求。放号率不高,资金...

跨链技术践行者 1万+

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

探索WebAssembly的神奇世界:Awesome Wasm

是一个精心整理的资源列表,专注于WebAssembly(WASM)——一种低级二进制指令格式,可在现代Web浏览器中运行。这个项目由开发者 [Marco Basso](https) 维护,旨在为开发者提供全面、有用的WASM学习和开发资源。 ## WebAssembly 简介 WebAssembly是一种开放标准,允许开发者以接近原生代码的速度在Web上运行高性能应用。它支持C, C++, R...

gitblog_00002的博客 386

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

WebAssembly终极压缩技巧:Binaryen如何让wasm文件缩小50%+

WebAssembly作为现代Web开发的革命性技术,正在改变我们构建高性能Web应用的方式。而Binaryen作为WebAssembly的编译器工具链基础设施,提供了业界领先的wasm压缩优化技术。本文将为您揭秘Binaryen专有的wasm优化技术,帮助您大幅减少wasm文件体积,提升应用加载速度。🚀 ## 什么是Binaryen及其核心价值 Binaryen是一个用C++编写的WebA

gitblog_00564的博客 888

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

PC微信防撤回补丁 RevokeMsgPatcher 完整使用指南:3步装好,撤回消息留得住

RevokeMsgPatcher 是一款 Windows 平台上的微信/QQ/TIM 防撤回补丁工具,它对客户端的核心 DLL 做几处字节级修改,让对方撤回的消息在你屏幕上依然可见。工具同时支持微信多开,适合经常需要保留聊天记录、或者要多账号并行的普通用户。本文带你从零装好这套 PC 微信防撤回补丁,并讲清原理和常见报错的修复方法。 ## 适用场景与核心能力 - **防撤回**:支持微信、QQ

gitblog_01020的博客 874

WebAssembly (Wasm) 跨端方案深度解析

WebAssembly (Wasm) 是一种低级的二进制指令格式,专为Web高性能执行设计。核心优势包括接近原生的性能、支持多语言生态、卓越的安全性和跨平台可移植性。它通过将高级语言编译为通用字节码,在浏览器沙箱中高效运行,适合计算密集型任务如图形处理、游戏和加密算法。然而,Wasm不适合直接操作DOM,存在工具链复杂、内存管理手动化等挑战。最佳应用场景是与JavaScript协同,作为性能增强模块处理特定计算任务。选型需考虑性能瓶颈、模块边界和技术储备等因素。

LYFlied的博客 675
上一篇: 深度强化学习 ( DQN ) 初探
下一篇: 【干货合集】Docker快速入门与进阶
Qcloud_KID
博客等级 码龄10年 34粉丝 47原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值