避免使用@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)提升页面加载速度。

高性能CSS(一）的更多相关文章

  1. 高性能CSS（三）

    CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免需要消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配的机制,如例子的子选择器规则: ...

  2. 高性能CSS(二）

    避免CSS表达式 CSS表达式是动态设置CSS属性的强大(但危险)方法.Internet Explorer从第5个版本开始支持CSS表达式.下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景 ...

  3. 高性能CSS

    避免使用@import 有两种方式加载样式文件,一种是link元素,另一种是CSS 2.1加入@import.而在外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟.虽然规则允许在样 ...

  4. 高性能CSS（四）

    移除无匹配的样式 移除无匹配的样式,有两个好处: 第一,删除无用的样式后可以缩减样式文件的体积,加快资源下载速度: 第二,对于浏览器而言,所有的样式规则的都会被解析后索引起来,即使是当前页面无匹配的规 ...

  5. 高性能优化Web前端

    高性能HTML 一.避免使用iframe iframe也叫内联frame,可将一个HTML文档嵌入另一个HTML文档中. iframe的好处是,嵌入的文档独立于父文档,通常也借此使浏览器模拟多线程.缺 ...

  6. 转：Web前端，高性能优化

    高性能HTML 一.避免使用iframe iframe也叫内联frame,可将一个HTML文档嵌入另一个HTML文档中. iframe的好处是,嵌入的文档独立于父文档,通常也借此使浏览器模拟多线程.缺 ...

  7. 【转】编写更好的CSS代码

    原文转自:http://blog.jobbole.com/55067/ 编写好的CSS代码,有助提升页面的渲染速度.本质上,引擎需要解析的CSS规则越少,性能越好.MDN上将CSS选择符归类成四个主要 ...

  8. 编写更好的CSS

    编写好的CSS代码能提升页面的渲染速度.本质上,一条规则都没有引擎解析的最快.MDN上将CSS选择符归拆分成四个主要类别,如下所示,性能依次降低. ID 规则 Class 规则 标签规则 通用规则 对 ...

  9. -_-#【CSS 优化】

    高性能CSS 关于css通配符性能问题不完全测试 CSS的渲染效率 border: none; /* 不写 border: 0; 但几乎都是写 border: 0;的.. */ 不要使用过小的图片做背 ...

随机推荐

  1. 【WebForm】Repeater 序列号 在翻页情况下自增

    asp.net Repeater控件分页时,序号列翻页重新从1开始计数问题的解决思路及方法: 一般情况下,使用 <%# Container.ItemIndex + 1% > 给序号列来自增 ...

  2. hdu 5569 matrix dp

    matrix Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5569 D ...

  3. URAL 1775 B - Space Bowling 计算几何

    B - Space BowlingTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/ ...

  4. JAVA数组的定义及用法

    数组是有序数据的集合,数组中的每一个元素具有同样的数组名和下标来唯一地确定数组中的元素. 1. 一维数组 1.1 一维数组的定义 type arrayName[]; type[] arrayName; ...

  5. 【转】Delphi调用webservice总结

    原文:http://www.cnblogs.com/zhangzhifeng/archive/2013/08/15/3259084.html Delphi调用C#写的webservice 用delph ...

  6. XtraBackup原理4

    MySQL · 答疑解惑 · 物理备份死锁分析 背景 本文对 5.6 主备场景下,在备库做物理备份遇到死锁的case进行分析,希望对大家有所帮助. 这里用的的物理备份工具是 Percona-XtraB ...

  7. 1002 GTY's birthday gift

    GTY's birthday gift                                                                       Time Limit ...

  8. proxy代理类

    package cn.hncu.proxy.rent; import java.lang.reflect.InvocationHandler;import java.lang.reflect.Meth ...

  9. spring mvc 使用Optional

    return Optional.ofNullable(brokerRepository.findOne(id)) .map(broker -> new ResponseEntity<> ...

  10. html 动态添加TABLE的行。

    <script type="text/javascript"> var pos =4;//默认位置为4,根据自己需要,也可以通过鼠标事件获取当前行数. function ...