css加载延时_延迟加载您的打印CSS

css加载延时

So you have two stylesheets on your page, like this:

因此，页面上有两个样式表，如下所示：

<link type="text/css" rel="stylesheet" href="screen.css" 
      media="screen" />
<link type="text/css" rel="stylesheet" href="print.css" 
      media="print" />

The first one is used to render the page on screen, the other one is used for printing the page and print previewing it. Good.

第一个用于在屏幕上呈现页面，另一个用于打印页面并打印预览。 好。

The thing is, when it comes to performance, the browser won't render any part of the page, until all stylesheets are downloaded (fiddled with here). That includes, unfortunately, stylesheets not designed for the currently rendered media. In other words, the browser won't display your page, until the print stylesheet is also downloaded, although it's not used at all for displaying the page. That sucks and should really be addressed in future browser versions.

问题是，就性能而言，浏览器将不会呈现页面的任何部分，除非下载了所有样式表(此处摆弄)。 不幸的是，其中包括不是为当前渲染的媒体设计的样式表。 换句话说，浏览器将不会显示您的页面，除非还下载了打印样式表，尽管它根本没有用于显示页面。 糟透了，应该在将来的浏览器版本中解决。

测试 (Test)

I did a test page to check this, it's here - print.php. It includes two stylesheets, the first one intentionally sleep()s for 5 seconds, the second one - for 10 seconds.

我做了一个测试页面来检查这一点，它在这里-print.php 。 它包括两个样式表，第一个样式表有意地sleep()持续5秒钟，第二个样式表有意持续10秒钟。

The result is that in both Firefox and IE it takes 15 seconds for this page to be rendered. Here's the Firebug picture:

结果是，在Firefox和IE中，渲染此页面都需要15秒。 这是萤火虫的图片：

In Safari on Windows, it only took 10 seconds the first time around, as both stylesheets were downloaded simultaneously. Good. The bad is that after refresh, the first CSS was not even requested, I tried it a few times, actually sometimes I got the error "The error was: “unknown error” ((null):10053) ", but hey, this is the first release of the browser, it can't be perfect. Actually after I shut down Fiddler, which is what I used to monitor the HTTP traffic, the page was back to normal, so it's not clear who's to blame.

在Windows的Safari中，第一次下载只花了10秒钟，因为两个样式表是同时下载的。 好。 不好的是，刷新后甚至没有请求第一个CSS，我尝试了几次，实际上有时会收到错误“错误是：“未知错误”((null)：10053)”，但是，嘿，这是该浏览器的第一个版本，不能完美。 实际上，在我关闭用来监视HTTP流量的Fiddler之后，页面又恢复了正常，因此尚不清楚应该归咎于谁。

所以？ (So?)

Well, in order to increase rendering performance, all stylesheets not absolutely needed to initially render a page should be loaded after the page load, in the background. Once the user has a fast rendered page to interact with, you can load the additional CSS (and JavaScripts for that matter) in the background, using script and style DOM includes.

好了，为了提高渲染性能，最初在渲染页面时并非绝对需要的所有样式表都应该在页面加载后在后台加载。 一旦用户有了一个快速呈现的页面即可与之交互，则可以使用脚本和DOM includes样式在后台加载其他CSS(以及与此相关JavaScript)。

Update: From my comment bellow - a better option is to include the print css as part of the main css: @media print {…}

更新：从我的评论下面-更好的选择是将打印css包含在主要css中：@media print {…}

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/delay-loading-your-print-css/

css加载延时