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）。具体渲染过程请参考