一般来说在.net core使用WebAssembly 都是Blazor ，但是Blazor渲染界面，.net core也提供单纯的WebAssembly这篇博客我将讲解如何使用单纯的WebAssembly

安装WebAssembly模板

dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates

安装完成以后在vs的新建项目的时候会出现如图的模板

然后我们下一步创建一个WebAssembly的项目,WebAssembly的项目很单纯,项目结构如下图：

我们可以看到项目及其简单，分别查看文件代码

Program.cs

using System;

using System.Runtime.InteropServices.JavaScript;

Console.WriteLine("Hello, Browser!");

public partial class MyClass

{

    [JSExport]

    internal static string Greeting()

    {

        var text = $"Hello, World! Greetings from {GetHRef()}";

        Console.WriteLine(text);

        return text;

    }

    [JSImport("window.location.href", "main.js")]

    internal static partial string GetHRef();

}

main.js

// Licensed to the .NET Foundation under one or more agreements.

// The .NET Foundation licenses this file to you under the MIT license.

import { dotnet } from './dotnet.js'

const { setModuleImports, getAssemblyExports, getConfig } = await dotnet

    .withDiagnosticTracing(false)

    .withApplicationArgumentsFromQuery()

    .create();

setModuleImports('main.js', {

    window: {

        location: {

            href: () => globalThis.window.location.href

        }

    }

});

const config = getConfig();

const exports = await getAssemblyExports(config.mainAssemblyName);

const text = exports.MyClass.Greeting();

console.log(text);

document.getElementById('out').innerHTML = text;

await dotnet.run();

index.html

<!DOCTYPE html>

<!--  Licensed to the .NET Foundation under one or more agreements. -->

<!-- The .NET Foundation licenses this file to you under the MIT license. -->

<html>

<head>

  <title>WebAssemblyDemo</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="modulepreload" href="./main.js" />

  <link rel="modulepreload" href="./dotnet.js" />

</head>

<body>

  <span id="out"></span>

  <script type='module' src="./main.js"></script>

</body>

</html>

这些代码及其简单，如果在遇到js性能瓶颈的时候就可以使用当前这种模式，使用单纯的WebAssembly去提高我们的产品性能

试试看执行一下程序，效果如下图：

如何使用单纯的`WebAssembly`的更多相关文章

  1. WebAssembly是解决JavaScript 痼疾的银弹？

    写在前面 <没有银弹>是 Fred Brooks 在 1987 年所发表的一篇关于软件工程的经典论文.该论文的主要论点是,没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍. ...

  2. 思考----拒绝单纯copy

    工作4个多月以来感触最深的是: 做事情的时候遇到不会的可以上网查或者问别人,但是获取到的知识不能只是单纯的copy过来使用达到要求就ok, 更重要的是事后等有空了一定要仔细研究学习,使知识网络完整,这 ...

  3. 关于java sort的几种实现方式（单纯排序，按照bean的某一个字段，按照bean的多个字段）

    最近的开发过程中遇到了,按照bean类中的多个字段进行排序的情况,借此机会把相关的排序做法,简单整理备份一下. 1.list的单纯排序 2.list元素为bean的情况,按照bean的某一个属性进行排 ...

  4. 解决springmvc在单纯返回一个字符串对象时所出现的乱码情况(极速版)

    使用springmvc框架开发了这么长时间,之前都是直接返回jsp页面,乱码情况都是通过配置和手动编解码来解决,但是今天突然返回一段单纯的字符串时,发现中文乱码情况解决不了了,下面就给各位分享一下如何 ...

  5. WebAssembly：随风潜入夜

    What? WebAssembly 是一种二进制格式的类汇编代码,可以被浏览器加载和并进一步编译成可执行的机器码,从而在客户端运行.它还可以作为高级语言的编译目标,理论上任何语言都可以编译为 WebA ...

  6. EOS 新增的 WebAssembly 解释器，是什么鬼？

    Daniel Larimer 在最近的博客中透露,EOS 新增了官方的 WebAssembly 解释器,用来解释执行 WebAssembly 智能合约,加上之前的编译执行,EOS 智能合约有了两种执行 ...

  7. emscripten、 WebAssembly，传递字符串给c函数

    下面看具体的实例. 下面的代码是一个C函数,实现简单的字符串拼接,然后返回拼接的字符串. #include <stdio.h> #include <string>  char* ...

  8. SQL反模式学习笔记3 单纯的树

    2014-10-11 在树形结构中,实例被称为节点.每个节点都有多个子节点与一个父节点. 最上层的节点叫做根(root)节点,它没有父节点. 最底层的没有子节点的节点叫做叶(leaf). 中间的节点简 ...

  9. WebAssembly让你的Javascript计算性能提升70%

    现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行.预处理.setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker.即使对于WebWorker ...

  10. WebAssembly完全入门——了解wasm的前世今身

    前言 接触WebAssembly之后,在google上看了很多资料.感觉对WebAssembly的使用.介绍.意义都说的比较模糊和笼统.感觉看了之后收获没有达到预期,要么是文章中的例子自己去实操不能成 ...

