防止浏览器在加载文档时部分呈现页面
Firefox和Chrome都过早地渲染了我的页面，这导致了我的几个帧，你首先看到的是页眉，然后是内容，然后是页脚。这是一种非常非常不愉快的页面加载体验。
我现在解决这个问题的方法是这样的，这是我想要避免的愚蠢的变通方法。它还会导致页面在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>问题基本上是这样的：
<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.
--->在单独的测试中，上面的代码看起来像预期的那样工作--这两行代码将在3秒后同时呈现。但是当我开始向页面添加几个随机的样式表时，问题就开始出现了。
我似乎不能把它缩小到任何特定的样式表或样式。我不知道是什么引起的。我都试过从加载所有的样式表，或者只是将它们都内联到一个style元素中。这没有任何区别。我正在使用Chrome测试它，因为它似乎在那里发生得更频繁。
有没有人对这类问题有任何经验，或者知道是什么导致了它，并知道有什么方法可以防止它？
回答 2
Stack Overflow用户
发布于 2019-02-19 03:47:08
我喜欢做的是将我的内容包装在一个div中，并将其设置为display:none。
然后，我推迟了CSS加载，并在CSS文件中，将这个包装div设置为display:block。
我还将所有的CSS文件压缩成一个单独的文件(为了更好地加载)。
<!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>Stack Overflow用户
发布于 2019-02-19 03:59:27
使用开发人员工具中的网络选项卡来查看每个请求的过程和响应。首先，浏览器完全接收并解析HTML，然后查找远程对象以自上而下地加载:样式表、图像、javascript等。
因此，为了完全控制内容的显示方式，发送一个看起来与初始视图完全一样的超文本标记语言文档(例如:一个空白的白色文档，使用内联CSS或针对<body>的<style>标记实现)。然后使用一行Javascript侦听load事件并更新显示，例如：
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css">
<body style="display: none;">
<h1>Headline</h1>
</body>
<script>
window.addEventListener("load", function(event) {
document.querySelector("body").style.display = "block";
});
</script>
</html>https://stackoverflow.com/questions/54754262
复制相似问题