HTML文件末尾的CSS

Question

I would like to know how the browser handles CSS rules that come after most (if not all) of the HTML. Will it have to reparse the whole page due to the new rules or does it use some other kind of technique to handle this type of situation? Thanks.

Answer 1

There are many cases when a repaint must occur, and in many occurences in a page lifetime the DOM is changed.

But once the page is parsed, there is no reason to parse it again, all changes are made on the in memory DOM.

This being said, you should put the CSS links in the HEAD because

• it lets the browser start their download faster
• it complies with HTML4 norm ( "it may only appear in the HEAD section of a document" )
• it lets the browser start the rendering sooner
• it lets your colleagues and your future yourself not be surprised when maintaining the code

Answer 2

Relayout and repaint, perhaps. (That is, if it has already started rendering it and the styles loaded require different display.)

Reparse, no. Style sheets are purely presentational; they do not affect the parsing.

Answer 3

Assuming that the browser has already started rendering the page when it sees the additional CSS (there are quite a few browser-specific triggers for this behavior) and assuming that the new rules result in CSS property changes for at least one element, the browser will simply mark that element as one that needs redrawing.

This will result in any visible changes to the page being shown the next time the browser repaints part of its window.

It's important to keep in mind that modern browsers do all of this asynchronously and schedule events like applying new CSS, recalculating layout and painting to the screen mostly (but not totally) independently of each other.