多个样式表减慢到网站的速度?

时间:2010-05-01 01:07:18

标签: css performance xhtml

这是3个css文件(一个仅用于IE)

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

如果我在我的网站上将scree.css分成这些css

现在它将是6 css(一个仅适用于IE)

<link rel="stylesheet" href="css/blueprint/reset.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/grid.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/typography.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/forms.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

如果我在制作后为网站选择方法二。它真的会减慢网站页面的加载速度吗?如果是,那么多少钱?这3个额外样式表会对网站性能产生多大影响?

1 个答案:

答案 0 :(得分:6)

将它们组合到一个样式表中可以减少浏览器加载页面所需的HTTP请求数。但是,在第一次请求样式表之后,假设您已正确配置了缓存指令,浏览器应该将其缓存,因此后续页面加载不会有太大差异。

使用Google的PageSpeed插件或Yahoo YSlow之类的工具,一旦您拥有大部分网站,就可以找出导致性能问题的实际的内容,并优化内容那件事。在此之前不要担心。