Start render,dom ready,page Load

First, Start Render

definition

start Render, as the name implies, is the time the browser starts rendering, and from the user's point of view it can be defined as the time the user sees the first content on the page.

User Experience

This time determines the user's first experience of the page, if the shorter the time to the user's experience is the faster the page, so that users wait for the rest of the presentation of patience will be greater. If the time is too long, then the user will face in a long time is a blank page, which will be a test for the user's patience. In general, Start render time is as short as possible and is a very critical indicator.

Impact Factors

To know what factors are affected by the start render time, first know how this time is calculated. To sum up, you can probably use the following formula to indicate:

Time to Start Render = TTFB + TTDD + TTHE

which

TTFB (Time to First Byte): When to initiate a request to the server to return data

TTDD (Time to document DOWNLOAD): Loading HTML documents from the server

TTHE (Time to head End): How long it takes for the HTML document header to finish parsing

From the above formula, you can see that start render is mainly affected by the following factors (developer controllable):

(1) Server response time

(2) Size of HTML document

(3) The use of resources in head the second, DOM ready definition

Dom ready, refers to the time the page parsing completed, there is a corresponding DOM event in the Advanced browser-Domcontentloaded,firefox official 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 isn't be don e loading; Use the ' Load ' event to detect a fully-loaded page.

That is, the event is triggered when the document resolution is complete. So what exactly does the document parsing include? Although it is not possible to give a complete answer, the parsing of the document should at least include the following: HTML document parsing and the creation of the DOM tree, the loading of the outer chain script, the execution of the outer chain script, and the execution of the inline script, but does not include the loading of other resources such as pictures, IFRAME, etc. Because of this, the event is typically triggered earlier than window.onload, and is available when all DOM elements are operational.

Currently, HTML5 also regulates the event, and IE9 also begins to support the event. User Experience

Unlike the Start render indicator, which directly determines the user's experience of page speed, the DOM ready indicator does not directly affect the sensory experience, and often affects when interactivity is available. Why the interaction is affected. Since the domcontentloaded event is triggered when all DOM nodes can operate, such as adding events, pruning nodes, and so on, some of the interactive functions implemented with JavaScript tend to be initialized in the Domcontentloaded event. This feature is only available after the Domcontentloaded event is triggered.

So the DOM ready metric affects the earliest available time for interactive functionality, and if the DOM ready time is too long, users will find that the page is out, but many features are not available, and perhaps clicking on a link jumps to the top of the page. As a result, the DOM ready time is also as short as possible so that interactivity is available early. Impact Factors

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

Time to Dom ready = TTSR + TTDC + ttst

which

TTSR (time to start render): When the browser starts rendering

TTDC (Time to Dom Created): How long the DOM tree has been created

TTST (Time to script): How long all scripts in the body are loaded and executed

From the above formula, you can see that start render is mainly affected by the following factors (developer controllable):

(1) Complexity of DOM structure

(2) Use of script in body

Through the analysis of some actual monitoring data, in a normal way to load the script page, the load and execution time of the script can often account for about 50% of the DOM ready time, this shows how the use of the script to the DOM ready indicator effect of how significant. Therefore, the optimization of the DOM ready indicator should also focus on the use of the script to start.

(3) Impact factor of Start render indicator iii. Page Load definition

Page load time refers to the time that the Window.onload event was triggered. Page load tends to be more time-dependent than DOM ready time because page load is not just parsing the HTML document but also includes the time it takes to load all the resources, such as the loading of the picture resource, the loading of the IFRAME, and so on. User Experience

You might think that page load time is a little irrelevant, in fact the indicator affects the user experience in two ways:

(1). window.onload Event-triggered time (Page load) is the time when all resources are loaded, the longer it means that the user will have to wait longer to see something, such as a picture, which may not be the most important, but this is part of a complete page, This part of the content, if loaded too slowly, will also affect the user's experience of page integrity to some extent.

(2). Window.onload event before triggering, if a resource is loading, such as a script, a picture, the browser will somehow tell you that the resource is being loaded. Different browsers have different ways, such as IE6, such as non-tab browser will be in the status bar to give progress hints, such as Firefox, such as tab type of browser on the one hand will be prompted in the status bar, on the other hand will also show the status of the load in the tab. The longer the page load, the longer the status is displayed, and therefore the user's experience of the overall speed of the page is affected. Impact Factors

(1) The Window.onload event is always triggered after the DOM is ready, so the influence of the DOM Ready indicator affects page Load.

(2) Since the Window.onload event is not triggered until all resources have been loaded, the longer the resource is loaded, the longer the page load takes. If there are no outside chain resources, the page load time is almost equal to the DOM ready time, and the gap between page load and Dom ready is increasing as resources such as pictures become larger. (except for outer-chain scripts, because the outer-chain script also increases DOM ready time) Iv. definition of TTI

TTI (time to Interact) refers to when the page can interact. The interactions in the page include many aspects, such as clicking on a link and clicking on a Search button, which is part of the page interaction, but for performance-weighted tti, it mainly refers to the time the core functions can interact. The definition of the core function is different from the page, for example, for Baidu homepage, the most critical is the time the search box appears, and for some shopping site product Details page The most critical is the purchase function available and describe the time of occurrence. In the current situation, TTI is mostly the DOM ready time, because regardless of the interaction function is important, the relevant JavaScript will be in the DOM ready after the initialization and binding, and in fact, TTI can be earlier. User Experience

Through the definition of TTI, it is important to understand the impact of TTI on the user experience, which affects the user's use of core functions. Impact Factors

(1) Start render time-only the content is rendered, can talk about interaction, so the fast and slow rendering time will directly affect the tti time.

(2) The display time of the core function-related HTML elements-determines the time that the core function is visible

(3) Binding time for core function-related JavaScript features-determines how the core JavaScript function can interact with time monitoring

There is no fixed mode of monitoring, depending on the page, if the core module does not have a script then calculate the core module parsing time can be completed; If the core module has related scripts, you need to calculate when the script loads and bindings are completed. Optimization Method

(1) Optimization method of Start render index

TTI relies on start render time, so the optimization method for the start render indicator is also applicable to TTi, please refer to this article >>.

(2) Place the core function HTML document as far as possible in the body front

Most of the time when you are cutting a page, you will notice the problem, for example, the main content will be front and the sidebar or advertisement will be placed after the main content.

(3) content of pre-loaded core functions

Some core features do not necessarily fit in the front of the body, so you can consider loading the core functionality in advance with preload, which can also speed up the presentation of core functions.

(4) Do the core functions early JavaScript initialization and binding

Most of the current practice is to do all JavaScript initialization and functional binding in DOM ready, and partly at the bottom of the page, both of which have the advantage of being simple and do not need to focus on the location of the specific DOM nodes; The disadvantage is that the initialization time is too late because the DOM Ready is affected by the resources in the page, especially the outer-chain JavaScript, and there is no guarantee that the user will have to wait for a long time to actually interact if the JavaScript load takes too long.

Therefore, you might consider initializing the initialization of JavaScript to the relevant DOM element after it is established, such as placing the initialized operation directly behind the element. relationship with other indicators

The start render, Dom ready, page load three metrics are actually the three stages of the browser's page processing, starting with start Render, followed by DOM, and finally page load. The degree of importance can also be from important to unimportant in this order. The TTI itself is not related to the processing of the browser, it is only a performance indicator on the business logic. This is roughly the relationship with a few other times:
Start Render <= TTI <= DOM ready <= Page Load

That is, TTI's ideal condition is equal to start Render, and the worst state should be equal to DOM ready. And the approach to the ideal state is just a few of the above-mentioned optimization principles.