current position:Home>Implementation idea of virtual list (equal height / non equal height) - with source code
Implementation idea of virtual list (equal height / non equal height) - with source code
2021-08-27 05:44:55 【I once looked across the shore】
Virtual list
Let everyone know ,DOM Quantity is one of the most direct reasons affecting site performance , How to effectively control DOM Number , Improving page performance is to improve user stickiness , One of the key means of product conversion , This article will explain how to Destroy the withered and decadent
Complete the implementation of a virtual list
Text
Let's first look at the difference in rendering time between normal long lists and virtual lists
Normal page
Let's simulate a page first :
<div id="content">
<div class="item">
<div class="item-animation"></div> * 10
</div> * 2000
</div>
Copy code
.content {
height: 100%;
}
.item-animation {
transform: translate(0);
transtion: transfrom .5s;
}
.item-animation--active {
transform: translate(10px);
}
Copy code
const item = document.getElementsByClassName('item')[0]
item.onclick = function() {
Array.from(item.children).forEach(div => {
div.classList.add('item-animation--active')
})
}
Copy code
Above we define a long list , One has 2000 There are... Inside 10 Of child elements item Elements , Click on item When you do, you let the child elements item-animation Trigger an animation that moves to the right , Let's measure the current trigger How long does it take to execute :
We can find that in the current execution javascipt Click on Task The execution time of is 51ms, This seriously exceeds our normal refresh fluency standard 16.7ms once , This means that the behavior makes the page drop 2 Around the frame , This will greatly reduce user retention , From the figure below, we can see that... Is generated at the end renderLayerTree The time is 7.13ms, It is precisely because the element volume in the page is too large , It takes too long to update the render layer in the last step of rendering .
Virtual list
Same example above , Let's take a look again. Click the first item How long did the triggered sub element animation render take , Through the following figure, we can find that the same animation has the same number of sub elements ,Task The execution time is 1.21ms, This is shorter than in the above example 50 Times of time .
Realization
precondition
When implementing this requirement, we need to understand the following knowledge points :
- javascript Acquired DOMOM It's not in renderTree Upper renderObject, Just as we use javascript Can be obtained display:none The performance of the nodes is consistent , We are from DOMTree Go up and get it DOM
- DOMTree Updates are real-time
- Task It is divided into MacroTask And MicroTask, Every MacroTask After execution, it will be handed over to the rendering process to perform a rendering operation
More details can be read You understand wrong nextTick
Contour virtual list
Same example above , Let's set up HTML
<div class="content">
<div class="virtual-content"></div>
<div class="real-content"></div>
</div>
Copy code
html, body, #app {
height: 100%;
width: 100%;
}
.content {
position: relative;
height: 100%;
overflow-y: auto;
}
.real-content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
Copy code
content: A container for real content , Height is inherited from the parent 100%
virtual-content: open content Height
real-content: Load the information that needs to be displayed in the visual window
We default to all item They are all equal height
Of , So let's take a look at the train of thought :
-
First of all, we need to know the height when all nodes are loaded in the document , We need to be in
Promise In micro tasks
Load all nodes into the container virtual-content in , At this time the container virtual-content The corresponding DOM stay DOMTree It will update its attribute value ( For example, height ), At this point we can go through js To get virtual-content Height ,virual-content It is used to support the whole height ,So as to simulate rolling
The role of , After obtaining the height, assign it to virtual-content( To ensure that all child elements are deleted later virtual-content Still able to stretch the height ) -
Then we remember that the visual height of the current screen is the same as that of the current single screen item Height ( Include margin, border, padding etc. ), In this way, we can figure out how many visual images can be loaded under the current screen size item The number of :
- size = clientHeight / itemHeight
And then All data uses set variables childrenSet cache
( Stored for later data display ), Then empty virtual-content The content of . In this case The one above us 1 2 This step uses the third content of preconditions to complete the pre operation
-
Definition start(childrenSet The beginning of the intercept start), end(childrenSet At the end of the intercept end), end The definition of is very simple :
- end = start( Where the data begins to be intercepted ) + size( Visual area item Number )
-
monitor content Rolling , Constantly refresh start Value ,start The value of is actually content Of scrollTop Divide itemHeight
Remove the value
( Because we have to simulate item The process of drawing itself out of the visible area )- start = Math.floor(scrollTop / itemHeight)
-
real-content Because it is an absolute positioning layout , So it will follow content Scroll to draw the visible area , So we need to use transform: translateY Draw it back into the visual area , But in order to simulate the real sliding scene ( because item It has its own height ,
stay item When part is marked out ,real-content It doesn't need to be pulled back into the visual area
), We need to calculate to set the corresponding translateY value , So we said in the last step start The value of plays a key role , because start The value of is scrollTop Divide itemHeight The lower limit of , The extra residual value is actually itemHeight, The values in this part are used to simulate item The process of marking out , We don't need to do any calculations , Finally, we just need to real-content Pull back to start * itemHeight that will do , This completes an idea of contour virtual rolling
Non contour virtual list
The difference between unequal height and equal height is actually due to item The height of cannot be determined , This leads to how many... Can be contained in the visual area item Of size Not sure , In the end, it is impossible to determine end The cut-off position , The idea of this point is actually very simple , Listen to me ~
The front details are basically consistent with the contour , Let's focus on how to determine size This process
Specific ideas
- Before we save the corresponding item Node to childrenSet At the same time in the collection ,
We need to set up another set childHeightSet: For preservation item Corresponding itemHeight
. - childHeightSet And childrenSet It's one-to-one , That is, the same subscript value ,childrenHeightSet The value is childrenSet The height of the value , With this feature, we can do this
- First of all get start You can't just use scrollTop / itemHeight, But need to compare scrollTop And childrenHeightSet Before n A cumulative value . When scrollTop Greater than the cumulative value , shows childrenSet We haven't reached the intercept location yet ; if scorllTop <= Cumulative value , The current item Has been slid to the top of the visible area , that start The value of is the current subscript value
function getStart(scrollTop) {
var height = 0
var start = 0
var i = 0
while(true) {
const currentItem = childrenHeight[i]
if (currentItem) {
height += currentItem
if (height >= scrollTop) {
start = i
break
}
} else {
break
}
i++
}
return start
}
Copy code
4. determine size( Finally get directly end), We need to use the height of the current visual area (screenClientHeight) Then compare childrenHeightSet in start After subscript value, the accumulated value . When screenClientHeight Greater than the cumulative value , shows childrenSet Not yet end The location of ; if screenClientHeight <= Cumulative value , The current item It's already the bottom of the visual area , that end The value of is the current subscript value , In this way, the problem of non equal height virtual list is solved !
Conclusion
Thank you for watching !
Source code address
copyright notice
author[I once looked across the shore],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827054451182c.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich