之前在商品模組的時候遇到乙個這樣的問題多個規格組合在一起的時候 規格列表就會很長並且每乙個規格都會有不同的**跟會員價等等資訊，所以會造成每一條商品資料會十分的臃腫再加上多條的話，對於商品規格資料的增刪改查操作的時候頁面會卡頓白屏操作甚至會載入不出來等情況
針對這一反饋我們的長列表優化就來了
思路外層div 設定乙個可以滾動的固定高度的盒子，
內層乙個盒子通過計算所有條數的高度和 用來設定高度讓外層盒子可以滾動 可以通過絕對定位來設定 （作用：讓內部滾動起來，計算整體高度）
內層另外乙個盒子用來顯示內容
對外層盒子繫結滾動事件得到滾動出去得高度 通過計算得到需要設定得資料 再設定內容的偏移量 跟滾動條高度持平 如此就達到了優化的目的了
csshtml
class="list-view-phantom"
:style=""
/>
v-for="(item, index) in visibledata"
class="list-view-item"
:style=""
>
js
優化長列表
最近做的專案有乙個列表模組資料量巨大，後端限制完資料後還有大概10000條資料，直接渲染的話會有明細的卡頓情況，於是擼起袖子開始重構。這裡只回顧一下實現原理以便以後忘了能立馬撿起來 1.儲存原始列表陣列資料 2.只渲染可視區域大小的元素 3.當滾輪滾動時，動態的計算當前的scrolltop的值，然後...
vue長列表優化
寫在前面 不知不覺 2020年的日子已經過去了3 4，看到微博熱搜說 2020年還剩下3個月的時候，心情突然驟降 哈哈哈哈 切入正題 什麼是長列表優化？我們為什麼需要長列表優化？我們怎樣進行長列表優化 在我們的日常工作中，會越到各種各樣的列表，比如，我們通常採用分頁的方式進行內容的逐漸獲取，但是不可...
vue 長列表效能優化
因為每次 dom 修改，瀏覽器往往需要重新計算元素布局，再重新渲染。也就是所謂的重排 reflow 和重繪 repaint 尤其是在頁面包含大量元素和複雜布局的情況下，效能會受到影響。乙個常見的場景是大資料量的列表渲染。通常表現為可無限滾動的無序列表或者 當資料很多時，頁面會出現明顯的滾動卡頓 方案...