Question

我知道这个主题很多次被开发人员问过，并且多次回答关于如何优化页面，优化脚本运行等和/或建议选择不那么华丽的背景的高质量答案。不过，我认为这是一个新方面。

当然我的网页并没有完美优化，但事实仍然是这样：在测试我的网页时，这个用户不友好的空白页面闪烁（无论颜色是什么）只在Chrome中体验过。在FF和IE中进行测试时，无法在页面渲染之间看到任何空白页面。

有人可能会想：有一些条件逻辑，在我的代码/ css中检测Chrome。好吧没有。
此外，这些网页实际上在Chrome中加载速度相同或更快......
请注意：Chrome的渲染差异行为可以在许多外部世界网站上轻松体验，而不仅仅是在我的网站上。

我希望必须有一种方法可以强制Chrome像其他浏览器一样使用大多数用户友好模式。有什么想法或经验可以分享吗？

演示：

转到google，使用Chrome
键入以搜索＆＃39; qwe＆＃39;
在页面渲染后按Ctrl + F5。你应该看到一个恼人的白色闪光
转到google，使用FF
键入以搜索＆＃39; qwe＆＃39;
在页面渲染后按Ctrl + F5。没有办法看到任何闪光灯。页面仍在重新加载，完全看到状态栏，或使用像Fiddler这样的http调试器进行校对。

如果有人想要这个视频，请发表评论。

Answer 1

Chromes load-parse-render-etc过程的工作原理。即使实际上没有内容可供显示，它也会尽快开始渲染。所以你看到了白色的屏幕。

经过两个例子后会很清楚。

1

html

<!DOCTYPE html>
<html>
<body>
    <script src='https://code.jquery.com/jquery-2.1.4.js'></script>
    <h4>Header</h4>
</body>
</html>

当解析器遇到远程script时，它会停止HTML解析，直到加载和评估脚本为止。但同时引擎试图渲染已有的东西。它什么都没有，所以你看到一个白页，过了一段时间，当一个脚本准备就绪时，它继续进行HTML解析和渲染，所以你看到了文本。考虑这个加载时间线并注意2 Paint事件：

2

html

<!DOCTYPE html>
<html>
<body>
    <script>
        function showTimespan() {
            var h4 = document.createElement('h4');
            h4.textContent = Date.now();
            document.body.appendChild(h4);
        }
        showTimespan();
    </script>
    <script src='https://code.jquery.com/jquery-2.1.4.js'></script>
    <script>
        showTimespan();
    </script>
</body>
</html>

现在，当解析器在加载远程脚本时停止时，它已经显示了内容，这是在之前的script标记中生成的。 而不是script，可能有任何其他html内容再次，当加载和评估远程脚本时，引擎继续使用其余内容，并呈现它。这里的时间表是一样的。

现在，如果您在Firefox中打开示例，您会看到同时呈现的两个<h4>。 Firefox只是延迟第一次渲染而不清除页面。在时间轴中，您只会看到一个Paint事件。

我在jQuery仅用于网络加载目的，因为我需要一些不小的远程库，所以你希望用肉眼注意渲染。 < / p>

我在第二个示例中使用了脚本生成的内容，因此您会注意到Firefox实际呈现的时间。

但是更好的方法是什么，很难说。我个人喜欢，当它实际显示它有什么，当我看到真正的进展。

为什么只有Chrome在页面之间闪烁白色？

1 个答案:

1

2