Start Render, DOM Ready, Page Load

I. Start render

Definition

Start Render refers to the time when the browser starts rendering. From the user's perspective, it can be defined as the time when the user sees the first content on the page.

User Experience

This time determines the first time for users to experience the page. The shorter the time, the faster the page is. In this way, the user will be more patient when waiting for the rest of the content to be displayed. If the time is too long, the user will face a blank page for a long time, which will be a test of user patience. In general, the shorter the start render time, the better, and the key indicator.

Influencing Factors

To know the factors that affect the start render time, you must first know how the time is calculated. To sum up, we can use the following formula:

Time to start render = ttfb + ttdd + Tthe

Where:

Ttfb (time to first byte): the time when the request is sent to the server to return data

Ttdd (time to document download): the time when the HTML document is loaded from the server.

TThe (time to head end): Time required for parsing the HTML Document Header

The above formula shows that Start Render is mainly affected by the following factors (developer controllable ):

(1) Server Response Time

(2) HTML document size

(3) Head resource usage

Ii. Dom ready definition

DOM Ready refers to the time when page Parsing is completed. There is a corresponding DOM Event-DOMContentLoaded in the advanced browser. The official Firefox Parsing is as follows:

Fired at the page's Document object when parsing of the document is finished. By the time this event fires, the page's DOM is ready, but the referenced stylesheets,
Images, and subframesmay not be done loading; use the "load" event to detect a fully-loaded page.

This event is triggered when the document Parsing is complete. What operations are involved in document parsing? Although a complete answer cannot be provided for the moment, the parsing of the document should at least include the following operations: HTML document analysis and DOM tree creation, loading of external link scripts, execution of external link scripts, and execution of inline scripts, excluding loading of images, iframe, and other resources. Because of this, the event is usually triggered earlier than window. onload, and can be operated by all DOM elements.

Currently, HTML5 also regulates this event, and IE9 also starts to support this event.

User Experience

The Start Render indicator directly determines the user's experience on the page speed. In contrast, the DOM Ready indicator does not directly affect the sensory experience, and often affects when interaction functions are available. Why is interaction affected? Because the DOMContentLoaded event is triggered when all DOM nodes can perform operations, such as adding events, adding, deleting, and modifying nodes, therefore, some interactive functions implemented by Javascript are often initialized in the DOMContentLoaded event, and this function is only available after the DOMContentLoaded event is triggered.

Therefore, the DOM Ready indicator affects the earliest available time of interaction functions. If DOM Ready takes too long, users will find that the page has come out, but many functions are unavailable, maybe clicking a link will jump to the top of the page. Therefore, the shorter the DOM Ready time, the better, so that the interaction function can be available as soon as possible.

Influencing Factors

Let's take a look at a rough time composition formula:

Time To Dom Ready = TTSR + TTDC + TTST

Where:

TTSR (Time To Start Render): the Time when the browser starts Rendering

TTDC (Time To Dom Created): the Time required To create a DOM tree

TTST (Time To Script): the Time when all scripts in the BODY are loaded and executed.

The above formula shows that Start Render is mainly affected by the following factors (developer controllable ):

(1) DOM Structure Complexity

(2) script usage in the BODY

According to the analysis of some actual monitoring data, the loading and execution time of a script usually accounts for about 50% of the DOM Ready time on a page that loads scripts normally, this shows how significant the impact of script usage on DOM Ready Metrics is! Therefore, optimization of the DOM Ready indicator should also focus on the use of scripts.

(3) Factors Influencing Start Render indicators

Iii. Page load Definition

The Page Load time refers to the time when the window. onload event is triggered. Compared with the DOM Ready time, the Page Load time is usually more backward, because Page Load not only includes the time required for loading all resources after HTML file parsing is completed, loading of instance slice resources and iframe.

User Experience

You may think that Page Load is irrelevant for a long time. In fact, this indicator affects the user experience in the following two aspects:

(1 ). window. the onload event trigger time (Page Load) is the time when all resources are loaded. The longer this time, the longer it takes for the user to see some content, such as slice, these content may not be the most important, but it is a part of a complete page. If loading is too slow, it will also affect the user experience of page integrity to a certain extent.

