当前位置: 首页 > news >正文

WebAssembly 为什么能提升性能,怎么使用它 ?

文章目录

    • 简介:
    • 起源:
    • 前端性能提升历史
      • JIT(Just-In-Time)编译器(即时编译)
    • 为什么需要WebAssembly:
    • WebAssembly能做什么:
    • 经常说WASM的性能高,为什么高??
    • 使用方法:
      • Emscripten 使用:
    • js 中加载 `.wasm`
    • 参考链接:

简介:

  • WebAssembly(简称Wasm)是一种新的编码方式,WebAssembly 是一种技术,该技术能让除 JavaScript 以外的代码运行在浏览器上。
  • 它是一种低级的类汇编语言,具有紧凑的二进制格式,可以为C/C++、C#和Rust等语言提供编译目标,使它们能够在Web上运行。

起源:

WebAssembly的前身是asm.js(文本格式),它是一个JavaScript的严格子集,通过强制静态类型来提高性能。但是asm.js仍然需要经过JavaScript引擎的解析和字节码编译步骤,这限制了它的性能。
因此,WebAssembly应运而生,它直接编译成Web浏览器可以理解的机器码,跳过了这些步骤,从而提高了性能

前端性能提升历史

JIT(Just-In-Time)编译器(即时编译)

在程序运行时将中间代码动态编译成机器码的编译器,工作原理可以概括为以下几个步骤:

在JavaScript 引擎新增了一个组件,称为监视器(Monitor),将代码编译成更快的执行函数,并对执行过的代码标记(warm)

  1. 解析:JIT编译器首先解析程序的中间代码,构建出抽象语法树(AST)和符号表。
  2. 优化:对程序进行优化,如常量折叠、循环展开、内联函数等,以提高执行效率。
  3. 编译:将优化后的程序转换成机器代码,并生成代码缓存区,通常包含多个版本的代码以应对不同的运行情况。
  4. 执行:在程序运行时,JIT编译器动态地将缓存区中的代码加载到内存中,并选择合适的代码版本执行。

为什么需要WebAssembly:

JavaScript作为Web开发的主要语言,虽然功能强大,但在性能上存在局限,特别是在执行复杂计算和处理大量数据时。WebAssembly旨在解决这些问题,提供一种新的代码执行方式,以接近原生应用的性能运行在Web平台上。

  • WebAssembly主要解决了前端性能瓶颈问题,它允许将性能密集型的应用程序带到Web上,比如3D游戏、图像和视频编辑、科学计算等。

WebAssembly能做什么:

  1. 提高性能: WebAssembly代码在浏览器中的执行速度接近原生应用。
  2. 跨平台运行 可以在不同的浏览器和设备上一致地运行。
  3. 安全沙箱环境 代码在安全的沙箱环境中执行,遵循同源策略和权限策略。
  4. 二进制格式: WebAssembly 使用二进制格式,这意味着它在网络传输中更加紧凑
  5. 与JavaScript协同工作: 可以与JavaScript代码一起使用,通过JavaScript调用WebAssembly模块中的功能。

经常说WASM的性能高,为什么高??

  1. WebAssembly是一种低级字节码,比JavaScript[解释性语言,需要转义]更接近计算机硬件
  2. WebAssembly代码比JavaScript代码更加精简(二进制),因此加载WebAssembly文件通常更快,尤其是在网络速度较慢的情况下
  3. WebAssembly不需要像JavaScript那样解析为抽象语法树(AST),而是直接解码,这使得它在解析阶段比JavaScript更快
  4. WebAssembly在编译和优化时节省了时间,因为它比JavaScript更接近机器码,而且WebAssembly代码在编译前已经过优化
  5. JavaScript在运行时可能需要重新优化代码,这会导致性能损失。而WebAssembly的数据类型是明确的,因此不需要运行时优化
  6. 代码复用

使用方法:

Emscripten 使用:

Emscripten 是一个用于编译 C 和 C++ 代码到 WebAssembly 和 asm.js 的工具链。它允许开发者将桌面应用程序移植到 Web 平台.

安装 Emscripten:

  1. 克隆 Emscripten SDK 到本地机器。

     git clone https://github.com/emscripten-core/emsdk.git
    
  2. 安装最新版本的 Emscripten。

     cd emsdk && emsdk install latest
    
  3. 激活 Emscripten 环境。

     emsdk activate latest
    

    在这里插入图片描述

  4. 设置查看变量

     emcc -c
    

在这里插入图片描述

  1. 创建hello.c 代码
#include <stdio.h>int main()
{/*  Write C code in this online editor and run it. */printf("Hello, WebAssembly! \n");return 0;
}
  1. 编译 C/C++ 代码:

