页面加载之间闪烁 [英] Flashing between page loads

问题描述

在网站上，我遇到了页面加载之间发生的白色闪光。它看起来不好，因为我使用的是背景图片，当页面加载时，背景图片在它进入屏幕前闪烁（看一看为你自己）。这个问题发生在chrome和IE中，但不在firefox中。

该网站有一种预加载东西的方法。页面上的每个元素都在一个div封装器 #website 中，它最初位于 display：none ，每张图片都是在div封装器＃网站图片中也是隐藏的。然后该网站（使用jquery插件）检查＃网站图片中的所有图片是否已完成加载，一旦它们被设置为记住该用户已经加载了图像，所以一旦它们进入另一页面或重新加载当前图像，它就不会通过预加载过程，然后调用 $（＃website）。show（） code>显示网页。



那么在页面加载之间可能会导致这种闪烁？这是我的预加载图像的方式吗？我添加了不同的文档类型，并更改了元信息，但没有任何工作。我真的迷失在这里，有没有人有任何想法或见解？解决方案

毫秒之前页面实际呈现。

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

第一步：您的标记

1）
看起来有很多可以优化您的标记。首先，可以优化样式表和JavaScript的顺序。为了确保CSS文件是异步下载的，您必须在外部JavaScript文件之前包含外部CSS。 style.css 是在一些/所有JavaScript调用之后下载的。

在外部CSS文件和其他资源之间的头部有一个脚本块。要允许并行下载，请在外部CSS文件之前或下一个资源之后移动内联脚本。

2）
您的主JavaScript文件内联在您的标记。这不仅阻止了下载页面，直到脚本完成下载，而​​是在您的内容可能导致（或添加）白色闪存之前将其下载。

在头部异步加载脚本是我的首选方法。然后您必须在DOM完成加载时触发您的脚本，或者通过将脚本放在body标签的底部来获得相同的结果。

步骤2：利用浏览器的功能

1）查看http标题，有28个项目作为单独的HTTP调用提供，并未在浏览器中缓存（包括HTML页面，jpg图像，样式表和JavaScript文件）。

这些项目是不可缓存的，这可以通过编辑Web服务器的配置来修复。

2）启用gzip压缩。大多数Web浏览器（是的，甚至IE）都支持gzip解压缩，并且大多数（如果不是全部的话）web服务器都支持使用gzip进行压缩。您甚至可能会过度使用并查看SPDY，这是一种轻量级HTTP协议（Chrome和Firefox支持）。

第三步：内容服务

从您的域名中提供大约30个单独的项目。首先，考虑如何减少这些请求数量。每个页面视图有30个HTTP请求很多。您可以使用以下方法解决此问题：

1）跨多个主机名的并行下载。浏览器目前限制并发连接到单个域的数量。 2）将多个项目合并为一个单独的域名（例如，img.bigtim.ca）可以让它们与其他内容并行投放。

2）一。下载的许多项目都是纯粹的样式内容，例如徽标，菜单元素等。这些内容可以合并为一个图像（仅下载一次），并使用CSS进行分割。这被称为CSS spriting。堆栈溢出这样做：看这里。

$ b $ 3）如果您无法减少需要下载的项目数量，则可以通过提供来自无Cookie域的静态内容来减少服务器（以及客户端浏览器）的负载。 Stack Overflow通过它的所有静态内容来完成它，比如图片，样式表和脚本。

第四步：优化你自己的代码

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

<1>有什么理由选择自己托管jquery吗？ Jquery的下载页面显示了多个CDN，您可以在其中指向快速，缓存的脚本下载。
$ b 2）样式表中目前有超过20条未使用的CSS规则（即36％你的整个CSS文件）。重新考虑真正需要的东西。

3）JavaScript的主要部分（位于身体标记的顶部）似乎是一种尝试加快速度，但可能无助于任何事情。

正在设置一个cookie来指定页面是否已经淡入。您不仅可以使用JavaScript执行可以由CSS执行的转换，还可以使用一半以上的脚本来定义读取和写入cookie的功能。

看到像这样的东西： $（body）。css（background-image，url（'images / background.png'））; 和 $（＃website）。show（）; 通常让我咆哮关注点分离，但现在这个答案足够长，希望你能看到在相同的代码中混合使用样式和功能是不好的做法。

附录：查看代码，不需要jquery所有到
执行你在做什么。但是再次说明，您不需要
来执行您正在做的事情，所以您可能在没有任何
JavaScript的情况下可以做得更好。

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?

解决方案

This is happening because the DOMLoaded event is fired enough milliseconds before the page actually renders.

In a nutshell, this means you have to optimise your website's speed. This doesn't mean to make it download faster, but it means to download in the correct order, in a non-blocking way.

Step one: Your markup

1) It seems there is a lot you can do to optimise your markup. Firstly, the order of stylesheets and JavaScripts can be optimised. To ensure CSS files are downloaded asynchronously, you always have to include external CSS before external JavaScript files. style.css is downloaded after some/all of your JavaScript calls.

There is 1 script block found in the head between an external CSS file and another resource. To allow parallel downloading, move the inline script before the external CSS file, or after the next resource.

2) Your main JavaScript file is inline within your markup. Not only does this block the page download until the script has finished downloading, but having it before your content is probably causing (or adding to) the white flash.

Loading your script asynchronously in the head is my preferred method. You will then have to trigger your script when the DOM has finished loading, or you can achieve the same result by placing the script at the bottom of the body tag.

Step two: Harness the browser's capabilities

1) Looking at the http headers, there are 28 items being served as separate HTTP calls, that are not being cached on the browser (including the html pages, jpg images, stylesheets and JavaScript files).

These items are explicitly non-cacheable, and this can be easily fixed by editing your webserver's configuration.

2) Enable gzip compression. Most web browsers (yes, even IE) supports gzip decompression, and most (if not all) web servers support compressing using gzip. You could even go overkill and look into SPDY, which is an alternative lighter HTTP protocol (supported in Chrome and Firefox).

Step three: Content serving

There are around 30 individual items being served from your domain. Firstly, consider how you could reduce this number of requests. 30 HTTP requests per page view is a lot. You can combat this using the following methods:

1) Paralleled downloads across multiple hostnames. Browsers currently limit the number of concurrent connections to a single domain. Serving your images from a separate domain (for example, img.bigtim.ca) can allow them to be served in parallel to other content.

2) Combine multiple items into one. Many items that are downloaded are purely style content, such as the logo, menu elements, etc. These can be combined into a single image (downloaded only once), and split using CSS. This is called CSS spriting. Stack Overflow does this: look here.

3) If you cannot reduce the amount of items needing downloading, you could reduce the load on your server (and in turn, the client's browser) by serving static content from a cookieless domain. Stack Overflow does this with all their static content such as images, stylesheets and scripts.

Step four: Optimise your own code

There's only so much that HTTP and browser technology can do to help your website's speed. This last step is down to you.

1) Is there any reason you choose to host jquery yourself? Jquery's download page shows multiple CDNs where you can point to for speedy, cached script downloading.

2) There are currently over 20 unused CSS rules within your stylesheets (that's 36% of your entire CSS file). Have a re-think of what is really needed.

3) The main chunk of JavaScript (at the top of your body tag) seems to be a hack to attempt to speed things up, but is probably not helping anything.

A cookie is being set to specify whether or not the page has faded in yet. Not only are you using JavaScript to perform a transition which can happily be performed by CSS, but more than half of the script is used to define the functionality for reading and writing the cookie.

Seeing things like this: $("body").css ("background-image", "url('images/background.png')"); and $("#website").show (); usually gets me ranting about "separation of concerns", but this answer is long enough now so hopefully you can see that it is bad practice to mix style and functionality in the same code.

Addendum: Looking at the code, there is no need for jquery at all to perform what you are doing. But then again, there is no need to perform what you are doing, so you could probably do better without any JavaScript at all.

这篇关于页面加载之间闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！