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

Question

我正在处理一些自定义组件，我想知道最好的做法是在模板内的样式标签中加载样式，还是使用 link 标签 (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>
`;

对比使用 link 标签

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>
`;

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

Answer 1

这取决于你想要什么样的表现。

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

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

In a custom component, is it faster to load styles in style tags or use a link tag?

javascript

css

custom-component