宝贝,带上WebAssembly,换个姿势来优化你的前端应用

本文主要是介绍宝贝,带上WebAssembly,换个姿势来优化你的前端应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在你没崛起之前,脸是用来丢的

大家好,我是柒八九。一个专注于前端开发技术/RustAI应用知识分享Coder

此篇文章所涉及到的技术有

  1. WebAssembly
  2. Rust
  3. Web Worker(comlink)
  4. wasm-pack
  5. Photon
  6. ffmpeg.wasm
  7. 脚手架生成前端项目

因为,行文字数所限,有些概念可能会一带而过亦或者提供对应的学习资料。请大家酌情观看。


前言

说起,前端性能优化,大家可能第一时间就会从网络/资源加载/压缩资源等角度考虑。

正如下面所展示的一样。

上面所列的措施,是我们常规优化方案。针对上面的内容我们有机会来讲讲该如何做。

而今天呢,我们和大家唠唠利用WebAssembly来优化前端渲染链路或者针对关键节点进行调优处理。


好了,天不早了,干点正事哇。

我们能所学到的知识点

  1. WebAssembly是个啥?
  2. 项目初始化&配置
  3. Rust项目初始化
  4. 处理耗时任务
  5. 图像处理
  6. 优化音视频
  7. 优化游戏体验

1. WebAssembly是个啥?

之前,我们在浏览器第四种语言-WebAssembly已经对WebAssembly有过介绍,为了行文的完整,我们再用简短的内容解释一下它。

WebAssembly是一种二进制指令格式,旨在在浏览器中高效执行。

  • 作为JavaScript的补充,允许我们用RustC++C等语言编写性能关键代码,并在浏览器中运行(还记得我们前几天的文章Rust 赋能前端 – 写一个 File 转 Img 的功能分别讲了将C/Rust编写成wasm用于文档解析)。
  • 通过将代码编译成Wasm,它变得平台无关,并且可以以接近本地的速度运行。
  • Rust是一种以安全性和性能著称的系统编程语言,由于其强大的保证和与Wasm的无缝集成,已经在WebAssembly生态系统中获得了广泛的关注。(如果想了解更多Rust相关内容,可以参考我们的Rust学习笔记系列文章)
  • WebAssembly为网络开发开辟了新的可能性,在一些复杂任务如游戏引擎、图像处理等方面有着显著的性能提升。

WebAssembly 的优势

WebAssembly的一个最具说服力的特点是其在计算密集型任务中的性能提升。例如,在对庞大数据集进行复杂的统计计算时,WebAssembly 可能比常规的 JavaScript 快得多。这是因为 WebAssembly 的高度优化设计使得代码执行速度远远超过 JavaScript

WebAssembly 的另一个优点是其可移植性。跨平台应用程序的开发变得非常简单,因为可以从多种语言生成 WebAssembly 代码,并在任何平台上执行。

最后,安全性也是 WebAssembly 架构中的一个重要考虑因素。由于 WebAssembly 提供了沙箱执行环境,代码无法访问敏感数据或运行恶意代码。

下面是了解和学习WebAssemblyRoadMap


2. 项目初始化&配置

进入正题之前,我们还是和之前一样,使用我们自己的脚手架-f_cli_f构建一个以Vite为打包工具的前端项目。

在本地合适的目录下执行如下代码:

npx f_cli_f create wasm_preformance

然后,我们在pages中新建如下的目录结构

其中wasm存放的是我们已经构建好的wasm的资源。

配置Web Worker

由于我们在项目中会用到Web Worker,所以我们还需要对其做一定的配置。之前呢,我们在React中使用多线程—Web Worker中介绍过,如何在React+Vite的项目中使用Web Worker

而今天,我们再介绍另外一种更加优雅的方式 - Comlink。

Comlink是一个由Google Chrome Labs开发的轻量级库,它旨在简化Web Worker与主线程之间的通信,让我们能够充分利用多线程处理的威力,提升前端应用性能。

由于,我们是用Vite搭建的前端项目,所以我们还需要在项目中借助vite-plugin-comlink。

我们可以通过如下代码安装对应的依赖。

yarn add -D vite-plugin-comlink
yarn add comlink

然后,将对应的库配置到vite.config.js中。

import { comlink } from "vite-plugin-comlink";export default {plugins: [comlink()],worker: {plugins: () => [comlink()],},
};

这里有一点需要额外注意,comlink要放置在plugins第一个位置。

针对TypeScript项目,我们还需要在vite-env.d.ts中新增/// <reference types="vite-plugin-comlink/client" />

然后我们就可以用优雅的方式来使用WebWorker了。

可以看到,使用了comlink后,我们在使用多线程能力时,不需要写那么多模板代码,而是通过Promise来接收从子线程返回的数据。

关于Web Worker的相关内容,可以看我们之前的文章

  • Web性能优化之Worker线程&#x

这篇关于宝贝,带上WebAssembly,换个姿势来优化你的前端应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1038936

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1