undefinedfix
Sign in

How to calculate the load time of F12 finish domcontentloaded browser?

vbdur edited in Mon, 29 Nov 2021

How to calculate the load time of F12 finish domcontentloaded browser?

4 Replies
ghmkp
commented on Mon, 29 Nov 2021

http://www.cnblogs.com/longm/... Calculate white screen time

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>白屏</title>
  <script type="text/javascript">
    // 不兼容performance.timing 的浏览器,如IE8
    window.pageStartTime = Date.now();
  </script>
  <!-- 页面 CSS 资源 -->
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script type="text/javascript">
    // 白屏时间结束点
    window.firstPaint = Date.now();
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

Therefore, the white screen time can be calculated as follows:

When performance API is available

White screen time = firstpaint- performance.timing.navigationStart ;

There are several ways to calculate the first screen time

First screen module label marking method counts the time of loading the slowest picture in the first screen, and defines the first screen content calculation method

1. First screen module label marking method

The first screen module label marking method is usually applicable to the situation that the first screen content does not need to pull data to survive and the page does not consider the loading of resources such as pictures. We will use inline JavaScript code to record the current timestamp at the end of the tag corresponding to the first screen content in the HTML document. As follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首屏</title>
  <script type="text/javascript">
    window.pageStartTime = Date.now();
  </script>
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
</head>
<body>
  <!-- 首屏可见模块1 -->
  <div class="module-1"></div>
  <!-- 首屏可见模块2 -->
  <div class="module-2"></div>
  <script type="text/javascript">
    window.firstScreen = Date.now();
  </script>
  <!-- 首屏不可见模块3 -->
  <div class="module-3"></div>
    <!-- 首屏不可见模块4 -->
  <div class="module-4"></div>
</body>
</html>

The first screen time is equal to firstscreen- performance.timing.navigationStart ;

In fact, the first screen module tag marking method is rarely used in business. Most pages need to pull data through the interface to display completely. Therefore, we will use JavaScript scripts to judge the loading of the first screen page content.

2. Count the loading time of pictures in the first screen

Usually, the slowest loading time of the first screen content is the image resource, so we take the time of loading the slowest image in the first screen as the first screen time.

Because the browser has a limit on the number of TCP connections per page, not all images can be downloaded and displayed immediately. Therefore, after the DOM tree is constructed, we will traverse all the picture tags in the first screen, and listen to the onload event of all the picture tags. Finally, we will traverse the maximum loading time of the picture tags, and subtract the navigationstart from the maximum to obtain the approximate first screen time.

At this time, the first screen time is equal to the time point of loading the slowest picture- performance.timing.navigationStart ;

3. Calculation method of user defined module content

Due to the complexity of calculating the loading time of images in the first screen. Therefore, we usually simplify the calculation of the first screen time by customizing the module content in the business. As follows:

Ignore the loading of resources such as pictures, only consider the main dom of the page, only consider the main modules of the first screen, not all the contents above the first screen line in the strict sense

CWMjr
commented on Mon, 29 Nov 2021

There are

MrBadonkadonk
commented on Mon, 29 Nov 2021

First of all, you need to know the principle of browser rendering. Domcontentloaded means that the DOM has been loaded. When you open a web page, it will be blank at first, and then the content will be displayed in a flash. From the blank page to the displayed content, domcontentloaded will be triggered. At this time, the problem comes again, what is the HTML document loaded and parsed. To solve this problem, we must understand the principle of browser rendering.

When we enter the URL in the browser address, the browser will send the request to the server, and the server will send the requested HTML document back to the browser. After the browser downloads the document, it begins to parse from top to bottom. After parsing, DOM will be generated. If there is CSS in the page, cssom will be formed according to the content of CSS, and then Dom and cssom will generate a rendering tree. Finally, the browser will calculate the exact size and position of each node in the page according to the content of the rendering tree, and draw it on the browser. The parsing of HTML will be interrupted by JS. When the < script > tag is encountered in the parsing process, the parsing process will be stopped and the script will be processed instead. If the script is inline, the browser will execute the inline script first. If it is out of the chain, it will load the script first and then execute it. After processing the script, the browser continues to parse the HTML document. So the general JS file is put at the end. Here we need to pay attention to a point. In the current browser, in order to slow down the blocking of rendering, modern browsers use guess preloading. When parsing is blocked, the browser will have a lightweight HTML (or CSS) scanner to continue scanning in the document to find the URLs of resource files that may be used in the future, and download them before the render uses them.

Here we can specify the time of domcontentloaded calculation. When there is no script in the document, the browser can trigger the domcontentloaded event after parsing the document. If the document contains script, the script will block the parsing of the document, and the script can only be executed after the CSS in front of the script is loaded. In the case of waiting for other resources such as domdeload to complete, there is no need to trigger.

Reference: click here

kcomf
commented on Mon, 29 Nov 2021

The timing starts from the first request of the page, ends with all requests of the page, and completes the drawing of all elements of the page. The period of time is time

The browser monitors whether the request and drawing are complete

lock This question has been locked and the reply function has been disabled.