CSS Expression最適化

4116 ワード

IEブラウザのCSS Expression機能の最大の問題:繰り返し実行され、毎秒何百回も実行される可能性があり、深刻なパフォーマンスの問題があります.
CSS Expressionの最適化方法
少なくとも、CSS Expressionを一致する要素で1回だけ実行すると、パフォーマンスが大幅に向上します.
old 9は、「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に他の問題はないとは言っていません.