n個容器元素實現(xiàn)無限滾動的實現(xiàn)代碼
發(fā)布時間：2019-10-16 16:25:24 作者：運 
我要評論
我要評論這篇文章主要介紹了n個容器元素實現(xiàn)無限滾動的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
場景
如何正確渲染多達10000個元素的列表。
無限下拉加載技術使用戶在大量成塊的內(nèi)容面前一直滾動查看。這種方法是在你向下滾動的時候不斷加載新內(nèi)容。
當你使用滾動作為發(fā)現(xiàn)數(shù)據(jù)的主要方法時，它可能使你的用戶在網(wǎng)頁上停留更長時間并提升用戶參與度。隨著社交媒體的流行，大量的數(shù)據(jù)被用戶消費。無線滾動提供了一個高效的方法讓用戶瀏覽海量信息，而不必等待頁面的預加載。
如果我們換一種思維方式，如果一個頁面上面有10000個通欄組件構成，我們?nèi)绾问褂?個組件動態(tài)去渲染整個頁面呢？
解決思路
在對長列表的優(yōu)化中我們有很多的方案，例如分頁，懶加載等等。 有非常好的交互（菊花圖），讓用戶去等待一下。這樣的方案也是非常的成功。
如何另辟蹊徑？
1. 在單頁運用中我們是否可以對分頁方案做一次分析，每頁10個元素，分頁每次渲染10個元素根據(jù)
2. 我們能否用一個支架撐起整個列表的長度 當屏幕滾動到對應的位置就渲染對應的10個元素
閃爍問題
當我們按這個思路實現(xiàn)后會出現(xiàn)閃爍的問題，由于滾動事件比較頻繁，我們發(fā)現(xiàn)在我們看見的元素在不斷的重新繪制，因為我們每次的過場是找到哪十個元素是需要渲染的，然后就直接替換了
這里的思路是我在看的到屏幕位置渲染10個再向上和向下各衍生渲染10個，總共30個，控制渲染的時候總是替換最上面或者最下面的元素，這樣處于中間我們可以看見的部分就沒有做重新重繪渲染。只是在預渲染的數(shù)據(jù)在做重繪。
原理
實現(xiàn)一個組件，可以顯示具有5個元素的固定窗口大小的n個項目的列表： 即在任何時候，無限滾動n元素上也僅存在5個DOM容器。
<ul>
<li style="transform: translate3d(0px, 0px, 0px);">……</li>
<li style="transform: translate3d(0px, 60px, 0px);">……</li>
</ul>
- 長列表內(nèi)容一般都有規(guī)律，這個列表的高度是可以直接通過<li>的個數(shù)直接算出來的,比如1000個元素，每個元素的高是60px,那么我們很快就能算出真?zhèn)€列表的高度是60000px
- 有了容器后將內(nèi)部的<li>相對于<ul>進行絕對定位，在用js直接算出每一個<li> 對應的'transform: translate3d(0px, 0px, 0px);'屬性
- 通過監(jiān)聽scroll時間不斷的去找到當前位置需要渲染的<li>的, 和上一組渲染數(shù)據(jù)進行對比，有相同的<li>就跳過，找出和上一組渲染數(shù)據(jù)的不同元素，然后做對應的替換
例如： 100 個元素，首頁就顯示5個，初始化[0,1,2,3,4] 這5個<li>需要渲染，當我向下滾動一點的時候出現(xiàn) [1,2,3,4,5] 這幾個<li>需要渲染，這時候不要直接做整體替換，只應該替換差異項，結構應為[5,1,2,3,4],由于是絕對定位，會脫離標準流，單個的重繪不會影響其他四個，從而提升性能。
如何實現(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 = [];
// 每個容器的高度
var lineHeight = 32
// 初始化1000 個元素
for (var i = 0; i < 1000; i++) {
list.push({ id: i, text: '第' + (i + 1) + '個元素', top: i * lineHeight, bottom: (i + 1) * lineHeight })
}
// 初始化容器高度
$('ul').attr('style', 'height:' + 1000 * lineHeight + 'px')
// 尋找初始化容器的
function render(top, bottom) {
showList = []
// 標記哪些數(shù)據(jù)和已經(jīng)渲染后的是重復的，這部分將不會重復渲染
var sameIndex = []
// 找出滾動位置再哪一個元素上
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
// 在當前找到的元素分別向上和向下找需要顯示的元素，總共的個數(shù)達到35個為止
while (range < 100 && showList.length + sameIndex.length < 35) {
if (currentIndex - range >= 0) {
// 對比滿足條件的元素是否在已經(jīng)渲染列表中，在就做標記，不在就放在showList 當時候替換沒有被標記的元素
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++
}
// 將對比出來的新的需要渲染的元素和沒有被標記的渲染列表元素做替換
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 {
// 第一次進行初始化列表
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
- 對比替換容器元素的方法總是感覺還能優(yōu)化，這樣就能提升運行效率，從而優(yōu)化快速滾動出現(xiàn)的白屏
- 這里也出一個思考題[0,1……，10000], 每次從中取出5個元素，新選出來的和舊的進行對比，保留兩個數(shù)組的交集部分，用新數(shù)組里面的新元素替換老數(shù)組里面的非交集部分， 例如第一次是[0,1,2,3,4],第二次是[2,3,4,5,6] 那么對比后生成[5,6,2,3,4],第三次如果是[4,5,6,7,8],生成的就為[5,6,7,8,4]。用最少的代碼數(shù)得到這個結果數(shù)組。
小結
- 通過數(shù)據(jù)完成布局和初始化
- 通過覺得定位讓容器脫離標準流
- 通過數(shù)據(jù)對比，找出差異容器元素，每次重繪盡量少的容器元素。
下期-----組件搭配實現(xiàn)長列表
關鍵點
- 組件不同于有規(guī)律的list, 組件的高度有可能不可控，會根據(jù)不同的手機設備而出現(xiàn)不用的高度
- 由于組件高度的同，渲染區(qū)域內(nèi)有幾個組件的數(shù)量也是不一樣的，這就造成了容器個數(shù)不一樣
- 對于高度不好通過數(shù)據(jù)直接進行計算的，如果需要一次整體渲染然后通過dom去計算位置和高度是非常耗費第一次加載性能的。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標簽及其相關標簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法：通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點，感興2025-02-24
在 Web 開發(fā)中，文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧，我們可以創(chuàng)造出許多獨特的效果，例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空2024-11-17
在Html中,a標簽默認的超鏈接樣式是藍色字體配下劃線,這可能不滿足所有設計需求,如需去除這些默認樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標簽的默認樣式的操作代碼2024-09-25- 在HTML中,可以通過設置CSS的resize屬性為none,來禁止用戶手動拖動文本域（textarea）的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進行測試以確保2024-09-25
本文詳細介紹了如何利用HTML和CSS實現(xiàn)多種風格的進度條,包括基礎的水平進度條、環(huán)形進度條以及球形進度條等,還探討了如何通過動畫增強視覺效果,內(nèi)容涵蓋了使用HTML原生標簽2024-09-19- Canvas 提供了一套強大的 2D 繪圖 API，適用于各種圖形繪制、圖像處理和動畫制作,可以幫助你創(chuàng)建復雜且高效的網(wǎng)頁圖形應用，這篇文章主要介紹了HTML中Canvas關鍵知識點總結2024-06-03
html table+css實現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習2024-03-06
本文主要介紹了HTML中使用Flex布局實現(xiàn)雙行夾批效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2024-02-22
在網(wǎng)站開發(fā)中，登錄頁面是必不可少的一部分，本文就來介紹一下HTML+CSS實現(xiàn)登錄切換，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需2024-02-02
