javascript - 渲染多个（数百甚至数千）Web 组件

Question

我面临的问题是渲染很多网络组件很慢。编写脚本大约需要 1.5 秒，然后再花 3 秒来渲染（主要是布局 + 重新计算样式）约 5k 元素，我计划在 DOM 中投入更多。我准备这些元素的脚本大约需要 100-200 毫秒，其余的来自constructor其他回调。
对于普通的 HTML 元素，可以使用documentFragment来获得性能增益，您基本上可以在其中准备一批元素，并且只有在完成后才能将它们附加到 DOM。
不幸的是，每个 web 组件都会调用它的constructor回调和其他的回调，比如connectedCallback，attributeChangedCallback等等。当有很多这样的组件时，它并不是真正的最佳选择。

有没有办法在将 Web 组件插入 DOM 之前“预渲染”它们？

我试图将它们放在template元素中并克隆内容，但是仍然为my-component. 确实提高了性能的一件事是将附加到 shadow DOM 的内容放在组件外部的模板中，并克隆它而不是使用this.attachShadow({ mode: 'open' }).innerHTML=...，但这还不够。

标签： javascripthtmlperformanceweb-component

Answer 1

您真的需要一次渲染所有约 5k 元素吗？如果您设法在内存中预初始化组件，您将面临独立于在 DOM 中渲染这么多元素的性能问题。

这种情况的一种常见技术是使用一种称为“窗口化”或“延迟渲染”的技术：其想法是在任何给定时间仅渲染一小部分组件，具体取决于用户视口上的内容。

经过非常快速的搜索，我没有找到实现此功能的 Web 组件库，但在 React 中你有react-window和 Vue vue-windowing作为参考