WebAssembly技术实践

news2024/9/20 22:51:53

文章目录

  • 知识学习
    • 优点
  • 开启本地临时服务器
    • 方式一、命令安装
    • 方式二、直接在vscode的插件
  • 测试程序
  • 异常处理

最近在看WebAssembly相关的知识,在本地运行,记录下来,方便备查。

知识学习

WebAssembly是一种高性能二进制格式、用于在各种现代硬件上快速运行,与web生态系统无缝集成。2019年12月5日,其正式成为W3C标准,web的第四种语言(HTML、CSS、JavaScript)。
WebAssembly 使用费JavaScript编程语言编写代码并在浏览器上运行的技术方案,本质是一种新的字节码格式

优点

文件加载:体积更小,下载速度更快
编译和优化:在文件推送到服务器前已经进行更多优化
执行:更接近机器码,执行速度更快
垃圾回收:手动控制,不直接支持垃圾回收,比自动垃圾回收效率高
安全:可以放hash和签名等。
在这里插入图片描述
在浏览器中已经集成,可在console界面,直接调用 WebAssembly
在这里插入图片描述

开启本地临时服务器

两种安装方式,第一种是执行安装命令,第二种是在vscode里中直接安装 live server 插件。

//安装
npm install live-server -g
// 开启
live-server --port=2222

方式一、命令安装

使用 npm install 命令
在这里插入图片描述

方式二、直接在vscode的插件

在这里插入图片描述
在html文件右键 -> Open with Live Server 即用live server 打开,如下图所示。
在这里插入图片描述

测试程序

以斐波那契数列打印程序为例,测试WebAssembly

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="wifth=device-width,initial-scale=1.0">
        <title>测试</title>
    </head>
    <body>
        <script>
            function fib(x){
                if(x<=0) return 0;
                if(x<= 2) return 1;
                return fib(x-1) + fib(x-2);
            }
            console.time("测试斐波那契数列开始-速度");
            var ret = fib(40);
            console.time("测试斐波那契数列结束-速度");
        </script>
    </body>
</html>

打开服务器运行
在这里插入图片描述

异常处理

1、运行live-server报错,GET /favicon.ico 404
处理方案:
可复制图片,重命名为 favicon.ico,放到项目的根目录即可。

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

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

相关文章

C++基础面试题 | C++中static的作用?什么场景下会使用static?

回答重点&#xff1a;修饰局部变量 修饰全局变量或函数 修饰类的成员变量或函数 修饰局部变量&#xff1a;当static用于修饰局部变量时&#xff0c;该变量的存储位置在程序执行期间保持不变&#xff0c;并且只在程序执行到该变量的声明处时初始化一次。即使函数被多次调用&…

【Python报错已解决】“ModuleNotFoundError: No module named ‘packaging‘“

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言&#xff1a;一、问题描述1.1 报错示例&#xff1a;尝试导入不存在的模块时&#xff0c;可能会看到以下错误信息。…

详解CSS

目录 CSS 语法 引入方式 选择器 标签选择器 类选择器 ID选择器 通配符选择器 复合选择器 常用CSS color font-size border width和height padding 外边距 CSS CSS(Cascading Style Sheet)&#xff0c;层叠样式表, ⽤于控制⻚⾯的样式. CSS 能够对⽹⻚中元素位置…

带你深入浅出之QT编程:一、掌握信号与槽的奥秘

此为QT编程的第一谈&#xff01;关注我&#xff0c;带你快速学习QT编程的学习路线&#xff01; 每一篇的技术点都是很很重要&#xff01;很重要&#xff01;很重要&#xff01;但不冗余&#xff01; 我们通常采取总-分-总和生活化的讲解方式来阐述一个知识点&#xff01; 码…

《python语言程序设计》第8章第11题将反向字符串 编写一个函数反向一个字符串,reverse(s)

def reverse(text_arrange):len_text len(text_arrange)dec_text ""for i in range(1, len_text 1):# print(i)dec_text text_arrange[-i]print(f"反向输出{dec_text}")reverse("12345678") reverse("abcdefg")

利润率问题【简单】

小张收购一台手机&#xff0c;然后转手卖出&#xff0c;赚取了30%的利润。一星期后&#xff0c;客户要求退货&#xff0c;小张和客户达成协议&#xff0c;以当时交易价格的90%回收了这台手机&#xff0c;后来小张又以最初的收购价格将其卖出。小张在这台手机交易中的利润率是&a…

双系统报错verifiying shim SBAT data falled: Security Pollcy Violation

文章目录 问题背景原因分析解决方案 问题背景 双系统&#xff0c;在windows更新后&#xff0c;出现如下报错 原因分析 系统更新后&#xff0c;自动打开了Secure Boot 解决方案 方案一&#xff1a; 开机进入BIOS-》选择Security -> Secure Boot, 设置为Disabled, 保存 …

