Why avoid using CSS expressions?

Source: Internet
Author: User
Tags website performance

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;

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

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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.