Web组件呈现性能
与本机HTML元素相比，Web组件具有更好的性能。因为每个元素只有在附加到DOM时才会发生变异。因此，元素回调中的昂贵操作会导致性能低下。
我用connectedCallback句柄编写了一个包含一些昂贵实现的示例Web组件，当我尝试呈现该组件时，每个组件都需要连续的时间。
在Web组件上，我没有看到任何与性能相关的参考点。
更新1 我已经创建了一个带有本机和Web组件实现的小页面，似乎Web组件页面花了4ms才完成，但是本机只使用了1ms。请看我的表演屏幕。在Web组件中，脚本编写需要更多的时间。 本机HTML示例：
Web组件示例：
回答 4
Stack Overflow用户
发布于 2017-09-27 11:40:50
由于自定义元素正在扩展本地HTML元素(通过class extends HTMLDivElement)，并添加了额外的特性，我想说:在最好的情况下，它们只能与本地HTML元素一样好。
与第三方框架(不利用这种新技术)相比，性能的提高是: Web组件应该更快。
当比较本机和多填充自定义元素实现时，您可以看到它。
Stack Overflow用户
发布于 2018-02-13 01:45:44
Stack Overflow用户
发布于 2018-05-12 03:42:52
我在想，如果您只是简单地做了一个简单的"Hello“，那么当然本机元素将是赢家，因为它不需要JS来工作，而定制元素需要JS来定义和启动文本的呈现。
现在，一个更好的比较是，假设使用相同的代码库，您只使用JS和本机元素创建一个旋转木马，以及一个自定义元素(即旋转木马)。那么我认为渲染性能将是相等的。我认为使用自定义元素而不是通过JS操作本机元素的唯一优点是，您可以在任何地方重用自定义标记，它将作为一个旋转木马工作，而不是当您必须在仅使用本机元素创建的每个旋转木马上使用new Carousel(document.querySelector('.carousel'))时。
https://stackoverflow.com/questions/46431688
复制相似问题
腾讯云开发者