部署1panel

1Panel是一个现代化、开源的Linux服务器运维管理面板&#xff0c;它通过Web图形界面为用户提供了丰富的服务器管理功能。 Docker管理 容器管理&#xff1a;1Panel深度集成了Docker和docker-compose&#xff0c;允许用户通过Web界面轻松管理Docker容器。用户可以在1Panel中启动…

Cubase操作:就地渲染 配和弦技巧 合并多段音频 隐藏标记轨序号 删除素材池多余音频

“授人以鱼&#xff0c;不如授之以渔&#xff0c;授人以鱼只救一时之急&#xff0c;授人以渔则可解一生之需。” ​有时侯做音乐最重要的就是不要太死板和要多思考&#xff01;如果被教的只有一部分&#xff0c;只学一部分&#xff0c;有时是很难理解的&#xff0c;一些人可能只…

Servlet, Filter, Listener 启动与执行顺序

Servlet, Filter, Listener 启动与执行顺序 1、启动顺序 **Listener -> Filter -> Servlet**2、记忆口诀3、执行顺序 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java Web应用中&#xff0c;Servlet、Filter和Listener的启动与执…

QT +ffmpeg-4.2.2-win64-shared 拉取 RTMP/http-flv 流播放

拉取HTTP-FLV视频流处理逻辑&#xff1a; 1.在子线程中从流媒体服务端拉取视频流、使用ffmpeg进行解码&#xff0c;转成QImage &#xff0c;发送给主线程。 2.主线程接收QImage后在界面显示。 pro文件&#xff1a; QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT…

Driver.js——实现页面引导

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…

TCP的流量控制深入理解

在理解流量控制之前我们先需要理解TCP的发送缓冲区和接收缓冲区&#xff0c;也称为套接字缓冲区。首先我们先知道缓冲区存在于哪个位置&#xff1f; 其中缓冲区存在于Socket Library层。 而我们的发送窗口和接收窗口就存在于缓冲区当中。在实现滑动窗口时则将两个指针指向缓冲区…

数据结构代码集训day10(适合考研、自学、期末和专升本)

习题均来自B站up&#xff1a;白话拆解数据结构&#xff01; 题目如下&#xff1a; &#xff08;1&#xff09;求两个链表的交集并存在第一个表中&#xff0c;注意俩链表是递增的且表示的是集合&#xff1b; &#xff08;2&#xff09;【408真题】假设该链表只给出了头指针 li…

C语言 | Leetcode C语言题解之第389题找不同

题目&#xff1a; 题解&#xff1a; char findTheDifference(char* s, char* t) {int n strlen(s), m strlen(t);int ret 0;for (int i 0; i < n; i) {ret ^ s[i];}for (int i 0; i < m; i) {ret ^ t[i];}return ret; }

自己动手写CPU_step6_算术运算指令

序 接上篇&#xff0c;本篇开始实现算数运算指令&#xff0c;包括加减乘除&#xff0c;加减比较好实现&#xff0c;乘除则需要考虑指令周期与其他指令的周期长度不一致问题&#xff0c;可能会导致流水线效率下降&#xff0c;本篇先实现简单的算术运算。 指令定义 define EXE_AD…

java epoll网络编程

java epoll网络编程 从通信开始 人类社会的发展离不开相互协作&#xff0c;一起围猎、抵御野兽&#xff0c;一起扛起锄头夯地、夯人&#xff0c;再到你与好兄弟之间征战峡谷。在这一切互相协作的背后&#xff0c;都离不开信息的传递&#xff0c;也就是通信。一群人聚在一起&am…

Android学习笔记(一) Android Studio 安装配置

大家好&#xff0c;我是半虹&#xff0c;这篇文章来讲 Android Studio 的安装配置 1、基本介绍 Android Studio 是 Google 推出的 Android 集成开发环境&#xff0c;可以用于创建、开发和调试 Android 项目 Android Studio 是基于 IntelliJ IDEA 开发的 &#xff0c;提供了专…

typora的一些配置方法

1.设置图片的保存路径 选择 文件 --> 偏好设置 --> 图像 --> 设置图片要保存的位置 将网络的图片保存到本地&#xff0c;例如&#xff0c;从csdn复制文章时&#xff0c;将文章中的图片自动保存到本地 在图像设置的插入图片时一栏&#xff0c;勾选对网络位置的图片应…

vmware中克隆过来的linux节点无system eth0

问题现象 使用vmware虚拟机的克隆功能后&#xff0c;找不到system eth0 解决办法 编辑/etc/udev/rules.d/70-persistent-net.rules文件 可以看到&#xff0c;eth0&#xff0c;是克隆前机器的网卡&#xff0c;eth1是克隆后机器生成的网卡&#xff0c;所以把NAME"eth0&q…