当前位置：首页 >人工智能 >WebAssembly如何让Figma加载时间缩短三倍？

WebAssembly如何让Figma加载时间缩短三倍？

发布时间：2024-07-14 12:09:21 浏览量：247次

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端进阶

WebAssembly是什么？

汇编（Assembly）是一种底层编程语言，与 CPU 架构的机器级指令有紧密联系，它离机器可理解的代码（机器码）只差一个转换过程，称为汇编。

图片来源：https://commons.wikimedia.org/wiki/File:Wasm_diagram.svg

WebAssembly可以理解为Web的汇编，是一种类似于汇编语言的底层语言，紧凑的二进制格式，实现接近原生速度的Web应用程序运行，同时支持多种编程语言的编译目标。

WebAssembly与JavaScript并存，不是替代JavaScript，两种语言可以相互交换代码，获得WebAssembly的性能和JavaScript的多功能性。

WebAssembly与JavaScript的关系

Figma是一个基于浏览器的界面设计工具，具有强大的2D WebGL渲染引擎，支持超大文档，使用C++编写，可以轻松编译成WebAssembly。通过WebAssembly，Figma的加载时间缩短了3倍，为用户体验带来巨大改进。

图片来源：https://www.figma.com/

在切换到WebAssembly后，无论文档大小如何，加载时间都缩短了3倍以上，这对用户体验而言是重大改进。

WebAssembly的加载时间不再取决于应用程序大小，浏览器缓存了上次从WebAssembly到本机代码的转换，提升加载速度。

Figma希望使用WebAssembly能减少下载包体积大小，但实际上并没有太大缩小，尤其在压缩后。压缩asm.js代码只会比压缩等效的WebAssembly代码稍微大一点。

图片来源：Evan Wallace的“WebAssembly cut Figma's load time by 3x”

本文主要介绍了Figma与WebAssembly的关系，通过使用WebAssembly，Figma的加载时间缩短了3倍。如果您对Figma感兴趣，可以查阅文末的参考资料，了解更多内容。如有疑问欢迎在评论区留言。