Multiple HTTP Requests due to img behavior tag

Question

Hi All, We have couple of portlets deployed on Websphere Portal Server. In the css file we have included a behavior attribute for img tag.

img {
    position:relative;
    border:none;
    outline:none;
    behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true) );
}

We have figured out that this behavior tag is resulting in multiple HTTP requests.In one of the Portlet JSP, we have included a style class as follows

<link rel="stylesheet" type="text/css" title="Style"
    href=''<%=request.getContextPath()+"/theme/stylesheet.css" %>'>

The issue is there only when we have that request.getContextPath(). If I substitute that with the actual context root, it is not giving the problem. Can someone please let me know why that behavior attribute is causing the problem?

Answer 1

Hi!

Yahoo! has an article with the title Best Practices for Speeding Up Your Web Site. One thing that is to be avoided is expressions in CSS as they are evaluated a bit more often than expected, just by moving the mouse or scrolling the page.

The article can be read here and look for the heading Avoid CSS Expressions:

http://developer.yahoo.com/performance/rules.html