使用 emcc 命令来编译代码。生成一个 WebAssembly 二进制文件和相应的 HTML 文件:

emcc hello.c -s WASM=1 -o hello.html  # WASM=1 表示启用 WebAssembly 编译,如果不设置或设置为 0,则默认生成 asm.js 代码。

这将生成 hello.wasmhello.jshello.html 文件。hello.js 是“胶水”代码,用于在浏览器中加载和运行 hello.wasm

在这里插入图片描述

在这里插入图片描述

  1. 运行示例:

在支持 WebAssembly 的浏览器中打开生成的 hello.html 文件,你将看到 “Hello, WebAssembly!” 的输出。

serve .  # 打开 http://localhost:3000/hello.html

在这里插入图片描述

js 中加载 .wasm

fetch('module.wasm').then(response =>response.arrayBuffer() 
).then(bytes =>WebAssembly.instantiate(bytes) // 编译并实例化 WebAssembly 模块。它接受 BufferSource 以及一个可选的导入对象,并返回一个包含模块和实例的 Promise。
).then(results => {// 这是 instance 对象的一个属性,它是一个包含了模块所有导出函数和变量的对象。// exported_func 是导出的一个实例函数results.instance.exports.exported_func();
});

参考链接:

  • emscripten DOC
  • WebAssembly API DOC

相关文章:

WebAssembly 为什么能提升性能,怎么使用它 ?

文章目录 简介&#xff1a;起源&#xff1a;前端性能提升历史JIT&#xff08;Just-In-Time&#xff09;编译器(即时编译) 为什么需要WebAssembly&#xff1a;WebAssembly能做什么&#xff1a;经常说WASM的性能高&#xff0c;为什么高&#xff1f;&#xff1f;使用方法:Emscript…...

golang学习笔记13-函数(二):init函数,匿名函数,闭包,defer

注&#xff1a;本人已有C&#xff0c;C,Python基础&#xff0c;只写本人认为的重点。 这个知识点基本属于go的特性&#xff0c;比较重要&#xff0c;需要认真分析。 一、init函数 每个文件都可以定义init函数&#xff0c;它会在main函数执行前被调用&#xff0c;无论它的定义…...

HAproxy,nginx实现七层负载均衡

环境准备&#xff1a; 192.168.88.25 &#xff08;client&#xff09; 192.168.88.26 &#xff08;HAproxy&#xff09; 192.168.88.27 &#xff08;web1&#xff09; 192.168.88.28 (web2) 192.168.88.29 &#xff08;php1&#xff09; 192.168.88.30…...

ps aux | grep smart_webrtc这条指令代表什么意思

这条指令是在Linux系统中使用的命令&#xff0c;它的含义是列出所有正在运行的进程&#xff0c;并通过grep命令筛选出包含"smart_webrtc"关键字的进程。 具体解释如下&#xff1a; ps 是一个用于报告当前系统进程状态的命令。aux 是ps命令的选项&#xff0c;其中&a…...

第十三届蓝桥杯真题Python c组D.数位排序(持续更新)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;蓝桥杯关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 问题描述 小蓝对一个数的数位之和很感兴趣, 今天他要按照数位之和给数排序。…...

【RabbitMQ】RabbitMq消息丢失、重复消费以及消费顺序性的解决方案

RabbitMq消息丢失主要是有三种情况&#xff1a;生产者消息未发送到服务端、服务端消息没有做持久化导致丢失、消费端未收到消息。解决方案依次如下&#xff1a; 开启事务或使用确认机制。对于一些重要的消息&#xff0c;生产者可以开启事务&#xff0c;确保消息发送成功后再提…...

海陆钻井自动化作业机器人比例阀放大器

海陆钻井自动化作业机器人是现代海洋石油勘探与钻井领域的关键装备&#xff0c;它通过自动化和无人化技术显著提高了钻井效率和安全性。海陆钻井自动化作业机器人主要用于在海上和陆地的钻井平台上进行自动化、无人化的一体化作业。这种设备能够自动切换钻杆&#xff0c;极大地…...

golang学习笔记19-面向对象(一):面向对象的引入

注&#xff1a;本人已有C&#xff0c;C,Python基础&#xff0c;只写本人认为的重点。 这节开始就是面向对象的内容了&#xff0c;为方便复用结构体等类型&#xff0c;本人定义了一个utils包&#xff0c;用于定义这些类型&#xff0c;之后的文章也会用到&#xff0c;希望读者注意…...

【从零开始实现stm32无刷电机FOC】【实践】【7.1/7 硬件设计】

