一般我們在寫react專案中，同時渲染很多dom節點，會造成頁面卡頓, 空白的情況。為優化原生dom元素渲染長列表，我們可以使用react-virtualized元件庫，且它較為全面，一般用來展示大型列表和**資料
效能優化：1、懶渲染（常見於移動端）
2、可視區域渲染
順便解釋懶渲染，就是每次渲染一部分，等渲染的資料即將滾動完時，再渲染下面部分。其缺點，資料量大時，頁面中依然存在大量dom節點，占用記憶體過多、降低瀏覽器渲染效能，導致頁面卡頓 。
一般使用 於資料量不大的情況；
可視區域渲染， react-virtualized就是使用的這種
原理：只渲染頁面可視區域的列表項，非可視區域的資料「完全不渲染」 ，在滾動列表時動態更新列表項，也會預先載入一些資料防止白屏，適用於一次性展示大量資料的情況（大**、微博、聊天應用等）
基本使用
1、先安裝元件庫 npm install react-virtualized
2、在專案入口檔案index. js中匯入樣式檔案
3、開啟參考文件，看你是使用哪個元件（grid，list），就進入哪個元件的文件
4、翻到文件最底部，將示例**複製到專案中
5、分析示例**，根據專案的使用、需求來修改**
優化長列表
最近做的專案有乙個列表模組資料量巨大，後端限制完資料後還有大概10000條資料，直接渲染的話會有明細的卡頓情況，於是擼起袖子開始重構。這裡只回顧一下實現原理以便以後忘了能立馬撿起來 1.儲存原始列表陣列資料 2.只渲染可視區域大小的元素 3.當滾輪滾動時，動態的計算當前的scrolltop的值，然後...
靜態長列表優化
之前在商品模組的時候遇到乙個這樣的問題多個規格組合在一起的時候 規格列表就會很長並且每乙個規格都會有不同的 跟會員價等等資訊，所以會造成每一條商品資料會十分的臃腫再加上多條的話，對於商品規格資料的增刪改查操作的時候頁面會卡頓白屏操作甚至會載入不出來等情況 針對這一反饋我們的長列表優化就來了 思路外層...
vue長列表優化
寫在前面 不知不覺 2020年的日子已經過去了3 4，看到微博熱搜說 2020年還剩下3個月的時候，心情突然驟降 哈哈哈哈 切入正題 什麼是長列表優化？我們為什麼需要長列表優化？我們怎樣進行長列表優化 在我們的日常工作中，會越到各種各樣的列表，比如，我們通常採用分頁的方式進行內容的逐漸獲取，但是不可...