How to optimize css expression performance

Methods to optimize the performance of css expression: 1. Execute CSS Expression only once in the matching element; 2. In the CSS Expression statement body, reset the CSS properties that trigger the Expression.

The operating environment of this article: Windows7 system, HTML5&&CSS3, Dell G3 computer.

How to optimize css expression performance?

The biggest problem with the CSS Expression feature in IE browser is that it will be executed repeatedly, possibly hundreds or thousands of times per second, causing serious performance problems. How to optimize CSS Expression?

At least: If we execute CSS Expression only once in the matching element, the performance will be greatly improved.

old9 provides a solution in the article "CSS Expression Reloaded":

In the CSS Expression statement body, the CSS property reset of the Expression will be triggered.

Recommendation: "

css video tutorial

" For example:

div {
    zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
}

Additional points:

CSS Expression is executed in any on matching elements.

In CSS expression, the "this" keyword points to the currently matched HTML element.

CSS properties use some uncommon properties to trigger, and reset back to default values ​​after triggering.

There is a similar solution:

div {
    -singlex: expression(this.singlex ? 0 : (function(t) { 
    alert(t.tagName); t.singlex = 0; 
    } )(this));
}

But this code does not completely solve the biggest performance problem of CSS Expression. Because the Expression script still has to be executed every time it is triggered, such as when you scroll the middle wheel of the mouse.

Finally, it is emphasized that CSS Expression is only optimized, but it does not mean that CSS Expression does not have other problems.

The above is the detailed content of How to optimize css expression performance. For more information, please follow other related articles on the PHP Chinese website!