高性能CSS
2017-09-25 10:15
204 查看
避免使用@import
有两种方式加载样式文件,一种是link元素,另一种是CSS 2.1加入@import。而在外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。虽然规则允许在样式中调用@import来导入其它的CSS,但浏览器不能并行下载样式,就会导致页面增添了额外的往返耗时。比如,第一个CSS文件first.css包含了以下内容:@import url(“second.css”)。那么浏览器就必须先把first.css下载、解析和执行后,才发现及处理第二个文件second.css。简单的解决方法是使用<link>标记来替代@import,比如下面的写法就能够并行下载CSS文件,从而加快页面加载速度:1 2 | <linkrel="stylesheet"href=""first.css""/> <linkrel="stylesheet"href="second.css"/> |
避免AlphaImageLoader滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader,请使用下划线_filter又使之对IE7以上版本的用户无效。
避免CSS表达式
CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:1 | background-color:expression((newDate()).getHours()%2?"#FFFFFF":"#000000"); |
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。
避免通配选择器
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免需要消耗更多匹配时间的选择器。而在这之前我们需要了解CSS选择器匹配的机制,如例子的子选择器规则:1 | #header>a{font-weight:blod;} |
事实上,却恰好相反,CSS选择器是从右到左进行规则匹配。了解这个机制后,例子中看似高效的选择器在实际中的匹配开销是很高的,浏览器必须遍历页面中所有的a元素并且确定其父元素的id是否为header。
如果把例子的子选择器改为后代选择器则会开销更多,在遍历页面中所有a元素后还需向其上级遍历直到根节点。
1 | #header a{font-weight:blod;} |
通配选择器使用 * 符合表示,可匹配文档中的每一个元素。如下例规则将所有元素的字体大小设置为20px:
1 | *{font-size:20px;} |
1 | .selected*{color:red;} |
避免单规则的属性选择器
属性选择器根据元素的属性是否存在或其属性值进行匹配,如下例规则会把herf属性值等于”#index”的链接元素设置为红色:1 | .selected[href=”#index”]{color:red;} |
避免类正则的属性选择器
CSS3添加了复杂的属性选择器,可以通过类正则表达式的方式对元素的属性值进行匹配。当然这些类型的选择器定是会影响性能的,正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=, |=, ^=, $=, 和 ~=语法的属性选择器。
移除无匹配的样式
移除无匹配的样式,有两个好处:第一,删除无用的样式后可以缩减样式文件的体积,加快资源下载速度;
第二,对于浏览器而言,所有的样式规则的都会被解析后索引起来,即使是当前页面无匹配的规则。移除无匹配的规则,减少索引项,加快浏览器查找速度;
转载自AlloyTeam:http://www.alloyteam.com/2012/10/high-performance-css/
相关文章:高性能HTML 高性能JavaScript
相关文章推荐
- 高性能CSS(三)
- 高性能表现的div+css网站
- 书写高性能的css
- 高性能WEB开发(7) - JS、CSS的合并、压缩、缓存管理
- 高性能WEB开发 - JS、CSS的合并、压缩、缓存管理
- 高性能WEB开发 - JS、CSS的合并、压缩、缓存管理
- 高性能ASP.NET开发:自动压缩CSS、JS
- 高性能CSS(一)
- 高性能CSS(二)
- 利用浏览器CSS渲染原理写出高性能的CSS代码
- 关于移动Web应用程序开发 HTML5、高性能JavaScript篇、Css的几篇较好博客
- 高性能CSS(二)
- 高性能WEB开发- JS、CSS的合并、压缩、缓存管理
- 《web前端最佳实践》—高性能css
- 高性能WEB开发 - 了解CSS的查找匹配原理,让CSS更简洁、高效
- 高性能的网站开发:HTML标识/CSS优化
- 高性能WEB开发(7) - JS、CSS的合并、压缩、缓存管理
- 高性能WEB开发系列-了解CSS的查找匹配原理,让CSS更简洁、高效
- 利用浏览器CSS渲染原理写出高性能的CSS代码
- 高性能WEB开发 JS、CSS的合并、压缩、缓存管理