zoukankan      html  css  js  c++  java
  • style标签放在body前和body后的区别

    转载自:https://blog.csdn.net/qq_44721831/article/details/102528073

    style标签写在body后与body前有什么区别?

    从有html标准以来到目前为止(2017年5月),标准一直是规定style元素不应出现在body元素中。(除非style处于template元素中,因为template中的内容是不直接在dom树中的。另外曾经

    如果style元素出现在body元素,最终效果和style元素出现在head里是一样的。但是可能引起FOUC、重绘或重新布局。注意,根据当前标准,<link rel=stylesheet …> 是可以出现在body元素中的。并且也可能引起上述问题。然而link是引用资源,意味着可以用于故意设计的异步加载。而style元素是直接内嵌的,并没有合理的use case去使用它。所以html标准中允许body中出现link,而不允许style。

    不过,虽然20年以来,把style放在body中一直是不合标准的,但仍然有大量网站这样用了,所以这个问题是有一定争议的。参见 style tag should be allowed in body · Issue #1605 · whatwg/html 。

    PS. 有部分网站在body中使用style可能是出于组件或CMS的需求,之前html标准曾加入了

    写在head标签中利于浏览器逐步渲染(resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint)。具体渲染过程请参考
    http://blog.csdn.net/wozaixia…

    写在body标签后由于浏览器以逐行方式对html文档进行解析,当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)

    之所以建议这样做,是因为当你在前面声明css时<body>开始时,你的样式实际上已经加载了。所以用户很快就会看到屏幕上出现的东西(例如背景色)。如果没有,用户会在CSS到达用户之前看到一段时间的空白屏幕。

    此外,如果将样式放在<body>,当已声明的样式被解析时,浏览器必须重新呈现页面(加载时新的和旧的)。

  • 相关阅读:
    每周总结13
    每周总结12
    每周总结11
    每周总结10
    每周总结9
    启明5-1总结
    启明4-30团队进度博客
    期末总结
    每日日报2021.6.11
    每日日报2021.6.10
  • 原文地址:https://www.cnblogs.com/melodyjerry/p/13966399.html
Copyright © 2011-2022 走看看