块注释与文档注释_条件注释块下载

最新推荐文章于 2021-11-26 14:41:55 发布

cunbei2644

最新推荐文章于 2021-11-26 14:41:55 发布

阅读量172

点赞数

文章标签： java linux python css html

原文链接：https://www.phpied.com/conditional-comments-block-downloads/

版权

块注释与文档注释

I came across this blog post (via @pornelski and @souders) where Markus has stumbled upon a case where an IE6-only stylesheet included with a conditional comment blocks the downloads in IE8. Whaaat?

我遇到了这个博客(通过@pornelski和@souders)，在其中Markus偶然发现了一个附带条件注释的仅IE6样式表阻止IE8下载的情况。哇

I had to dig in. To give you a summary: turned out that any conditional comment, not only for an extra CSS, will block further downloads until the main CSS file arrives. Also the solution offered on the blog post (using X-UA-Compatible) seems to be more of an error due to an accidentally left comment.

我必须进行深入研究。给您一个摘要：事实证明，任何条件注释(不仅用于额外CSS)，都会阻止进一步的下载，直到主CSS文件到达为止。另外，由于不经意间留下了评论，博客文章(使用X-UA兼容)上提供的解决方案似乎更多是一个错误。

Check out the tests.

检查测试。

基本页面 (Base page)

The first test is the base page. It follows a pretty common style pattern - CSS at the top, a bunch of images in the middle, JS at the bottom.

第一个测试是基础页。它遵循一种非常常见的样式模式-顶部是CSS，中间是一堆图像，底部是JS。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
    
<html>
<head>
    <title>The base page</title>
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/1.expires.css">
</head>
<body>
<p>
    <img src="http://tools.w3clubs.com/pagr/1.expires.png" alt="1">
    <img src="http://tools.w3clubs.com/pagr/2.expires.png" alt="2">
    <img src="http://tools.w3clubs.com/pagr/3.expires.png" alt="3">
    <img src="http://tools.w3clubs.com/pagr/4.expires.png" alt="4">
</p>
<script type="text/javascript" 
        src="http://tools.w3clubs.com/pagr/1.expires.js"></script>
</body>
</html>

The waterfall produced by WebPageTest looks like so:

WebPageTest产生的瀑布如下所示：

The page is here, the results of the WebPageTest's test are here.

页面在这里，WebPageTest的测试结果在这里。

有条件的IE6样式表 (Conditional IE6 stylesheet)

Adding a second stylsheet to the head like so:

将第二个样式表添加到头部，如下所示：

<head>
  <title>base page</title>
  <link type="text/css" rel="stylesheet" 
        href="http://tools.w3clubs.com/pagr/1.expires.css">
  <!--[if IE 6 ]>    
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/2.expires.css">
  <![endif]-->
</head>

Turns out that this conditional comment blocks further downloads until the main CSS arrives.

事实证明，该条件注释会阻止进一步的下载，直到主CSS到达为止。

Test page, test results, waterfall:

测试页，测试结果，瀑布：

Just like that the total page to onload time went up from 1 second to almost 1.3 seconds. Ouch.

就像总的页面加载时间从1秒增加到将近1.3秒一样。哎哟。

And this is because of an IE6 stylesheet, which IE8 has no use for. My wild guess is that IE needs to parse through those conditional comments and treats them sort of like inline script. And we know that inline scripts following a stylesheet tend to block.

这是因为IE6样式表，而IE8没有用。我的疯狂猜测是IE需要解析这些条件注释，并将其视为内联脚本。而且我们知道，遵循样式表的内联脚本可能会阻塞。

条件标记 (Conditional markup)

What if we don't include IE6 specific stylsheet, but use the conditional comments to write different body tags with different class names, as described by Paul Irish.

如果我们不包括IE6特定的样式表，而是使用条件注释来编写具有不同类名的不同正文标签，该怎么办，如Paul Irish所述。

<!--[if IE 6]> <body class="ie6"> <![endif]--> 
<!--[if !IE]><!--> <body> <!--<![endif]-->

Turns out that these markup conditional comments will also block downloads until the CSS arrives.

事实证明，这些标记条件注释也将阻止下载，直到CSS到达为止。

Test page, test results, waterfall looks as bad (the same blocking).

测试页，测试结果，瀑布看起来很糟(相同的阻塞)。

浏览器嗅探 (Browser-sniffing comments)

I blogged about this a few days ago - using conditional comments to do the browser sniffing and include appropriate CSS - one for normal browsers and a complete alternative for IE6,7.

几天前，我写了一篇关于此的博客-使用条件注释来进行浏览器嗅探并包含适当CSS-一种用于普通浏览器，一种用于IE6,7的完整替代品。

<head>
  <!--[if lte IE 7]>
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/2.expires.css">
  <![endif]-->
  <!--[if gt IE 7]><!-->
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/1.expires.css">
  <!--<![endif]-->
</head>

Turns out this is OK to do. The conditional comments are processed before the download is initiated, so there't nothing to block on after the stylesheet. Yeey!

原来这可以做。在开始下载之前，将处理条件注释，因此样式表之后没有任何可阻止的内容。恩！

Test page, test results, waterfall looks like the first one for the base page.

测试页，测试结果，瀑布看起来像是基础页的第一个。

兼容X-UA的解决方案 (X-UA-Compatible not a solution)

The blog post suggested using the X-UA-Compatible meta tag to say that the UA is the latest IE possible.

该博客文章建议使用X-UA-Compatible元标记来表示UA是可能的最新IE。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

It didn't work for me.

它对我不起作用。

Test page, test results, waterfall like the second (the blocking) one.

