반응형 Browser3 브라우저 캐시 캐시는 브라우저에서 서버에 최초 요청 이후 로딩을 더 빠르게 하기 위한 장점이 있다. 그러나 요청에 의해 캐시가 저장되면 이후 변경 내용이 있어도, 사용자 브러우저의 캐시에 의해 캐시를 지우기 전까지 변경 내용의 수정이 일어나지 않을 수 있다. 우리는 header의 cache-control 태그를 이용해 max-age 속성으로 캐시의 수명을 지정할 수 있다. 말만 들으면 max-age=60 으로 설정해놓으면 60초 동안 캐싱된 데이터를 사용하고, 그 이후는 캐싱된 데이터를 사용하지 않고 새 응답을 받는 것 같다. (200을 받을 것같으나) 하지만 이것은 명확한 캐시 수명이 아니다. 60초 이후에도 브라우저는 캐싱된 데이터를 확인하며 캐싱된 데이터가 있다면 304 Not Modified 응답을 준다. 결국.. 2024. 4. 15. 브라우저 대기 시간 Latency 정의 하나의 데이터 패킷이 출발지에서 도착지까지 가는 데 걸리는 시간 대기 시간은 첫 번째 패킷을 받아올 때는 긴 편이다. 첫 번째 패킷의 크기가 14kb로 정해져 있다하더라도 DNS 조회, TLS handshake, TCP negotiation 과정을 거친 후 요청한 패킷을 받아오기 때문이다. 이후에는 이미 네트워크가 연결 되었으니 이러한 과정은 생략된다. 대기시간 측정 방법 브라우저가 자원 요청을 보내는 시간 또는 브라우저가 요청을 보내고, 다시 응답오는 왕복 시간을 측정한다. Network latency 브라우저 요청→ 서버 응답 → 브라우저 해당 자원의 흐름 대기시간 Disk latency 서버 응답 → 브라우저 해당 자원의 흐름 대기시간 브라우저를 이용해서 다양한 네트워크 상태에서 테스트를 할 .. 2024. 4. 15. 브라우저 렌더링 과정, 그만 검색하고 외우자 (feat.MDN) 웹 성능 성능에 관련한 요인 지연시간 브라우저는 대부분 single thread로 동작하는 것 지연시간 빠른 Load를 위해서는 빠르게 요청하는 것도 중요하다. 네트워크 지연시간을 줄여서 리소스를 빠르게 요청하고, 웹 최적화를 통해 페이지 로드를 빠르게 한다. 네트워크 지연시간 네트워크를 통해 컴퓨터로 바이트를 전송하는데 걸리는 시간 웹 최적화 페이지 로드가 최대한 빠르게 이루어지도록 하는 것 브라우저는 single thread 유저는 브라우저 내에서 수많은 상호작용을 시도하고, 브라우저는 이에 맞게 반응을 제공해야 한다. main thread가 요청된 작업을 수행하며 유저의 상호작용에 반응하기 위해서는 렌더링 시간이 중요하다. 브라우저가 singel thread인 것을 미뤄보아 main thread에 .. 2024. 4. 15. 이전 1 다음 728x90 반응형
