Do not waste users’ time on rendering off-screen content

And also do not annoy users with an infinite scroller.

Browser cannot distinguish invisible from visible contents

Contents shown in a web page usually do not fit into the screen.

When a page is loaded a browser calculates the dimensions and positions of all the displayed elements in the page DOM. The elements are laid out all even when most of the page contents are invisible until a user scroll the page to bring them into view.

A browser spends time on laying out the entire DOM because without developer hints it does not differentiate the visible elements from invisible ones. In a sample web page described below I illustrate this important fact — a browser applies CSS rules and calculates lays out a element even when the element or its parent:

• is off-screen
• is hidden as overflow
• is applied visibility:hidden

The bigger is a page HTML, the more time the browser needs to render the page, the longer users wait until something is displayed on the screen. No one likes waiting. How offer users a short rendering time for huge pages?
As usual I focus on web applications presenting tabular data but the idea…