Electron (Chrome) と React でチャット クライアントを実装してきました。私たちの最優先事項はスピードです。したがって、仮想化されたリスト コンポーネント (「バッファ レンダー」または「ウィンドウ レンダー」とも呼ばれます) を使用する必要があります。特に、react-virtualized、react-window、react-infinite について調べました。
これらすべてのコンポーネントに共通する問題の 1 つは、可変高さのリスト要素をサポートする場合、高さを事前に知る必要があることです。現在、非常に長いチャットもあれば、非常に短いチャットもあり、それが私たちの課題となっています。(EXIF データと ffprobe のおかげで、画像とビデオは簡単です)。
そのため、高さを測定すると同時に、非常に高いパフォーマンスを発揮するという課題に直面しています。明らかな手法の 1 つは、ビューポート外のブラウザー コンテナーに要素を配置し、測定を実行してから、リストをレンダリングすることです。しかし、それはパフォーマンス要件の面で私たちを傷つけます. react-virtualized/CellMeasurer (元の作成者によって保守されていません) や react-window などのソフトウェアは、ライブラリに組み込まれているこの手法を使用しますが、パフォーマンスはやや遅く、信頼性が低くなります。バックグラウンドの Electron Browser ウィンドウを使用してレンダリングと測定を行うという、よりパフォーマンスの高い同様のアイデアがありますが、私の直感では、それほど高速ではありません。
ワードラップ、最大幅、およびフォント規則に従って、文字列の高さを事前に把握するための解決済みの方法が必要であると提出します。
私の現在の考えは、API を介してテキスト データを取得したらすぐに行の高さを計算するために、string-pixel-width のようなライブラリを使用することです。基本的に、ライブラリはこのコードを使用して文字幅のマップを生成します [*]。次に、各テキストの幅がわかったら、計算された最大行幅を超えたときに各行を区切り、最後に行数からリスト要素の高さを推測します。ブレークワードのために少しアルゴリズムをいじる必要がありますが、それを支援するライブラリがあります - css-line-breakは有望なようです。
[*] すべての Unicode 文字範囲を考慮して少し変更する必要がありますが、それは些細なことです。
まだ十分に検討していないオプションには、python weasyprint プロジェクトと facebook-yoga プロジェクトが含まれます。私はあなたのアイデアを受け入れます！