How Design Affects Performance : Progressive Rendering
Princeton
Join Date: Nov 2001
Posts: 6,693
Joe Velez began developing for the web in 1998. He is an avid vBulletin user and volunteers his services as a vbulletin.org administrator. He currently spends his time maintaining and developing allnurses.com.
Progressive rendering is the act of displaying each object as it is downloaded.
[imgrft]https://vborg.vbsupport.ru/images/portal/success_chart.gif[/imgrft] Currently, the 2 most popular browsers are Internet Explorer and Firefox. Both support progressive rendering; but, they differ on how they render tables. (Please note, we are focusing on tables because vBulletin utilizes tables throughout it's design.)
When Internet Explorer renders a <table>, it downloads all the objects within the table before displaying it. This is required so that Internet Explorer can render the table with the correct width for each column.
PROS
The entire table is displayed as designed.
CONS
Large tables or tables with many objects will cause a delay in loading the page.
Mozilla Firefox 2
On the other hand, Firefox renders all objects progressively regardless if it's in a table. That is to say - each object is displayed as soon as it is downloaded.
PROS
The reader has something to read as they wait for each object to download.
CONS
Each object is displayed without knowing it's position. When the table is completely loaded, all objects are moved to their respective positions.
Still confused? Below are 2 animated images that visually displays progressive rendering between the 2 major browsers: Internet Explorer and Firefox.
Firefox users - clear cache and refresh page to review animation once it ends.
What You Can Do To Improve Performance
Performance Tips
Ensure HTML code is valid.
Minimize number of nested tables.
Never wrap entire body contents within a table.
Move towards a CSS-based layout.
Move JavaScript to the very bottom of document (right before the </body> tag). If not possible, move JavaScript to the <head> of document.
Pay close attention to the size of objects and their locations?
The Key Is To Understand
By knowing each browser's strengths and weaknesses, you can build a better design. A good design will never make the reader wait.
Next Article in this 6 part series:
How Design Affects Performance : HTTP Request (coming soon)
great... these articles (and your site, allnurses) are wonderful.. i have learned a lot here!
when can we read the part 3 of How Design Affects Performance?
By the time I finish this 6 part series - I will have everyone thinking differently about their choice of design and structure .. at least that's my goal. :up:
You are right brother, now I want to redesign some stuff, my site actually takes long to load and it does affect people to stay.
Thanx a lot man!
thx
when i show my style in frontpage or microsoft expression i see the css codes like this
body
{
background: #000000;
color: #000000;
font: 11pt tahoma, arial, helvetica, verdana;
margin: 0px 1px 10px 0px;
padding: 0px;
}
a:link, body_alink
{
color: #FFFFFF;
text-decoration: none;
}
a:visited, body_avisited
{
color: #FFFFFF;
text-decoration: none;
}
but in vbulletin.org/forum
i not see the css codes !!
why ?
Very nice. I would add that storing javascript in a separate file is always the best option by far. The browser will cache a separate file which means the code doesn't have to be downloaded for every page until it changes. I wish vBulletin had a system for mods to add files and auto append them to default js files. That would be the best option IMO.
10-24-2007, 10:00 PM
04-09-2008, 03:20 AM
