如何对 CSS Expression 进行优化呢?

照亮黑夜灯活宝

照亮黑夜灯活宝

2016-02-19 15:13

今天图老师小编要向大家分享个如何对 CSS Expression 进行优化呢?教程,过程简单易学,相信聪明的你一定能轻松get!

IE 浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。

如何对 CSS Expression 进行优化呢?

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

至少:如果我们将 CSS Expression 在匹配的元素中仅执行一次,性能将会提升很大。

old9 在 《CSS Expression Reloaded》一文中提供了一个解决方案:

在 CSS Expression 语句体里,将触发该 Expression 的 CSS 属性重置。

例如:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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 就不存在其他方面的问题。

展开更多 50%)
分享

猜你喜欢

如何对 CSS Expression 进行优化呢?

Web开发
如何对 CSS Expression 进行优化呢?

如何对CSS Expression进行优化

Web开发
如何对CSS Expression进行优化

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

为什么进行CSS代码优化呢?

Web开发
为什么进行CSS代码优化呢?

CSS Expression讲解

Web开发
CSS Expression讲解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS优化:less优化CSS

Web开发
CSS优化:less优化CSS

对URL地址进行编码 优化2

Web开发
对URL地址进行编码 优化2

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

修正IE6不支持position:fixed的bug

修正IE6不支持position:fixed的bug

怎样下载网络FLASH

怎样下载网络FLASH
下拉加载更多内容 ↓