在网站上，我遇到了在页面加载之间出现白色的“闪光”。它看起来很糟糕，因为我正在使用背景图像，当页面加载时，背景图像在进入屏幕之前闪烁（take a look for yourself）。这个问题出现在chrome和IE中，但不在firefox中。
该网站有一种预加载东西的方法。页面上的每个元素都在div包装器#website中，最初位于display:none，每个图像都位于div包装器#website-images中，它也是隐藏的。然后该站点（使用jquery插件）检查#website-images中的所有图像是否都已完成加载，一旦它们被设置为cookie，就会记住该用户已经加载了图像，因此它不会通过预加载过程一旦转到另一个页面或重新加载当前页面，就会调用$("#website").show()来显示该网页。
那么什么可能导致页面加载之间的这种闪烁？这是我预装图像的方式吗？我添加了不同的doctypes，并更改了元信息，但NOTHING已经有效。我真的迷失在这里，有没有人有任何想法或见解？
答案 0 :(得分：42)
发生这种情况是因为DOMLoaded事件在页面实际呈现之前的毫秒内被触发。
简而言之，这意味着您必须优化网站的速度。这并不意味着让它下载更快，但它意味着以正确的顺序下载，以非阻塞的方式。
1）
看来你可以做很多事情来优化你的标记。首先，可以优化样式表和JavaScripts的顺序。为确保以异步方式下载CSS文件，您必须在外部JavaScript文件之前包含外部CSS。在部分/全部JavaScript调用后下载style.css。
在外部CSS文件和另一个资源之间的头部找到1个脚本块。要允许并行下载，请在外部CSS文件之前或在下一个资源之后移动内联脚本。
2） 您的主JavaScript文件内嵌在您的标记中。这不仅阻止了页面下载，直到脚本完成下载，而且之前你的内容可能会导致（或添加）白色闪存。
首选异步加载脚本是我首选的方法。然后，您必须在DOM加载完成后触发脚本，或者通过将脚本放在body标签的底部来实现相同的结果。
1）查看http标头，有28个项目作为单独的HTTP调用提供，不会在浏览器上缓存（包括html页面，jpg图像，样式表和JavaScript文件）。
这些项目明确是不可缓存的，可以通过编辑网络服务器的配置轻松解决这个问题。
2）启用gzip压缩。大多数Web浏览器（是的，甚至是IE）都支持gzip解压缩，大多数（如果不是全部）Web服务器都支持使用gzip进行压缩。您甚至可能会过度使用SPDY，这是一种替代的轻量级HTTP协议（Chrome和Firefox支持）。
您的域名中有大约30个单独的项目。首先，考虑如何减少这些请求数量。每页30个HTTP请求视图很多。您可以使用以下方法解决此问题：
1）跨多个主机名并行下载。浏览器当前限制到单个域的并发连接数。从单独的域（例如，img.bigtim.ca）提供图像可以允许它们与其他内容并行提供。
2）将多个项目合并为一个。下载的许多项目都是纯粹的样式内容，例如徽标，菜单元素等。这些内容可以合并为单个图像（仅下载一次），并使用CSS进行拆分。这称为CSS spriting。 Stack Overflow执行此操作：look here。
3）如果您无法减少需要下载的项目数量，您可以通过提供来自无Cookie域的静态内容来减轻服务器（以及客户端浏览器）的负载。 Stack Overflow使用所有静态内容（如图像，样式表和脚本）执行此操作。
只有HTTP和浏览器技术才能帮助您提高网站的速度。最后一步归你所有。
1）你有没有理由选择自己主持jquery？ Jquery的下载页面显示了多个CDN，您可以在其中指向快速，缓存的脚本下载。
2）您的样式表中目前有超过20个未使用的CSS规则（占整个CSS文件的36％）。重新考虑真正需要的东西。
3）JavaScript的主要部分（在你身体标签的顶部）似乎是一个试图加快速度的黑客，但可能没有任何帮助。
正在设置Cookie以指定页面是否已淡入。您不仅使用JavaScript执行可以由CSS快乐执行的转换，而且超过一半的脚本用于定义读取和写入cookie的功能。
看到这样的事情：$("body").css ("background-image", "url('images/background.png')");和$("#website").show ();通常让我对“关注点分离”感到咆哮，但现在这个答案已经足够长了所以希望你能看出混合风格是不好的做法和相同代码中的功能。
附录：查看代码，根本不需要jquery 执行你正在做的事情。但话说回来，没有必要 执行你正在做的事情，所以你可以做得更好，没有任何 完全是JavaScript。
答案 1 :(得分：4)
在关闭body标签之前将你的javascript移动到html的末尾。有时它会有所帮助。
答案 2 :(得分：0)
我知道这是旧线程，但这是我尝试并可以使用的hack。 这个想法是在CSS完全加载后不显示任何内容。
在html文件中：
<body style="display:none">
在CSS中，最后一行：
body{display:block !important}
答案 3 :(得分：0)
CSS被渲染阻止。 将CSS分为两部分-
在页面上加载重要的CSS。它应该嵌入在head标签中。 通过ajax使非关键CSS延迟加载。
这将导致您的网页中进行严重的性能优化，从而减少白屏时间。
此外，您可以考虑以异步/延迟方式加载Javascript。