浏览器何时以及如何渲染< style>在< body>中加入标签? [英] When and how do browsers render <style> tag in <body>?
问题描述
我注意到如果我在< body>
中放置< style>
,那么css将被应用于< style>
标签之前和之后的所有元素。
因此,在我看来,加载页面时会处理css,与JavaScript文档就绪事件的行为类似。我对吗?如果是这种情况,哪个订单会处理多个< style>
标签?
总之,对于你的问题的回答是:一旦< style>
标记符合< body>
一切停止 和CSSOM正在重建并重新应用于所有现有的渲染(绘制)内容。 $ b
在< body> $ c $内放置
< style>
标签c>被认为是不好的做法,因为它可以创建 FOUC 。但是如果你的< style>
标签只包含在DOM之后放置的元素的规则,将它放在body中是完全没问题的,因为没有FOUC可以发生。
页面的渲染过程相当复杂。但是,过分简化,这里会发生什么
-
< head>
被读取并建立CSSOM。除非通过使用@media
查询明确指定,否则所有CSS都呈现阻塞。 - DOM构建和CSSOM构建以paralel,
运行,但所有< script> 执行被推迟到构建CSSOM之前(在
< / head>
tag met)上,此时所有加载的< script>
s正在运行,阻止DOM构建。 JS现在可以对CSSOM进行更改。在< code>< / c>中放置
中断一切(JS执行和DOM构建),CSSOM正在更新并应用于已经呈现的内容(如果有的话)。一切都恢复后。< style>
标签< / c>< / li> ; body>
* 在进一步测试中,出现< head>
解析是单线程的。每个< link />
和< style>
标记(< script>
)放在< link>
之后,只会在< link />
已解决并应用于CSSOM)。放置在CSS资源之间的< script>
标签不会被延期,直到< head>
中的所有CSS资源都被解析,正如我最初的想法。
当然 js
可以在运行时更改CSSOM。请参阅此问题我要求了解更多信息
所有的 js
执行都被CSSOM building阻止。以上适用于正常加载,而不考虑 async
,这增加了一层全新的复杂性。
如果您对更多详情感兴趣,我建议您阅读表现章节网络基础知识,由Google提供。
I noticed that if I place <style>
inside <body>
the css would be applied to all elements after and before <style>
tag.
So it looks to me that the css is processed when the page is loaded, similar behavior to javascript document ready event. Am I right? And if that is the case in which order would multiple <style>
tags be processed?
TL;DR:
In short, the answer to your question is: once a <style>
tag is met inside <body>
everything stops and the CSSOM is being rebuilt and re-applied to all existing rendered (painted) content.
Placing <style>
tags inside <body>
is considered bad practice because it can create FOUC. But if your <style>
tag only contains rules for elements placed after it in DOM, placing it in body is perfectly fine, as no FOUC can happen.
The render process of a page is quite complex. But, overly-simplified, here's what happens
<head>
is read and CSSOM is built. All CSS is render blocking, unless explicitly specified otherwise by use of@media
queries. The non-blocking CSS is still loaded, it's not entirely skipped.- DOM building and CSSOM building are ran in paralel,
but all*<script>
execution is deferred until CSSOM has been built (on</head>
tag met), at which point all loaded<script>
s are ran, blocking DOM building. JS can make changes to CSSOM at this point. - Placing
<style>
tags inside<body>
interrupts everything (JS execution and DOM building), CSSOM is being updated and applied to the already rendered content, if any. Everything is resumed after.
* On further testing it appears <head>
parsing is single threaded. CSSOM building does block javascript execution but it's done is stages, as each <link />
and <style>
tags are met (a <script>
placed after a <link>
will only execute after the <link />
was resolved and applied to CSSOM). <script>
tags placed in between CSS resources are not deferred until all CSS resources in <head>
are parsed, as I initially thought.
And, of course js
can make changes to CSSOM at run time. See this question I asked for more on how js
execution is blocked by CSSOM building.
All the above apply to the normal loading, without considering async
, which adds a whole new layer of complexity to it.
If you're interested in more details, I recommend going through the Performance chapter of Web Fundamentals, provided by Google.
这篇关于浏览器何时以及如何渲染< style>在< body>中加入标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!