Wednesday, April 21, 2010

Reducing .NET MasterPage Flicker

Sites built with .master pages have a problem that Microsoft has not yet solved. It is called "page flicker". Flicker is the visual effect that occurs when the content of a page dissappears in the browser and then reaapears. It occurs on .master pages because the .net system completely refreshes the DOM with every page load. It is more a browser issue that a .net issue really.



Some day, I would like to find a way to deliver sites with zero flicker. I don't know that .master pages will ever allow us to do that. In the mean time, however, I have come up with a few methods of reducing Flicker:




  1. Reduce the use of tables in the site structure. Tables take longer for the browser to render

  2. Pull all possible image links from your master page and put them in your .css file

  3. Use AJAX to load only the content sections of the page ( unfortunately, this method would require a great deal of additional ajax programming on every site... so I would not recommend it )


  4. I'd like your opinions on the use of a tiny little meta tag commonly referred to as FAJAX ( Fake AJAX ). There are two versions typically used to reduce flicker. NOTE: these are only supposed to work in IE. FF will probably still flicker:




<meta http-equiv="Page-Enter" content="Alpha(opacity=100)"/>

or



<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)"/>
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)"/>


I recommend the first one over the second. It seems to work better.




I would never claim to be an expert on page flicker, so, I'd appreciate you comments, ideas, or other input so we can come to a concensus on the best solutions for our team.

No comments: