I know from many sources that applying CSS after the page has loaded can cause "flashing" effect - means the page will re-render the CSS.
<link rel="stylesheet"... />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<div id="divid" class="displaynone"></div>
document.getElementById("divid").className += " displayblock";}
window.onload = showit;
If you apply your
<link rel="stylesheet"... /> after your DOM elements in your markup you can end up with "flickering" effects. This is caused because when the browser load the CSS file (a network request is made), the DOM is being already displayed in the ViewPort (which has not yet any style applied).
In the second case where you add
When you change the DOM with a property which is related to the its visual representation the browser execute a "paint" this means that an area of the ViewPort is partially or fully re-rendered.