Web组件渲染性能
问题描述:
与本机HTML元素相比,Web组件是否提供更好的性能?由于每个元素只有在连接到DOM时才会发生变化。因此,在Element回调内部进行昂贵的操作会导致较差的性能。Web组件渲染性能
我在connectedCallback句柄中编写了一个带有一些昂贵实现的示例Web组件,当我尝试渲染该组件时,每个组件都花费了连续的时间。
我在Web Components上看不到任何与引用相关的性能引脚点。
更新1
我有本地和Web组件实现创建的小网页,似乎Web组件页面花了4毫秒来完成,但本机只花了1毫秒。请参阅我的演出屏幕。在Web组件脚本中占用更多时间。
本地HTML例子:
Web组件实例:
答
由于自定义元素扩展了原生HTML元素(通过class extends HTMLDivElement
),并添加了额外的功能,所以我会说:在最好的情况下,它们只能和原生HTML元素一样好。
与第三方框架(不支持这项新技术)相比,性能的提高是:Web组件应该更快。
您可以在比较本机和填充的自定义元素实现时看到它。
问题是什么? –
@AndreiNemes:与原生HTML元素相比,Web组件是否提供更好的性能? – john