제목에 어그로가 엄청난데 진짜 별거 없습니다. 그리고 이 블러킹 현상은 브라우저에서 발생했고 보완하는 과정입니다. 정량적인 성능 개선은 전혀 아니고 오히려 성능은 떨어집니다. 하지만 사용자는 페이지 이동하는데 대기시간이 짧아질 뿐입니다.
요약하면 Promise.all()을 100개 그대로 보내지말고 현재 브라우저 에이전트의 최대 TCP 연결량 기준으로 분할합시다. Promise.all()에 그냥 반복문 한번 감싸주세요. 페이지 이동도 비동기 요청인데 Task Queue가 100개 뒤에 Enqueue될지 6개 뒤에 Enqueue할지는 시각적으로 보이는 성능 차이가 큽니다. 엄밀하게 자바스크립트에서 블러킹현상이 발생하는 것이 아닙니다. 그져 Task Queue에서 병목이 발생하고 모든 요청을 응답 받기 전까지 다른 페이지 이동에 대한 동작을 처리할 수 없게 됩니다. 반복문으로 분할 요청하면 블러킹 수준이 한참 낮아집니다.
개인적으로 주말에 다니는 스터디에서 배운 것도 약간 가미되었습니다.