Since ’90s the main rule using a render engine is: “don’t draw things you can’t see!”.
A web page is also rendered so we can apply the rule on it. We’ll see a quick trick that actually works, and that will give us the idea of what’s happening under the hoods.
Let’see how
Imagine you have your vue component with an array in its data section:
new Vue({
data: [] // a lot of items!
})
Actually you’ll want to paginate all of this stuff. But imagine you can’t paginate because it is a requirement to see the whole thing in one page.
To add difficulty, imagine every item in the array is rendered as a component with its own tree (subcomponents). In short, every item is costly to render.
The trick
When rendering a list of items you tipically use a v-for statement.
The nice thing with the v-for is that it gives us the i-th item of the iterable AND the i-th index of the item.
We can use this index to divide the list in ‘rendering blocks’: first 3 items will be rendered at time 0, next 3 items will wait (50 msec * 1) then will render, next 3 items will wait (50 msec * 2) then will render, and so on.
The final result is an page with incremental loading.
The only difference is that we call our APIs once to get the whole data in one block then we split into blocks the rendering.
The lower items the latter they appear on our page! We’ll never stress the render engine of our browser with tons of parallel ops.
Now we have an idea and an algorithm.
Let see the code.
<template>
<MyComponent v-if="isHidden === false">
</MyComponent>
<template>
(..)
props: {
index: {
type: Number,
required: true,
}
},
data: () => ({
isHidden: true,
}),
created() {
const self = this
const delta = Math.floor( self.index / 3 ) // 3 is how many siblings will be rendered with me
const timeblock = 50 // this is a unit of time (msec) to wait before next block of siblings
setTimeout( () => {
self.isHidden = false
}, timeblock * delta)
},
The v-if is the key of everything. Vue will not render a component until its v-if=true.
I was studying jpetazzo’s docker-in-docker (
