Menu
I've spend evenings on tuning my backend code to be served faster, yet there's a gap in page loading time that am not familiar with.
Attached an image - please tell me what is happening in highlighted time (between recieving HTML and DOM ready).
What I think it is - maybe it's DOM intself generating? But why so long? Theres like 10 HTML tags in this testing page.
That's my markup:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>#</title>
<meta name="keywords" content="a, b">
<meta name="description" content="cde">
<meta name="geo.region" content="PL">
<meta name="geo.placename" content="Warszawa">
<meta name="geo.position" content="52;21">
<meta name="ICBM" content="52, 21">
<link rel="stylesheet" href="/Css/_global/Style.css">
<!--link rel="shortcut icon" href="/Gfx/_global/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/Gfx/_global/favicon.gif" type="image/x-icon"-->
</head>
<body>
<ul id="bredcrumbs"><li>domain.com</li><li>Home Page</li></ul>
Content
</body>
</html>
545
When one says that the DOM is ready, it means that your entire document has loaded and parsed. You can use the below JS code to check for DOM ready. So if you have some JavaScript code that needs to access the DOM structure to change the properties of some HTML object, you need to wait till the DOM has been loaded completely.
So if you have some JavaScript code that needs to access the DOM structure to change the properties of some HTML object, you need to wait till the DOM has been loaded completely. If your JS script is at the very end of the page, just before the </body>, you dont have to check for DOM ready, as DOM is guaranteed to be fully loaded by then.
The HTML DOM is an API (Programming Interface) for JavaScript: JavaScript can add/change/remove HTML elements JavaScript can add/change/remove HTML attributes JavaScript can add/change/remove CSS styles
It occurs before the page has been fully rendered (as external resources may have not yet fully downloaded - including images, CSS, JavaScript and any other linked resources). The actual event is called DOMContentLoaded. Show activity on this post. DOMready means: The DOM structure has been built in browser memory.
The browser is parsing the dom (as warlock notes) but some javascript may run during this process as well. (See JavaScript: DOM load events, execution sequence, and $(document).ready())
As you have seen some browser plugins can essentially inject some scripts which run pre-dom load which may show up in your load times.
159
The Browser is parsing HTML and creating DOM
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
