如何在页面加载前消除毫秒的空白页答案

【问题标题】：How to eliminate millisecond of blank page before page loads如何在页面加载前消除毫秒的空白页
【发布时间】：2012-02-14 17:09:35
【问题描述】：

在我创建的某些网站上，当从一个页面导航到另一个页面时，在正常页面加载之前有一毫秒的全白空白页面。我曾经认为这与缓存问题有关。最近我编写了a site（仍在测试中），它几乎没有 php、javascript 或任何花哨的东西。它本质上只是直接的 html 和 css，而且写得很稀疏。还有一个.htaccess需要缓存所有的js、css、img等。页面本身加载速度非常快。

某些网站似乎在页面之间出现这种白色闪烁或无内容闪烁。其他网站没有。我一直无法弄清楚它是什么。 Chrome 和 Firefox 都表现出这种行为。

【问题讨论】：

标签： html css flicker

【解决方案1】：

正如我所见，“jquery-ui-min.js”是一个相当大（约 242 kbyte 缩小）的脚本文件，所以我将它移到了加载程序脚本中。如果您有其他“大”脚本，您也必须稍后加载它们。但是不要忘记移动那些调用这些脚本的初始化脚本，以避免调用“不存在”的函数！当然，第一个脚本是最新的jquery.js。

function load_scripts(){
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "scripts/jquery-ui-1.9.2.custom.min.js";
    $("head").append(s);
}

【讨论】：

【解决方案2】：

我不小心在头部调用了一个不存在的 js 文件（模板的剩余部分）。白色空白的毫秒是服务器试图获取文件，寻找它，但没有找到它。 :(

【讨论】：

【解决方案3】：

如果浏览器在开始渲染之前需要下载大量数据（例如 Javascript），就会发生这种情况。

将所有脚本移动到正文的末尾，以便浏览器在呈现您的内容之前无需等待它们下载和执行。

缩小所有 CSS 以减少下载时间。

【讨论】：

是的，我会将 javascript 移到底部。
我同意这是个好主意。但在这种情况下，我的 css 是 5k。我严重怀疑这会有什么不同。