angular - cdk虚拟滚动的itemsize
问题描述
我注意到当我将 cdk 虚拟滚动的 itemSize 设置为较低的量时,页面的加载时间几乎是该量的两倍。
<cdk-virtual-scroll-viewport [itemSize]="45"
和<cdk-virtual-scroll-viewport [itemSize]="20"
(有 2k 行的表)之间有很大的不同。
我的问题是为什么页面的加载时间从 2 秒到近 5 秒?怎么会有这么大的不同?
解决方案
[itemSize]
指示列表中每行的像素高度。
然后,虚拟滚动条(部分)使用它来确定它可以在视口上方和下方缓冲多少行。你做的itemSize
越低,它就越会尝试加载和缓冲。
至于
为什么页面的加载时间从 2 秒缩短到近 5 秒?
谁知道; 这完全取决于您的实际代码是什么,列表正在实例化什么,绑定了什么,什么可能触发 RecalcStyle,等等。例如,也许您有一些过程在 O(n 2 ) 中迭代您的列表,或者可能有一堆事件侦听器。我们需要更多细节来分析。
推荐阅读
- docker - 如何在命令行中将具有 ENVIRONMENT 变量的额外变量传递给 ansible playbook?
- java - 使用 itext7 突出显示 pdf 文档中的特定单词
- javascript - 如何一次检查多个数组?
- c++ - 为什么递归函数中的迭代器在返回后指向开头?
- javascript - 如何删除使用 Cloud Firestore 和 javascript 的列表中的列表项
- stripe-payments - Stripe CLI:试用期结束时的测试操作
- postgresql - 扁平化 PostgreSQL 中的左连接结果
- haskell - 使用 Foldmap“超出范围”的 Haskell 制表函数
- ios - 一键滚动两个 UITableView
- sql-server - 在 Google Cloud SQL 中执行“sp_fulltext_service”?