浏览器何时以及如何在<body>中呈现<style>标记?

时间:2017-06-05 14:26:44

标签: html css html5

我注意到,如果我将&lt; style&gt; 放在&lt; body&gt; 中,css将应用于&lt; style&gt;之后的所有元素。 标签。

&#xA;&#xA;

因此我认为在加载页面时会处理css,这与javascript文档就绪事件的行为类似。我对吗?如果是这样的情况,那么处理多个&lt; style&gt; 标签的顺序是什么?

&#xA;

3 个答案:

答案 0 :(得分:4)

<强> TL; DR:

简而言之,您的问题的答案是:在<style>内完成<body>标记后, 一切都停止 ,而CSSOM正在重建并重新应用于所有现有的渲染(绘制)内容。

<style>标记放在<body>内被认为是不好的做法,因为它可以创建FOUC。但是,如果您的<style>标记仅包含在DOM中放置的元素的规则,则将其置于正文中是完全正常的,因为不会发生FOUC。

页面的渲染过程非常复杂。但是,过度简化,这就是发生的事情

    读取
  1. <head>并构建CSSOM。除非使用@media查询明确指定,否则所有CSS都是渲染阻止。非阻塞CSS仍然被加载,它没有被完全跳过。
  2. DOM构建和CSSOM构建在paralel,中运行,但所有<script>执行都推迟到构建CSSOM(在</head> tag met上),此时所有已加载{{1运行,阻止DOM构建。 JS此时可以对CSSOM进行更改。 *
  3. <script>内放置<style>标签会中断所有内容(JS执行和DOM构建),CSSOM正在更新并应用于已呈现的内容(如果有)。之后一切都恢复了。
  4. * 在进一步测试时,它显示<body>解析是单线程的。 CSSOM构建确实阻止了javascript执行,但它完成了阶段,因为每个<head><link />标记都得到满足(<style>之后放置<script>只会在{<link>之后执行1}}已解决并应用于CSSOM)。正如我最初想的那样,在解析<link />中的所有CSS资源之前,不会延迟放置在CSS资源之间的<script>标记。 当然,<head>可以在运行时更改CSSOM。请参阅this question我询问了有关CSSOM构建如何阻止js执行的更多信息。

    所有上述内容均适用于正常加载,而不考虑js,这为其增加了一层全新的复杂性。

    如果您对更多详情感兴趣,建议您浏览Google提供的网络基础知识Performance一章。

答案 1 :(得分:1)

CSS的范围

int main() { char* permenant="Won&acute;t Get Fooled Again"; char* s=permenant; for ( ; *s && *s != '&'; s++) ; printf("found '&' character \n"); // ---> OK printf("s=%s \n",s); // ---> OK if (*(s+1) == 'a' && *(s+2) == 'c' && *(s+3) == 'u' && *(s+4) == 't' && *(s+5) == 'e' && *(s+6) == ';') // ---> OK { *s='\''; //---> NO also if *s='a'; segmentation fault !! while(*(s+7)!='\0') { *(s+1)=*(s+7); s++; printf("the next character is -> %c \n", *(s+7)); }// ---> Segmentation fault also if i remove *s='\'' } printf("permenant=%s \n",permenant); return 0; } 元素适用于整个文档,无论其位置如何。它会在加载后立即应用。

将样式标记放入style

的原因

由于每个浏览器都有有限数量的线程用于下载页面文件(如JS,CSS,图像和异步加载的HTML,JSON或XML),因此人们倾向于在<body>的末尾包含CSS文件元素而不是将它们包含在body元素中的经典方法。这样,可以加载和渲染页面的其余部分,并最后应用样式。如果您的CSS纯粹是为了外观(即没有隐藏必需的元素),那么你就会这样做,以改善用户体验。

CSS文件与HTML

中的样式规则

包含外部CSS文件或在head元素中放置相同的规则具有与布局和样式相同的结果。外部文件具有一点HTTP开销的缺点,但是为任何进一步的请求缓存的好处。如果您的网站包含多个页面,则通常需要一个或多个仅下载一次的CSS文件。

答案 2 :(得分:-5)

  

因此,我认为在加载页面时会处理css,这与javascript文档就绪事件的行为类似。我是对的吗?

没有。将该代码添加到DOM时,使用新的CSS代码修改样式表。在其余的DOM完成加载之前没有延迟。如果你有人看到了FOUC。

  

哪个订单会处理多个<style>代码?

它们出现的顺序。然后normal rules of the cascade适用。