作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在处理一些自定义组件,我想知道最好的做法是在模板内的样式标签中加载样式,还是使用链接标签 (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 中,从而大大减少带宽使用(并间接减少解析这些内容所花费的精力)。
关于javascript - 在自定义组件中,在 style 标签中加载样式还是使用 link 标签更快?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68487568/
我正在开发一个需要能够平均三个数字的 Facebook 应用程序。但是,它总是返回 0 作为答案。这是我的代码: $y = 100; $n = 250; $m = 300; $number = ($y
我只是无法弄清楚这一点,也找不到任何对我来说有意义的类似问题。我的问题:我从数据库中提取记录,并在我的网页上以每个面板 12 条的倍数显示它们。因此,我需要知道有多少个面板可以使用 JavaScrip
我是一名优秀的程序员,十分优秀!