Why are HTTP requests getting stuck on pending in Chrome?

Why are HTTP requests getting stuck on pending in Chrome?

Language/Tool versions:

@angular/cli: 1.2.0
PHP 7.0.8
Zend Expressive 2
Apache 2.4.23
Chrome 65.0.3325.181
Windows 7

Issue:
I have an Angular2 application which uses a PHP application as an API for all the XHR requests. The application works fine but when the Use a prediction service to load pages more quickly option is enabled in Chrome, and when the application is reloaded HTTP requests sent inside ngOnInit() of the component gets stuck for very long. Either the request will resolve itself after 10s-2-3mins, etc or the request(s) will also resolve if I send another request(for example, a request upon a click event on the DOM)
Things I tried:

I went through multiple posts (such as 1, 2, 3, etc) with a similar problem but none were very
useful, I read that this could happen if I have multiple numbers of HTTP requests. In my case, I tried isolating the requests and now I am sending only one request upon initialization of the component. Even one single request gets stuck. My console will show a failed GET request and then keeps waiting, upon resolution, there will be a successful OPTIONS request and then a successful GET.
I was not sure if this is a problem with my frontend Angular
application or the backend PHP application, so upon initialization
of the component, I called a random API endpoint:
http://api.randomuser.me/ rather than requesting my API endpoint.
In this case, the request succeeds without any delay(although it
shows CORS errors). So I think the problem resides in either my
backend API or the Apache web server.
I tried to see if something is causing the delay in the API, but the application’s entry point itself is not hit until the request is successful from the browser.

Related:  jQuery focus not working in Chrome

I would also like to share my virtual host configuration. If you find any problems there:

ServerName someName.api
DocumentRoot path_to_public_dir
SetEnv APPLICATION_ENV development

SetEnvIf Origin “http(s)?://(www\.)?(local\.)?(localhost:4200|someDomain.com)$” AccessControlAllowOrigin=$0
Header always set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} –d
RewriteRule ^.*$ – [NC,L]
RewriteRule ^.*$ index.php [NC,L]
Options -Indexes +MultiViews +FollowSymLinks
AllowOverride none
Order Allow,Deny
Allow from all

Please note:

I have also tried with setting the Access-Control-Allow-Origin
header inside the application itself, but still no luck.
The application works just fine on Mozilla or on Chrome when the
prediction service is not enabled

Your suggestions/answers on to what all could be the possible causes for such a behavior would be really helpful.

Solutions/Answers:

Solution 1:

Well, I think, doing the following has removed the lag from my machine.

Before the solution, here are my assumptions:

  1. Chrome is doing parallel requests whenever “Prediction service to
    load pages quickly is enabled”
  2. My Apache web server was not handling those parallel requests.

Solution:

  1. I included the mpm modules file for apache. You can find the
    below line in httpd.conf file:

    #Include conf/extra/httpd-mpm.conf and uncomment it.

    Windows uses the mpm_winnt_module for mpm.

    This Multi-Processing Module (MPM) is the default for the Windows NT operating systems. It uses a single control process which
    launches a single child process which in turn creates threads to
    handle requests

  2. Find the lines below and uncomment them:

    EnableMMAP off        
    EnableSendfile on
    
    AcceptFilter http none
    AcceptFilter https none
    
    #Extra Notes
    #mmap is memory map by apache, don't know I have uncommented this, had read about
    this somewhere, but anyway its Off so should not be a Burden on OS
    #EnableSendFile:Delivering static files? This link may help:
    https://groups.drupal.org/node/68333
    #AcceptFilter: windows mpm module, suggests to keep it as none. 
    I went through this : https://httpd.apache.org/docs/2.4/mod/core.html
    and have set AcceptFilter http/https as "connect", it works fine for me. 
    Please note: I am using Apache 2.4.23
    
  3. Restart your apache
Related:  canvas default size

That’s it!

I am leaving this question as unaccepted because:

  1. I don’t know if what I did is right.
  2. Although I enabled the winnt module, I couldn’t find the module
    file anywhere in my apache directory, although changes in the
    ThreadsPerChild is reflected, I guess apache doesn’t need an
    external winnt module.
  3. Although I can observe that the page load speed has increased and
    requests are not getting stuck anymore, I can still see interleaved
    failed and finshed requests for every request in my chrome
    console.

Your answers will be really valuable and make things more clear.

Solution 2:

This issue occurs due to your slow internet speed..
When onInit() calls it loades all the webservices & wait for the completion of first webservice .when execution of first service is over then second service will start executing but still it was in Pending state hence it shows you ‘Pending’ in status column of Network

References