Actualmente, estoy consumiendo una API de transmisión (codificación de transferencia: 'fragmentada') y uso los datos en cada fragmento para representar la interfaz de usuario cuando se recibe un nuevo fragmento. Cuando reviso la pestaña de tiempos en la llamada de red en mi navegador, TTFB es de alrededor de 300 ms, pero cuando verifico el tiempo para recibir mi primer fragmento, llega más de 3000 ms, aunque el tiempo para recibir los fragmentos posteriores es bastante menor (~ 2-3 ms ) que parece que todos los fragmentos están esperando en la cola interna. ¿Cuál podría ser el motivo de esta alta latencia para el primer fragmento o cuál es el problema en la implementación a continuación?
let requestOptions = { method: 'GET', headers, }; fetch(`api url`, requestOptions) .then(processChunkedResponse) .then(processStream) .then(onChunkedResponseComplete) .catch(onChunkedResponseError) ; function onChunkedResponseComplete(result) { console.log("streaming completed") } function onChunkedResponseError(err) { // handle error } function processChunkedResponse(response) { let reader = response.body.getReader(); return new ReadableStream({ start(controller) { function push() { reader.read().then(({ done, value }) => { if (done) { console.log('done', done); controller.close(); return; } controller.enqueue(value); console.log(done, value); push(); }) } push(); } }); } function processStream(stream) { let reader = stream.getReader(); return readChunk(); function readChunk() { return reader.read().then(appendChunks); } function appendChunks(result) { // process chunk as Uint8Array and update the UI if (result.done) { console.log('returning') return result; } else { console.log('recursing') return readChunk(); } } }