長列表效能優化(只展示資料 不改變資料)

2021-10-03 16:22:07 字數 382 閱讀 3155

我們應該都知道 vue 會通過 object.defineproperty 對資料進行劫持,來實現檢視響應資料的變化,然而有些時候我們的元件就是純粹的資料展示,不會有任何改變,我們就不需要 vue 來劫持我們的資料,在大量資料展示的情況下,這能夠很明顯的減少元件初始化的時間。

所以,我們可以通過 object.freeze 方法來凍結乙個物件,這個物件一旦被凍結,vue就不會對資料進行劫持了。

export default ),

async created() ,

methods:

}

另外需要說明的是,這裡只是凍結了 list 的值,引用不會被凍結,當我們需要 reactive 資料的時候,我們可以重新給 list 賦值。

vue 長列表效能優化

因為每次 dom 修改,瀏覽器往往需要重新計算元素布局,再重新渲染。也就是所謂的重排 reflow 和重繪 repaint 尤其是在頁面包含大量元素和複雜布局的情況下,效能會受到影響。乙個常見的場景是大資料量的列表渲染。通常表現為可無限滾動的無序列表或者 當資料很多時,頁面會出現明顯的滾動卡頓 方案...

優化長列表

最近做的專案有乙個列表模組資料量巨大,後端限制完資料後還有大概10000條資料,直接渲染的話會有明細的卡頓情況,於是擼起袖子開始重構。這裡只回顧一下實現原理以便以後忘了能立馬撿起來 1.儲存原始列表陣列資料 2.只渲染可視區域大小的元素 3.當滾輪滾動時,動態的計算當前的scrolltop的值,然後...

靜態長列表優化

之前在商品模組的時候遇到乙個這樣的問題多個規格組合在一起的時候 規格列表就會很長並且每乙個規格都會有不同的 跟會員價等等資訊,所以會造成每一條商品資料會十分的臃腫再加上多條的話,對於商品規格資料的增刪改查操作的時候頁面會卡頓白屏操作甚至會載入不出來等情況 針對這一反饋我們的長列表優化就來了 思路外層...