Register Arama Bugünkü Mesajlar Tüm Forumu Okundu Say

Thread Tools
How Design Affects Performance : Progressive Rendering
vB.Org Poster
vB.Org Poster has disabled reputation
Kayıt Tarihi: Jul 2018
Mesajlar: 298

Show Printable Version Email this Page
Makale: vBulletin 3 Makaleleri, yazan vB.Org Poster 10 Jul 2018, 19:15

Progressive rendering is the act of displaying each object as it is downloaded.

[imgrft][/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.
The entire table is displayed as designed.

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.
The reader has something to read as they wait for each object to download.

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
  1. Ensure HTML code is valid.
  2. Minimize number of nested tables.
  3. Never wrap entire body contents within a table.
  4. Move towards a CSS-based layout.
  5. Move JavaScript to the very bottom of document (right before the </body> tag). If not possible, move JavaScript to the <head> of document.
  6. 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
Views: 39
Reply With Quote

Thread Tools

Şunları Yapabilirsin
Yeni Konu Açmak
Konuya Cevap Yazmak
Eklenti Eklemek
Düzenleme Yapabilmek

Forum Atla

LD'de Yeni misin? Yardıma mı ihtiyacın var?

All times are GMT +3. The time now is 23:13.

Tasarım Özelliği | Genişlik: Geniş Renk: How Design Affects Performance : Progressive Rendering How Design Affects Performance : Progressive Rendering How Design Affects Performance : Progressive Rendering How Design Affects Performance : Progressive Rendering How Design Affects Performance : Progressive Rendering