浏览器何时以及如何渲染< style>在< body>中加入标签？ [英] When and how do browsers render <style> tag in <body>?
问题描述
我注意到如果我在< body> 中放置< style> ，那么css将被应用于< style> 标签之前和之后的所有元素。
因此，在我看来，加载页面时会处理css，与JavaScript文档就绪事件的行为类似。我对吗？如果是这种情况，哪个订单会处理多个< style> 标签？
总之，对于你的问题的回答是：一旦< style> 标记符合< body> 一切停止 和CSSOM正在重建并重新应用于所有现有的渲染（绘制）内容。 $ b
在< body> < 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>
* 在进一步测试中，出现 所有的 如果您对更多详情感兴趣，我建议您阅读表现章节网络基础知识，由Google提供。 I noticed that if I place 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 TL;DR: In short, the answer to your question is: once a Placing The render process of a page is quite complex. But, overly-simplified, here's what happens * On further testing it appears All the above apply to the normal loading, without considering If you're interested in more details, I recommend going through the Performance chapter of Web Fundamentals, provided by Google. 这篇关于浏览器何时以及如何渲染< style>在< body>中加入标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！< head> 解析是单线程的。每个< link /> 和< style> 标记（< script> ）放在< link> 之后，只会在< link /> 已解决并应用于CSSOM）。放置在CSS资源之间的< script> 标签不会被延期，直到< head> 中的所有CSS资源都被解析，正如我最初的想法。
当然 js 可以在运行时更改CSSOM。请参阅此问题我要求了解更多信息
js 执行都被CSSOM building阻止。以上适用于正常加载，而不考虑 async ，这增加了一层全新的复杂性。
<style> inside <body> the css would be applied to all elements after and before <style> tag. <style> tags be processed?<style> tag is met inside <body> everything stops and the CSSOM is being rebuilt and re-applied to all existing rendered (painted) content. <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.
<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.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. <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. <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.
async, which adds a whole new layer of complexity to it.
