Question

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浏览器进行测试，因为它似乎在当地更常见。

是否有人对这种问题有任何经验，或者对导致该问题的原因有任何想法，并且知道有什么方法可以预防该问题？

Answer 1

我想做的是将内容包装在div中并将其设置为display：none，然后推迟CSS加载，然后在我的CSS文件中将包装div设置为display：block。我还将所有CSS文件压缩到一个文件中。

EmployeeId

Answer 2

使用开发人员工具中的网络标签查看每个请求的过程和响应。首先，HTML被浏览器完全接收并解析，然后查找要自上而下加载的远程对象：样式表，图像，javascript等。

因此，要完全控制事物的外观，请发送一个看起来与您希望的初始视图完全一样的HTML文档（例如，一个空白的白色文档，可以通过内联CSS或<style>实现）以<body>为目标的代码）。然后使用一行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>

防止在加载文档时浏览器部分渲染页面

2 个答案: