If CSS is render-blocking, why do we see FOUC?
up vote
0
down vote
favorite
In order to construct the render-tree, the browser requires both DOM and CSSOM. CSSOM can only be constructed, once the CSS is downloaded. In essence, once the CSS is downloaded the page should be rendered alright. But, why do we see Flash Of Unstyled Content(FOUC) on the page? In what time window does the browser show unstyled content?
Please help me understand this.
Ref:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
html css dom browser cssom
asked Nov 9 at 5:20
Vishnu Sankaran
380213
add a comment |
up vote
0
down vote
favorite
In order to construct the render-tree, the browser requires both DOM and CSSOM. CSSOM can only be constructed, once the CSS is downloaded. In essence, once the CSS is downloaded the page should be rendered alright. But, why do we see Flash Of Unstyled Content(FOUC) on the page? In what time window does the browser show unstyled content?
Please help me understand this.
Ref:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
html css dom browser cssom
asked Nov 9 at 5:20
Vishnu Sankaran
380213
Do you have an example where FOUC is happening and you don't expect it to?
– Juan Mendes
Nov 9 at 13:10
Often the problem is CSS in the HTML body. If the HTML is rendered before the CSS is encountered (because the parsing has stalled), a FOUC will be the result.
– Alohci
Nov 9 at 17:30
@JuanMendes I totally expect FOUC to happen, because my CSS is not downloaded and the render-tree is not created, and the style rendering is stalled. But, as you commented in the answer, my question was why is CSS called to be render blocking?
– Vishnu Sankaran
Nov 12 at 5:11
@Alohci Inline CSS would be parser-blocking, if I am right and would not show full content. And I don't think, delay in parsing causes fouc. Delay in parsing should show a blank page. No?
– Vishnu Sankaran
Nov 12 at 5:15
@VishnuSankaran. No. If there's no CSS in the process of being fetched - i.e. the page is not render blocked - the browser will render whatever DOM it has constructed at the point where the parsing stalls.
– Alohci
Nov 12 at 7:10
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
In order to construct the render-tree, the browser requires both DOM and CSSOM. CSSOM can only be constructed, once the CSS is downloaded. In essence, once the CSS is downloaded the page should be rendered alright. But, why do we see Flash Of Unstyled Content(FOUC) on the page? In what time window does the browser show unstyled content?
Please help me understand this.
Ref:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
html css dom browser cssom
asked Nov 9 at 5:20
Vishnu Sankaran
380213
In order to construct the render-tree, the browser requires both DOM and CSSOM. CSSOM can only be constructed, once the CSS is downloaded. In essence, once the CSS is downloaded the page should be rendered alright. But, why do we see Flash Of Unstyled Content(FOUC) on the page? In what time window does the browser show unstyled content?
Please help me understand this.
Ref:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
html css dom browser cssom
html css dom browser cssom
asked Nov 9 at 5:20
Vishnu Sankaran
380213
asked Nov 9 at 5:20
Vishnu Sankaran
380213
edited Nov 9 at 7:13
asked Nov 9 at 5:20
Vishnu Sankaran
380213
asked Nov 9 at 5:20
Vishnu Sankaran
380213
asked Nov 9 at 5:20
Vishnu Sankaran
380213
380213
Do you have an example where FOUC is happening and you don't expect it to?
– Juan Mendes
Nov 9 at 13:10
Often the problem is CSS in the HTML body. If the HTML is rendered before the CSS is encountered (because the parsing has stalled), a FOUC will be the result.
– Alohci
Nov 9 at 17:30
@JuanMendes I totally expect FOUC to happen, because my CSS is not downloaded and the render-tree is not created, and the style rendering is stalled. But, as you commented in the answer, my question was why is CSS called to be render blocking?
– Vishnu Sankaran
Nov 12 at 5:11
@Alohci Inline CSS would be parser-blocking, if I am right and would not show full content. And I don't think, delay in parsing causes fouc. Delay in parsing should show a blank page. No?
– Vishnu Sankaran
Nov 12 at 5:15
@VishnuSankaran. No. If there's no CSS in the process of being fetched - i.e. the page is not render blocked - the browser will render whatever DOM it has constructed at the point where the parsing stalls.
– Alohci
Nov 12 at 7:10
add a comment |
Do you have an example where FOUC is happening and you don't expect it to?
– Juan Mendes
Nov 9 at 13:10
Often the problem is CSS in the HTML body. If the HTML is rendered before the CSS is encountered (because the parsing has stalled), a FOUC will be the result.
– Alohci
Nov 9 at 17:30
@JuanMendes I totally expect FOUC to happen, because my CSS is not downloaded and the render-tree is not created, and the style rendering is stalled. But, as you commented in the answer, my question was why is CSS called to be render blocking?
– Vishnu Sankaran
Nov 12 at 5:11
@Alohci Inline CSS would be parser-blocking, if I am right and would not show full content. And I don't think, delay in parsing causes fouc. Delay in parsing should show a blank page. No?
– Vishnu Sankaran
Nov 12 at 5:15
@VishnuSankaran. No. If there's no CSS in the process of being fetched - i.e. the page is not render blocked - the browser will render whatever DOM it has constructed at the point where the parsing stalls.
– Alohci
Nov 12 at 7:10
Do you have an example where FOUC is happening and you don't expect it to?
– Juan Mendes
Nov 9 at 13:10
Do you have an example where FOUC is happening and you don't expect it to?
– Juan Mendes
Nov 9 at 13:10
Often the problem is CSS in the HTML body. If the HTML is rendered before the CSS is encountered (because the parsing has stalled), a FOUC will be the result.
– Alohci
Nov 9 at 17:30
Often the problem is CSS in the HTML body. If the HTML is rendered before the CSS is encountered (because the parsing has stalled), a FOUC will be the result.
– Alohci
Nov 9 at 17:30
@JuanMendes I totally expect FOUC to happen, because my CSS is not downloaded and the render-tree is not created, and the style rendering is stalled. But, as you commented in the answer, my question was why is CSS called to be render blocking?
– Vishnu Sankaran
Nov 12 at 5:11
@JuanMendes I totally expect FOUC to happen, because my CSS is not downloaded and the render-tree is not created, and the style rendering is stalled. But, as you commented in the answer, my question was why is CSS called to be render blocking?
– Vishnu Sankaran
Nov 12 at 5:11
@Alohci Inline CSS would be parser-blocking, if I am right and would not show full content. And I don't think, delay in parsing causes fouc. Delay in parsing should show a blank page. No?
– Vishnu Sankaran
Nov 12 at 5:15
@Alohci Inline CSS would be parser-blocking, if I am right and would not show full content. And I don't think, delay in parsing causes fouc. Delay in parsing should show a blank page. No?
– Vishnu Sankaran
Nov 12 at 5:15
@VishnuSankaran. No. If there's no CSS in the process of being fetched - i.e. the page is not render blocked - the browser will render whatever DOM it has constructed at the point where the parsing stalls.
– Alohci
Nov 12 at 7:10
@VishnuSankaran. No. If there's no CSS in the process of being fetched - i.e. the page is not render blocked - the browser will render whatever DOM it has constructed at the point where the parsing stalls.
– Alohci
Nov 12 at 7:10
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
This should help.
- DOM is constructed
- If we are still waiting for the CSSOM to be constructed, then we see FOUC
- CSSOM is constructed
- DOM and CSSOM are coalesced into the Render Tree which renders the DOM with CSS (styled content)
So the browser shows FOUC when waiting for CSS. Once the CSS is loaded, the DOM and CSSOM are merged into one tree, called the Render Tree and this is styled content.
According to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows
In my opinion, this is the most comprehensive talk about this subject out there, from David Baron, Chief Engineer at Mozilla: https://vimeo.com/103108124
answered Nov 9 at 13:03
jburtondev
42928
1
This doesn't explain how the HTML would render before the render blocking CSS is parsed. It seems to misunderstand what render-blocking-css is. The point is that it should not allow FOUC
– Juan Mendes
Nov 9 at 13:06
Sure, in what way does it misunderstand? The DOM can render without the CSSOM. But the Render Tree cannot render until both are constructed.
– jburtondev
Nov 9 at 13:43
But the article you talked about mentions that it blocks without showing it until it builds the CSSOM.CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.The OP is asking if that's true, why does my CSS not block the render?
– Juan Mendes
Nov 9 at 18:46
@jburtondev Thank you. I get this flow. But according to this, CSS is not render-blocking. (yet to go through the video)
– Vishnu Sankaran
Nov 12 at 5:23
1
Thanks for your comments guys. I would like to explain that according to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows :)
– jburtondev
Nov 12 at 22:04
|
show 2 more comments
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
This should help.
- DOM is constructed
- If we are still waiting for the CSSOM to be constructed, then we see FOUC
- CSSOM is constructed
- DOM and CSSOM are coalesced into the Render Tree which renders the DOM with CSS (styled content)
So the browser shows FOUC when waiting for CSS. Once the CSS is loaded, the DOM and CSSOM are merged into one tree, called the Render Tree and this is styled content.
According to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows
In my opinion, this is the most comprehensive talk about this subject out there, from David Baron, Chief Engineer at Mozilla: https://vimeo.com/103108124
answered Nov 9 at 13:03
jburtondev
42928
1
This doesn't explain how the HTML would render before the render blocking CSS is parsed. It seems to misunderstand what render-blocking-css is. The point is that it should not allow FOUC
– Juan Mendes
Nov 9 at 13:06
Sure, in what way does it misunderstand? The DOM can render without the CSSOM. But the Render Tree cannot render until both are constructed.
– jburtondev
Nov 9 at 13:43
But the article you talked about mentions that it blocks without showing it until it builds the CSSOM.CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.The OP is asking if that's true, why does my CSS not block the render?
– Juan Mendes
Nov 9 at 18:46
@jburtondev Thank you. I get this flow. But according to this, CSS is not render-blocking. (yet to go through the video)
– Vishnu Sankaran
Nov 12 at 5:23
1
Thanks for your comments guys. I would like to explain that according to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows :)
– jburtondev
Nov 12 at 22:04
|
show 2 more comments
up vote
1
down vote
accepted
This should help.
- DOM is constructed
- If we are still waiting for the CSSOM to be constructed, then we see FOUC
- CSSOM is constructed
- DOM and CSSOM are coalesced into the Render Tree which renders the DOM with CSS (styled content)
So the browser shows FOUC when waiting for CSS. Once the CSS is loaded, the DOM and CSSOM are merged into one tree, called the Render Tree and this is styled content.
According to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows
In my opinion, this is the most comprehensive talk about this subject out there, from David Baron, Chief Engineer at Mozilla: https://vimeo.com/103108124
answered Nov 9 at 13:03
jburtondev
42928
1
This doesn't explain how the HTML would render before the render blocking CSS is parsed. It seems to misunderstand what render-blocking-css is. The point is that it should not allow FOUC
– Juan Mendes
Nov 9 at 13:06
Sure, in what way does it misunderstand? The DOM can render without the CSSOM. But the Render Tree cannot render until both are constructed.
– jburtondev
Nov 9 at 13:43
But the article you talked about mentions that it blocks without showing it until it builds the CSSOM.CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.The OP is asking if that's true, why does my CSS not block the render?
– Juan Mendes
Nov 9 at 18:46
@jburtondev Thank you. I get this flow. But according to this, CSS is not render-blocking. (yet to go through the video)
– Vishnu Sankaran
Nov 12 at 5:23
1
Thanks for your comments guys. I would like to explain that according to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows :)
– jburtondev
Nov 12 at 22:04
|
show 2 more comments
up vote
1
down vote
accepted
up vote
1
down vote
accepted
This should help.
- DOM is constructed
- If we are still waiting for the CSSOM to be constructed, then we see FOUC
- CSSOM is constructed
- DOM and CSSOM are coalesced into the Render Tree which renders the DOM with CSS (styled content)
So the browser shows FOUC when waiting for CSS. Once the CSS is loaded, the DOM and CSSOM are merged into one tree, called the Render Tree and this is styled content.
According to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows
In my opinion, this is the most comprehensive talk about this subject out there, from David Baron, Chief Engineer at Mozilla: https://vimeo.com/103108124
answered Nov 9 at 13:03
jburtondev
42928
This should help.
- DOM is constructed
- If we are still waiting for the CSSOM to be constructed, then we see FOUC
- CSSOM is constructed
- DOM and CSSOM are coalesced into the Render Tree which renders the DOM with CSS (styled content)
So the browser shows FOUC when waiting for CSS. Once the CSS is loaded, the DOM and CSSOM are merged into one tree, called the Render Tree and this is styled content.
According to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows
In my opinion, this is the most comprehensive talk about this subject out there, from David Baron, Chief Engineer at Mozilla: https://vimeo.com/103108124
answered Nov 9 at 13:03
jburtondev
42928
edited Nov 13 at 13:04
answered Nov 9 at 13:03
jburtondev
42928
answered Nov 9 at 13:03
jburtondev
42928
answered Nov 9 at 13:03
jburtondev
42928
42928
1
This doesn't explain how the HTML would render before the render blocking CSS is parsed. It seems to misunderstand what render-blocking-css is. The point is that it should not allow FOUC
– Juan Mendes
Nov 9 at 13:06
Sure, in what way does it misunderstand? The DOM can render without the CSSOM. But the Render Tree cannot render until both are constructed.
– jburtondev
Nov 9 at 13:43
But the article you talked about mentions that it blocks without showing it until it builds the CSSOM.CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.The OP is asking if that's true, why does my CSS not block the render?
– Juan Mendes
Nov 9 at 18:46
@jburtondev Thank you. I get this flow. But according to this, CSS is not render-blocking. (yet to go through the video)
– Vishnu Sankaran
Nov 12 at 5:23
1
Thanks for your comments guys. I would like to explain that according to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows :)
– jburtondev
Nov 12 at 22:04
|
show 2 more comments
1
This doesn't explain how the HTML would render before the render blocking CSS is parsed. It seems to misunderstand what render-blocking-css is. The point is that it should not allow FOUC
– Juan Mendes
Nov 9 at 13:06
Sure, in what way does it misunderstand? The DOM can render without the CSSOM. But the Render Tree cannot render until both are constructed.
– jburtondev
Nov 9 at 13:43
But the article you talked about mentions that it blocks without showing it until it builds the CSSOM.CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render.The OP is asking if that's true, why does my CSS not block the render?
– Juan Mendes
Nov 9 at 18:46
@jburtondev Thank you. I get this flow. But according to this, CSS is not render-blocking. (yet to go through the video)
– Vishnu Sankaran
Nov 12 at 5:23
1
Thanks for your comments guys. I would like to explain that according to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows :)
– jburtondev
Nov 12 at 22:04
1
1
This doesn't explain how the HTML would render before the render blocking CSS is parsed. It seems to misunderstand what render-blocking-css is. The point is that it should not allow FOUC
– Juan Mendes
Nov 9 at 13:06
This doesn't explain how the HTML would render before the render blocking CSS is parsed. It seems to misunderstand what render-blocking-css is. The point is that it should not allow FOUC
– Juan Mendes
Nov 9 at 13:06
Sure, in what way does it misunderstand? The DOM can render without the CSSOM. But the Render Tree cannot render until both are constructed.
– jburtondev
Nov 9 at 13:43
Sure, in what way does it misunderstand? The DOM can render without the CSSOM. But the Render Tree cannot render until both are constructed.
– jburtondev
Nov 9 at 13:43
But the article you talked about mentions that it blocks without showing it until it builds the CSSOM.
CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render. The OP is asking if that's true, why does my CSS not block the render?– Juan Mendes
Nov 9 at 18:46
But the article you talked about mentions that it blocks without showing it until it builds the CSSOM.
CSS is a render blocking resource. Get it to the client as soon and as quickly as possible to optimize the time to first render. The OP is asking if that's true, why does my CSS not block the render?– Juan Mendes
Nov 9 at 18:46
@jburtondev Thank you. I get this flow. But according to this, CSS is not render-blocking. (yet to go through the video)
– Vishnu Sankaran
Nov 12 at 5:23
@jburtondev Thank you. I get this flow. But according to this, CSS is not render-blocking. (yet to go through the video)
– Vishnu Sankaran
Nov 12 at 5:23
1
1
Thanks for your comments guys. I would like to explain that according to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows :)
– jburtondev
Nov 12 at 22:04
Thanks for your comments guys. I would like to explain that according to the Google article, the NY times site shows FOUC until the CSSOM is constructed and then the render tree is rendered. This demonstrates that rendering the render tree is different from rendering the DOM tree. The DOM tree is rendered, but unloaded CSS blocks the render tree from being rendered (note the difference). This is why the FOUC shows before the CSS is unblocked and the render tree shows :)
– jburtondev
Nov 12 at 22:04
|
show 2 more comments
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53220261%2fif-css-is-render-blocking-why-do-we-see-fouc%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Do you have an example where FOUC is happening and you don't expect it to?
– Juan Mendes
Nov 9 at 13:10
Often the problem is CSS in the HTML body. If the HTML is rendered before the CSS is encountered (because the parsing has stalled), a FOUC will be the result.
– Alohci
Nov 9 at 17:30
@JuanMendes I totally expect FOUC to happen, because my CSS is not downloaded and the render-tree is not created, and the style rendering is stalled. But, as you commented in the answer, my question was why is CSS called to be render blocking?
– Vishnu Sankaran
Nov 12 at 5:11
@Alohci Inline CSS would be parser-blocking, if I am right and would not show full content. And I don't think, delay in parsing causes fouc. Delay in parsing should show a blank page. No?
– Vishnu Sankaran
Nov 12 at 5:15
@VishnuSankaran. No. If there's no CSS in the process of being fetched - i.e. the page is not render blocked - the browser will render whatever DOM it has constructed at the point where the parsing stalls.
– Alohci
Nov 12 at 7:10