大量のデータをhtmlで読み込む

Question

htmlのWebページに大量のデータを読み込む最良の方法を教えてください。私はうまく動作する素敵なレイアウトを持っていますが、データベースがいっぱいになると、これがパフォーマンスに大きな影響を与えるのではないかと心配しています。私がデータテーブルを使用するのが最善で、怠惰なローディングが良い選択肢になるでしょうか？私はプロジェクトに深く入り込む前に、いくつかの研究をしようとしています。 これはあなたが必要なもの現在のクライアントビュー

<div class="row"> 
      <div class="col-lg-4"> 
       <div class="contact-box"> 
        <a href="profile.html"> 
        <div class="col-sm-4"> 
         <div class="text-center"> 
          <img alt="image" class="img-circle m-t-xs img-responsive" src="img/a2.jpg"> 
          <div class="m-t-xs font-bold">Graphics designer</div> 
         </div> 
        </div> 
        <div class="col-sm-8"> 
         <h3><strong>John Smith</strong></h3> 
         <p><i class="fa fa-map-marker"></i> Riviera State 32/106</p> 
         <address> 
          <strong>Twitter, Inc.</strong><br> 
          795 Folsom Ave, Suite 600<br> 
          San Francisco, CA 94107<br> 
          <abbr title="Phone">P:</abbr> (123) 456-7890 
         </address> 
        </div> 
        <div class="clearfix"></div> 
         </a> 
       </div> 
      </div> 
      </div> 

Answer 1

ではロード本当に怠け者ではなく、怠惰はをレンダリングします。 10kクライアントの名前と連絡先情報をJSオブジェクトとしてRAMに簡単に保存できます。あなたの問題はすべて、これらの要素のレンダリングに集中します。そこでは、数百枚のカードのパフォーマンスが低下することがあります。

要素が非常に似ているだけで、データが変わるだけで、既存のDOM要素を再利用できます。そしてさらに良いことに、すでにこれを手助けする多くの図書館があります！ Reactとreact-listは今まで私にとって素晴らしい仕事でした。 Reactでは、要素が画面上に表示され、要素がビューから外れると、それらのDOM要素を再利用するようになります。

このようなレイジーレンダリングでは、リストを瞬時にフィルタリングすることも期待できます。

Reactの特別なワークフロー（Reactコンポーネントとしてカードを書く、.jsxファイルのコンパイルステップを追加する）を調整する必要があるという欠点があります。この問題を解決する他のライブラリがたくさんあります（良い検索フレーズには "js list view"と "無限スクロールリスト"があります）。しかし、私はそれらの大部分が、パブリックAPIが悪い、またはグローバルウィンドウのスクロールバーにアタッチしていないなどの基本的な欠陥があることを発見しました。私がこれまでに満足しているのは、反応リストだけです。あなたが本当に何をすべき

---

はを推測停止です。あなたの好きなfakerライブラリを使って、データベース内のランダムなレコードを数千の^{（または何でも期待どおり）生成します。}