最近做的專案有乙個列表模組資料量巨大，後端限制完資料後還有大概10000條資料，直接渲染的話會有明細的卡頓情況，於是擼起袖子開始重構。
這裡只回顧一下實現原理以便以後忘了能立馬撿起來：
1.儲存原始列表陣列資料；
2.只渲染可視區域大小的元素；
3.當滾輪滾動時，動態的計算當前的scrolltop的值，然後根據列表每條資料的高度動態的去獲取可視區域應該展現的列表陣列元素；
4.做內外兩次div，外層做固定高度，overflow：auto，內層做相對定位，並且內層的高度為所有資料佔滿的高度，將需求展示的列表資料元素做絕對定位，絕對定位的top值 = 列表每個資料元素的自身高度*索引值。
**片段：
import from 'react-dom';
onscroll= ()=>
this.virtualdom = v}>
靜態長列表優化
之前在商品模組的時候遇到乙個這樣的問題多個規格組合在一起的時候 規格列表就會很長並且每乙個規格都會有不同的 跟會員價等等資訊，所以會造成每一條商品資料會十分的臃腫再加上多條的話，對於商品規格資料的增刪改查操作的時候頁面會卡頓白屏操作甚至會載入不出來等情況 針對這一反饋我們的長列表優化就來了 思路外層...
vue長列表優化
寫在前面 不知不覺 2020年的日子已經過去了3 4，看到微博熱搜說 2020年還剩下3個月的時候，心情突然驟降 哈哈哈哈 切入正題 什麼是長列表優化？我們為什麼需要長列表優化？我們怎樣進行長列表優化 在我們的日常工作中，會越到各種各樣的列表，比如，我們通常採用分頁的方式進行內容的逐漸獲取，但是不可...
vue 長列表效能優化
因為每次 dom 修改，瀏覽器往往需要重新計算元素布局，再重新渲染。也就是所謂的重排 reflow 和重繪 repaint 尤其是在頁面包含大量元素和複雜布局的情況下，效能會受到影響。乙個常見的場景是大資料量的列表渲染。通常表現為可無限滾動的無序列表或者 當資料很多時，頁面會出現明顯的滾動卡頓 方案...