目录 stm32电路磁编码器电路电机驱动电路电流采样电路电机选择本文示例硬件说明 为了承载和验证本文的FOC代码工程&#xff0c;本节设计了一个简易的三相无刷电机 硬件套件&#xff0c;主控采用非常常用的stm32f103c8t6单片机&#xff0c;电机编码器采用MT6701&#xff0c;电机…...

unix中父进程如何获取子进程的终止状态

一、前言 本文将介绍在unix系统中&#xff0c;父进程如何获取子进程的终止状态。本文主要围绕如下函数展开&#xff1a; 1.wait 2.waitpid 3.waitid 4.wait3、wait4 在讨论这些函数前&#xff0c;先介绍一个进程从创建到释放子进程的过程。 二、子进程的创建以及终止 在unix…...

【ESP 保姆级教程】小课设篇 —— 案例:20240505_基于esp01s的局域网控制灯

忘记过去&#xff0c;超越自己 ❤️ 博客主页 单片机菜鸟哥&#xff0c;一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2024-09-30 ❤️❤️ 本篇更新记录 2023-09-30 ❤️&#x1f389; 欢迎关注 &#x1f50e;点赞 &#x1f44d;收藏 ⭐️留言&#x1f4dd;&#x1f64…...

Qt如何将外部窗口嵌入部件中

一、简述 今天给大家讲解的是使用QWindow类通过窗口句柄将外部的应用程序嵌入到我们的部件中来显示。在讲解之前可以延伸一下&#xff0c;当时项目中使用QProcess启动一些本地软件或者执行脚本时&#xff0c;需要将启动的第三方窗口嵌入到我们自己写的窗口中&#xff0c;此时我…...

2024年9月30日随笔

今天是国庆假期前的最后一天了&#xff0c;刚上完课&#xff0c;坐在实验室的工位前&#xff0c;感到焦虑又无奈&#xff0c;11月9号&#xff0c;网络规划工程师软考考试&#xff0c;学了一部分了&#xff0c;感觉有些难&#xff0c;还有一个月多一点点的时间&#xff0c;不知道…...

springboot+satoken实现刷新token(值变化)

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 springbootsatoken实现刷新token satoken是什么&#xff1f;支持什么&#xff1f;为什么需要&…...

63.HDMI显示器驱动设计与验证-彩条实验

&#xff08;1&#xff09;常见的视频传输接口有三种&#xff1a; VGA 接口、 DVI 接口和 HDMI 接口&#xff0c;目前的显示设备都配有这三种视频传输接口。三类视频接口的发展历程为 VGA→DVI→HDMI。其中 VGA 接口出现最早&#xff0c;只能传输模拟图像信号&#xff1b; 随后…...

安卓13设置删除网络和互联网选项 android13隐藏设置删除网络和互联网选项

总纲 android13 rom 开发总纲说明 文章目录 1.前言2.问题分析3.代码分析4.代码修改4.1修改方法14.2修改方法25.编译6.彩蛋1.前言 有些客户不想让用户修改默认的网络配置,禁止用户进入里面调整网络相关的配置。 2.问题分析 像这个问题,我们有好几种方法去处理,这种需求一般…...

C++的6种构造函数

在 C 中&#xff0c;构造函数是一种特殊的成员函数&#xff0c;用于初始化类对象。在对象创建时自动调用&#xff0c;构造函数的主要作用是分配资源、初始化数据成员等。根据不同的功能和使用场景&#xff0c;C 提供了多种类型的构造函数&#xff1a; 1. 默认构造函数 (Defaul…...

【FE】NPM——概述

NPM基本使用 下载Node 老生常谈&#xff0c;选择LTS版本官网放这里&#xff1a;https://nodejs.cn/download/ 1.镜像配置&#xff1a;镜像源 镜像配置 依赖仓库&#xff1a;版本查看 //不确定仓库有哪些版本&#xff0c;列出指定包的所有版本 npm view <package-name&…...

Clipboard.js实现复制文本到剪贴板功能

一、Clipboard.js简介 Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件&#xff0c;该插件可以将输入框&#xff0c;文本域&#xff0c;DOM节点元素中的文本内容复制到剪贴板中。 官网地址&#xff1a;Clipboard.js 浏览器兼容性&#xff1a;兼容Chrome、…...

Harbor安装笔记

下载离线安装包 wget https://github.com/goharbor/harbor/releases/download/v2.11.1/harbor-offline-installer-v2.11.1.tgz 解压 tar -zxvf harbor-offline-installer-v2.11.1.tgz 复制一份配置文件出来&#xff0c;修改配置 cp harbor.yml.tmpl harbor.yml vim harbor…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...