JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

    <strong>Finished script</strong>
    <p id="script">Waiting...</p>

    <strong>DOMContentLoaded</strong>
    <p id="dom">Waiting...</p>

    <strong>window.onload</strong>
    <p id="window">Waiting...</p>

    <strong>XHR complete</strong>
    <p id="get">Waiting...</p>

    <script>
        {
            let testURL = 'https://www.google.com/search?client=firefox-b-1-ab&ei=I-8WW87eBvCc5wL_hq6oCQ&q=what+are+dogs%3F&oq=what+are+dogs%3F&gs_l=psy-ab.3..0j0i20i264k1l2j0l7.4526.4889.0.5503.4.4.0.0.0.0.194.325.0j2.2.0....0...1c.1.64.psy-ab..2.2.325...0i7i30k1.0.DOTBXIfWjMk',
            xhr = new XMLHttpRequest();

            const setTime = id => {
                let d = new Date()
                document.getElementById( id ).innerHTML = `${ d.getHours() }:${ d.getMinutes() }:<strong>${ d.getSeconds() }:${ d.getMilliseconds() }</strong>`;
            };

            window.onload = () => setTime( 'window' );

            document.addEventListener( 'DOMContentLoaded', () => {
                setTime( 'dom' );
            });

            xhr.open( 'get', testURL, true );
            xhr.onreadystatechange = () => {
                if( xhr.readyState == 4 ) setTime( 'get' );
            };
            xhr.send();
               
            setTime( 'script' );

        }
    </script>

</body>
</html>