| 性能优化之长列表渲染 | 您所在的位置：网站首页 › 列表的分片 › 性能优化之长列表渲染 |
性能优化之长列表渲染
|
为什么要做长列表优化，让我们看一段代码的执行。
let now = Date.now();// 记录任务开始时间
let ul = document.getElementById('container'); //获取容器
let total = 100000;
for(let i = 0; i
console.log('总运行时间：',Date.now() - now);
},0)
1.setTimout处理。 let now = Date.now();// 记录任务开始时间 let ul = document.getElementById('container'); //获取容器 let total = 100000; let pageSize = 30; let currentPage = 1; let endPage = Math.ceil(total/pageSize); let currentTotal = total-pageSize*currentPage function load(){ if(currentPage > endPage) { return false; } let currentCount = Math.min(currentTotal, pageSize) setTimeout(() => { for(let i = 1;i for(let i = 1;i (function () { let total = 100; let allData = [] //所有数据 for (let i = 0; i < total; i++) { allData.push(i) } let $list = document.getElementById('infinite-list-container') let $listPhantom = document.getElementById('infinite-list-phantom') let $listContent = document.getElementById('infinite-list') let itemSize = 100 //每一项的高度 let listHeiht = itemSize * total; //列表的总高度 let screenHeight = $list.clientHeight; //可见区域的高度 let visibleCount = Math.ceil(screenHeight / itemSize); //可见区域的列表项数 let start = 0; //起始位置 let end = start + visibleCount; //结束位置 let visivleData = allData.slice(start, Math.min(end, allData.length)) //可见区域的数据 let startOffset = 0 //偏移量 $listPhantom.style.height = allData.length * itemSize + 'px' for (let i = 0; i < visivleData.length; i++) { let div = document.createElement('div'); div.innerText = visivleData[i]; div.style.height = itemSize + 'px' div.setAttribute('class', 'infinite-list-item') $listContent.appendChild(div) } $list.addEventListener('scroll', () => { console.log('sss') let scrollTop = $list.scrollTop || document.documentElement.scrollTop; console.log(scrollTop) //此时的开始索引 start = Math.floor(scrollTop / itemSize); //结束索引 end = start + visibleCount; //偏移量 startOffset = scrollTop - scrollTop % itemSize $listContent.style = `transform: translate3d(0,${start * itemSize}px,0)` changeData(); }) function changeData() { visivleData = allData.slice(start, Math.min(end, allData.length)) console.log(visivleData) for (let i = 0; i < visivleData.length; i++) { let div = document.getElementsByClassName('infinite-list-item')[i]; div.innerText = visivleData[i]; div.style.height = itemSize + 'px' } } })() #infinite-list-container { height: 100%; overflow: auto; position: relative; -webkit-overflow-scrolling: touch; } #infinite-list-phantom { position: absolute; left: 0; top: 0; right: 0; z-index: -1; } #infinite-list { left: 0; right: 0; top: 0; position: absolute; text-align: center; } .infinite-list-item { padding: 10px; color: #555; box-sizing: border-box; border-bottom: 1px solid #999; } |
可以看出当对十万条数据进行操作时，js运行时间166ms，但是最后渲染完成之后的时间确实4511ms. 图中可以看出：话费时间主要在： Recalculate Style和Layout阶段，即样式计算和布局。 所以为了解决渲染阶段的性能瓶颈，我们主要通过减少渲染的时间。【本文地址】
公司简介
联系我们