how to calculate browser F12 Finish DOMContentLoaded load time?
how to calculate browser F12 Finish DOMContentLoaded load time?
first of all, you need to know the principle of browser rendering. DOMContentLoaded means that when the dom is loaded, you open a page that is blank at the beginning, and then the content will be displayed in an instant. From the blank page to the display content will trigger DOMContentLoaded
. Then the problem arises again, what is the HTML document is loaded and parsed. To solve this problem, we must understand the principle of browser rendering.
when we enter URL in the browser address, the browser will send a request to the server, and the server will send the requested HTML document back to the browser. After the browser downloads the document, it will begin to parse from top to bottom. After the parsing is completed, DOM will be generated. If there is a css, on the page, the CSSOM, will be formed according to the contents of the css, and then DOM and CSSOM will generate a render tree, and finally the browser will calculate the exact size and location of each node in the page based on the contents of the render tree and draw it on the browser. The parsing of
html will be interrupted by js again. 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 first execute the inline script. If it is outside the chain, the script will be loaded first and then executed. After processing the script, the browser continues to parse the HTML document.
so usually put the js file at the end
it is important to note that in current browsers, in order to slow down the blocking of rendering, modern browsers use guessing preloading. When parsing is blocked, the browser has a lightweight HTML (or CSS) scanner (scanner) that continues to scan the document, looking for url, of resource files that may be available in the future and downloading them before the renderer uses them.
here we can make clear the time calculated by DOMContentLoaded. When there is no script in the document, the browser can trigger the DOMContentLoaded event after parsing the document; if the document contains a script, the script will block the parsing of the document, and the script needs to wait for the css in front of the script to load before it can be executed. In any case, the trigger of DOMContentLoaded does not need to wait for other resources such as pictures to load.
reference: click here
timing starts from the first request on the page, to the end of all requests on the page, and to the completion of all the elements on the page. The time of the period is time
the browser monitors whether the request and drawing are completed
http://www.cnblogs.com/longm/.
calculation 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>
so the white screen time can be calculated as follows:
when Performance API is available
White screen time = firstPaint-performance.timing.navigationStart;
time of the first screen
usually the method of calculating the first screen is
first screen module label marking method
Statistics the time when the slowest picture is loaded in the first screen
Custom first screen content calculation method
1. First screen module label method
the first screen module tag method is usually suitable for situations where the content of the first screen does not need to pull data to survive and the page does not consider the loading of resources such as images. We will record the current timestamp in the HTML document using inline JavaScript code corresponding to the end of the tag on the first screen. 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>
when the first screen time is equal to firstScreen-performance.timing.navigationStart;
as a matter of fact, the tag marking method of the first screen module is relatively rare in the business, and most pages need to pull data through the API before they can be fully displayed, so we will use JavaScript script to determine the loading status of the first screen page content.
2. Count the time it takes for images to be loaded on the first screen
usually the slowest thing to load on the first screen is the image resource, so we will take the time when the slowest image is loaded on the first screen as the time for the first screen.
because browsers limit the number of TCP connections per page, not all images can be downloaded and displayed immediately. Therefore, after the construction of the DOM tree, we will traverse all the image tags in the first screen, listen for all image tag onload events, and finally traverse the maximum load time of the image tags, and subtract the navigationStart from this maximum value to get an approximate first screen time.
at this time, the first screen time is equal to the point in time when the slowest picture is loaded-performance.timing.navigationStart;
3. Custom module content calculation
it is complicated to calculate the time it takes for images to be loaded on the first screen. Therefore, in our business, we usually simplify the calculation of the first screen time by customizing the content of the module. As follows:
ignore the loading of resources such as pictures, and only consider the main DOM of the page.
only consider the main modules of the first screen, not all the content above the first screen line in a strict sense
Previous: How to avoid selecting objects through the upper div when using three.js raycaster
Next: Axios request API. If there are no parameters, trouble Vue partners to have a look.
what is the current level of support for vw,vh layouts in mobile browsers? ...
http: shrek.imdevsh.com demo. ask for help: the principle of inertia retardation effect in demo touchmove ...
I ve been looking for it for a long time, but I can t find it. 1. After the direct upload of web is completed, the server cannot know whether the file was uploaded successfully, who uploaded it, and the information of the file 2. Using web to dire...
for example, I request localhost:8080 a b c.cd proxy to http: www.aaaa.com api can you change a b c.cd to a b c , before proxy? means that the agent rewrites the original path before. ...
question 1. The project is a chat application, which needs to display the latest news in the chat window in real time. Using the scrollIntoView method id div for bottom, I want to put it at the bottom. As long as it can be displayed, other chat message...
var myNumber = { value: 1, add: function(i){ var helper = function(i){ console.log(this); this.value += i; } helper(i); } } myNumber.add(1); Why does this this point to window?? The add method called by the myNumber o...
Click the button to show that (Bing s daily wallpaper) is successful, and then when the background of the page changes, it takes time to render, and there will be a white background color. How to solve this? ...
1. Execute npm install-g pm2 2.pm2 pm2 start app.js pm2 3.ln -s root myapp pm2 usr local bin still failed to solve the problem messed up for a long time because no soft connection was created. ln -s root node-v8.9.0-linux-x64 lib node_...
want to use vue2.0 to develop a small web application for the company, running on the mobile side. How can the above functions be achieved? ...
vue.js implements specification selection on product details page Click to select version option and click to select color option. Highlight has been selected. How to display the selected version and color html Code < div class= "chose-ck " > : ...
ios embedded h5 page input box will not lose focus if you click on the blank space. The soft keyboard will not fold. what should I do? try to bind the click event to document. If the input box loses focus when you click, it is still invalid. ...
as shown in the figure, how to determine that the user clicked on this X, and execute the corresponding method. ...
var a = {0:"A",1:"B",2:"C",length:3}; var newa = Array.prototype.slice.call(a); console.log(newa); my understanding of this example is that the an object inherits and executes Array s slice method, but the slice method...
what s the difference between writing JavaScript code in a js file and writing code in < srcipt > < srcipt >? Why can I introduce other js files as require in the js file and do report an error in the < srcipt > tag . ...
Icon shows the red part. Choose how to write the effect in css ....
We are Mini Program s project. To get the code logged in by Wechat, request the backend api to get the sessionkey. But if it is a concurrent request, if it happens to expire at this time, and several requests go to get the sessionkey at the same time, t...
o ...
brief: because Mini Program s project uses wepy s framework, but you don t quite understand that the role of this interceptor is to integrate all the interfaces? Or? ...
win7 system, scaffolding vue-cli has been installed, there is a version, but the initialization project appears this hole, cannot verify this certificate? Please help ...
Mobile input focus cannot directly evoke the mobile phone keyboard, what is the related auxiliary operation? Simple H5 page, do not use any framework, how to automatically evoke the soft keyboard? ...