皆さんこんにちは、フロントエンドのスイカ兄貴です。
Web 上のグラフィカル エディタとして wasm を使用するのは良い選択のように思えます。
グラフィックス処理では、WebGL GPU アクセラレーションを利用できない、CPU を大量に使用する計算が大量に行われるためです。たとえば、複雑なベジェ曲線を三角形分割し、複数のグラフィック上の複雑なグラフィックに対してブール演算を実行します。
グラフィックエディターのパフォーマンス上限 Figma は wasm を使用していますが、私たちもそれを使用する必要がありますか?
Figma のパフォーマンスの向上
wasm およびグラフィック エディターに関しては、Figma の読み込みが 3 倍高速であることがよく言われます。Figma のこの記事から:
《WebAssembly により Figma のロード時間が 3 分の 1 に短縮されました》
読んでみて、たくさんのことを得ることができました。
Figma は最初から C++ で書かれています。wasm がブラウザでサポートされる前は、Figma は wasm の前身である asm.js を使用して JavaScript に変換し、ブラウザ上で実行できるようにしていました。
Wasm は 2017 年にブラウザに実装され、Figma は当然のことながら、あまり変換コストをかけずに wasm を使用します。
その時点で、Figma は Chrome での wasm の実行にバグがあり、失敗することを発見しました。Firefox は正常に動作します。Edge と Safari は数か月間実装されません。
したがって、この記事の比較データはFirefox のみであり、asm.js を介して js にコンパイルされた C++ と wasm にコンパイルされた C++ の間のパフォーマンスの比較であり、ネイティブ js と wasm の比較ではありません。
1 つ目は、読み込み速度が 3 倍に向上したことです。ロードとは、ページを開いて最終的に描画の描画効果を表示するプロセスを指します。
大きな設計図面の場合、以前はロードに約 12 秒かかっていましたが、現在はわずか 4 秒しかかかりません。この改善は非常に優れており、特にユーザーが大きなデザイン図面を頻繁に開く必要がある場合に、ユーザー エクスペリエンスが大幅に向上したと言わざるを得ません。図面。
Wasm 速度が向上する理由は次のとおりです。
- Wasm のバイトコードは迅速に解析され、直接コンパイルされますが、JavaScript では実行プロセス中に特定のコードをコンパイルおよび最適化するかどうかを段階的に決定するために JIT が必要です。
- CPU 上では非常に多くの複雑な計算が行われ、合計すると wasm の方が js よりも高速です。
- もう 1 つの利点は、wasm によってコンパイルされたマシン コードがキャッシュされるため、2 番目のロードを直接コンパイルする必要がないことです。JavaScript は通常どおり解析されます。
実際のところ、私は最もシェアが高い Chrome のパフォーマンスの方が気になっており、使用されている v8 エンジンのパフォーマンスは Firefox よりも優れています。ただし、asm.js の最適化は Firefox を対象としたものであり、v8 に影響があるかどうかはわかりません。
次に、それらの体積の変化を比較すると、体積の減少はあまり明らかではありません。特に圧縮後。
理論的には、wasm はテキストではなくバイトを保存するため、データはよりコンパクトになり、一般的にボリュームははるかに小さくなります。
ただし、これはネイティブに作成された JS ロジックではなく、asm.js コンパイルの出力でもあることに注意してください。
実は非常に興味があるのですが、なぜ Figma が開発に C++ を使用することを選んだのでしょうか?
おそらくチームメンバーは C++ に精通しており、画像処理ソフトウェア会社の大物もたくさんいるはずです。ソフトウェアは何で書かれていますか? 主に C++ です。C++ を選択することがチームにとって最善の選択です。
さらに、サーバーはエディターのレンダリング ロジック (プレビュー イメージの生成など) も実行する必要があります。C++ は、nodejs よりもパフォーマンスがはるかに高く、消費するリソースも少なくなります。Nodejs には Canvas 環境さえありません。SVG を生成し、それをサードパーティのツールを使用して画像に変換するオプションの方法もあります。
あるいは、JavaScript にはない C++ グラフィック ライブラリを使用する必要があるかもしれません。国内のグラフィック エディタ メーカーの一部は Skia (Canvas 2D の基礎となる呼び出しライブラリ、オープン ソース) を使用することを好むようで、wasm が非常に適していることがわかりました。
ワズムって使ってますか？
グラフィックエディターとしてパフォーマンスを極限まで最適化したい場合は、やはり本社の取り組みや業界の最新テクノロジーに目を向ける必要があります。
究極のパフォーマンスを実現するには、やはり wasm を使用する必要がありますが、これは、Figma と同様に、最初に製品を作成するときに使用する必要があります。採用時にはC++が必須となります。
すでに JavaScript を使用していて、C++ リファクタリングを使用して wasm に変換したい場合は、その可能性は低いと思います。入出力比が低すぎるため、チームにはこの遺伝子がありません。それでも、遺伝子変異を作成したいと考えています。
一部の機能だけを wasm 化すると、通信上の問題が発生するかはわかりませんが、少し面倒になる可能性があります。
ホワイトボードツールやフォームなど、wasmを使わなくてもWebGLを直接利用できたり、Canvas 2Dを直接利用したりすることができれば、性能要件の低いシンプルなグラフィックエディタです。
強調する必要がある最後の点は、Figma が強力である理由はWebGL のハードウェア アクセラレーションにあり、wasm はおまけにすぎないということです。グラフィック エディターのボトルネックがどこにあるのかを確認する必要があります。
終わり
私はフロントエンドのスイカ兄弟です。フォローしてフロントエンドのグラフィックスの知識をさらに学ぶことを歓迎します。