避免使用@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. Swift学习笔记二

    Swift是苹果公司开发的一门新语言,它当然具备面向对象的许多特性,现在开始介绍Swift中类和对象的语法. 对象和类 用"class"加上类名字来创建一个类,属性声明和声明常量或 ...

  2. Spark Core源代码分析: Spark任务运行模型

    DAGScheduler 面向stage的调度层,为job生成以stage组成的DAG,提交TaskSet给TaskScheduler运行. 每个Stage内,都是独立的tasks,他们共同运行同一个 ...

  3. java源码部署

    环境:nginx+tomcat部署方式:源码部署源码目录 /chroot2/test/schedule 目录下面就是所有源码了tomcat 位置: /usr/local/tomcat/apache-t ...

  4. Swift常用语法示例代码（一）

    此篇文章整理自我以前学习Swift时的一些练习代码,其存在的意义多是可以通过看示例代码更快地回忆Swift的主要语法. 如果你想系统学习Swift或者是Swift的初学者请绕路,感谢Github上Th ...

  5. ios-NSString总结

    1.常用功能使用 1)初始化 NSString *astring = @"This is a String!";                             //固定字 ...

  6. Android 浅谈相机研发

    在android中应用相机功能,一般有两种:一种是直接调用系统相机,一种自己写的相机.        我将分别演示两种方式的使用: 第一种:是使用Intent跳转到系统相机,action为:andro ...

  7. android 自定义按钮实现 home键 和返回键

    由于在自己做的东西中用到了就总结一下,自己做了测试 在一个程序运行中如果按 返回键  分别执行了 : onpause()     onStop()   onDestory()方法 如果点击 home键 ...

  8. 解决Download interrupted: Connection to https://dl-ssl.google.com refused的问题

    运行->drivers->etc->hosts 加入一行 74.125.237.1 dl-ssl.google.com ok! =================上述方法已经失效, ...

  9. 1085. Perfect Sequence (25)

    the problem is from PAT,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1085 At first ...

  10. debian之source.list详解

    之前安装的是debian sarge(内核是2.4.7),不太想更新,但是发现原来的源/ect/apt/source.lists如下,但是用apt-get update,发现大都已经不可用了.怎么办, ...