我注意到如果我放置 <style>里面<body> css 将应用于 <style> 之后和之前的所有元素标签。
所以在我看来，css 是在页面加载时处理的，类似于 javascript 文档就绪事件的行为。我对吗？如果是这种情况，顺序将是多个 <style>标记被处理？
最佳答案
长话短说:
简而言之，您的问题的答案是:一次 <style>在<body> 内遇到标签一切都停止了，CSSOM 正在重建并重新应用于所有现有的渲染(绘制)内容。
配售<style>里面的标签 <body>被认为是不好的做法，因为它可以创建 FOUC .但是如果你的 <style>标签只包含在 DOM 中放置在它后面的元素的规则，将它放在 body 中是完全没问题的，因为不会发生 FOUC。
页面的渲染过程是相当复杂的。但是，过于简单化了，这就是发生的事情
-
<head>被读取并构建 CSSOM。除非使用@media明确指定，否则所有 CSS 都是渲染阻塞的查询。非阻塞 CSS 仍然被加载，它没有被完全跳过。 - DOM 构建和 CSSOM 构建并行运行，
但所有*<script>执行被推迟到 CSSOM 构建完成(在</head>标签上)，此时所有加载<script>s 运行，阻止 DOM 构建。 JS此时可以对CSSOM进行修改。 - 配售
<style>里面的标签<body>中断一切(JS 执行和 DOM 构建)，CSSOM 正在更新并应用于已呈现的内容(如果有)。之后一切恢复。
* 进一步测试显示<head>解析是单线程的。 CSSOM 构建确实会阻止 javascript 执行，但它是分阶段完成的，因为每个 <link />和 <style>满足标签(在 <script> 之后放置的 <link> 只会在 <link /> 被解析并应用于 CSSOM 后执行)。 <script>放置在 CSS 资源之间的标签不会延迟到 <head> 中的所有 CSS 资源。被解析了，正如我最初想的那样。
而且，当然 js可以在运行时更改 CSSOM。参见 this question我问了更多关于如何 js执行被 CSSOM 构建阻止。
以上都是正常加载，不考虑async ，这给它增加了一个全新的复杂层。
如果您对更多详细信息感兴趣，我建议您浏览 Performance Web Fundamentals 章节，由 Google 提供。
关于css - 浏览器何时以及如何在 <body> 中呈现 <style> 标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44371227/