IE 浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。
如何对 CSS Expression 进行优化呢?
至少:如果我们将 CSS Expression 在匹配的元素中仅执行一次,性能将会提升很大。
old9 在 《CSS Expression Reloaded》一文中提供了一个解决方案:
在 CSS Expression 语句体里,将触发该 Expression 的 CSS 属性重置。
例如:
div {
zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
}
补充几点:
- CSS Expression 执行在任意一个匹配的元素上。
- 在 CSS expression 内, “this”关键字指向当前匹配的 HTML 元素。
- CSS 属性选用一些不常用的属性来触发,触发完重置回默认值。
最近在 Ajaxian 的文章《Creating a querySelector for IE that runs at “native speed”》 中看到作者 Dion Almaer 也提供了一个类似的解决方式:
div {
-singlex: expression(this.singlex ? 0 : (function(t) { alert(t.tagName); t.singlex = 0; } )(this));
}
但此代码并没有完全解决 CSS Expression 最大的性能问题,因为每次触发还是要去执行 Expression 脚本。甚至你可以滚动下你鼠标的中间滚轮,意向不到的问题将会发生。
最后强调:仅是对 CSS Expression 做了优化,但并未说 CSS Expression 就不存在其他方面的问题。
witter:
共有13 条评论
Dion Almaer 的方法有点残,只是不停地判断return而已。old9的方法才是真正的一次执行。
考虑到IE的各种兼容性问题,expression有大用处呢。
IE8不支持CSS Expression了
IE8应该是在标准doctype说明下不支持CSS Expression,
其实还是支持的。
这东西一般不用
貌似第一个要好许多,可以控制脚本执行的时机,而第二个单例模式似乎就不怎么适合做这样的事情了……
不如用JQuery!
2.在 CSS expression 内, “this”关键字指向当前匹配的 HTML 元素。
————————
这个因为同浏览器而不同,在ie8下,expression的this指向的是window对象
对于expression重复执行的问题,可以创建一个全局对象来解决,怎么样的全局呢,.最直接给window添加一个属性,执行前判断这个属性是否存在就可以了.
width: expression(document.body.clientWidth-4);
height:expression(document.documentElement.clientHeight – 34);
这两句在IE下加载的时候为什么高度必须得刷新一次才能正确!苦恼中
[...] CSS Expression 的优化 [...]
学习了
[...] Dom Load是在整个document文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作,比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等; 比如一个图片浏览的效果,通常如果图片尺寸很大的情况下,为了防止图片把页面撑开通常会限定图片的宽度或高度,如果是单张图片或者是多张规格比例统一的图片下我们可以直接在<img>上价格宽度或者高度的属性<img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”>,比如(推荐)或者可以在css样式中加宽度或者高度的属性。但是如果这些张规格比例不统一的图片要浏览呢?那就有问题,你设置宽高很可能造成图片严重失真。在ie6之后ie7,ie8还有其他主流浏览器支持css2.1中min-width,max-width,min-height,max-width,这样我们就可以用min-width,max-width,min-height,max-width解决这些问题,但是ie6除非是抛弃性能问题用css表达式(当然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和怿飞(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/)有关于css表达式性能问题的解决方案,大家可以看一下)。这个时候ie的做好解决方案就是用Dom Ready而不是Dom Load,因为通常大图片加载的时候会一点一点的加载,这个在尺寸大,字节多,网速慢的时候表现的非常明显,用Dom Load,通常是先把页面撑开,加载完成后再把图片重设宽高,图片加载多少时间,这个页面就会撑开多久,用户会非常难受!! 这点可以看我做的一个的一个小demo:http://www.css88.com/demo/domready/(注意第二次测试的时候要清除缓存) [...]
[...] Dom Load是在整个document文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作,比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等; 比如一个图片浏览的效果,通常如果图片尺寸很大的情况下,为了防止图片把页面撑开通常会限定图片的宽度或高度,如果是单张图片或者是多张规格比例统一的图片下我们可以直接在<img>上价格宽度或者高度的属性<img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”>,比如(推荐)或者可以在css样式中加宽度或者高度的属性。但是如果这些张规格比例不统一的图片要浏览呢?那就有问题,你设置宽高很可能造成图片严重失真。在ie6之后ie7,ie8还有其他主流浏览器支持css2.1中min-width,max-width,min-height,max-width,这样我们就可以用min-width,max-width,min-height,max-width解决这些问题,但是ie6除非是抛弃性能问题用css表达式(当然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和怿飞(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/)有关于css表达式性能问题的解决方案,大家可以看一下)。这个时候ie的做好解决方案就是用Dom Ready而不是Dom Load,因为通常大图片加载的时候会一点一点的加载,这个在尺寸大,字节多,网速慢的时候表现的非常明显,用Dom Load,通常是先把页面撑开,加载完成后再把图片重设宽高,图片加载多少时间,这个页面就会撑开多久,用户会非常难受!! 这点可以看我做的一个的一个小demo:http://www.css88.com/demo/domready/(注意第二次测试的时候要清除缓存) [...]
来学习…