图形编辑器开发:是否要像 Figma 一样上 wasm

大家好,我是前端西瓜哥。

wasm 拿来做 Web 端的图形编辑器貌似是不错的选择。

因为图形处理会有相当多无法利用到 WebGL GPU 加速的 CPU 密集的计算。比如对一条复杂贝塞尔曲线进行三角化,对多个图形进行复杂图形的布尔运算。

图形编辑器性能天花板 Figma 用了 wasm,我们也该用吗?

Figma 的性能提升

说到 wasm 和图形编辑器,经常有人提到 Figma 的加载速度提升为原来的三倍。来自 Figma 的这篇文章:

《WebAssembly cut Figma’s load time by 3x》

阅读后我有了不少收获。

Figma 从一开始就是用 C++ 写的。在 wasm 被浏览器支持之前,Figma 使用 wasm 的前身 asm.js 去转成 JavaScript,使其可以在浏览器上运行。

wasm 在 2017 年被浏览器实装,Figma 自然而然用上了 wasm,没有太多的改造成本

彼时,Figma 发现在 Chrome 运行 wasm 有 BUG,会失败。Firefox 则能正常运行。Edge 和 Safari 则要过几个月才实装。

所以这篇文章的对比数据 只是针对 Firefox 的,是 C++ 通过 asm.js 编译成 js,以及编译为 wasm 这两者的性能对比,不是原生 js 和 wasm 的对比。

首先是加载速度提升为原来的 3 倍。加载指的是打开页面,图纸的绘制效果最后展示出来的这个过程。

一个很大的设计图纸,原来加载需要 12s 左右,现在只需要 4s,不得不说这提升确实不错,极大提高用户的使用体验,尤其是用户经常要打开一些大图纸的场景。

这里 wasm 速度提升的原因:

  1. wasm 的字节码解析快,并直接编译,而 JavaScript 需要 JIT 在运行的过程中去逐步判断是否要对特定代码进行编译优化;
  2. CPU 复杂计算相当多,累加起来 wasm 就是比 js 快;
  3. 另外一个利好,就是 wasm 编译出来的机器码会被缓存下来,第二次加载直接不用编译了。JavaScript 则要照常解析。

其实我更在意的是在 Chrome 的表现,它是占有率最高,其使用的 v8 引擎性能比 Firefox 的要好。但 asm.js 的优化更多针对的是 Firefox 的,在 v8 上不知道是否有效果。

然后对比了它们的体积变化,体积减少并不是很明显。尤其是压缩之后。

理论上 wasm 保存不是文本,是字节,数据会更紧凑,体积一般要少得多。

不过需要注意的是这里的也是 asm.js 编译产出,并不是原生写的 JS 逻辑。

我其实挺好奇 Figma 为什么选择用 C++ 去开发?

我猜可能团队成员更熟悉 C++,应该有不少来自图像处理软件公司的大佬。这些软件用什么写的?多半是 C++。选择 C++ 是团队的最好的选择。

另外服务端也是要运行编辑器的渲染逻辑的(比如生成预览图),C++ 要比 nodejs 性能高得多,消耗更少的资源。nodejs 甚至没有 Canvas 环境,一种可选的方式是生成 SVG,然后用一些第三方工具转成图片。

或者可能需要用到一些JavaScript 没有的 C++ 图形库。我发现国内一些图形编辑器厂商貌似挺喜欢用 Skia(Canvas 2D 的底层调用库,开源)的,wasm 倒挺合适。

是否上 wasm?

做图形编辑器,如果要做到性能优化到极致的,还是要看看头部公司在做什么,业界的最新技术是什么。

为了极致的性能,还是很有必要用 wasm 的,当然这得一开始做产品的时候就用,像 Figma 一样。招人的时候要求 C++。

如果已经用 JavaScript 了,然后想用 C++ 重构去转 wasm 我感觉不太可能,这个投入产出比太低,团队也没这个基因,你还想基因突变不成。

如果只是将部分功能做成 wasm,我不好说,不知道会不会有通信上的问题,可能有点搞头。

只是做个简单的图形编辑器,性能要求不高,能用就行,比如白板工具、表格,就没必要用 wasm 了,甚至 WebGL 都可以不用,直接 Canvas 2D 走起。

最后需要强调的一点是,Figma 强大的原因在于 WebGL 的硬件加速,wasm 更多的是锦上添花的作用。你得好好确认你的图形编辑器的瓶颈在哪里。

结尾

我是前端西瓜哥,欢迎关注我,学习更多前端图形知识。

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

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

相关文章

从娱乐产品到效率工具,ARknovv首款AR眼镜回归“AR本质”

如果说2022年是AR的元年,2023年则有望成为消费级AR眼镜的新拐点。 今年AR眼镜行业发展明显加快,且不断有大厂入局:今年2月小米发布无线AR眼镜探索版;3月荣耀也推出了一款全新的观影眼镜;而苹果在6月发布的MR头显Visio…

【计算机视觉中的 GAN 】 - 生成学习简介(1)

一、说明 在阅读本文之前,强烈建议先阅读预备知识,否则缺乏必要的推理基础。本文是相同理论GAN原理的具体化范例,阅读后有两个好处:1 巩固了已经建立的GAN基本概念 2 对具体应用的过程和套路进行常识学习,这种练习题一…

transformer理解

transformer的理解 Q、K、V的理解 核心是自注意力机制。即每个位置的结果为所有位置的加权平均和。为了得到每个位置的权重,需要Q*K得到。 整个多头的self-attention过程 单个encoder encoder-decoder encoder中的K和V会传到decoder中的encoder-decoder attention中。 …

