場(chǎng)景
如何正確渲染多達(dá)10000個(gè)元素的列表。
無(wú)限下拉加載技術(shù)使用戶在大量成塊的內(nèi)容面前一直滾動(dòng)查看。這種方法是在你向下滾動(dòng)的時(shí)候不斷加載新內(nèi)容。
當(dāng)你使用滾動(dòng)作為發(fā)現(xiàn)數(shù)據(jù)的主要方法時(shí)，它可能使你的用戶在網(wǎng)頁(yè)上停留更長(zhǎng)時(shí)間并提升用戶參與度。隨著社交媒體的流行，大量的數(shù)據(jù)被用戶消費(fèi)。無(wú)線滾動(dòng)提供了一個(gè)高效的方法讓用戶瀏覽海量信息，而不必等待頁(yè)面的預(yù)加載。
如果我們換一種思維方式，如果一個(gè)頁(yè)面上面有10000個(gè)通欄組件構(gòu)成，我們?nèi)绾问褂?個(gè)組件動(dòng)態(tài)去渲染整個(gè)頁(yè)面呢？
解決思路
在對(duì)長(zhǎng)列表的優(yōu)化中我們有很多的方案，例如分頁(yè)，懶加載等等。 有非常好的交互（菊花圖），讓用戶去等待一下。這樣的方案也是非常的成功。
如何另辟蹊徑？
1. 在單頁(yè)運(yùn)用中我們是否可以對(duì)分頁(yè)方案做一次分析，每頁(yè)10個(gè)元素，分頁(yè)每次渲染10個(gè)元素根據(jù)
2. 我們能否用一個(gè)支架撐起整個(gè)列表的長(zhǎng)度 當(dāng)屏幕滾動(dòng)到對(duì)應(yīng)的位置就渲染對(duì)應(yīng)的10個(gè)元素
閃爍問(wèn)題
當(dāng)我們按這個(gè)思路實(shí)現(xiàn)后會(huì)出現(xiàn)閃爍的問(wèn)題，由于滾動(dòng)事件比較頻繁，我們發(fā)現(xiàn)在我們看見(jiàn)的元素在不斷的重新繪制，因?yàn)槲覀兠看蔚倪^(guò)場(chǎng)是找到哪十個(gè)元素是需要渲染的，然后就直接替換了
這里的思路是我在看的到屏幕位置渲染10個(gè)再向上和向下各衍生渲染10個(gè)，總共30個(gè)，控制渲染的時(shí)候總是替換最上面或者最下面的元素，這樣處于中間我們可以看見(jiàn)的部分就沒(méi)有做重新重繪渲染。只是在預(yù)渲染的數(shù)據(jù)在做重繪。
原理
實(shí)現(xiàn)一個(gè)組件，可以顯示具有5個(gè)元素的固定窗口大小的n個(gè)項(xiàng)目的列表： 即在任何時(shí)候，無(wú)限滾動(dòng)n元素上也僅存在5個(gè)DOM容器。
<ul>
<li style="transform: translate3d(0px, 0px, 0px);">……</li>
<li style="transform: translate3d(0px, 60px, 0px);">……</li>
</ul>
例如： 100 個(gè)元素，首頁(yè)就顯示5個(gè)，初始化[0,1,2,3,4] 這5個(gè)<li>需要渲染，當(dāng)我向下滾動(dòng)一點(diǎn)的時(shí)候出現(xiàn) [1,2,3,4,5] 這幾個(gè)<li>需要渲染，這時(shí)候不要直接做整體替換，只應(yīng)該替換差異項(xiàng)，結(jié)構(gòu)應(yīng)為[5,1,2,3,4],由于是絕對(duì)定位，會(huì)脫離標(biāo)準(zhǔn)流，單個(gè)的重繪不會(huì)影響其他四個(gè)，從而提升性能。
如何實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>Document</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
position: relative;
}
ul li {
position: absolute;
top: 0;
width: 100%;
height: 31px;
line-height: 32px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
<script>
//總?cè)萜?
var list = [];
// 可視范圍內(nèi)元素容器
var showList = [];
// 渲染容器
var renderList = [];
// 每個(gè)容器的高度
var lineHeight = 32
// 初始化1000 個(gè)元素
for (var i = 0; i < 1000; i++) {
list.push({ id: i, text: '第' + (i + 1) + '個(gè)元素', top: i * lineHeight, bottom: (i + 1) * lineHeight })
}
// 初始化容器高度
$('ul').attr('style', 'height:' + 1000 * lineHeight + 'px')
// 尋找初始化容器的
function render(top, bottom) {
showList = []
// 標(biāo)記哪些數(shù)據(jù)和已經(jīng)渲染后的是重復(fù)的，這部分將不會(huì)重復(fù)渲染
var sameIndex = []
// 找出滾動(dòng)位置再哪一個(gè)元素上
var currentIndex = 0
for (var i = 0; i < list.length; i++) {
var item = list[i]
if (item.top <= window.scrollY && item.bottom > window.scrollY) {
currentIndex = i;
break;
}
}
var range = 0
// 在當(dāng)前找到的元素分別向上和向下找需要顯示的元素，總共的個(gè)數(shù)達(dá)到35個(gè)為止
while (range < 100 && showList.length + sameIndex.length < 35) {
if (currentIndex - range >= 0) {
// 對(duì)比滿足條件的元素是否在已經(jīng)渲染列表中，在就做標(biāo)記，不在就放在showList 當(dāng)時(shí)候替換沒(méi)有被標(biāo)記的元素
if (renderList.includes(list[currentIndex - range].id)) {
// sameIndex.push(currentIndex-range)
sameIndex.unshift(renderList.indexOf(list[currentIndex - range].id))
} else {
showList.unshift(list[currentIndex - range])
}
}
if (currentIndex + range < list.length && range != 0) {
if (renderList.includes(list[currentIndex + range].id)) {
sameIndex.push(renderList.indexOf(list[currentIndex + range].id))
} else {
showList.push(list[currentIndex + range])
}
}
range++
}
// 將對(duì)比出來(lái)的新的需要渲染的元素和沒(méi)有被標(biāo)記的渲染列表元素做替換
if (renderList.length > 0) {
for (var i = 0; i < renderList.length; i++) {
if (!sameIndex.includes(i) && showList.length) {
renderList[i] = showList.shift().id
$('ul li').eq(i).html(list[renderList[i]].id + list[renderList[i]].text).attr('style', 'transform: translate3d(0px, ' + list[renderList[i]].top + 'px, 0px);')
}
}
} else {
// 第一次進(jìn)行初始化列表
renderList = showList.map(function (val) { return val.id })
renderList.map(function (key) {
$('ul').append($('<li style="transform: translate3d(0px, ' + list[key].top + 'px, 0px);"">#' + list[key].id + list[key].text + '</li>'))
})
}
console.log(renderList)
}
// 第一次渲染
render()
$(window).scroll(function (e) {
render()
});
</script>
</html>
TODO
小結(jié)
下期-----組件搭配實(shí)現(xiàn)長(zhǎng)列表
關(guān)鍵點(diǎn)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
標(biāo)簽：內(nèi)蒙古 山南 保定 陜西 上海 吳忠 廣安 清遠(yuǎn)
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《n個(gè)容器元素實(shí)現(xiàn)無(wú)限滾動(dòng)的實(shí)現(xiàn)代碼》，本文關(guān)鍵詞 個(gè),容器,元素,實(shí)現(xiàn),無(wú)限,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
