'What is progressive rendering?

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?



Solution 1:[1]

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:[2]

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:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Naman Sancheti
Solution 3 Abdullah Numan