How Design Affects Performance : Progressive Rendering - Page 3

		vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles
How Design Affects Performance : Progressive Rendering

Page 3 of 3

Thread Tools

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.

Vineland, NJ

Princeton

10-24-2007, 10:00 PM

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.)

This article is part 2 of How Design Affects Performance.

Internet Explorer 7

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)

[hr]black[/hr]Learn More about Princeton

#22

12-17-2008, 02:39 AM

brhoom

Join Date: Mar 2006

Posts: 86

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Thank you very much

#23

02-28-2009, 05:04 PM

KrisP

Join Date: Jun 2002

Posts: 169

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Is it in any way possible to activate progressive rendering in explorer 7 or firefox 3 in Vista?

Page 3 of 3

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules

Forum Jump

All times are GMT. The time now is 01:33 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05998 seconds Memory Usage 2,206KB Queries Executed 17 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_article (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (3)post_thanks_box (3)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (3)post_thanks_postbit_info (2)postbit (3)postbit_onlinestatus (3)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!