在自定义组件中，在样式标签中加载样式更快还是使用链接标签更快？

我正在开发一些自定义组件，我想知道在模板内的样式标签中加载样式或使用链接标签是否是最佳实践（rel="stylesheet"）来调用样式？

使用样式标签

const template = document.createElement('template');
template.innerHTML = `
  <style>
    .class-one {property: value;}
    .class-two {property: value;}
  </style>
  <div class="class-one class-two">
    <a href=""><slot></slot></a>
  </div>
`;

与使用链接标签相比

const template = document.createElement('template');
template.innerHTML = `
  <link rel="stylesheet" href="path/to/styles.css">
  <div class="class-one class-two">
    <a href=""><slot></slot></a>
  </div>
`;

其中之一能提供更好的性能吗？如何测试哪个选项加载元素更快？

这取决于您想要什么样的表演。

当使用<link>元素，您的用户将受益于客户端缓存。这也意味着您不必将 CSS 包含在 JS/HTML 中，从而大大减少带宽使用（并间接减少解析这些内容所需的工作量）。