A Vue Component Support big Amount data list with High Scroll Performance

A vue component support big amount data list with high scroll performance. vue-virtual-scroll-list

Advantages

  • Items are independent.

  • Tiny and very easy to use.

  • Big data list with high performance.

Live demos

The main difference between item-mode and vfor-mode is that: item-mode make a higher performance but not very convenient to handle changing data frequently; however, vfor-mode is just the opposite.

Besides, you can also compare the experience which without using virtual-list here: without-virtual-list.

How it works

vue-virtual-scroll-list

Simple usage

npm install vue-virtual-scroll-list --save

vfor-mode

All you need to care about is only data!

<template>
  <div>
    <virtual-list :size="40" :remain="8">
      <item v-for="item of items" :key="item.id" />
    </virtual-list>
  </div>
</template>
<script>
  import item from '../item.vue'
  import virtualList from 'vue-virtual-scroll-list'
  export default {
    data () {
      return {
        items: [ {id: 1}, {id: 2}, {id: 3}, ... ]
      }
    },
    components: { item, 'virtual-list': virtualList }
  }
</script>

item-mode

This mode can save a considerable amount of memory and performance. Props item, itemcount and itemprops are both required, you don’t need put <item/> with a v-for directive inside virtual-list, just assign it as prop item:

<template>
  <div>
    <virtual-list :size="40" :remain="8"
      :item="item"
      :itemcount="100000"
      :itemprops="getItemprops"
    />
  </div>
</template>
<script>
  import itemComponent from '../item.vue'
  import virtualList from 'vue-virtual-scroll-list'
  export default {
    data () {
      return {
        item: itemComponent,
      }
    },
    methods: {
      getItemprops (itemIndex) {
        // <item/> will render with following data object:
        // https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
        return {
          props: itemProps,
          attrs: itemAttrs,
          ...
        }
      }
    },
    components: { 'virtual-list': virtualList }
  }
</script>

Whenever you want to change any item data from list in this mode, you need call public method forceRender() after source data change. Increase or decrease items, you need to keep itemcount and call forceRender() together.

variable height

Using variable height, props remain and size is still required. All the index variable height and scroll offset will be cached by virtual-list after the binary-search calculate, if you want to change anyone <item/> height from data, you need call public method updateVariable(index) to clear the offset cache.

If you assign variable as true, do not set inline style height inside <item/> component, you must set inline style height on <item/> component outside directly, such as:

<template>
  <div>
    <virtual-list :size="40" :remain="8" :variable="true">
      <item v-for="item of items" :key="item.id" :style="{ height: item.height + 'px' }" />
    </virtual-list>
  </div>
</template>

More use ways or getting start you can refer to these clearly demos or test suites.

Performance comparison

According to the demos above, here are lists of approximate statistics:

Build time wasted

Build amount item-mode vfor-mode without virtual list
1,000 8 ms 35 ms 220 ms
10,000 10 ms 170 ms 1500 ms
100,000 20 ms 1300 ms Browser crash!

Total memory used

Build amount item-mode vfor-mode without virtual list
1,000 10 MB 80 MB 200 MB
10,000 25 MB 120 MB 220 MB
100,000 55 MB 550 MB Browser crash!

Attentions

  • Must assign the :key property on <item> component or dom frag with v-for directive.

  • Consider using box-sizing: border-box on <item> if you want absolutely correct scroll height.

Props type

Props of basic:

Prop Type Required Description
size Number Each list item height, in variable height, this prop just use to calculate the virtual-list outside container viewport fixed height.
remain Number How many items should be shown in virtual-list viewport, so size and remain determine the outside container viewport height (size × remain).

Props of performance:

Prop Type Required Description
bench Number * Default value is equal to remain, unreached items count, not show in virtual-list viewport but exist in real DOM, the larger the bench, the higher the scroll performance will achieved.
debounce Number * It’s disabled by default, milliseconds of using debounce function to ensure scroll event doesn’t fire so often that it bricks browser performance.

Props of position:

Prop Type Required Description
start Number * Default value is 0, the initial scroll start index. It must be integer and in the range of list index, if invalid there will be effected as 0 or the last one.
offset Number * Default value is 0, the initial scroll offset. If both start and offset are assigned at initialization, start is preferred.

Props of element and class:

Prop Type Required Description
rtag String * Default value is div, virtual-list root element tag name, in all cases it’s style is set to display: block;
wtag String * Default value is div, virtual-list item wrapper element tag name, in all cases it’s style is set to display: block;
wclass String * Default is no classname, virtual-list item wrapper element class, if assign this prop, you better not to change it’s CSS box model.
wstyle Object * Default value is {}, though you can add your own styles for a child element except display and padding because they are used by the library

