23

I am writing an app that includes about 12 short JS files in the <head> section (I know, I should merge them and move them just before the end of <body>; would get to those when in production)

The trouble is that when I try to load the app in Chrome, Some files load immediately while some never finish loading at all! Chrome keeps trying to load the 12 JS files and never renders the page until I hit "Stop".

When I hit stop, the HTML is rendered and the JS files fail as in the image below:

JS Load errors

Note that different JS files fail on each attempt! It's not the same file that gets stuck every time!

Inspecting the headers of the failed files shows "Caution: request is not finished yet". The files are stuck in "Receiving" sometimes for many minutes!

enter image description here

Now here's the fun part, after hitting stop, if I focus on the omnibar and press enter, all the JS files load instantly and the application works fine!

On the server side, I am using Apache, PHP and MySQL. Have I misconfigured something in Apache?

STATUS after 2 gruelling days: zilch, nothing, nada, this is driving me nuts. I have tried running the code from different machines, have tried changing apache cache settings and changed myriad things in javascript but nothing has worked. The worst thing is that no one can pin point where the problem is!

KJ Saxena
  • 21,452
  • 24
  • 81
  • 109
  • Try turning off some of your chrome extensions. Adblock has been known to interfere with development. – evolutionxbox Sep 15 '14 at 13:26
  • All extensions are blocked. Hasn't any one faced something like this before? And why the down vote? I am yet to find a solution anywhere! – KJ Saxena Sep 16 '14 at 09:57
  • Have you tried hosting the files elsewhere? Maybe there's some sort of mime-type issue? (I didn't down vote). – evolutionxbox Sep 16 '14 at 14:14
  • I didn't understand what you meant by mime-type issue. Could you please elaborate? – KJ Saxena Sep 17 '14 at 12:01
  • Wow! everyone is so opinionated that this is BAD question but no one has an answer! – KJ Saxena Sep 17 '14 at 12:02
  • @KshitijSaxena-KJ- Can you show the HTML part where the JS script are added ? (Well, the `` content) – Clément Malet Sep 17 '14 at 12:20
  • Sorry @KshitijSaxena-KJ-. The problem you're having is unlikely to be related to file mime-types. I would assume that the problem is server side, especially if you have no trouble accessing other websites. Also, I have no idea why people are down-voting the question... – evolutionxbox Sep 17 '14 at 16:13
  • Why do you include them in your head and not before the end body-tag as you said you would in production? Does it happen then too? – Birgit Martinelle Sep 17 '14 at 19:06
  • 1
    3.5 min to load minified jquery - something is really wrong here. Do you experience that problems only in Chrome? What happens in Firefox? – bancer Sep 17 '14 at 19:54
  • Have you tried on another browser like Safari or Moz? – dmo Sep 21 '14 at 00:51
  • 1
    Have you tried commenting out or deleting each include, reload and see if you get the same problem – dmo Sep 21 '14 at 00:53

7 Answers7

19

One possibility is that you have Keep-Alive enabled and it is not working properly. I've seen this before. The browser establishes it's maximum number of connections to your server (typically 6) to download the first few files (CSS, JS etc.) then those connections are not released until they time out. My symptoms were not quite the same as yours - the timeout was 20 seconds and everything would load in batches of 6 after that - but this could still be the cause.

In your Apache configuration (httpd.conf on most systems), look for the KeepAlive line (or add it if it's missing) and set it to Off.

Dave Morrissey
  • 4,371
  • 1
  • 23
  • 31
  • 3
    Can you elaborate on "keep-alive" not working properly? How would it cause the issue? I'm having the same problem with IIS. – roman m Aug 31 '17 at 17:16
7

More than an answer, here's how I would troubleshoot the problem.

One of the things I'd try is commenting out tags one at a time and reload, to see where the threshold is. Also, because this is probably a server configuration problem, I'd restart it after each try, to have a clean slate, so to speak, i.e., no state preserved between tries.

I'd try to get more hints by trying to make the requests for the various Javascripts from a script in your favourite language. Ideally, I'd try GETting the scripts one by one (say with curl) waiting a few milliseconds between requests. I imagine I'd hit a threshold here as well. Like, getting one script per second works, but when requests get too close, the server gets stuck.

If still no clue, I'd use tcpdump to watch the traffic between the browser and the server. Okay, this may be a little too low level!

But perhaps I'd use netstat to see how many connections the browser opens in parallel to the server to fetch the resources, and see if we hit a concurrency limit.

I'm sorry this is a solution but I hope you get some ideas, and I'd be very curious to know what your problem is, in the end!

nicolagi
  • 1,289
  • 13
  • 18
5

We got exactly the same message "Caution: request is not finished yet" after a request in the browser.

The request itself was in the order of 15 MB of JSON, which was fed into an Angular 1 application. This request took about 2 seconds. Right after the request was finished, the Angular digest cycle blocked the browser for more than 12 seconds (this is visible by profiling during the request). During that time Chrome showed this "Caution: request is not finished yet" message in request whilst it actually was already finished.

Jos de Jong
  • 6,602
  • 3
  • 38
  • 58
  • Hey, can you elaborate on "profiling during the request"? I think I have the same issue but I want to make sure of it – Chagai Friedlander May 11 '20 at 13:33
  • 1
    Hm it has been a while. I think it was like: start the profiler of your browser, then load the page, and stop the profiler after the request is finished and the application is rendered. – Jos de Jong May 12 '20 at 15:59
3

Check the Content-Length header. Server may pass incorrect value - greather than actual content length.

Viacheslav Gostiukhin
  • 301
  • 1
  • 3
  • 15
1

Try to emulate problem in https://www.stevesouders.com/cuzillion/ It should say you side of problem - chrome or server

Kondrat Shmoylov
  • 27
  • 3
0

There are several good answers, but if you want a foolproof method of doing this, you can use PHP to send all the scripts at once. If the problem is truly too many connections to the server, you could add some html code like this:

<script type="text/javascript" src="scripts/scripts.php />

And then in scripts.php you use the include() function to include all of the JavaScript files like so:

<?php
header(''); // control all your headers
include('jquery-1.9.1.min.js');
// rest of scripts
?>

If nothing else works and the problem is excessive connections, this should work.

Ramsay Smith
  • 1,098
  • 13
  • 30
0

I had a linux+nginx+nodejs stack running where pages would get stuck and not fully load perhaps every 1/20 page loads or so. Adding HTTPS fixed it for me.

NOTE: Encountered on Chrome on Android

I hope this helps someone using HTTP during development like I was!

Tom
  • 471
  • 3
  • 11