Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css] 第15天 style标签写在body前和body后的区别是什么？ #47

Open
haizhilin2013 opened this issue Apr 30, 2019 · 13 comments
Open

[css] 第15天 style标签写在body前和body后的区别是什么？ #47

haizhilin2013 opened this issue Apr 30, 2019 · 13 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第15天 style标签写在body前和body后的区别是什么？
@haizhilin2013 haizhilin2013 added the css css label Apr 30, 2019
@hbl045
Copy link

hbl045 commented May 5, 2019

渲染机制的区别，在body前是已经把样式浏览一遍，到了对应标签直接，渲染样式。显示块。
在body后，是浏览器已经把标签浏览了，但基于没有样式，显示的不完全，再把body后的样式表，扫描后，在成为真正的样式。会慢，遇到大型网站，效果更差，这都基于浏览器从上而小的浏览机制导致的。

@Vi-jay
Copy link

Vi-jay commented Jul 26, 2019

没差

@Konata9
Copy link

Konata9 commented Jul 28, 2019

在 HTML4 的时候，不应该把 style 放到 body 中间。

浏览器在渲染页面时 DOM 和 CSSOM 是并行的，然后两者结合形成 Render Tree 显示页面。从直觉上来说，style 写在 body 前不会对 DOM 的渲染进行阻塞；而写在 body 内会对 DOM 渲染进行阻塞。会产生 FOUC（Flash of Unstyled Content) 的现象，既一瞬间的白屏或者样式的突然变化（原因是 Render Tree 重新生成了）。

不过 W3C 在 HTML5.2 的定义中对于 style 标签的使用的定义中是允许将 style 放到 body 中的。

Contexts in which this element can be used:
Where metadata content is expected.
In a noscript element that is a child of a head element.
In the body, where flow content is expected.

参考文章：
Will it be a wrong idea to have <style> in <body>?
W3C The style element
什么是 FOUC？如何避免 FOUC？
Understanding the Critical Rendering Path

@jiamianmao
Copy link

jiamianmao commented Aug 9, 2019 •
edited
Loading

俺Blog里写的应该很到位。
性能优化——CSS和JS的加载和执行

@blueRoach
Copy link

放在body前会跟HTML同时渲染
放在body后，浏览器会先渲染HTML，再渲染CSS，则会导致一开始出现一个没有样式的界面，再跳到有样式的界面。

@giggleCYT
Copy link

写在body标签前利于浏览器逐步渲染
写在body标签后：由于浏览器以逐行方式对html文档进行解析；当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染； 在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）；

@smile-2008
Copy link

放在body前会跟HTML同时渲染
放在body后，浏览器会先渲染HTML，再渲染CSS，则会导致一开始出现一个没有样式的界面，再跳到有样式的界面。

@amikly
Copy link

amikly commented Nov 2, 2021 •
edited
Loading

前

利于浏览器逐步渲染

后

由于浏览器以逐行方式对html文档进行解析；

当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染

在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

HTML4 中

不应该把 style 放到 body 中间

浏览器在渲染页面时 DOM 和 CSSOM 是并行的，然后两者结合形成 Render Tree 显示页面

从直觉上来说，style 写在 body 前不会对 DOM 的渲染进行阻塞；而写在 body 内会对 DOM 渲染进行阻塞

不过 W3C 在 HTML5.2 的定义中对于 style 标签的使用的定义中是允许将 style 放到 body 中的
img

@tk12138
Copy link

tk12138 commented Nov 27, 2021

写在body前有利于浏览器逐步渲染，而写在body后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表，就会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现样式失效导致的页面闪烁问题。

@WangXi01
Copy link

渲染先后的问题，在加载东西很多，大网站会有影响

@Iambecauseyouare
Copy link

写在body前利于浏览器渲染，将会跟浏览器一起渲染下去
写在body后由于浏览器以逐行对html文档进行解析，当解析到尾部的样式表会导致浏览器停止之前的渲染，等待加载接解析样式表完成后之后重新渲染

@lili-0923
Copy link

1、 写在 body 标签前利于浏览器逐步渲染： resourcesdownloading （资源下载）->CSSOM+DOM->RenderTree(composite)->Layout->paint

2、写在 body 标签后： 由于浏览器以逐行方式对 html 文档进行解析； 当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待 加载且解析样式表完成之后重新渲染； 在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）；

@pengsir120
Copy link

当style标签写在body标签前时，浏览器在解析HTML文档时，会逐步渲染页面，这意味着浏览器可以一边下载HTML文档，一边应用已经写在前面的样式，从而使得页面内容能够逐步显示出来，提高了页面的加载速度和用户体验。这种方式有利于浏览器逐步渲染页面，因为样式和内容可以同时加载和渲染，减少了用户等待的时间。
然而，当style标签写在body标签后时，情况则有所不同。由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（无论是外部链接的还是直接写在style标签内的）时，浏览器会停止之前的渲染，等待加载且解析样式表完成之后重新渲染页面。这种做法可能会导致页面一开始出现没有应用样式的界面，然后再跳转到应用了样式的界面，给用户一种页面重新加载的印象，可能会造成用户体验的下降。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests