場景
如何正確渲染多達10000個元素的列表。
無限下拉加載技術使用戶在大量成塊的內容面前一直滾動查看。這種方法是在你向下滾動的時候不斷加載新內容。
當你使用滾動作為發現數據的主要方法時，它可能使你的用戶在網頁上停留更長時間并提升用戶參與度。隨著社交媒體的流行，大量的數據被用戶消費。無線滾動提供了一個高效的方法讓用戶瀏覽海量信息，而不必等待頁面的預加載。
如果我們換一種思維方式，如果一個頁面上面有10000個通欄組件構成，我們如何使用5個組件動態去渲染整個頁面呢？
解決思路
在對長列表的優化中我們有很多的方案，例如分頁，懶加載等等。 有非常好的交互（菊花圖），讓用戶去等待一下。這樣的方案也是非常的成功。
如何另辟蹊徑？
1. 在單頁運用中我們是否可以對分頁方案做一次分析，每頁10個元素，分頁每次渲染10個元素根據
2. 我們能否用一個支架撐起整個列表的長度 當屏幕滾動到對應的位置就渲染對應的10個元素
閃爍問題
當我們按這個思路實現后會出現閃爍的問題，由于滾動事件比較頻繁，我們發現在我們看見的元素在不斷的重新繪制，因為我們每次的過場是找到哪十個元素是需要渲染的，然后就直接替換了
這里的思路是我在看的到屏幕位置渲染10個再向上和向下各衍生渲染10個，總共30個，控制渲染的時候總是替換最上面或者最下面的元素，這樣處于中間我們可以看見的部分就沒有做重新重繪渲染。只是在預渲染的數據在做重繪。
原理
實現一個組件，可以顯示具有5個元素的固定窗口大小的n個項目的列表： 即在任何時候，無限滾動n元素上也僅存在5個DOM容器。
<ul> <li style="transform: translate3d(0px, 0px, 0px);">……</li> <li style="transform: translate3d(0px, 60px, 0px);">……</li> </ul>
例如： 100 個元素，首頁就顯示5個，初始化[0,1,2,3,4] 這5個<li>需要渲染，當我向下滾動一點的時候出現 [1,2,3,4,5] 這幾個<li>需要渲染，這時候不要直接做整體替換，只應該替換差異項，結構應為[5,1,2,3,4],由于是絕對定位，會脫離標準流，單個的重繪不會影響其他四個，從而提升性能。
如何實現
<!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> //總容器 var list = []; // 可視范圍內元素容器 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 = [] // 標記哪些數據和已經渲染后的是重復的，這部分將不會重復渲染 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 // 在當前找到的元素分別向上和向下找需要顯示的元素，總共的個數達到35個為止 while (range < 100 && showList.length + sameIndex.length < 35) { if (currentIndex - range >= 0) { // 對比滿足條件的元素是否在已經渲染列表中，在就做標記，不在就放在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
小結
下期-----組件搭配實現長列表
關鍵點
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
