Why does the browser wait for the page to load?

Question

Can someone explain to me why these gaps (marked?) Exist? They delay page loading. I thought it might be page parsing / script, but ~ 350 ms looks too much for a simple page; Ok, there is a lot of script, but it still looks a lot.

What could it be?

Answer 1

I assume this is a JavaScript loading issue. You should delay JavaScript loading using the defer attribute. This will allow the page to load before it executes the JavaScript code.

This is because browsers are single-threaded, and when they encounter a script tag, they stop any other processes until they load and parse the script. By including scripts at the end, you allow the browser to load and display all page elements, style sheets and images without any unnecessary delay. In addition, if the browser displays the page before executing any script, you know that all elements of the page are already available for extraction.

See http://www.hunlock.com/blogs/Deferred_Javascript and http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/

Answer 2

Is your CSS in the header section?

Otherwise, your browser may wait quite a while before trying to load resources.

The second hunch is that your JavaScript blocks the page from loading for any reason. Are there any manipulations with the DOM right after boot? Also, is your JavaScript at the bottom of your page, last loaded? Otherwise, it may lead to blocking the download.