18

On a website, I'm experiencing a "flash" of white that occurs between page loads. It looks bad because I'm using a background image and when the page loads, the background images flash before it comes onto the screen (take a look for yourself). This issues occurs in chrome and IE but not in firefox.

The site has a way of preloading stuff. Every element on the page is in a div wrapper #website which is initially at display:none, and every image is in a div wrapper #website-images which is also hidden. Then the site (using a jquery plugin) checks to see if all the images in #website-images are done loading, once they are a cookie is set to remember that this user has loaded the images already so it won't go through the preloading process once they go to another page or reload the current one, then a call to $("#website").show() is made to display the webpage.

So what could be causing this flickering between the page loads? Is it my way of preloading images? I've added different doctypes, and changed meta information but NOTHING has worked. I'm really lost here, does anyone have any ideas or insights?

4

4 回答 4

50

这是因为 DOMLoaded 事件在页面实际呈现之前被触发了足够多的毫秒。

简而言之，这意味着您必须优化网站的速度。这并不意味着让它下载得更快，而是意味着以正确的顺序，以非阻塞的方式下载。

第一步：你的标记

1) 似乎您可以做很多事情来优化您的标记。首先，可以优化样式表和 JavaScript 的顺序。为确保 CSS 文件是异步下载的，您始终必须在外部 JavaScript 文件之前包含外部 CSS。style.css在您的部分/全部 JavaScript 调用后下载。

在外部 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 精灵。Stack Overflow 这样做：看这里。

3) 如果您不能减少需要下载的项目的数量，您可以通过提供来自无 cookie 域的静态内容来减少服务器（以及客户端浏览器）的负载。Stack Overflow 使用其所有静态内容（例如图像、样式表和脚本）来执行此操作。

第四步：优化自己的代码

HTTP 和浏览器技术只能帮助您提高网站速度。最后一步取决于您。

1）您有什么理由选择自己托管 jquery 吗？Jquery 的下载页面显示了多个 CDN，您可以在其中指向快速缓存脚本下载。

2) 您的样式表中目前有超过 20 条未使用的 CSS 规则（占整个 CSS 文件的 36%）。重新考虑真正需要什么。

3) JavaScript 的主要部分（在你的 body 标签的顶部）似乎是一个试图加快速度的黑客，但可能没有任何帮助。

正在设置 cookie 以指定页面是否已淡入。您不仅使用 JavaScript 执行 CSS 可以愉快地执行的转换，而且超过一半的脚本用于定义读取和写入 cookie 的功能。

$("body").css ("background-image", "url('images/background.png')");看到这样的事情：$("#website").show ();通常会让我对“关注点分离”大发雷霆，但这个答案现在已经足够长了，所以希望你能看到在同一代码中混合样式和功能是一种不好的做法。

附录：看代码，根本不需要jquery来执行你正在做的事情。但是话又说回来，没有必要执行你正在做的事情，所以你可能完全不用任何 JavaScript 就可以做得更好。

于 2012-09-10T19:45:21.577 回答
6

在关闭正文标记之前将您的 javascript 移动到 html 的末尾。有时它会有所帮助。

于 2012-09-10T19:27:38.453 回答
0

CSS 是渲染阻塞的。将你的 CSS 分成两部分 -

  • 关键 CSS
  • 非关键 CSS

使页面加载关键的 CSS。它应该嵌入到 head 标签中。通过 ajax 使非关键 CSS 延迟加载。

这将导致网页的性能得到严重优化，从而减少白屏时间。

此外，您可以考虑以异步/延迟方式加载 Javascript。

于 2019-09-29T09:07:02.980 回答
0

我知道这是旧线程，但这是我尝试过并且有效的 hack。这个想法是在 CSS 完全加载时不显示任何内容。

在 html 文件中：

<body style="display:none">

在你的 CSS 中，最后一行：

body{display:block !important}
于 2019-09-27T03:10:31.877 回答