高性能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)提升页面加载速度。