不在<style>标记中声明"type"属性是否存在性能成本？

Question

元素中的type属性<style>标识正在使用的媒体类型.

如果未声明type属性,则默认为text/css.

没有type="text/css"在<style>元素中声明是否有性能成本(无论多小)？

Answer 1

从属性上的MDN Style docs type:

此属性是可选的,如果缺少,则默认为text/css.

由于它默认为正确的,因此没有影响.

Answer 2

您也可以问一下,首先发出HTTP请求是否存在性能成本.完全消除性能本身的概念是不可能的.在某些时候,您的页面性能效率要达到100%,符合标准要求.在这种情况下,性能的互补性是标准.另一个例子是企业家精神和执行.世界上所有伟大的想法都是完全无用的,除非你能够执行使所述业务适合在现实世界中运作的经济模型.

现在,它是可能的业绩作出巨大的飞跃.早在80年代和90年代,你可以买一辆便宜的本田(这里是非标准),或者你可以提高性能(保时捷,法拉利或迈凯轮).然后特斯拉出现并完全吹走了最好的加速度.免责声明:我真的不关心汽车,但对于大多数人来说,这是一个简单的比喻.

作为一个没有留下任何岩石的人,我可以亲自向你证明,最终,不是你,尽管你应该寻求提高性能的环境.因此,虽然我赞扬你试图在框外思考,但我会考虑在哪里提高性能.

• 警惕*选择器的过多利用率.
• animation除了on ::after和::beforepseudo-elements 之外,避免使用box-shadow的CSS .
• 请注意不使用哪些选择器/规则.
• 请注意为整个域使用单个编译的样式表,您应该具有非常好的CSS技能.
• 避免CSS类puking(frigin所有的类属性).
• 避免使用CSS position absolute以及fixed适度或次要的布局方面; 仅保留主要布局元素.
• 尽可能地缩小CSS.
• 减少HTTP请求的数量.
• 使用Yahoo的YSlow和Google PageSpeed Insights等第三方工具进一步了解.

Answer 3

它不会对性能产生影响,但是当未设置类型时,旧版浏览器和非标准浏览器可能会误解元素内的内容.我经常使用带有类型元素的嵌入式块,并且在使用常见浏览器,IE,Chrome,Firefox或Safari时没有遇到过问题.

Answer 4

正如您在问题中已经说过的，默认类型是“text/css”，这意味着如果不存在 type 属性，浏览器将使用“text/css”。

对于基于 webkit 引擎的浏览器，省略 type 属性实际上更快，因为它首先检查类型是否为空。因此，如果您不省略类型，浏览器必须至少再做 1 次检查。（检查提供的类型是否匹配text/css）。

我可以想象其他浏览器（不基于 webkit）正在实现 css 检查可能是相同的。因为从 CPU 的角度来看，检查空字符串“更容易”（在基于 webkit 的浏览器的情况下，它AtomicString来自 webkit 引擎）。

您可以在webkit 引擎实现中找到 css 检查。也可以在chromium implementation里面找到。