HTTP 요청

어떤 모듈을 쓸까?

fetch vs Axios vs isomorphic-fetch

오버플로우 토론
질의응답

DOM Parser

다양한 파서들
Performance
Faster than htmlparser2!

htmlparser :26.7111 ms/file ± 170.066
cheerio :24.2480 ms/file ± 17.1711
parse5 :13.7239 ms/file ± 8.68561
high5 :7.75466 ms/file ± 5.33549
htmlparser2 :5.27376 ms/file ± 8.68456
node-html-parser:2.85768 ms/file ± 2.87784

시간 측정 어떻게?

✅ 확인해보자

임의로 사이트를 정해서 페이지 로딩에 가장 영향을 주는 요소들을 일반화

• HTML, CSS, Javascript 코드길이
• 이미지 파일크기
• 동영상파일
• 브라우저캐시 이용
• 서버응답시간
• 불필요한 요소를 줄이기

시간 정보를 정밀하게 측정하기 위해서 고려한 방식

• Date 객체의 getTime 메쏘드를 이용하여 측정하려 했으나,
• performance.now 이용

✅ 다같이!

HTTP 요청을 보내서 페이지 하나를 로딩할 때까지 과정을 기술적인 용어로 설명

• 브라우저가 클라이언트에서 Request 요청을 만들어 서버에게 전달 (이때, 요청 헤더는 HTTP 버전과 상태코드로 이루어진 시작라인, 다양한 정보가 담긴 요청 헤더, 본문(가질 수도 있음)으로 이루어진 요청 메세지를 만든다)
• 서버는 클라이언의 Request를 해석하고, 요청에 해당하는 Response를 전달 (이 때에도 응답 메세지는 같은 형식으로 메세지를 만든다. 주로 메세지 본문(body)에 html 정보가 온다.
• 브라우저가 이 Response를 통해 화면을 띄우는데, 문서 다운로드 후 추가적으로 필요한 데이터(css,image,js 등)를 요청하여 함께 띄운다. (이 때 Keep-alive 이용)

로컬에 캐싱되는 경우는 개발자 도구에서 어떻게 표시되는 지 확인하고 구현한 방식과 차이점

• cache-control: public, max-age=31536000 등으로 캐시 유효기간을 정해서 초과하면 데이터를 다시 요청하고 그렇지 않으면 다시 받아오지 않는다.
  cf-cache-status: HIT

• 내 방식은 모든 경우 데이터를 받아온다.

추가 학습이 필요한 부분

🥕 응답 대기 시간과 다운로드 시간을 구현하지 못했다.

🥕 응답시 chunk들의 갯수를 세어주지 못했다.

🥕 비동기 처리를 잘 다루지 못했다.

😂 느낀점

방심하지 말자. 비동기처리를 제대로 이해하자. 그리고 괜히 이상한 데에 꽂히지 말자 ㅠㅠ 주말에 이 부분 확실히 이해하고 넘어가자!