search

lgwebdream / FE-Interview

🔥🔥🔥 前端面试，独有前端面试题详解，前端面试刷题必备，1000+前端面试真题，Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器
https://lgwebdream.github.io/FE-Interview/
Other
6.82k stars 896 forks source link

Day244:虚拟列表是什么？说一下它的实现原理？ #1063

Open Genzhen opened 3 years ago

Genzhen commented 3 years ago

每日一题会在下午四点在交流群集中讨论，五点小程序中更新答案 欢迎大家在下方发表自己的优质见解

二维码加载失败可点击 小程序二维码

扫描下方二维码，收藏关注，及时获取答案以及详细解析，同时可解锁800+道前端面试题。

luuman commented 2 years ago

从用户体验和应用性能两方面去权衡考虑，从而优化这种场景的解决方案。

  1. 分页加载：实现简单直接，但是在请求下一页时，可能也会打断用户心流，体验不是最佳。
  2. 懒加载：实现难度不大，可以解决首屏的压力，但是长时间加载数据，也同样会产生大量元素节点，从而影响应用性能（因为也没有处理过期节点的销毁问题）。
  3. 虚拟列表：实现难度较大，通过计算滚动视窗，每次只渲染部分元素，既减少了首屏压力，长时间加载也不会有更多的性能负担，可以满足上述大部分场景。

https://juejin.cn/post/6877507011769008135