I am facing issue when add extra headers to the request like 'API-Key': 'xxxxxxxxx' I noticed the request take longer time.
please see the two screenshots from chrome when perform the same request without that extra key in the header.
With the extra header key
without the extra header key
how I can kill that extra waiting time ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Calls</title>
<script>
async function fetchApi(url, headers) {
const response = await fetch(url, {
method: 'GET',
headers: headers
});
const data = await response.json();
return data;
}
async function callApis() {
const apiCalls = [
{
name: 'Random User',
url: 'https://randomuser.me/api/',
headers: {
'accept': 'application/json',
'API-Key': 'xxxxxxxxx'
}
},
];
const resultsContainer = document.getElementById('results');
resultsContainer.innerHTML = '';
for (const api of apiCalls) {
const startTime = performance.now(); // Start timing
const data = await fetchApi(api.url, api.headers);
const endTime = performance.now(); // End timing
const duration = endTime - startTime; // Calculate duration
resultsContainer.innerHTML += `<h3>${api.name}</h3><pre>${JSON.stringify(data, null, 2)}</pre><p>Duration: ${duration.toFixed(2)} ms</p>`;
}
}
// Call the APIs when the window loads
window.onload = callApis;
</script>
</head>
<body>
<h1>API Calls Results</h1>
<div id="results"></div>
</body>
</html>