因為每次 dom 修改，瀏覽器往往需要重新計算元素布局，再重新渲染。也就是所謂的重排（reflow）和重繪（repaint）。尤其是在頁面包含大量元素和複雜布局的情況下，效能會受到影響。
乙個常見的場景是大資料量的列表渲染。通常表現為可無限滾動的無序列表或者**，當資料很多時，頁面會出現明顯的滾動卡頓
方案1：
做分頁處理，首頁預設展示第一頁資料，滾動載入，這也是一種方案，如果列表做不了分頁，那該如何處理。
方案2：
虛擬列表的實現原理：只渲染可視區的 dom 節點，其餘不可見的資料卷起來，只會渲染可視區域的 dom 節點，提高渲染效能及流暢性，優點是支援海量資料的渲染；當然也會有缺點：滾動效果相對略差（海量資料與滾動效果的取捨問題就看自己的需求嘍
使用vue-virtual-scroller外掛程式
安裝這個外掛程式：
$ npm install -
d vue-virtual-scroller
main.js 引入這個外掛程式：
import
"vue-virtual-scroller/dist/vue-virtual-scroller.css"
;import vue from
"vue"
;import vuevirtualscroller from
"vue-virtual-scroller"
;vue.
use(vuevirtualscroller)
;
滾動節流減少伺服器壓力。
方案4：
vue 會通過 object.defineproperty 對資料進行劫持，來實現檢視響應資料的變化，然而有些時候我們的元件就是純粹的資料展示，不會有任何改變，我們就不需要 vue 來劫持我們的資料，在大量資料展示的情況下，這能夠很明顯的減少元件初始化的時間，那如何禁止 vue 劫持我們的資料呢？可以通過 object.freeze 方法來凍結乙個物件，一旦被凍結的物件就再也不能被修改了。
exportdefault})
, asynccreated
};
vue長列表優化
寫在前面 不知不覺 2020年的日子已經過去了3 4，看到微博熱搜說 2020年還剩下3個月的時候，心情突然驟降 哈哈哈哈 切入正題 什麼是長列表優化？我們為什麼需要長列表優化？我們怎樣進行長列表優化 在我們的日常工作中，會越到各種各樣的列表，比如，我們通常採用分頁的方式進行內容的逐漸獲取，但是不可...
優化長列表
最近做的專案有乙個列表模組資料量巨大，後端限制完資料後還有大概10000條資料，直接渲染的話會有明細的卡頓情況，於是擼起袖子開始重構。這裡只回顧一下實現原理以便以後忘了能立馬撿起來 1.儲存原始列表陣列資料 2.只渲染可視區域大小的元素 3.當滾輪滾動時，動態的計算當前的scrolltop的值，然後...
靜態長列表優化
之前在商品模組的時候遇到乙個這樣的問題多個規格組合在一起的時候 規格列表就會很長並且每乙個規格都會有不同的 跟會員價等等資訊，所以會造成每一條商品資料會十分的臃腫再加上多條的話，對於商品規格資料的增刪改查操作的時候頁面會卡頓白屏操作甚至會載入不出來等情況 針對這一反饋我們的長列表優化就來了 思路外層...