我注意到,如果我将< style>
放在< body>
中,css将应用于< style>之后的所有元素。
标签。
因此我认为在加载页面时会处理css,这与javascript文档就绪事件的行为类似。我对吗?如果是这样的情况,那么处理多个< style>
标签的顺序是什么?
答案 0 :(得分:4)
<强> TL; DR:强>
简而言之,您的问题的答案是:在<style>
内完成<body>
标记后, 一切都停止 ,而CSSOM正在重建并重新应用于所有现有的渲染(绘制)内容。
将<style>
标记放在<body>
内被认为是不好的做法,因为它可以创建FOUC。但是,如果您的<style>
标记仅包含在DOM中放置的元素的规则,则将其置于正文中是完全正常的,因为不会发生FOUC。
页面的渲染过程非常复杂。但是,过度简化,这就是发生的事情
<head>
并构建CSSOM。除非使用@media
查询明确指定,否则所有CSS都是渲染阻止。非阻塞CSS仍然被加载,它没有被完全跳过。<script>
执行都推迟到构建CSSOM(在</head>
tag met上),此时所有已加载{{1运行,阻止DOM构建。 JS此时可以对CSSOM进行更改。 <script>
内放置<style>
标签会中断所有内容(JS执行和DOM构建),CSSOM正在更新并应用于已呈现的内容(如果有)。之后一切都恢复了。 * 在进一步测试时,它显示<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)
int main()
{
char* permenant="Won´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文件或在head
元素中放置相同的规则具有与布局和样式相同的结果。外部文件具有一点HTTP开销的缺点,但是为任何进一步的请求缓存的好处。如果您的网站包含多个页面,则通常需要一个或多个仅下载一次的CSS文件。
答案 2 :(得分:-5)
因此,我认为在加载页面时会处理css,这与javascript文档就绪事件的行为类似。我是对的吗?
没有。将该代码添加到DOM时,使用新的CSS代码修改样式表。在其余的DOM完成加载之前没有延迟。如果你有人看到了FOUC。
哪个订单会处理多个
<style>
代码?
它们出现的顺序。然后normal rules of the cascade适用。