作为前端工程师,分片渲染和虚拟列表你需要知道

155 阅读1分钟

前言

以前在面试中遇到过一个这样的问题:如果给你数据量很大比如十万条,后台又没有分页的功能,那么你怎么操作能减轻浏览器的压力或者说怎样能更流畅的渲染出来。今天就分享两个解决方案。

分片渲染:

其实分块渲染和我们平时的分页请求数据然后渲染是一样的道理

没有分块的效果就是崩溃了

image.png

演示代码:

image.png

虚拟列表

原理说明:

虚拟列表其实是每次只渲染固定条数的元素,然后将其定位对应的位置

image.png

效果演示

image.png

代码部分

image.png

image.png

image.png

更多学习视频学习资料请参考:B站搜索“我们一起学前端”  

我们一起学前端的个人空间_哔哩哔哩_Bilibili