页面在Chrome和Mozilla中加载后闪烁，但不在Opera和Edge中闪烁

Question

我在网站https://www.designersheds.com.au上工作，加载页面后出现奇怪的闪烁现象。它正确显示然后闪烁。在Chrome和Firefox中会出现此问题，但在Opera和Edge中则不会出现此问题（尽管在Edge中某些样式似乎不正确）。所有脚本都在页脚中。并且所有样式都在头部（我使用WordPress的Autoptimize插件）。

在进行任何优化之前，暂存网站上会发生此闪烁。

该网站使用Genesis Child主题的WordPress。

Answer 1

这种行为是将所有样式和字体移动到页脚的结果。我假设您尝试遵循PageSpeed建议:)。并非所有网站都可以接受它们。

浏览器在开始创建DOM时，并不了解您的样式。它生成并输出整个页面，然后在页脚中遇到一些样式。应用您的样式会导致重建整个DOM，导致页面闪烁。

怎么办？

第一种方法。仅实施PageSpeed的那些建议，这些建议不会破坏您的网站。总而言之 - 你的目标是什么？制作一个尽可能快的工作网站。将关键样式移动到标题中不会使您的网站过于缓慢。

第二种方法。将标题中的关键样式作为内联代码放置。在这种情况下，PageSpeed不会降低分数。但是这种方法需要一种手动工作，而不能用Autoptimize来完成。