さまざまなコンテンツをテキストの列（および画像、ビデオなど）にラップするコードを書いています。コードは正常に機能しますが、使用しているアルゴリズムが原因で、特にこの一般的なロジックはかなり遅くなります。
基本的に私の問題は、不明な量のテキストを列に追加していることです。そのため、テキストの各チャンクの後に、正しいscrollHeightを提供するためにブラウザーがDOMをアクティブにリフローする必要がある列のスクロール高さを確認します。したがって、すべてを適切にレイアウトするために、50〜100以上のリフローがあります。
これらのほとんどを回避する方法に関する一般的なアイデアはありますか？
コンテンツを複数回レンダリングできます。初めてキャッシュするので、これはかなり速いはずです。マルチレンダリングの理由は次のとおりです。
元のコンテンツを非表示の領域にレンダリングします
列幅がコンテンツと比較されているかどうかを確認してください
コンテンツを列の上、ただしページの下にオーバーレイします。これにより、オーバーフローしているコンテンツの一部が切り取られます。あなたはz-indexingまたはで達成することができますoverflow: hidden;
手順2のチェックに基づいて、同じ方法でコンテンツのコピーを次の列の計算されたオフセットでオーバーレイし、余分なコンテンツを非表示にします。
複数の列がある場合にこれを行う必要がある列の数がわかるように、レンダリングされたコンテンツと合計コンテンツを追跡します。
たぶんこれはTravisJが提案しているのと同じことですが、私にはわかりません。彼の解決策を完全には理解していません。
offsetTop最初にすべてを1つの列にレンダリングしてから、要素をトップダウンでループして、目的の列の高さと各要素のプラスに基づいて、分割するタイミングを知ることができますheight。ブレークする要素を見つけたら、その位置をキャッシュして続行します。最後に、分割する要素のリストを含む配列が必要です。これにより、実際にコンテンツを列に分割できます。
これはあなたにとって意味がありますか？