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

避免AlphaImageLoader滤镜

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。

避免CSS表达式

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

background-color: expression((new Date()).getHours()%2?"#FFFFFF""#000000" );

如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

避免通配选择器

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

#header > a {font-weight:blod;}

我们中的大多数人都是从左到右的阅读习惯,可能也会习惯性的设定浏览器也是从左到右的方式进行匹配规则,因为会推测这条规则的开销并不高。我们这样假象浏览器会像这样的方式工作:找到唯一的id为header为的元素,然后把这个样式规则应用到直系子元素中的a元素上。我们知道文档中只有一个id为header的元素,并且它只有几个a类型的子节点,所以这个CSS选择器应该相当高效。

事实上,却恰好相反,CSS选择器是从右到左进行规则匹配。了解这个机制后,例子中看似高效的选择器在实际中的匹配开销是很高的,浏览器必须遍历页面中所有的a元素并且确定其父元素的id是否为header。

如果把例子的子选择器改为后代选择器则会开销更多,在遍历页面中所有a元素后还需向其上级遍历直到根节点。

#header  a {font-weight:blod;}

理解了CSS选择器从右到左匹配的机制后,可以理解选择器中最右边的规则往往决定了浏览器继续左移匹配的工作量,我们把最右边选择规则称之为关键选择器。

通配选择器使用 * 符合表示,可匹配文档中的每一个元素。如下例规则将所有元素的字体大小设置为20px:

 * { font-size:20px;}

通配选择器作用于所有的元素,如规则最右边为通配符:

.selected * {colorred;}

浏览器匹配文档中所有的元素后分别向上逐级匹配class为selected的元素,直到文档的根节点,因此其匹配开销是非常大的,通常比开销最小的ID选择器高出1~3个数量级,所以应避免使用关键选择器是通配选择器的规则。

避免单规则的属性选择器

属性选择器根据元素的属性是否存在或其属性值进行匹配,如下例规则会把herf属性值等于”#index”的链接元素设置为红色:

.selected [href=”#index”] {colorred;}

但其匹配开销是非常大的,浏览器先匹配所有的元素,检查其是否有href属性并且herf属性值等于”#index”, 然后分别向上逐级匹配class为selected的元素,直到文档的根节点。所以应避免使用关键选择器是单规则属性选择器的规则。

避免类正则的属性选择器

CSS3添加了复杂的属性选择器,可以通过类正则表达式的方式对元素的属性值进行匹配。当然这些类型的选择器定是会影响性能的,正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=, |=, ^=, $=, 和 ~=语法的属性选择器。

移除无匹配的样式

移除无匹配的样式,有两个好处:

第一,删除无用的样式后可以缩减样式文件的体积,加快资源下载速度;

第二,对于浏览器而言,所有的样式规则的都会被解析后索引起来,即使是当前页面无匹配的规则。移除无匹配的规则,减少索引项,加快浏览器查找速度;

转:http://www.alloyteam.com/2012/10/high-performance-css/

高性能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. ubuntu1604 安装samba

    ubuntu1604 安装samba sudo apt-get install samba 更改/etc/samba/smb.conf添加[share]comment = sharepath = /h ...

  2. 湖南大学ACM程序设计新生杯大赛(同步赛)A - Array

    题目描述 Given an array A with length n  a[1],a[2],...,a[n] where a[i] (1<=i<=n) is positive integ ...

  3. Visitor设计模式

    我猜想许多人都知道访问者设计模式,这种模式在“四人帮”的那本可复用面向对象软件基础的书被描述过.这个模式自身其实一点也不复杂(和以往的其他设计模式一样).  如上图所示: 我知道这个模式很久了,但是我 ...

  4. 「SCOI2015」情报传递

    「SCOI2015」情报传递 题目描述 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有 \(n\) 名情报员.每名情报员可能有若干名(可能没有)下线,除 \(1\) 名大头目外其余 ...

  5. luoguP4457 [BJOI2018]治疗之雨 概率期望 + 高斯消元

    应该是最后一道紫色的概率了....然而颜色啥也代表不了.... 首先看懂题意: 你现在有$p$点体力,你的体力上限为$n$ 在一轮中, 1.如果你的体力没有满,你有$\frac{1}{m + 1}$的 ...

  6. 【递推】【概率】Gym - 100814A - Arcade Game

    题意:给你一个不超过九位的不含重复数码的十进制数,每次会随机将它的数码打乱,变成一个新的数,如果它小于等于上一次的数,那么你输了:如果它大于上一次的数,那么可以继续.直到它变成能够表达的最大数为止就赢 ...

  7. [CF115E]Linear Kingdom Races

    [CF115E]Linear Kingdom Races 题目大意: 有\(n(n\le10^5)\)个物品,编号为\(1\sim n\).选取第\(i\)个物品需要\(c_i\)的代价.另外有\(m ...

  8. SCOJ 4423: Necklace polya

    4423: Necklace 题目连接: http://acm.scu.edu.cn/soj/problem.action?id=4423 Description baihacker bought a ...

  9. ROS知识(4)----初级教程之常见问题汇总

    一.开机启动ROS的工作空间的路径设置失败 现象:在教程:http://wiki.ros.org/cn/ROS/Tutorials/CreatingPackage中的第5.1小节,运行以下命令失败: ...

  10. Android/Java 中的 String, StringBuffer, StringBuilder的区别和使用

    Android 中的 String, StringBuffer 和 StringBuilder 是移动手机开发中经常使用到的字符串类.做为基础知识是必须要理解的,这里做一些总结. A.区别 可以从以下 ...