最大10000の要素のリストを正しくレンダリングする方法。
無限のドロップダウンロードテクノロジーにより、ユーザーは多数のコンテンツブロックの前でスクロールして表示できます。この方法は、下にスクロールするときに新しいコンテンツをロードし続けることです。
データを発見する主要な方法としてスクロールを使用すると、ユーザーがより長くウェブページに留まり、ユーザーエンゲージメントを増やすことができます。ソーシャルメディアの人気により、ユーザーは大量のデータが消費されます。ワイヤレススクロールは、ページがプリロードされるのを待つことなく、ユーザーが膨大な量の情報を閲覧できる効率的な方法を提供します。
考え方を変更した場合、ページに10,000個のストレート列コンポーネントがある場合、5つのコンポーネントを使用してページ全体を動的にレンダリングするにはどうすればよいですか？
解決長いリストの最適化には、ページング、怠zyなロードなどの多くのソリューションがあります。ユーザーが待つことができるように、非常に優れた相互作用（chrysanthemum画像）があります。この計画も非常に成功しています。
別の方法を見つける方法は？
1.単一ページのアプリケーションでは、ページごとに10個の要素を使用して、ページあたり10個の要素を使用して、ページングスキームを1回分析できます。
2。画面が対応する位置にスクロールし、対応する10要素をレンダリングするときに、ブラケットを使用してリスト全体をサポートできますか？
点滅する問題このアイデアを実装すると、ちらつきの問題があります。スクロールイベントが頻繁に発生しているため、各カットシーンでレンダリングする必要がある10個の要素を確認し、直接交換する必要があるため、表示される要素が常に繰り返されていることがわかります。
ここでのアイデアは、画面の位置を確認すると、合計30で10をレンダリングしてから10をレンダリングします。レンダリングを制御するときは、常に上または下の要素を交換して、中央で見ることができる部分が塗り直され、レンダリングされないようにします。事前にレンダリングされたデータが再描画されているというだけです。
原理5つの要素の固定ウィンドウサイズのNアイテムのリストを表示できるコンポーネントを実装します。つまり、いつでも、無限のスクロールN要素に5つのDOMコンテナしかありません。
<ul> <li style = transform：translate3d（0px、0px、0px）;>…</li> <li style = transform：translate3d（0px、60px、0px）;>…</li> </ul>
たとえば、100の要素、5がホームページに表示されます。 [0,1,2,3,4]これらの5 <li> sの初期化をレンダリングする必要があります。少し下にスクロールするとき[1,2,3,4,5]これらの<li> sをレンダリングする必要があります。現時点では、全体を直接交換しないでください。差異項のみを置き換える必要があります。構造は[5,1,2,3,4]でなければなりません。絶対的な位置であるため、標準のストリームから分離されます。単一の再描画は他の4つに影響を与えず、パフォーマンスが向上します。
それを実装する方法< src = https：//cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </script> <title> document </title> <style> body、ul、li {margin：0;パディング：0;リストスタイル：なし; } ul {position：relative; } ul li {position：absolute;上：0;幅：100％;高さ：31px;ラインハイト：32px;ボーダーボトム：1px solid #ccc; } </style> </head> <body> <ul> </ul> </body> <script> // Total Container var list = []; // Visual Rangeの要素var showlist = []; // render container var renderlist = []; //各コンテナの高さvar lineheight = 32 //（var i = 0; i <1000; i ++）{list.push（{id：i、text： 'th' +（i + 1） + 'elements'、tot：i * lineheight、bottom：（i + 1） * lineheight}） 1000 * lineheight+'px'）//初期コンテナの関数レンダリング（上、下部）を見つけます{showlist = [] //マークレンダリング後にレンダリングされたデータは繰り返されます。この部分は繰り返しレンダリングされません。 if（item.top <= window.scrolly && item.bottom> window.scrolly）{currentIndex = i;壊す; }} var range = 0 //現在見つかった要素でそれぞれ上下に表示する要素を見つけます。総数が35に達するまで（範囲<100 && showlist.length + sameindex.length <35）{if（currentindex -range> = 0）{//その時点でshowlist、マークされていない要素を置き換えますif（renderlist.includes（list [currentindex -range] .id））{// sameindex.push（currentindex -range）sameindex.unshift（renderlist.indexof（list [currentindex -range] .id））} <list.length && range！= 0）{if（renderlist.includes（list [currentindex + range] .id））{sameindex.push（renderlist.indexof（list [currentindex + range] .id .id））} （renderlist.length> 0）{for（var i = 0; i <renderlist.length; i ++）{if（！sameindex.includes（i）&& showlist.length）{renderlist [i] = showlist.shift（）。id $（ 'ul li'）。eq（i）.html（list [renderlist [i]]。id +list [renderlist [i]。 list [renderlist [i]]。top + 'px、0px）;'）}}}} else {//初めてrenderlist = showlist.map（function（val）{return val.id}）renderlist.map（function（key）{key）{$（ 'ul'）。 + 'px、0px）;>＃' + list [key] .id + list [key] .text + '</li>'）}）} console.log（renderlist）} // first rendering render（）render（）$（）$（）$（）scroll（function（e）{render（）}）;トトキーポイント
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。