高性能CSS(一）

避免使用@import

有两种方式加载样式文件，一种是link元素，另外一种是CSS 2.1加入@import。而在外部的CSS文件中使用@import会使得页面在加载时增长额外的延迟。虽然规则容许在样式中调用@import来导入其它的CSS，但浏览器不能并行下载样式，就会致使页面增添了额外的往返耗时。好比，第一个CSS文件first.css包含了如下内容：@import url(“second.css”)。那么浏览器就必须先把first.css下载、解析和执行后，才发现及处理第二个文件second.css。简单的解决方法是使用<link>标记来替代@import ，好比下面的写法就可以并行下载CSS文件，从而加快页面加载速度：

<link rel="stylesheet" href=""first.css"" />
<link rel="stylesheet" href="second.css" />

须要注意的是一个页面中的CSS文件不宜过多，不然应该简化及合并外部的CSS文件以节省往返请求时间(RTT)提高页面加载速度。