What is progressive rendering?


Html Problem Overview

In order to find a good internship, I am engaged in answering these questions, There is one question which I am not clear what it says, I have never heard relevant information before, so I want to know What is progressive rendering?

Html Solutions

Solution 1 - Html

Progressive rendering is the name given to techniques used to render content for display as quickly as possible.

It used to be much more prevalent in the days before broadband internet but it's still useful in modern development as mobile data connections are becoming increasingly popular (and unreliable!)

Examples of such techniques :

  • Lazy loading of images where (typically) some javascript will load an image when it comes into the browsers viewport instead of loading all images at page load.
  • Prioritizing visible content (or above the fold rendering) where you include only the minimum css/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred javascript (domready/load) to load in other resources and content.

Solution 2 - Html

This pertains to the idea of sending data in chunks when doing Server side rendering rather than all at once. The advantage is reduced TTFB (Time to first Byte) i.e. the time period between the browser making the HTTP request and it receiving the first byte.

See below 'JSConf' talk for a detailed explanation: https://www.youtube.com/watch?v=aRaQe9n1lPk

Solution 3 - Html

Progressive rendering is a concept to render content to the browser optimally by rendering the critical content first and the non-critical parts progressively as needed by the user. This article explains it very nicely.


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNatumsolView Question on Stackoverflow
Solution 1 - HtmlcfreearView Answer on Stackoverflow
Solution 2 - HtmlNaman SanchetiView Answer on Stackoverflow
Solution 3 - HtmlAbdullah NumanView Answer on Stackoverflow