(2) Before the window. onload event is triggered, if a resource is being loaded, such as a script or image, the browser will tell you in some way that the resource is being loaded. Different browsers have different methods, for example, IE6 and other non-Tab browser will give a progress prompt in the status bar, while Firefox and other Tab browsers will give a prompt in the status bar, on the other hand, the loading status is displayed on the Tab. The longer the Page Load is, the longer the status is displayed, which affects the overall Page speed experience.

Influencing Factors

(1) The window. onload event is always triggered after DOM Ready. Therefore, the influencing factors of DOM Ready also affect Page Load.

(2) Since the window. onload event is triggered only after all resources are loaded, the longer the resource loading time, the longer the Page Load time. Without any external link resources, the Page Load time is almost the same as the DOM Ready time. As images and other resources increase, the gap between Page Load and DOM Ready will also increase. (Except for the external link script, because the external link script will also increase the DOM Ready time)

Iv. TTI Definition

TTI (Time To Interact) refers To the page interaction Time. Page interaction involves many aspects. For example, clicking a link or clicking a search button belongs to page interaction. However, TTI, which measures performance, mainly refers to the time when core functions can interact. The core function is defined as different pages. For example, for Baidu homepage, the most important thing is the time when the search box appears. The most important thing about the product details page of some shopping websites is the time when the purchase function was available and described. In the current situation, TTI is usually the same as DOM Ready time, because no matter whether the interaction function is important or not, related Javascript will be stored in DOM
Before initialization and binding, TTI can actually be earlier.

User Experience

According to the definition of TTI, the length of TTI has an important impact on the user experience and affects the use of core functions.

Influencing Factors

(1) Start Render time-interaction can be discussed only when the content is rendered. Therefore, the speed and slowness of the rendering time directly affect the TTI time.

(2) display time of HTML elements related to core functions-determines the time when core functions are visible

(3) binding time of core function-related Javascript Functions-determines the interaction time of core Javascript Functions

Monitoring Method

There is no fixed monitoring method. It depends on the page. If the core module does not have a script, It is enough time to calculate the resolution of the core module; if the core module has related scripts, You need to calculate the Script Loading and binding time.

Optimization Method

(1) method for optimizing Start Render indicators

TTI depends on the Start Render time. Therefore, the optimization method for the Start Render indicator is also applicable to TTI. Please refer to this article>.

(2) Place HTML documents with core functions in front of the BODY as much as possible

Currently, most users pay attention to this issue when switching pages. For example, the subject content is placed after the subject content, while the sidebar or advertisement bar is placed behind the subject content.

(3) content of pre-loaded core functions

Some core functions may not be placed in the front of the BODY. In this case, you can consider loading the core functions in advance by means of pre-loading in the front, this can accelerate the display of core functions.

(4) Early Javascript initialization and binding of core functions

Most of the current practices are to initialize and bind all Javascript Functions in DOM Ready, and some of them are carried out at the bottom of the page. The advantages of these two methods are that they are simple, you do not need to pay attention to the location of specific DOM nodes. The disadvantage is that the initialization time is too late, because DOM Ready is affected by resources on the page, especially the external link Javascript, and the time is not guaranteed, if Javascript loading takes a long time, you need to wait a long time for interaction.

Therefore, you can consider setting up Javascript initialization before related DOM elements. For example, you can place the initialization operation directly after the elements.

Relationship with other indicators

Start Render, DOM Ready, Page
Load three indicators are actually three stages of Page processing by the browser. The latest Start is Start Render, followed by DOM Ready, and finally Page Load. The importance can also be arranged in order from important to unimportant. TTI is not related to browser processing, but a performance indicator in business logic. The relationship is roughly the same as that of other times:
Start Render <= TTI <= DOM Ready <= Page Load

That is to say, the most ideal condition for TTI is Start Render, and the worst state should be DOM Ready. The approach to approaching the ideal state is exactly the optimization principles mentioned above.