CSS Expression 优化
发布时间:2009-09-23 18:16:36 作者:佚名 我要评论
IE 浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。
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 也提供了一个类似的解决方式:
但此代码并没有完全解决 CSS Expression 最大的性能问题。因为每次触发还是要去执行 Expression 脚本,比如你滚动鼠标的中间滚轮。
最后强调,仅是对 CSS Expression 做了优化,但并未说 CSS Expression 就不存在其他方面的问题。
相关文章
- 图片作为网页的基本元素是影响页面加载速度的关键因素之一,和图片相关的技术也有很多CSS Sprites(图片合并)、延迟加载、图片渐进增强等等,本文分享网页图片优化的实用工2013-02-26
使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码
CSS sprites(CSS图片精灵)已经存在很久了。事实上,八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要2012-12-24- 本文整理了一些在div+css 布局过程中的一些经验技巧如:浏览器兼容、规范写法、简写等一系列,需要的朋友可以参考下2012-12-19
css sprites技术 CSS Sprites图片切割术与图片优化深入理解
近段时间一直在做前台的一些东西,涉及到很多div+css的问题,原来这个叫CSS Sprites技术,我对前台这些个东西比较感兴趣,所以会去了解多一点2012-12-03- CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我2012-05-31
- CSS常用优化技巧,提高css书写技巧。2011-10-07
- CSS 网站性能优化笔记,大家可以结合下js 网站性能优化笔记。2011-05-24
- DIV+CSS的命名规则小结,让搜索引擎读懂你的样式表。2010-03-17
- CSS Sprite 最大的好处是:减少 HTTP 链接数。提高页面质量2009-08-03
- 明显HTML,暗渡“公用脚本” 减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比2008-10-17
最新评论