n個容器元素實現(xiàn)無限滾動的實現(xiàn)代碼

2024-08-26 00:13:59

字體：大中小

供稿：網(wǎng)友

場景

如何正確渲染多達(dá)10000個元素的列表。

無限下拉加載技術(shù)使用戶在大量成塊的內(nèi)容面前一直滾動查看。這種方法是在你向下滾動的時候不斷加載新內(nèi)容。

當(dāng)你使用滾動作為發(fā)現(xiàn)數(shù)據(jù)的主要方法時，它可能使你的用戶在網(wǎng)頁上停留更長時間并提升用戶參與度。隨著社交媒體的流行，大量的數(shù)據(jù)被用戶消費。無線滾動提供了一個高效的方法讓用戶瀏覽海量信息，而不必等待頁面的預(yù)加載。

如果我們換一種思維方式，如果一個頁面上面有10000個通欄組件構(gòu)成，我們?nèi)绾问褂?個組件動態(tài)去渲染整個頁面呢？

解決思路

在對長列表的優(yōu)化中我們有很多的方案，例如分頁，懶加載等等。有非常好的交互（菊花圖），讓用戶去等待一下。這樣的方案也是非常的成功。

如何另辟蹊徑？

1. 在單頁運(yùn)用中我們是否可以對分頁方案做一次分析，每頁10個元素，分頁每次渲染10個元素根據(jù)

2. 我們能否用一個支架撐起整個列表的長度當(dāng)屏幕滾動到對應(yīng)的位置就渲染對應(yīng)的10個元素

閃爍問題

當(dāng)我們按這個思路實現(xiàn)后會出現(xiàn)閃爍的問題，由于滾動事件比較頻繁，我們發(fā)現(xiàn)在我們看見的元素在不斷的重新繪制，因為我們每次的過場是找到哪十個元素是需要渲染的，然后就直接替換了

這里的思路是我在看的到屏幕位置渲染10個再向上和向下各衍生渲染10個，總共30個，控制渲染的時候總是替換最上面或者最下面的元素，這樣處于中間我們可以看見的部分就沒有做重新重繪渲染。只是在預(yù)渲染的數(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>進(jìn)行絕對定位，在用js直接算出每一個<li> 對應(yīng)的'transform: translate3d(0px, 0px, 0px);'屬性
通過監(jiān)聽scroll時間不斷的去找到當(dāng)前位置需要渲染的<li>的, 和上一組渲染數(shù)據(jù)進(jìn)行對比，有相同的<li>就跳過，找出和上一組渲染數(shù)據(jù)的不同元素，然后做對應(yīng)的替換

例如： 100 個元素，首頁就顯示5個，初始化[0,1,2,3,4] 這5個<li>需要渲染，當(dāng)我向下滾動一點的時候出現(xiàn) [1,2,3,4,5] 這幾個<li>需要渲染，這時候不要直接做整體替換，只應(yīng)該替換差異項，結(jié)構(gòu)應(yīng)為[5,1,2,3,4],由于是絕對定位，會脫離標(biāo)準(zhǔn)流，單個的重繪不會影響其他四個，從而提升性能。

如何實現(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 = []    // 標(biāo)記哪些數(shù)據(jù)和已經(jīng)渲染后的是重復(fù)的，這部分將不會重復(fù)渲染    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    // 在當(dāng)前找到的元素分別向上和向下找需要顯示的元素，總共的個數(shù)達(dá)到35個為止    while (range < 100 && showList.length + sameIndex.length < 35) {      if (currentIndex - range >= 0) {        // 對比滿足條件的元素是否在已經(jīng)渲染列表中，在就做標(biāo)記，不在就放在showList 當(dāng)時候替換沒有被標(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++    }    // 將對比出來的新的需要渲染的元素和沒有被標(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

對比替換容器元素的方法總是感覺還能優(yōu)化，這樣就能提升運(yùn)行效率，從而優(yōu)化快速滾動出現(xiàn)的白屏
這里也出一個思考題[0,1……，10000], 每次從中取出5個元素，新選出來的和舊的進(jìn)行對比，保留兩個數(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ù)得到這個結(jié)果數(shù)組。

小結(jié)