I have a webpage which is divided in two parts:
- Backend, in PHP 7, LAMP stack. This is just a REST API. No front end templating, only API endpoints
- Frontend, in Angular 9.
Both are in the same server, and the API is on a subdomain of the front end domain.
In the backend, there is an endpoint logged-in, which I know for a fact it runs under 50ms when using a REST API client. In fact, even 5 times less than that.
I added a Server-Timing header to the response to keep track of the execution times. That time measurement starts counting from the first line of the PHP front end controller (my index.php in the backend public folder), and stops counting just the line before the response is sent. As far as I can see, that timing matches my observations when using a REST client.
The payload of that response is miniscule, just a JSON object less than 100 bytes.
I had build the front end using Production parameters. No Angular built in server is running. No --watch flag passed.
The problem though is that when that API endpoint is requested from the front end, it seems to take too long. If I switch to the timings tab for the same request in the DEV console, I see this:
So, it begs the question. How a 10 ms request becomes a massive 800 ms in the browser? Where that waiting period comes from? Certainly not from transferring the payload.
I am using the HttpClient library from @angular/common/http. It just occurred to me that perhaps it is not too efficient...
...but granted, the REST client only executes one request, whereas the Angular HTTP client has to execute all the requests of that page (there aren't that many BTW, four in total, of which two are OPTIONS type, another GET and this one). But then, the timings are misleading. The browser is not waiting for the server almost 800 ms, as the request itself took much less to be served.
