避免使用@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. TC srm 673 300 div1

    TC srm.673 300 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 Description 给你n(n<=50)匹马和n个人,一匹马和一个人能 ...

  2. HDU 5515 Game of Flying Circus 二分

    Game of Flying Circus Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem ...

  3. Codeforces Gym 100431G Persistent Queue 可持久化队列

    Problem G. Persistent QueueTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudg ...

  4. Codeforces Gym 100286F Problem F. Fibonacci System 数位DP

    Problem F. Fibonacci SystemTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudg ...

  5. 在VS2012下不安装VS2010编译VS2010的工程

    虽然一路追随这VISUAL SUTDIO在编程,但是断档的情况还是有的,最近一次硬盘问题使得安装了所有的VS2003-VS2012的机器硬盘挂了,无奈只能够安装了,不过觉得没啥用了,就安装一个VS20 ...

  6. Android - FrameLayout覆盖顺序

    FrameLayout覆盖顺序 本文地址: http://blog.csdn.net/caroline_wendy FrameLayout: Child views are drawn in a st ...

  7. Delphi调用Dll的的2种写法

         unit Unit1;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, F ...

  8. ${var}变量替换

    ${age},${name} 给定一个上下文 Map<String,String> context 使用上下文替换变量private static final Pattern VAR_PA ...

  9. javascript运行机制之执行顺序详解(转)

    转自http://www.admin10000.com/document/3385.html JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言, ...

  10. Python的基础--对象 转

      对象(Objects)是python中数据的抽象,python中所有的数据均可以用对象或者是对象之间的关系来表示.每个对象均有标识符(identity).类型(type).值(value). 标识 ...