Props of scroll mode:

Prop Type Required Description
pagemode Boolean * Let virtual-list scroll with window page viewport.
scrollelement HTMLElement * Let virtual-list scroll with a parent element. When pagemode is true, scrollelement is ignored.

Props of scroll event:

Prop Type Required Description
totop Function * Called when virtual-list is scrolled to top, no param.
tobottom Function * Called when virtual-list is scrolled to bottom, no param.
onscroll Function * Called when virtual-list is scrolling, with param: (event, data).

Props of variable height:

Prop Type Required Description
variable Function or Boolean * If assign Function, this prop is a variable height getter function which is called with param: (index) when each item is ready to be calculated; if assign Boolean, virtual-list will get each item variable height by it’s inline style height automatic.

Props of item-mode:

Prop Type Required Description
item Component * List item vue component or vNode.
itemcount Number * List total count, you should update this prop when source data changed.
itemprops Function * A function call when each item is going to be rendered, you can assign props or data to each item component in this function.

Public methods

Here are some usefull public methods you can call via ref:

  • forceRender(): force render virtual-list if you need or make it refresh.

  • updateVariable(index): update item height by index in variable height list.

Download Details:

Author: tangbc

GitHub: https://github.com/tangbc/vue-virtual-scroll-list

#vuejs #javascript #vue-js

What is GEEK

Buddha Community

A Vue Component Support big Amount data list with High Scroll Performance
Siphiwe  Nair

Siphiwe Nair

1620466520

Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Big Data Consulting Services | Big Data Development Experts USA

Big Data Consulting Services

Traditional data processing application has limitations of its own in terms of processing the large chunk of complex data and this is where the big data processing application comes into play. Big data processing app can easily process complex and large information with their advanced capabilities.

Want to develop a Big Data Processing Application?

WebClues Infotech with its years of experience and serving 350+ clients since our inception is the agency to trust for the Big Data Processing Application development services. With a team that is skilled in the latest technologies, there can be no one better for fulfilling your development requirements.

Want to know more about our Big Data Processing App development services?

Visit: https://www.webcluesinfotech.com/big-data-solutions/

Share your requirements https://www.webcluesinfotech.com/contact-us/

View Portfolio https://www.webcluesinfotech.com/portfolio/

#big data consulting services #big data development experts usa #big data analytics services #big data services #best big data analytics solution provider #big data services and consulting

Silly mistakes that can cost ‘Big’ in Big Data Analytics

Big Data has played a major role in defining the expansion of businesses of all kinds as it helps the companies to understand their audience and devise their business techniques in accordance with the requirement.

The importance of ‘Data’ has been spoken very highly in the modern-day business. Thus, while using big data analysis, the companies must keep away from these minor mistakes otherwise it could have a major impact on their performances. Big Data analysis can be the silver bullet that can answer your questions and help your business to scale newer heights.

Read More: Silly mistakes that can cost ‘Big’ in Big Data Analytics

#top big data analytics companies #best big data service providers #big data for business #big data technology #big data mistakes #big data analytics

Big Data can be The ‘Big’ boon for The Modern Age Businesses

The rapid growth of technology has led to many people opting for online services, and thus the collection and maintenance of data becomes a significant factor for any company. Big data analytics service providers can help the companies get a massive edge over their competitors as they would manage the data well and allow the businesses to make better business decisions. It will provide you with a combination of increased customer experience, revenue, and reduced cost and thus will create a win-win situation for your business. Big data technologies will be your perfect ally in excelling in the cut-throat business environment and come out with flying colors.

Read More: Big Data can be The ‘Big’ boon for The Modern Age Businesses

#big data analytics service providers #top big data analytics companies #impact of big data on businesses #best big data consulting firms #big data #big data for businesses

Top Microsoft big data solutions Companies | Best Microsoft big data Developers

An extensively researched list of top Microsoft big data analytics and solution with ratings & reviews to help find the best Microsoft big data solutions development companies around the world.
An exclusive list of Microsoft Big Data consulting and solution providers, after examining various factors of expert big data analytics firms and found the equivalent matches that boast the ace qualities with proven fineness in data analytics. For business growth and enterprise acceleration getting inputs from the whole data of the organization have become necessary, thus we bring to you the most trustworthy Microsoft Big Data consultants and solutions providers for your assistance.
Let’s take a look at the List of Best Microsoft big data solutions Companies.

#microsoft big data solutions development companies #microsoft big data analytics and solution #microsoft big data consultants #microsoft big data developers #microsoft big data #microsoft big data solution providers