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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/55277.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ServiceEntry WorkloadEntry WorkloadGroup

"ServiceEntry", "WorkloadEntry", 和 "WorkloadGroup" 都是与 Istio 服务网格相关的概念。Istio 是一个连接、保护、控制和观察服务之间交互的平台&#xff0c;它允许您管理微服务网络&#xff0c;而无需直接处理服务的逻辑。 ServiceEntry S…

使用AOP处理参数

说明&#xff1a;在一些时候&#xff0c;我们需要在接口介绍到参数前处理参数&#xff0c;像参数校验、参数转换等&#xff0c;本文介绍如何使用AOP来实现此需求。 场景 需求&#xff1a;有一批开放给第三方调用的接口&#xff0c;之前传递的都是用户表的ID&#xff0c;现在需…

JavaSE总结

1. Java环境基础 JVM, JRE 和 JDK JVM&#xff08;Java Virtual Machine&#xff09;: 是 Java 虚拟机&#xff0c;负责执行 Java 字节码。JVM 提供了平台无关性&#xff0c;使得 Java 程序可以在不同操作系统上运行。JRE&#xff08;Java Runtime Environment&#xff09;: …

浅谈C++ 多线程锁处理

一、基本介绍 在C中&#xff0c;多线程编程同样需要处理线程安全问题&#xff0c;C11及更高版本提供了一套标准库来支持多线程编程&#xff0c;包括锁的处理。 二、常见锁处理方式 互斥锁&#xff08;std::mutex&#xff09;&#xff1a; std::mutex是最基本的锁类型&#xf…

“改善就医感受 提升患者体验”经验交流首场活动在呼市顺利举行

2024年9月26日至27日&#xff0c;以“医疗机构高质量发展 促进医改全面深化”为主题的“改善就医感受 提升患者体验”经验交流系列活动&#xff08;以下简称&#xff1a;系列活动&#xff09;首场活动在内蒙古呼和浩特顺利举行。 活动现场 患者体验&#xff0c;并不等同于患者…

网站架构部署——LAMP、LNMP

文章目录 网站架构部署——LAMP、LNMPLAMP安装顺序编译安装Apache httpd服务编译安装mysqld 服务编译安装PHP 解析环境安装论坛安装博客 LNMPyum集中式安装LNMPyum分布式安装LNMP20.0.0.50安装nginx20.0.0.51安装mysql20.0.0.52安装php20.0.0.50配置 nginx 支持 PHP 解析测试my…

CleanMyMac X v4.12.1 中文破解版 Mac优化清理工具

在数字时代&#xff0c;我们的Mac设备承载着越来越多的重要信息和日常任务。然而&#xff0c;随着时间的推移&#xff0c;这些设备可能会变得缓慢、混乱&#xff0c;甚至充满不必要的文件。这就是CleanMyMac X发挥作用的地方。 CleanMyMac X是一款功能强大的Mac优化工具&#…

获取 Jupyter Notebook IPython kernel 在电脑中的目录位置

获取 Jupyter Notebook IPython kernel 在电脑中的目录位置 正文 正文 在 VS code 的 terminal 中或者 Windows 的命令行中使用如下代码即可。 ipython locate运行后得到如下结果&#xff1a; 如图所示&#xff0c;我们获取到了 ipython 的位置。 如果大家觉得有用&#xf…

自动驾驶汽车横向控制方法研究综述

【摘要】 为实现精确、稳定的横向控制&#xff0c;提高车辆自主行驶的安全性和保障乘坐舒适性&#xff0c;综述了近年来自动驾驶汽车横向控制方法的最新进展&#xff0c;包括经典控制方法和基于深度学习的方法&#xff0c;讨论了各类方法的性能特点及在应用中的优缺点&#xff…

使用transformers调用owlv2实现开放目标检测

目录 安装Demo 安装 pip install transformersDemo from PIL import Image, ImageDraw, ImageFont import numpy as np import torch from transformers import AutoProcessor, Owlv2ForObjectDetection from transformers.utils.constants import OPENAI_CLIP_MEAN, OPENAI_…

PTA L1-079 天梯赛的善良

L1-079 天梯赛的善良&#xff08;20分&#xff09; 天梯赛是个善良的比赛。善良的命题组希望将题目难度控制在一个范围内&#xff0c;使得每个参赛的学生都有能做出来的题目&#xff0c;并且最厉害的学生也要非常努力才有可能得到高分。 于是命题组首先将编程能力划分成了 10…

Python日常搜索_random

random.random() 返回随机生成的一个实数&#xff0c;它在[0,1)范围内random.uniform random.uniform(a, b)&#xff0c;用于生成一个指定范围内的随机符点数&#xff0c;两个参数其中一个是上限&#xff0c;一个是下限。如果a > b&#xff0c;则生成的随机数n: b < n &l…

现实的谷歌SEO服务商是怎样的?

许多客户在咨询SEO服务时&#xff0c;常常会问到如何在短时间内将某个关键词推上谷歌首页&#xff0c;甚至是第一名。对于这种问题&#xff0c;专业的SEO服务商通常无言以对。SEO的基础是网站本身&#xff0c;而并非凭空捏造或者一夜之间就能实现效果的 SEO需要从网站的基本情况…

CNES实时轨道、钟差,硬件延迟精度评估

CNES实时产品评估以COD事后产品作为参考&#xff0c;采用cnt文件产品&#xff0c;目前最精确的轨道是GPS&#xff0c;但由于伽利略最稳定的原子钟弥补了伽利略轨道上的系统误差&#xff0c;Galileo的轨道钟差SISRE低于GPS,Galileo和GPS的SISRE分别为1.6cm和2.3cm&#xff0c;GL…

【HTML5】html5开篇基础(2)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

《深度学习》OpenCV 指纹验证、识别

目录 一、指纹验证 1、什么是指纹验证 2、步骤 1&#xff09;图像采集 2&#xff09;图像预处理 3&#xff09;特征提取 4&#xff09;特征匹配 5&#xff09;相似度比较 6&#xff09;结果输出 二、案例实现 1、完整代码 2、实现结果 调试模式&#xff1a; 三、…

基于Hadoop的微博舆情监测分析系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

Python并发之道:解锁`concurrent.futures`模块的秘密

引言 concurrent.futures模块是Python标准库的一部分&#xff0c;它提供了高层次的接口来执行异步操作。与传统的多线程或多进程编程相比&#xff0c;使用concurrent.futures可以更加简单、高效地管理并行任务。无论是对于初学者还是有经验的开发者来说&#xff0c;掌握这个模…

传统操作系统和分布式操作系统的区别

分布式操作系统和传统操作系统之间的区别&#xff0c;根植于它们各自的设计哲学和目标。要理解这些差异&#xff0c;需要从操作系统的基本定义、结构、功能以及它们在不同计算环境中的表现进行分析。每种系统都试图解决特定的计算挑战&#xff0c;因此在不同的使用场景下具有各…

C++的6种构造函数

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