Home  >  Article  >  Web Front-end  >  Analysis of reasons not to use CSS Expression_Experience exchange

Analysis of reasons not to use CSS Expression_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:04:441053browse

Use JavaScript expressions in CSS Expression. CSS properties are set based on the evaluation of JavaScript expressions.
CSS Expression does not work in other browsers, so it is more useful to set it up separately for IE in cross-browser coding.
CSS Expression is supported starting from IE5. Let's look at the following code:

Copy code The code is as follows:

background-color: expression ( (new Date()).getHours()%2 ? "#F00" : "#00F" );

The above code uses CSS Expression to switch the background every hour color.
The problem with CSS Expression is that its calculation frequency is much higher than imagined. Not only when the page is displayed and zoomed, but also when the page is scrolled and even when the mouse is moved, it will be recalculated. Add a counter to a CSS Expression to track how often an expression is evaluated. You can easily achieve more than 10,000 calculations by simply moving the mouse on the page.
One way to reduce the number of CSS Expression evaluations is to use a one-time expression, which assigns the result to a specified style attribute the first time it is run, and uses this attribute instead of the CSS Expression.
If style properties must change dynamically during page cycles, using event handlers instead of CSS expressions is a feasible approach. If you must use CSS Expressions, be sure to remember that they are calculated thousands of times and may have an impact on the performance of your page. Don't let your users feel that the machine will be very slow when they open your page.


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn