css路径自动加上了路径

Back when I was still actively into speaking at public events (way, way back, something like year and a half ago (which strangely roughly coincides with the time I joined Facebook, hmmm (hmm? (huh? what's with the parentheses? sure all of them are closed at this point?)))) I remember showing this slide:

回到我仍在积极地在公共活动上发言时(回想起来，大概是一年半前的事了(奇怪的是，这与我加入Facebook的时间大致吻合，是hmmm(hmm？(嗯？括号是什么？它们中的一部分在此时已关闭？))))我记得显示此幻灯片：

The reason I'm bringing it up now is this experiment I saw today by Scott Jehl.

我之所以提出这一点，是因为我今天由Scott Jehl看到了这个实验。

`media="nonsense"` (`media="nonsense"`)

Scott added LINK elements with non-applicable media attribs, such as tv, too much min-width and pixel ratio of 6 among others:

Scott在LINK元素中添加了不适用的media属性，例如tv ， min-width和像素比率均超过6，其中包括：

<link href="inc/tv.css" rel="stylesheet" media="tv">
<link href="inc/min-width-4000px.css" rel="stylesheet" media="(min-width: 4000px)">
<link href="inc/min-device-pixel-ratio-6.css" rel="stylesheet"
media="(min-device-pixel-ratio: 6)">

And just for the fun of it, why not a nonsense value:

只是为了好玩，为什么不nonsense ：

<link href="inc/nonsense.css" rel="stylesheet" media="nonsense">

Scott observed that (with one happy Opera nonsense exception) all browsers will load all this junk, all this CSS that they don't need.

Scott观察到(除了一个愉快的Opera废话例外)，所有浏览器都将加载所有这些垃圾，它们不需要的所有CSS。

(BTW, Opera 11.64 loaded nonsense css for me too)

(顺便说一句，Opera 11.64也为我加载了废话CSS)

阻止渲染？ (Blocking rendering?)

Having recently remembered how browsers block rendering because of print stylesheets, I speculated that all the nonsense media will also block rendering. Unfortunately I was right.

最近，我记得浏览器是由于打印样式表而阻止渲染的，所以我推测所有废话媒体也将阻止渲染。不幸的是我是对的。

So not only browsers download useless bytes, but they also block the rendering of the page (or block window.onload, or both) until all the crap is downloaded. And by blocked rendering I mean showing a white page of death. Most browsers wait until all CSS is loaded because they don't like doing extra layouts and painting (except Opera).

因此，不仅浏览器下载了无用的字节，而且它们还阻止了页面的呈现(或阻止window.onload或这两者)，直到下载所有废话为止。通过封闭渲染，我的意思是显示死亡白页。大多数浏览器一直等到所有CSS都加载完毕后，因为它们不喜欢进行额外的布局和绘画(Opera除外)。

Here's a test page for you to try: http://www.phpied.com/files/css-loading/mq.php?mq=all Change all with your media query of choice, hit Enter and weep.

这是一个可供您尝试的测试页：http://www.phpied.com/files/css-loading/mq.php?mq= all用您选择的媒体查询更改all ，按Enter键并哭泣。

E.g. http://www.phpied.com/files/css-loading/mq.php?mq=tv http://www.phpied.com/files/css-loading/mq.php?mq=nonsense

例如http://www.phpied.com/files/css-loading/mq.php?mq=tv http://www.phpied.com/files/css-loading/mq.php?mq=nonsense

This test page loads css with delay: css1 delayed 5 seconds and css2 delayed 10 seconds. The HTML is:

该测试页延迟加载css：css1延迟5秒，css2延迟10秒。 HTML是：

<link rel="stylesheet" href="css1.css.php" type="text/css" media="screen" />
<link rel="stylesheet" href="css2.css.php" type="text/css"
media="<?php echo $YOUR_MEDIA_QUERY; ?>" />

The correct browser behavior should be: 1. load only the CSS you need 2. render 3. fire onload

正确的浏览器行为应为：1.仅加载所需CSS 2.渲染3. fire onload

Maybe even: 0. render if step 1. takes too long

甚至：0。如果步骤1花费的时间太长，则渲染

Instead, randomness ensues: Firefox treats us to a white page for 10 seconds while downloading nonsense. Chrome takes 15 seconds to fire onload. (see the print CSS post for more)

取而代之的是随机性：在下载废话时，Firefox将我们对待白页10秒钟。 Chrome需要15秒才能启动。 (有关更多信息，请参见印刷CSS文章)

So what are we to do? First, understand...

那么我们该怎么办呢？首先，了解...

CSS的弊端 (The evil that CSS do)

Browsers (except Opera) block rendering until all screen CSS arrives. With the worst possible experience: white page.

浏览器(Opera除外)会阻止渲染，直到所有屏幕CSS都到达为止。最糟糕的体验：白页。
Browsers download CSS they don't need, e.g. print, tv, device-ratio... And most browsers (except Opera and Webkit) block rendering because of these too

浏览器下载不需要CSS，例如打印，电视，设备比率...以及大多数浏览器(Opera和Webkit除外)也因为这些原因而阻止渲染
Sometimes CSS blocks the other downloads too (not just block rendering, but block images and scripts that follow):

有时CSS也会阻止其他下载(不仅阻止渲染，而且阻止随后的图像和脚本)：
- when followed by an inline SCRIPT
  
  当后接内联脚本时
- when it's a CSS in conditional comment for IE
  
  当它是IE的条件注释中的CSS时

关键路径(The critical path)

When building high-performance pages we want to stay off the critical path. Critical is the path from the user following a link to the first impression and then the working experience. That's why we load javascript asynchronously and so on.

构建高性能页面时，我们希望远离关键路径。关键是从用户跟随链接到第一印象，再到工作经验的路径。这就是为什么我们异步加载javascript等原因。

But I argue that CSS is not only on the critical path, it is the critical path. And because it's a jungle (network, 3g, edge) out there, anything on the critical path will fail. Guaranteed.

但是我认为CSS不仅在关键路径上，而且是关键路径。 而且由于那里是一个丛林(网络，3g，边缘)，因此关键路径上的任何东西都将失败。保证。

Think about this: you have an HTML page and then you have components. Without the HTML, there is no path really. Game over. Without images? Depends on the page, but you can live without images most of the time. Without JavaScript? Well you should build the pages so the important stuff, links, forms, content works without javascript. Without webfonts? You're kidding me, I don't need no stinkin' fonts when I'm late and running to the airport and checking in for the flight on the damn phone with the spotty mobile network while Wifi wants to connect and I have to say no, because if I say yes I'll wait for another page where I have to say "I accept" and aim at a miniscule checkbox with these sweaty fat fingers or worse I have to enter usernameandpassword, and omg-omg-OMG mobile.southwest.com wants to look like native iPhone and won't let me click until mountains of JS arrive, so no, don't talk to me about no damn fonts!

考虑一下：您有一个HTML页面，然后有一些组件。没有HTML，就没有真正的路径。游戏结束。没有图像？取决于页面，但是大多数时候您可以没有图像。没有JavaScript？好吧，您应该构建页面，以便重要的内容，链接，表单，内容无需使用JavaScript即可工作。没有网络字体？你在跟我开玩笑，我迟到并奔赴机场，用肮脏的移动网络通过该死的手机检查航班，而Wifi想要连接时，我就不需要臭气了，我不得不说否，因为如果我回答“是”，我将等待另一个页面，我必须说“我接受”，并用这些汗湿的胖手指瞄准一个微型复选框，或者更糟糕的是，我必须输入usernameandpassword和omg-omg-OMG mobile。 southwest.com希望看起来像本机iPhone，直到山的JS到来之前，我才能让我点击一下，所以不，不要跟我谈论没有该死的字体！

What's left on the critical path is CSS. Not only the page is ugly without CSS, we can live with that, but there is no page without CSS because the browser waits and waits and takes forever to timeout showing us a blank white page.

关键路径还剩下CSS。没有CSS的页面不仅丑陋，我们可以忍受，没有CSS的页面就没有了，因为浏览器等待着，等待着，直到永远显示我们空白的页面。

避开CSS (Get the CSS out of the way)

So if you worry about performance, you should get the CSS out of the way as soon as possible. Get off the critical path. Make CSS small, minify, compress, load from the same hostname even (no DNS) and inline, if small enough. Yup, inline.

因此，如果您担心性能，则应尽快撤消CSS。走出关键的道路。如果足够小，则使CSS变小，最小化，压缩，从相同的主机名加载(即使没有DNS)和内联。是的，内联。

Take a look at these highly optimized experiences...

看看这些高度优化的体验...

看，没有CSS！ (Look ma, no CSS!)

Yes, these pages make no CSS requests whatsoever.

是的，这些页面没有任何CSS请求。

If your CSS is not puny enough to be all inline (Guy has some observations on what puny means) it should at least be a single file, way at the top of the document, with the first flush. Just get it over with. Your users will love you and praise you and use words like smooth and snappy.

如果您CSS不够精简以至于不能全部内联( Guy对puny的含义有一些观察)，则它应该至少是一个文件，位于文档顶部，并具有第一次flush 。克服它。您的用户将爱您并称赞您，并使用“平滑”和“活泼”这样的词。

Tell your friends about this post on Facebook and Twitter

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

翻译自: https://www.phpied.com/css-and-the-critical-path/

css路径自动加上了路径