Why avoid using CSS expressions?

Http://loo2k.com/blog/why-avoid-css-expression/

Why avoid using CSS expressions?

4

July 12|Frontend Development|Add a comment

I have previously published an articleArticleTo solve the fixed positioning problem of IE6 position: fixed, we will talk about the problem that IE6 cannot use positio: fixed using CSS expressions; Fixed positioning. Since the publication of this article, some friends told me that CSS expressions may affect the website performance;

After reminders from these friends, I have paid more attention to CSS expressions. This article, after reading the high-performance website construction guide, as well as some previous studies, I would like to summarize"Why avoid using CSS expressions?";

What is CSS?Expression?

CSS expression (CSS expression) is a way to dynamically set CSS attributes and is supported by ie5 or a later version, however, the standard mode of IE8 no longer supports CSS expressions [1];

A simple CSSExpression

1. Body{
2. Background-color:Expression((New Date()).Gethours() %2?"# B8d4ff":"# F08a00");
3. }

This sectionCodeThe function is to change the background color of the body on your page every hour;

CSSPerformance problems caused by expression

Yes. Refer to the msdn "about dynamic attributes" document and you will find that CSS expressions are very powerful. For example, you can use CSS expressions to implement the Min-width attribute and change the color between rows, simulation: hover,: before,: after, and other pseudo classes;

However, because CSS expressions are too powerful, CSS expressions cause severe performance problems:"CSS expressions are frequently evaluated to ensure validity.", How often? That is, when you change the window size, scrolling the page or even moving the mouse will trigger the expression to evaluate the value, so frequent evaluation that the browser's performance is seriously affected;

About CSSExpression performance test

This test is based on Rule 7 in the high-performance website construction guide recently;

2. P{
4. Width:Expression(Setcntr(),Document.Body.Clientwidth<600?"600px":"Auto");
6. Min-Width:600px;
8. Border:1pxSolid;
10. }

This method binds a setcntr () function to the CSS expression, counts the number of CSS expressions executed on the page, and displays them in a text box. You can also use ie5 ~ IE6 access the http://stevesouders.com/hpws/expression-counter.php for testing;

Test Results

There are 10 sections in the page. After loading the page, execute a CSS expression about 40 times. Then, when you change the page size, scroll the page, or even move the mouse, in my test, I still execute the CSS expression without moving the mouse. Tens of thousands of evaluate operations are basically done, and after I click the text box, ie is stuck;

Avoid using CSSExpression

Okay, this is a summary. Although there are methods to optimize CSS expressions (you can find them in the reference link), this is not the summary of this article, this article aims to summarize why CSS expressions should be avoided as much as possible;

Although CSS expressions are powerful, they can cause serious performance problems for browsers and slow the loading of webpages;If possible, avoid using CSS expressions!

Reference

1. CSS expression usage Summary
2. CSS expression Optimization

Footer

1. Standard mode of IE 8 no longer supports CSS expressions

CSS IE

More articles about

CSS, ie

• Solve the fixed positioning problem of IE6 position: fixed