場(chǎng)景題:如果遇到10萬(wàn)條數(shù)據(jù)到頁(yè)面上不卡頓的話怎么展示,不用分頁(yè)怎么展示嫩痰?
答:可以使用
- 定時(shí)器分堆定時(shí)加載剿吻,滑動(dòng)過(guò)快會(huì)出現(xiàn)掉幀的情況
- 使用動(dòng)畫(huà)幀requestAnimationFrame代替定時(shí)器分堆加載
- 使用觸底加載插件(el-table-infinite-scroll)利用堆的先進(jìn)先出原理(始終將二維數(shù)組的第一個(gè)推出來(lái)與頁(yè)面數(shù)據(jù)拼接),其實(shí)也就是懶加載
- 使用虛擬滾動(dòng)串纺,根據(jù)容器的可視區(qū)域丽旅,動(dòng)態(tài)截取長(zhǎng)列表中的部分?jǐn)?shù)據(jù)進(jìn)行渲染,采用空白占位區(qū)域填充其他滾動(dòng)區(qū)域纺棺,模擬實(shí)現(xiàn)原生滾動(dòng)效果榄笙,這個(gè)的支持量是有局限性的,超過(guò)一定閥值后無(wú)法支持祷蝌。
- 使用表格處理插件(vxe-table)茅撞,它有成熟的文檔支持,簡(jiǎn)單易用巨朦。