Put the style sheet on the top-rule 5 of high-performance website construction Guide (Reading Notes)

PS: the following content is only for personal reading notes. If you have any mistakes, please feel free to correct them. At the same time, we hope to share your experiences with more front-end fans!

Background

Read the fifth chapter of the high-performance website construction guide. In this article, the author suggests placing the CSS file (style sheet) at the top of the document, that is, between

<style type="text/css">　　color:green;　　font-size:24px;</style>

The above style sheet is not required when it is initially displayed on the page. If you place it between the

 

Practice has proved that this method does help increase the page loading speed, but it may lead to page white screen or fouc (no style content flashing problem ), for more information about white screen and style-free content flashing, see the following glossary. The following is a personal summary, divided into IE and Firefox:

 

I. Firefox

1. The style sheet is on the top.: Page content is gradually displayed
2. The style sheet is at the bottom.:

• 　It is irrelevant to the page content.: Page content step by step
• 　Rendering is related to page rendering content.: No style content flashes

Ii. ie

1. The style sheet is on the top.: Load gradually
2. The style sheet is at the bottom.:

• White screen: When you reload the page, set the page as the default homepage and open it, and open the page in a new window
• Fouc appears: When you click a link, type a URL, or use a bookmarks to open the page

Partial Glossary:

White screen (blank white screen ):When the browser and the user wait for the style sheet at the bottom, the browser will delay displaying any visualization component, that is, the so-called white screen phenomenon.

No style content flashing (fouc ):Before the style sheet is downloaded and parsed, the components are loaded gradually. After the style sheet is parsed, the displayed components must be drawn with a new style, this causes the unstyled content to flash.

 

Cause:

1. In Firefox, whether you place a style sheet on the top or bottom, components are always loaded in a step-by-step manner ). Therefore, if a style sheet is not required for page rendering at the beginning, the user will not feel any difference (of course, the loading time is different and will be supplemented a little later ); when a style sheet is necessary for a page program, no style content flashes (it is not hard to imagine that process ).
2. In Internet Explorer, it is a little more complicated. Imagine that if the page components have been loaded and displayed, but the CSS style sheet has been loaded and parsed slowly after one second (this extreme situation rarely occurs, but it does help us understand why the white screen appears ), at this time, the user sitting in front of the computer will find that the original display page is displayed in a different way than the original one (maybe the text color is changed from black to red, the underline on the Link disappears ). This kind of user experience is actually very poor. In order to prevent this situation, the IE browser will prevent the page from gradually rendering until the style sheet is loaded and parsed, and then all the content on the page will be on the computer screen at the same time. However, it seems that the user experience of this white screen phenomenon is worse (I don't know why this rendering method is adopted ). However, the white screen will only appear under specific circumstances. The preceding three points have been summarized and will not be described here.

Suggestion:

Place the style sheet between the . (The post-onload download technology will be explained in the following Reading Notes)

 

PS: The above content is only for personal reading notes. If you have any mistakes, please feel free to correct them. At the same time, we hope to share your experiences with more front-end fans!