渲染多个(数百甚至数千)web组件
我面临的问题是渲染很多web组件的速度很慢。编写脚本大约需要1，5秒，然后再花3秒来渲染大约5k个元素(主要是布局+重新计算样式)，我计划在DOM中投入更多。我准备这些元素的脚本大约需要100-200ms，其余的来自constructor和其他回调函数。
对于普通的超文本标记语言元素，可以使用documentFragment获得性能提升，在这种情况下，您基本上准备了一批元素，并且只有在准备完成后才将它们附加到DOM。
不幸的是，每个web组件都会调用它的constructor和其他回调函数，比如connectedCallback，attributeChangedCallback等。当有很多这样的组件时，这并不是最优的。
在将web组件插入到DOM之前，有没有办法让它们“预渲染”？
我尝试将它们放在template元素中并克隆内容，但是仍然为my-component的每个实例调用构造函数。有一件事确实提高了性能，那就是将附加到影子DOM的内容放在组件外部的模板中，并克隆它，而不是使用this.attachShadow({ mode: 'open' }).innerHTML=...，但这还不够。
回答 1
Stack Overflow用户
发布于 2021-03-31 07:51:58
你真的需要一次渲染所有~5k个元素吗？如果您设法预初始化内存中的组件，那么您将面临在DOM中呈现那么多元素的性能问题。
此场景的一种常见技术是使用一种称为“窗口”或“延迟呈现”的技术:其思想是在任何给定时间仅呈现组件的一小部分，这取决于用户视口上的内容。
经过一个非常快速的搜索，我没有找到实现这一点的web组件库，但是在React中有react-window和Vue vue-windowing作为参考
https://stackoverflow.com/questions/66879797
复制相似问题
腾讯云开发者
