Optimize browser rendering: Avoid CSS expressions

Overview

CSS expressions reduce the rendering performance of the browser. replacing them with other schemes will improve the rendering performance of the IE browser.

Note: This section best practices only apply to Internet Explorer 5 to 7. They support CSS expressions. Internet Explorer 8 does not support CSS expressions, which are not supported by other browsers.

Details

As a way to dynamically change document attributes to respond to various events, Internet Explorer 5 introduces CSS expressions or "dynamic attributes ". They are composed of JavaScript expressions embedded in the CSS attribute values in the CSS declaration. In most cases, they are used for the following purposes:

Simulate standard CSS attributes supported by other browsers but not supported by IE.

It provides dynamic styles and Advanced event processing in a more compact and convenient way than writing a comprehensive JavaScript injection style.

Unfortunately, CSS expressions have a considerable negative impact on performance, because every time an event is triggered, the browser recalculates each expression, for example, changing the size of a window and moving the mouse. The low performance of CSS expressions is one of the reasons why IE 8 discards them. If you use CSS expressions on a webpage, you should do everything you can to eliminate them and use other methods to achieve the same functionality.

Suggestions

Use standard CSS attributes whenever possible.

IE 8 is highly compatible with standard CSS. IE 8 supports running CSS expressions only in "compatible" mode, but not in "standard" mode. If you do not need to be backward compatible with the earlier version of IE, you should convert it to the standard CSS attribute to replace all the corresponding CSS expressions. For a complete list of CSS attributes and IE versions that support them, see CSS attribute indexes in MSDN. If you really need to support the old IE browser that requires CSS attributes to be unavailable, use JavaScript to implement equivalent functions.

Use the JavaScript script style.

If you are using CSS expressions to implement dynamic styles, it is very meaningful to rewrite them with pure JavaScript, because this will not only improve IE performance, but also get support for the same effect in other browsers. In this example provided by the MSDN dynamic attribute page, the following CSS expression is used to center an HTML block element in the browser, and the size of the element can be changed at runtime, each time you adjust the window size, you can reposition it in the browser center:

<Div id = "oDiv" style = "background-color: # CFCFCF; position: absolute;
Left: expression (document. body. clientWidth/2-oDiv.offsetWidth/2 );
Top: expression (document. body. clientHeight/2-oDiv.offsetHeight/2) "> Example DIV </div> below is an equivalent Example of using JavaScript and standard CSS:

<Style>
# ODiv {position: absolute; background-color: # CFCFCF ;}
</Style>

<Script type = "text/javascript">
// Check for browser support of event handling capability
If (window. addEventListener ){
Window. addEventListener ("load", centerDiv, false );
Window. addEventListener ("resize", centerDiv, false );
} Else if (window. attachEvent ){
Window. attachEvent ("onload", centerDiv );
Window. attachEvent ("onresize", centerDiv );
} Else {
Window. onload = centerDiv;
Window. resize = centerDiv;
}

Function centerDiv (){
Var myDiv = document. getElementById ("oDiv ");
Var myBody = document. body;
Var bodyWidth = myBody. offsetWidth;

// Needed for Firefox, which doesn't support offsetHeight
Var bodyHeight;
If (myBody. scrollHeight)
BodyHeight = myBody. scrollHeight;
Else bodyHeight = myBody. offsetHeight;

Var divWidth = myDiv. offsetWidth;

If (myDiv. scrollHeight)
Var divHeight = myDiv. scrollHeight;
Else var divHeight = myDiv. offsetHeight;

MyDiv. style. top = (bodyHeight-divHeight)/2;
MyDiv. style. left = (bodyWidth-divWidth)/2;
}

</Script> if you use CSS expressions to simulate CSS attributes that are unavailable in earlier IE versions, you should provide javascript code for version testing and disable CSS expressions for browsers that support CSS. For example, the max-width attribute forces Text wrap within a certain number of pixels, which is not supported before IE 7. The following CSS expression provides this function for IE 5 and 6 as a solution:

P {width: expression (document. body. clientWidth> 600? "600px": "auto");} replaces the CSS expression with equivalent JavaScript for IE browser versions that do not support this attribute. You can use something similar to the following:

<Style>
P {max-width: 300px ;}
</Style>

<Script type = "text/javascript">

If (navigator. appName = "Microsoft Internet Explorer") & (parseInt (navigator. appVersion) <7 ))
Window. attachEvent ("onresize", setMaxWidth );

Function setMaxWidth (){
Var paragraphs = document. getElementsByTagName ("p ");
For (var I = 0; I <paragraphs. length; I ++)
Paragraphs [I]. style. width = (document. body. clientWidth> 300? "300px": "auto ");

</Script>