If I have external stylesheets being included in the <head></head> section of my HTML page, will they be loaded before the HTML and immediately applied upon rendering? Let me present my specific use case.
External styles.css file:
form label {
display: none;
}
Page containing form:
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<form action="process.php" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</form>
Can I be confident that the labels will be invisible upon page load (no flickering due to CSS downloading)?
Otherwise, I can add the style attribute inline, but that can be a maintenance nightmare.
If you include the CSS in the head section, you can be confident that the label will not show.
The HTML is downloaded first. The browser starts reading the html from the top, and starts fetching all CSS and JavaScript files referenced in the HEAD section. The page will not be painted (shown) until all the CSS and JavaScript files in the HEAD have been downloaded and evaluated.
Style sheets don't prevent the document from being downloaded, but the browser won't render the document until all of the linked stylesheets have been downloaded and loaded into the DOM.
This is so that the browser doesn't need to render the page twice (wasting time in the process), and so that an unstyled page won't flash in front of the user before the stylesheets have been downloaded and parsed.
I believe everything gets loaded in the exact order you place it in the html (or whatever format) document you create.
So in the case of a stylesheet call, it will be called when it is read directly in relation to where you wrote it (typically in the )
a good 'proof of concept' of this would be to create a javascript function that would load a style sheet after a certain amount of time has passed. in this function you could have the stylesheet load with ajax.
I believe the simplest answer to your question is: "Yes...the stylesheets get loaded first." That's why you link to them in the head. As ghostcake suggested above, you can do funky stuff to adjust the order in which the browser responds to and renders any instructions in your html file, but the default function of the browser is to essentially attempt to address each line of markup in the order it is presented. Hence, that's also why it's best to put tracking scripts, etc., at the bottom of the page...below the footer, but above the body tag. (Doing so let's your page render before dealing with functions otherwise not visible to the user.) If you think of the browser like an artist or draftsman you commission to draw something, you must tell the artist how/what to draw before they put pen to paper. Likewise, telling the browser where to fetch your instructions re. styling via a link in the head allows it to "know" what and how to "draw" before it begins to "draw".
来源：https://stackoverflow.com/questions/6500141/do-external-stylesheets-get-loaded-before-the-html