Menu
Both Firefox and Chrome is rendering my pages way too early, which results in my a couple of frames where you first see the header, then the content, and then the footer. It's a very very unpleasant page loading experience.
The way I get around this right now is this, which is such a silly workaround I would like to avoid. It also causes the page to flash white in Chrome.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="render-all-at-once" style="opacity:0; min-height:100%;">
content
</div>
<script>
document.getElementById("render-all-at-once").style.opacity = 1;
</script>
</body>
</html>
The problem is basically this:
<script>
function sleep(millis) {
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while (curDate - date < millis);
}
</script>
<div>
This will be rendered in the first frame.
</div>
<script>
sleep(3000);
</script>
<div>
And only after that first frame has been rendered will you see this line. You don't see the first line for 3 seconds as
you might, but you do see it flash, right before both lines are displayed.
</div>
<!---
I would like the browser to not render anything until
the entire entire document has been processed.
--->
In isolated tests, the above code seem to work as expected - both lines will be rendered at the same time after 3 seconds. But as soon I start adding a couple of random style-sheets to the page, the problem starts occurring.
I can't seem to narrow it down to any particular style-sheet or style. I can't figure out what's causing it. I've both tried loading all styles sheets from , or just having all of them inlined in a style element. This doesn't make any difference. I'm testing this using Chrome as it seems to happen more frequently there.
Does anyone have any experience with this sort of problem, or have any ideas what's causing it, and know of any way to prevent it?
795
What I like to do is wrap my content in a div and set it to display:none.
Then, I defer my CSS loading and in my CSS file, and set that wrap div to display:block.
I also compress all my CSS files into one single file (for better loading).
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
display: none;
}
</style>
</head>
<body>
<div class="wrap">
content
</div>
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="compressed.css" />
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement);
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if(raf) {
raf(function() {
window.setTimeout(loadDeferredStyles, 0);
});
} else {
window.addEventListener('load', loadDeferredStyles);
}
</script>
</body>
</html>
answered Oct 20 '25 03:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With