CSS Expression 优化

关于IE浏览器中CSS Expression特性的挑战

在Internet Explorer浏览器中，CSS Expression特性的一个显著问题是其反复执行性：每秒钟可能执行成百上千次，这无疑会引发严重的性能问题。这种频繁的执行不仅消耗了大量的计算资源，还可能导致页面反应迟钝或卡顿。

那么，如何优化CSS Expression呢？一个可能的解决方案是在匹配的元素中仅执行一次CSS Expression。想象一下，如果能将CSS Expression的执行频率降低，页面的性能将会有显著的提升。

在一篇文章中，作者提出了一种策略：在CSS Expression语句体中，将触发该Expression的CSS属性重置。例如：

```css

div {

zoom: expression(function(el){

el.style.zoom = "1";

alert(el.tagName);

}(this));

}

```

几点补充：

1. CSS Expression会在任意一个匹配的元素上执行。

2. 在CSS expression内部，“this”关键字指向当前匹配的HTML元素。

3. 为了降低对性能的影响，可以选择一些不常用的属性来触发，触发完后立即重置回默认值。

最近，在Dion Almaer的文章中，他也提供了一个类似的解决方式：

```css

div {

-singlex: expression(this.singlex ? 0 : (function(t) {

alert(t.tagName);

t.singlex = 0;

}(this));

}

```

尽管这些优化策略能够在一定程度上改善CSS Expression的性能问题，但它们并没有完全解决根本问题。因为每次触发仍然需要执行Expression脚本，例如当你滚动鼠标的中间滚轮时。尽管我们对CSS Expression进行了优化，但并不意味着它就没有其他方面的问题。我们需要谨慎使用这一特性，并持续寻找更高效的解决方案。