DOMContentLoaded not firing in chrome, document.readyState stuck on loading status

Question

Working on a complex page with many scripts loaded. Only in Chrome, apparently at random, the DOMContentLoaded event doesn't fire and document.readyState remains on "loading"

How can I determine what causes the browser to be stuck on this condition?

The strange things is the assets (js) at the end of the document get loaded but do not appear on the elements tab.

Answer 1

got same problem last days, including loaded but not executed script from bottom of document. Deep research has shown that reason was in less processing on client side. Have changed order of scripts/less file and it helped. So far no hangs. I've put scripts/less in following order:

1) all scripts

2) .less style file

3) less.js script file

So working order of scripts is:

<script src="/resources/js/jquery.simple-dtpicker.js" type="text/javascript"></script>
<script src="/resources/js/jquery.inputmask.bundle.js" type="text/javascript"></script>
<script src="/resources/js/inputmask/phone-codes/phone.js" type="text/javascript"></script>
<script src="/resources/js/selectize.js" type="text/javascript"></script>

<link rel="stylesheet/less" type="text/css" href="/resources/css/style_nauka.less"/>

<script src="/resources/js/less.min.js" type="text/javascript"></script>

Still testing it, will update if catch anything.