随机推荐

  1. 同样的SQL，怎么突然就慢了？

    本篇文章素材来源于某银行系统的一次性能问题分析. 许久没写这种troubleshooting类型的技术文章了,因为曾在服务公司呆过多年,工作原因,这方面之前做的多,听的更多,导致已经达到在自己认知维度 ...

  2. Oracle数据字典(各种视图、表)

    数据字典是存放整个数据库实例重要信息的一组表,这些数据字典大部分都是SYS用户所有. 数据字典的构成 Oracle数据字典名称由前缀和后缀组成,使用下画线"_"连接.其代表的含义如 ...

  3. 安卓app填写域名和端口后点击保存没有反应（填错注册信息）

    解决方法:域名填写错误导致(仔细检查填写的域名和端口是否正常,注册的信息是否与填写的一致) ​ 域名是:3q9l302537.wicp.vip 中间有个字母 l 不是数字 1 填写成了:3q91302 ...

  4. Redis 打怪升级进阶成神之路（2023 最新版）！

    前面我们学习:MySQL 打怪升级进阶成神之路(2023 最新版)!,然后我们就开始了 NoSQL 卷王之路.从第一篇文章开始,我们逐步详细介绍了 Redis 基础理论与安装配置.9 种数据类型和应用 ...

  5. Harbor私有镜像仓库搭建

    为什么选择Harbor 你可能会问既然我们已经有了 Docker 镜像仓库为什么还需要 Harbor 呢?嗯,Harbor 是 Docker 镜像仓库的企业级扩展,用途更广泛.这些新的企业级功能包括: ...

  6. Spring Boot整合Spring Data连接postgreSQL完成简单的CRUD操作

    导入jpa依赖和postgresql依赖: <!-- jpa依赖 --> <dependency> <groupId>org.springframework.boo ...

  7. Nignx快速入门

    Nginx快速入门 一.简介 产生的背景:当一台服务器同一时刻被大量客户端请求访问时,访问量超出服务器请求范围,服务器处理不过来,发生宕机或者丢失连接情况下,产生了Nignx反向代理技术. Nginx ...

  8. 手把手教您在PyCharm中连接云端资源进行代码调试

    摘要:ModelArts提供了一个PyCharm插件工具PyCharm ToolKit,协助用户完成代码上传.提交训练作业.将训练日志获取到本地展示等,用户只需要专注于本地的代码开发即可. 本文分享自 ...

  9. 从架构设计理念到集群部署，全面认识KubeEdge

    摘要:本篇文章将从KubeEdge架构设计理念.KubeEdge代码目录概览.KubeEdge集群部署三方面带大家认识KubeEdge. KubeEdge即Kube+Edge,顾名思义就是依托K8s的 ...

  10. 中秋节，华为云AI送上超级大月亮制作教程，体验赢开发者键鼠套装

    摘要:一键"Run in ModelArts",无需考虑计算资源.环境的搭建,简单运行代码,即可拥有你的超级大月亮,打造专属于你的梦幻中秋月夜. 本文分享自华为云社区<中秋节 ...