测试页，测试结果，瀑布状第二(阻塞)一个。

Looking closely and thanks to the screenshots digging out the original test page I noticed that it contains a dangling comment. Putting that dangling comment in a test page, and the blocking effect was gone. But this is a bug. In fact the comment shows up on the page! My wild guess is that this improper comments invalidates the following one and that's why there's no blocking. I guess that IE6 will not load the stylesheet, but I didn't test.

仔细查看并感谢屏幕截图挖掘出了原始测试页，我注意到其中包含一个悬空的注释。将悬而未决的注释放入测试页中，阻止效果消失了。但这是一个错误。实际上，注释显示在页面上！我的疯狂猜测是，这种不正确的注释使以下注释无效，这就是为什么没有阻塞的原因。我想IE6不会加载样式表，但是我没有测试。

So my tests - with X-UA meta tag (results) and with comment bug (results)

所以我的测试-带X-UA元标记(结果)和带注释错误(结果)

结论，结论 (Conclusions, conclusions)

To summarize, if you worry about performance, don't use conditional comments.

总而言之，如果您担心性能，请不要使用条件注释。

There might be an exception when you put a script in the head after the CSS - then there are two blocking things, so the effect of the conditional comment is not visible. But that's still bad for performance, there's still blocking.

将脚本放在CSS后面的头部时，可能会有例外-然后有两个阻塞的情况，因此条件注释的效果不可见。但这仍然不利于性能，仍然存在障碍。

It's OK to use the browsers-sniffing comments approach, provided of course, that there's no other CSS file before the sniff. If there is one, it will block.

可以使用浏览器嗅探注释方法，当然，前提是在嗅探之前没有其他CSS文件。如果有一个，它将阻塞。

Best - just use _ and * hacks, go with a single CSS and forget sniffing.

最好-只需使用_和*技巧，使用一个CSS即可，而无需进行嗅探。

更新：空条件注释 (Update: empty conditional comment)

Thanks to Markus who kept looking into the extra conditional comment comes a solution: an empty conditional comment early on solves the blocking issue.. By "early on" I mean before the main CSS which caused the blocking.

感谢Markus，他一直在研究额外的条件注释，从而提供了一个解决方案：尽早使用空的条件注释可以解决阻塞问题。 。 “早点”是指引起阻塞的主要CSS之前。

I did two more tests to validate the solution and it absolutely works.

我再进行了两次测试以验证该解决方案，它绝对有效。

One test has empty comment + conditional comment for writing Paul's body tags. The empty comment (aka the solution) is right before the blocking CSS file.

一项测试包含空注释+有条件注释，用于编写Paul的身体标签。空的注释(也称为解决方案)就在阻止CSS文件之前。

<head>
    <title>base page</title>
    <!--[if IE 6]><![endif]-->
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/1.expires.css">
</head>
 
<!--[if IE 6]> <body class="ie6"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->

Test page, webpagetest results. Works as advertised, no more blocking.

测试页面，网页测试结果。如广告中所述工作，不再阻塞。

The second test uses empty comment and conditional stylesheet. In this case I even put the empty comment way at the top. Sort of like declaring upfront - hey this page uses conditional comments and the empty comment is the solution to the blocking effect.

第二个测试使用空注释和条件样式表。在这种情况下，我什至将空注释方式放在顶部。有点像预先声明-嘿，此页面使用条件注释，而空注释则是解决阻塞效果的方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<!--[if IE 6]><![endif]-->
 
<html>
<head>
  <title>base page</title>
  <link type="text/css" rel="stylesheet" 
        href="http://tools.w3clubs.com/pagr/1.expires.css">
  <!--[if IE 6 ]>    
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/2.expires.css">
  <![endif]-->
</head>

Test page, webpagetest results. No more blocking 🙂

测试页面，网页测试结果。不再受阻🙂

Answering Andrea's question - what it if you have several conditionals - for IE6, IE7 and so on, I did one more test with two conditional CSS files. Turns out it's fine, as long as there's one conditional comment before the CSS. I actually updated the comment so it checks for all IE versions.

回答Andrea的问题-如果您有多个条件的话-对于IE6，IE7等，我又对两个条件CSS文件进行了一次测试。事实证明很好，只要在CSS之前有一个条件注释即可。我实际上更新了注释，以便检查所有IE版本。

Test page, results, code:

测试页，结果，代码：

<!--[if IE]><![endif]-->
<html lang="en">
<head>
    <title>base page</title>
    <link type="text/css" rel="stylesheet" 
          href="http://tools.w3clubs.com/pagr/1.expires.css">
    <!--[if IE 6]>    
        <link type="text/css" rel="stylesheet" 
              href="http://tools.w3clubs.com/pagr/2.expires.css">
    <![endif]-->
    <!--[if IE 7]>    
        <link type="text/css" rel="stylesheet" 
              href="http://tools.w3clubs.com/pagr/3.expires.css">
    <![endif]-->
</head>

In conclusion #2... conditional comments cause CSS to block. The workaround it to have an extra empty comment before the blocking CSS, or, to be safe, right after the doctype. Even better - don't use conditional comments at all. Except for browser-sniffing and loading two complete and completely separate CSS files, not just the IE fixes.

结论＃2 ...条件注释导致CSS阻塞。解决方法是在阻塞CSS之前添加一个多余的空白注释，或者为了安全起见，在doctype之后添加注释。甚至更好-根本不要使用条件注释。除了浏览器嗅探和加载两个完全独立CSS文件外，不只是IE修复程序。

Tell your friends about this post on Facebook and Twitter

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