英文:
Angular: Improve performance for multiple re-rendering large list
问题
所以我有一个渲染大型列表的常规问题，使用 ngFor，但我的应用程序非常卡顿，渲染需要太长时间。
我的实际情况：
我有多个 mat-cards 列表，它们的大小动态不同且无法预测。只是为了给你一个概念，一个列表大约包含100到300张卡片，所有卡片上都有按钮、图标和文字。
所以材料 cdk 的虚拟滚动对我来说不起作用，因为大小动态。应该可以随时在这些列表之间切换，这导致它们一直重新渲染。
我已经对所需数据进行了 http 请求的缓存，所以我的问题实际上只是浏览器的渲染，而不是数据的检索。
我还尝试了使用 ng-template 策略进行动态渲染，但效果不是很好。而且由于我可以随时在这些列表之间切换，这导致了在切换时出现竞争条件。
对于我的特定情况，RxAngular 也没有帮助。
在网上进行了大量研究后，我现在绝望地寻找最后的希望。也许有一种方法可以缓存实际渲染的 HTML，这样我就可以在列表之间切换时重用它们？或者任何其他建议和建议将不胜感激。
提前感谢！
编辑：有关用例的更多信息：这是一本诗意书籍，有多个章节。每章有多个节，所有这些都可以进行评论、收藏、复制、共享等。我的客户希望整章都在一个巨大的列表中渲染，每当切换章节时，它应该在同一位置重新渲染。所以我希望这些信息有助于理解问题。
英文:
So i have that casual problem of rendering large lists with ngFor, but my application being extremely laggy and taking too long to finish rendering.
My actual case:
I have multiple lists of mat-cards, which all have dynamically different and unpredictable sizes. Just to give you an idea, one list contains around 100 to 300 cards, all with buttons, icons and texts.
So virtual scroll from material cdk is not working for me because of the dynamic sizes. It should be possible to always switch between these lists, which leads to re-rendering them all the time.
I am already caching the http request for the needed data, so my problem is really only the browser rendering, not retrieving of data.
I also tried dynamic rendering with ng-template strategy, but that also not improved that much. And since i can always switch between the lists, it leads to race conditions while switching them.
RxAngular also did not help for my specific case.
After researching a lot in the web, i am now desperately looking for my final hope. Is there maybe a way to cache the actual rendered html, so that i can just reuse them while switching between the lists? Or any other advice and suggestion would be highly appreciated.
Thanks in advance!
Edit: More infos about use case: It is about a poetic book with multiple chapters. Each chapter has multiple verses and all of them can be commented on, favorised, copied and shared etc. And my client wants the whole chapter to be rendered in one huge list and whenever the chapter is switched it should be re-rendered at the same place. So i hope this information helps about understanding the issue
答案1
得分: 1
如果您希望在同一页上显示300个带有内容的mat-card，自然而然地会遇到性能问题。
通常情况下，渲染300个这样的项并非必要，您能告诉我们更多关于您的用例吗？
其他选项：
- 使用*ngFor指令的trackBy功能。
- 实现分页。
为什么虚拟滚动在您的情况下不起作用呢？
如果您从API调用中获取数据，您在渲染之前就知道大小。
此外，为每个列表实现cdk虚拟滚动，而不是一个虚拟滚动，其中您交换列表本身。
希望对您有帮助！
英文:
If you want to display 300 mat-cards with content inside all on one page, its just natural and normal that you experience performance issues.
There is no way (usually) why rendering 300 such items on one page at a time is necessary, or can you tell us more about your use case?
Some other options:
- Use the trackBy feature of the *ngFor Directive
- Implement Pagination
Why isn't virtual scrolling not working for your case?
If you have the data from the api call you know the size before rendering.
Also, implement cdk virtual scroll for every list, not one virtual scroll where you swap the list itself.
Hope it was helpful!
答案2
得分: 0
300张卡片不应该是问题，你甚至可以渲染10,000张卡片，也许你正在递归处理，或者可能是循环，或者可能是一些外部问题。
因此，我的建议是进行分页，不要将300张卡片保存在内存中，你必须与团队领导和后端团队沟通，提供分页，每个请求交付10张卡片。为此，MongoDB或其他数据库被创建，充分利用它。这是最佳方法，有一天你的应用将变得复杂。
另一方面，人眼无法查看如此庞大的信息量...
请设身处地为最终用户考虑 =)
英文:
300 cards must not be a problem, you can render even 10,000 cards, perhaps you are doing some recursively or may a loop o may can be something external issue.
So, my suggestion is make a pagination, dont save the 300 cards in memory, you must speak with your team lead and back end team that provide you a pagination, each request must deliver 10 cards. For that reason MONGO DB or other Data Bases was created, take adventage of that. Is the best aproach, some day your app will be complex.
In anothe hand, the human eye isnt capable to watch such size of info...
Please put your self in the shoes of the final user =)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论