IOS + Appium自动化教程

前言 项目闲置下来了,终于抽空有时间搞自动化了,看了下网上的教程基本通篇都是android自动化的介绍 ,ios自动化方面的内容网上简介的少之可怜。由于本人对ios自动化也是第一次做,甚至对苹果电脑的使用都不太熟悉,花了大…

ubuntu 安装 Pycharm社区版

在Ubuntu中安装pycharm社区版_上玄下纁的博客-CSDN博客 里面可以创建快捷方式,蛮好用的

Android kotlin系列讲解之最佳的UI体验 - Material Design 实战

目录 一、什么是Material Design二、Toolbar三、滑动菜单1、DrawerLayout2、NavigationView 四、悬浮按钮和可交互提示1、FloatingActionButton2、Snackbar3、CoordinatorLayout 五、卡片式布局1、MaterialCardView2、AppBarLayout 六、可折叠式标题栏1、CollapsingToolbarLayo…

DevOps系列文章 之 docker 制作kafka镜像

Docker制作Kafka镜像教程 概述 本教程将指导你如何使用Docker制作一个Kafka镜像。Kafka是一个高性能、分布式的消息队列系统,用于处理大规模的实时数据流。使用Docker制作Kafka镜像可以方便地部署和管理Kafka集群。 整体流程 下面是制作Kafka镜像的整体流程&#xf…

导航【Demo】

导航【Demo】 前言版权推荐导航【Demo】最后 前言 15点32分 以下内容源自《【Demo】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://blog.csdn.net/qq_51625007 禁止其他平台发布时删除以上此话 …

linux驱动开发入门(学习记录)

2023.7.6及7.7 概述了解 一 1.驱动框架 2. 字符设备 块设备,存储相关 网络设备驱动 不一定属于某一种类型二 1.获取外设或传感器数据,控制外设,数据会提交给应用程序 2.编写一个驱动,及测试应用程序 app。驱动和应用完全分开 3.驱…

an adaptive shuffle attention (ASA) module

“F-UNet++:基于多用途自适应shuffle注意力和复合多输入重建网络的遥感图像融合”,在这项工作中,自适应洗牌注意力(ASA)模块和优化的 UNet++ 结合在融合 UNet++(F-UNet++)框架中,用于解决 MS 和 PAN 图像融合问题。 多光谱图像 name_MSS.tiff全色图像 name_PAN.tiff数据…

OpenCV:图像直方图计算

图像直方图为图像中像素强度的分布提供了有价值的见解。通过了解直方图,你可以获得有关图像对比度、亮度和整体色调分布的信息。这些知识对于图像增强、图像分割和特征提取等任务非常有用。 本文旨在为学习如何使用 OpenCV 执行图像直方图计算提供清晰且全面的指南。…

高清视频制作GIF怎么操作?一个工具在线完成视频转GIF

一段视频为了方便传输分享想要做成GIF动画的时候要怎么操作呢?很简单,只需要一款专业的GIF在线制作工具-GIF中文网,使用视频转GIF(https://www.gif.cn/)功能,上新MP4格式视频,能够快速制作1分钟…

Practice2|189. 轮转数组、724. 寻找数组的中心下标

189. 轮转数组 1.题目: 给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,…

Django学习笔记-视图(views)的使用

Django中可以使用views进行管理,类似于WPF的MVVM的ViewModel层,也相当于MVC架构的模Controller层。 一、基于函数的视图FBV(Function-Based View) 通过定义一个函数,包含HttpRequest对象作为参数,用来接受…

如何提高自己的软件测试水平之bug定位

同学们在面试投简历的时候会经常看到人家公司JD上写的要求之一,如下: 这句话大家不要以为随便写写的,在我工作的十几年过程中起码见过10个以上试用期没过的公司新人,公司在衡量一个测试工程师是否专业的标准之一就是:…

大数据面试题:Kafka怎么保证数据不丢失,不重复?

面试题来源: 《大数据面试题 V4.0》 大数据面试题V3.0,523道题,679页,46w字 可回答:Kafka如何保证生产者不丢失数据,消费者不丢失数据? 参考答案: 存在数据丢失的几种情况 使用…

Linux下在终端输入密码隐藏方法

Linux系统中,如何将在终端输入密码时将密码隐藏? 最近做简单的登录界面时,不做任何操作的话,在终端输入密码的同时也会显示输入的密码是什么,这样对于隐蔽性和使用都有不好的体验。那么我就想到将密码用字符*隐藏起来…

STM32 Flash学习(三)

硬件设计 开机的时候先显示一些提示信息,然后在主循环里面检测两个按键。 其中1个按键WK_UP用来执行写入FLASH的操作,另一个按照KEY0用来执行读出操作。 软件设计 添加了两个文件stmflash.c和stmflash.h。 #include "stmflash.h" #include…

freeswitch的mod_xml_curl模块

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 随着fs服务的增多,每一台fs都需要在后台单独配置,耗时耗力,心力憔悴。 如果有一个集中管理配置的配置中心,统一管理所有fs的配置,并可以实现动态的修改配置就…

自动驾驶地面车辆的雷达里程计:方法与数据集综述

在不同复杂环境中,各种传感器的性能会有所不同。它们各自具有优势和劣势,因此融合多模态数据提供了一种解决方案,可以克服各个传感器单独使用时的限制[90]–[92]。此外,许多讨论的传感器已经广泛应用于自动驾驶领域,因…