Reactに有利なベンチマークを作ってみた - Qiita

皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン

[z1h4784]

この条件でSvelteと300msしか差がないんだ。仮想DOMイラネ勢が出てくるのも分かる

[tokuniimihanai]

「非仮想DOMのライブラリでは、リアクティブシステムと実DOMが直結している限り、このようなスケジューリングは原理的に不可能」なるほど／こういう具体的な比較は勉強になるし非常に良いですね

[wordi]

これはタイトル通り一覧のレンダリングをstartTransitionでラップして、"ball"連続入力中に不要になった途中の一覧レンダリングをスキップさせてReactを有利にしてる、startTransitionを外すとVueとほぼ同速になるよ

[uehaj]

デバウンスするのと何が違うかだが、Reactコンカレントレンダリングでのトランジションは対象の描画を必要があれば遅らせるが、高速なマシンでは遅延させない。つまりアダプティブなデバウンスと見ることができる

[ultimatebreak]

Vue信者ワイ、React頑張って勉強してるけどまだReactの良さがわからない。修行が足りないのか

[yamadashy]

CPU の 4x slowdown にすると顕著に違いがわかった

[yarumato]

“筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいる。Reactが有利になるベンチマークアプリを作成。高負荷の状況でもReactが最も快適に入力できる。ジョブスケジューリングに注力してるから”

[igrep]

“他のライブラリは同等のスケジューリングを実装していないので、1文字入力されるたびに高負荷の更新が入り、次の入力の更新を阻害してしまう” コメントにもあるとおり工夫の余地はありそう

[corner0427]

スマホで見ても体感差が出ないし、極めて遅いマシンで3700個も要素を並べないと差が出ないとも読めるけど

[dkanikama]

いい記事だし、いいコメント欄だし、いい企画だ

[dalmacija]

おもしろい

[poad1010]

この記事をおすすめしました:

[programmablekinoko]

Reactはフレームワークではなくライブラリと聞くけど、ブラウザ描画用OSみたいなイメージになった。逆にReactのジョブスケジューリングとかステートによる描画管理とか、ブラウザのDOM API標準にならんもんだろうか

[umai_bow]

いい実例

[advancive61]

勉強になった

[rgfx]

"Reactがジョブスケジューリングに力を入れているからだと考えられます"

[prograti]

なるほど、参考になりました。開発者ツールのパフォーマンス計測でレンダリングのタイミングとか細かく比較すると面白そうですね。

[tofu-kun]

良い視点

[hase0510]

そういえばReact.jsの登場時はめちゃくちゃ速いというのが大々的にアピールされてた気がする。最近はそういう話を見ないから忘れてた。

[door-s-dev]

reactのバージョン下げたらどうなるのか試してみたい

[KoshianX]

へええ、仮想DOM別に速くないじゃんってツッコミもあったけどこういう状況だと有利に働くのか。