Web - Lifecycle of a page load (Timeline)

> (World Wide) Web - (W3|WWW) > Web - Browser

1 - Processing

See Page load processing model for HTML files

HTML code is loaded by the browser in the order it appears in the file.

See also:

Advertising

3 - Script

If JavaScript through the script element is placed before the body, it will therefore be loaded first and if it is supposed to affect the HTML in the body, it might not work, as the JavaScript would be loaded before the HTML it is supposed to work on.

Scripts in HTML have “run-to-completion” semantics, meaning that the browser will generally run the script uninterrupted before doing anything else, such as firing further events or continuing to parse the document.

4 - State

The document.readyState property returns:

  • loading while the Document is loading, (ie if the document is associated with an HTML parser, an XML parser, or an XSLT processor)
  • “interactive” once it is finished parsing but still loading sub-resources,
  • and “complete” once it has loaded.

The readystatechange event fires on the Document object when this value changes.

Timeline Event Reference

5 - Event

Advertising

6 - Painting

Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as “fast” or “slow”.

https://w3c.github.io/paint-timing/

First Paint (FP) is the first of these key moments, followed by First Contentful Paint (FCP). These metrics mark the points, immediately after navigation, when the browser renders pixels to the screen. This is important to the user because it answers the question: is it happening?

The primary difference between the two metrics is FP marks the point when the browser renders anything that is visually different from what was on the screen prior to navigation. By contrast, FCP is the point when the browser renders the first bit of content from the DOM, which may be text, an image, SVG, or even a canvas element.

First Contentful Paint (FCP) measures the time from navigation to the time when the browser renders the first bit of content from the DOM. This is an important milestone for users because it provides feedback that the page is actually loading.

7 - Lifecycle

8 - API

9 - Documentation / Reference

Advertising
web/browser/page_load.txt · Last modified: 2019/03/17 22:23 by gerardnico