我面临的问题是渲染大量 Web 组件很慢。脚本编写大约需要 1.5 秒，然后再用 3 秒来渲染（主要是布局 + 重新计算样式）大约 5k 个元素，我计划在 DOM 中投入更多。我准备这些元素的脚本大约需要 100-200 毫秒，其余的来自 constructor 和其他回调。
对于普通的 HTML 元素，可以使用 documentFragment 实现性能提升，您基本上可以在其中准备一批元素，并且只有在完成后才将它们附加到 DOM。
不幸的是，每个网络组件都会调用它的 constructor 和其他回调，如 connectedCallback、attributeChangedCallback 等。当有很多这样的组件时，它并不是真正的最佳选择。
有没有办法在将 Web 组件插入到 DOM 之前“预渲染”它们？
我已经尝试将它们放在 template 元素中并克隆内容，但仍然为 my-component 的每个实例调用构造函数。确实提高了性能的一件事是将附加到 shadow DOM 的内容放在组件外部的模板中并克隆它，而不是使用 this.attachShadow({ mode: 'open' }).innerHTML=...，但这还不够。
答案 0 :(得分：1)
您真的需要一次渲染所有约 5k 个元素吗？如果您设法在内存中预初始化组件，那么您将面临独立于 DOM 中渲染这么多元素的性能问题。
此场景的一种常用技术是使用一种称为“窗口化”或“延迟渲染”的技术：其想法是在任何给定时间仅渲染一小部分组件，具体取决于用户视口上的内容。
>经过快速搜索后，我没有找到实现此功能的 Web 组件库，但作为参考，您在 React 中有 react-window 和 Vue vue-windowing