不在<style>标记中声明“type”属性是否存在性能成本?

时间:2017-09-21 20:38:46

标签: html css html5 css3 stylesheet

&lt; style&gt; 元素中的类型属性标识正在使用的媒体类型。

&#xA;&#xA;

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

&#xA;&#xA;

&lt; style&gt;中未声明 type =“text / css”是否存在性能成本(无论多小)? 元素?

&#xA;

12 个答案:

答案 0 :(得分:19)

来自type属性的MDN Style文档:

  

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

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

答案 1 :(得分:9)

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

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

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

  • 警惕*选择器的过多利用。
  • 避免使用box-shadow的CSS animation,但::after::before伪元素除外。
  • 请注意哪些选择器/规则未被使用。
  • 请注意为整个域使用单个已编译的样式表,您应该具有非常好的CSS技能。
  • 避免CSS类puking(frigin所有的类属性)。
  • 在中等或次要布局方面避免使用CSS position absolutefixed;仅保留 主要布局元素。
  • 随时随地缩小CSS。
  • 减少HTTP请求的数量。
  • 使用雅虎的YSlow和Google PageSpeed Insights等第三方工具进行深入了解。

答案 2 :(得分:7)

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

答案 3 :(得分:4)

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

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

我可以想象其他浏览器(不是基于webkit)实现css检查的可能性相同。因为从CPU的角度来看,检查空字符串是“更容易”(对于基于webkit的浏览器,它是来自webkit引擎的AtomicString。)

您可以在webkit engine implementation内找到css检查。也可以找到 inside the chromium implementation

答案 4 :(得分:3)

根据HTML5,样式的默认类型为 text / css ,脚本标记的默认类型为 text / javascript ,即使您指定了,它们也会考虑默认值。 因此,考虑到大多数现代浏览器,不会出现任何性能问题

答案 5 :(得分:2)

type =&#34; text / css&#34;的主要目的;设置type属性的值以指示链接(样式表)资源的语言。这允许用户代理避免为不受支持的样式表语言下载样式表。 (www.w3.org

所以基本上,它只能通过避免下载渲染阻止文件来减少页面加载。所以可以肯定地说,使用type属性来指定样式表类型有时会增加pagespeed。

答案 6 :(得分:2)

我认为它应该会产生影响,即使它是可选的。

让我们考虑两种情况:

  1. 案例1:类型存在
    解析html文档浏览器时将解析样式标记和读取类型属性,并将知道文件的格式。它将检查对类型的支持并开始下载。
  2. 案例2:类型不存在
    解析html文档浏览器时会解析样式标记并检查类型属性。由于它没有类型属性,它将检查保存在浏览器设置中的默认类型,并尝试根据默认设置下载文件。
  3. 现在,检查默认设置并应用这些设置的额外步骤应该在案例2中花费更多时间。所以我会说有性能影响,但它确实可以忽略不计。指定类型应该会提高性能。

答案 7 :(得分:0)

自HTML 5.x引入以来,不再需要它,如果您的客户浏览器已经支持HTML5,那么您可以省略它。

答案 8 :(得分:0)

这在最新版本中是可选的,包括或排除标签无关紧要,因为它是默认的,但包含此标签并不是一个坏主意,因为它将帮助浏览器轻松识别脚本 - 特别是旧版本。

答案 9 :(得分:0)

简单回答:不::)

这就像人类的谚语&#34;嘿。你好吗?&#34;而不是&#34;嘿。你好吗?&#34; ...你的大脑知道你想说什么,而且你没有多余的时间来理解这句话。

答案 10 :(得分:0)

通常它没有性能成本 并且使用html 5也应该没有问题 最好不要声明它然后设置错误的类型

答案 11 :(得分:-1)

根据MDN

  

type属性是可选的,默认为text/css

因此,如果不在type="text/css"元素中声明<style>,则无需担心性能成本吗?