告诉你为什么要合并样式文件的另一个原因


发布者 shaozilee  发布时间 1398056892258
关键字 心得体会  分享 
前端大神们对于前端的优化已经做的令人发指了,减少请求是最普通的优化,我今天也是来说关于减少文件请求的。我不是来说关于优化的,而是关于一个IE的限制的,跟大神们常说的合并文件、减少请求数量的手段具有惊人的神似。

可能有些人已经遇到过这个问题了,有些人还不知道这个陷阱。先说结论:单个页面文档中所有样式标记(link和style)前31个关联的CSS能够有效。 从第32个开始,其标记关联的CSS都将无效。不信你可以试一试。测试环境真实IE6-8(非模拟浏览器版本,如IE11模拟的IE7、8等)
index.html:
<html>
<head>
<link href="1.css" rel="stylesheet" type="text/css"/>
<link href="2.css" rel="stylesheet" type="text/css"/>
<link href="3.css" rel="stylesheet" type="text/css"/>
<link href="4.css" rel="stylesheet" type="text/css"/>
<link href="5.css" rel="stylesheet" type="text/css"/>
<link href="6.css" rel="stylesheet" type="text/css"/>
<link href="7.css" rel="stylesheet" type="text/css"/>
<link href="8.css" rel="stylesheet" type="text/css"/>
<link href="9.css" rel="stylesheet" type="text/css"/>
<link href="10.css" rel="stylesheet" type="text/css"/>
<link href="11.css" rel="stylesheet" type="text/css"/>
<link href="12.css" rel="stylesheet" type="text/css"/>
<link href="13.css" rel="stylesheet" type="text/css"/>
<link href="14.css" rel="stylesheet" type="text/css"/>
<link href="15.css" rel="stylesheet" type="text/css"/>
<link href="16.css" rel="stylesheet" type="text/css"/>
<link href="17.css" rel="stylesheet" type="text/css"/>
<link href="18.css" rel="stylesheet" type="text/css"/>
<link href="19.css" rel="stylesheet" type="text/css"/>
<link href="20.css" rel="stylesheet" type="text/css"/>
<link href="21.css" rel="stylesheet" type="text/css"/>
<link href="22.css" rel="stylesheet" type="text/css"/>
<link href="23.css" rel="stylesheet" type="text/css"/>
<link href="24.css" rel="stylesheet" type="text/css"/>
<link href="25.css" rel="stylesheet" type="text/css"/>
<link href="26.css" rel="stylesheet" type="text/css"/>
<link href="27.css" rel="stylesheet" type="text/css"/>
<link href="28.css" rel="stylesheet" type="text/css"/>
<link href="29.css" rel="stylesheet" type="text/css"/>
<link href="30.css" rel="stylesheet" type="text/css"/>
<link href="31.css" rel="stylesheet" type="text/css"/> <link href="32.css" rel="stylesheet" type="text/css"/> <style> span{ color:#00F; } </style>
</head>
<body>
<span>32</span>
</body>
</html>
1-30css文件都是空文件

31.css:

span{
color:#F00;
}
32.css:

span{
color:#0F0;
}

================================================================================

上面的页面显示文字32是红色的,因为32.css和style标记没有起作用。如此看来,link标记和style标记的总和不应该大于31。
所以我们在开发前端页面的时候就应该尽量合并css文件或者style标签,尽量控制css文件的个数,这样也正顺应了前端优化原则。
这是个比较难发现的问题,如果你没有听过这个潜规则,特此发给大家,同勉。

IE潜规则:
This problem occurs because the following conditions are true in Internet Explorer:
  • All style tags after the first 31 style tags are not applied.
  • All style rules after the first 4,095 rules are not applied.
  • On pages that uses the @import rule to continously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.
http://support.microsoft.com/kb/262161/en-us







回复 (9)
  • #
  • #1 haojun 1398085415690

    不错

  • #2 haojun 1398088827974

    如果真是这样,我们公司的框架烂成渣了,CSS必需按需加载

  • #3 superwoods 1399610658025

    的确应当合并优化css的加载,但如果你是运行了一段时间的站,你会发现这种工作超难完成,我现在就是头大如斗。。。。

  • #4 undefined 1398091907000
    实测ie9没问题
  • #5 hzhlqp 1398126513000
    ie7,ie8没问题
  • #6 流连在华美天际 1398822457000
    IE好像单个样式文件选择器个数也有限制。IE9中单个CSS文件只能有4095个选择器,超过了就识别不出
  • #7 流连在华美天际 1398823170000
    @流连在华美天际

    ie7/8也一样, 这样在合并样式文件的时候也要小心了,不能太大了
  • #8 灯盏细辛 1399164158000
    我靠,这里是理由??
  • #9 隔心岛 1399167700000
    @灯盏细辛

    已经很充分了, 还有其他N多……
微信扫码 立即评论