1

I'm trying to understand what's going on between the HTML page load and the request of a deferred external resource through Javascript.

Tested on local (no DNS lookup required)

enter image description here

Why it seems like the browser is wasting "a lot of time" without doing anything?

My page is empty. It only contains the HTML, HEAD and BODY skeleton and the required Javascript code to call jQuery after page load:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  Demo

  <script type="text/javascript">
    function downloadJSAtOnload(){
      var b = document.getElementsByTagName('body')[0];
      var s = document.createElement("script"); s.async = true;
      s.src = "jquery.min.js"
      b.appendChild(s);
    }

    if (window.addEventListener){
      window.addEventListener("load", downloadJSAtOnload, false);
    }else if (window.attachEvent){
      window.attachEvent("onload", downloadJSAtOnload);
    }else{
      window.onload = downloadJSAtOnload;
    }
  </script>
</body>
</html>

Is it because the onload event takes some time to get triggered?

Improve this question
3
  • I couldn't replicate this, it was only stalled for 2ms rather than your 200+, using Chrome 63.0.3239.132 Win10 64-bit Pro, is it a local web server or are you just using the html file within your browser directly?
    – Nick is tired
    Commented Jan 6, 2018 at 19:46
  • Within my browser. I do not always get such a big difference between them, but there's always some difference with a blank space.
    – Alvaro
    Commented Jan 6, 2018 at 20:02
  • 1
    IIRC that red line you're seeing it the onload event, so yes that took some 250ms after the html page was requested. Why it took that long I cannot tell.
    – Bergi
    Commented Jan 6, 2018 at 20:09

1 Answer 1

Reset to default
1

I can't reproduce it, but here are some ways to investigate further.

Load Performance Recording

Record page load performance. Line up the Network chart with the Main chart to map network requests to main thread activity. Maybe the CPU is maxed out doing some work (a Chrome extension, perhaps), which is delaying the load event. See Analyzing Runtime Performance to get familiar with the UI (that tutorial covers runtime perf, but the load perf UI is the same).

Real User Monitoring metrics

Instrument the code using the User Timing API or Navigating Timing attributes to further measure when the script starts running, when the load event listener fires, etc.

Let me know if these help!

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.