IT/web35 [html] dns-prefetch 개념리소스 요청 하기 전에 도메인 정보를 분석하는것을 시도한다. 왜 쓰는가?브라우저가 제 3자 서버로부터 리소스를 요청 할때, DNS resolution을 해야한다. (cross-domain의 domain을 ip로 변환).DNS resolution 과정은 엄청난 지연시간을 초래한다. Best Practicesdns-prefetch 는 cross-origin domain에서만 사용해야한다. 같은 도메인을 사용 하면안되. 왜냐면 이미 같은 도메인의 ip는 이미 resolve된 상태preconnect와 같이 쓰면 좋다. dns-prefetch는 DNS lookup만 수행하지만, preconnect는 해당 서버와 커넥션을 만든다. (너무 많은 도메인에 connection을 생성하면, 역효과가 나올 수 있다. 제.. 2024. 6. 19. [web] image lazy loading 기법 https://imagekit.io/blog/lazy-loading-images-complete-guide/ 글을 요약했다. 100% 이해하려면 해당 글을 정독하길 바란다. 방법1data-src 속성에 이미지 url를 넣고 viewport에 진입 시 data-src 속성을 src속성에 추가 viewport 진입을 어떻게 판단하나?1) scroll, resize, orientationChange 이벤트를 받아 처리2) intersection observer api를 이용해서 처리이벤트 처리 demo: https://codepen.io/daewoong-kim/pen/eYapggvintersection observer demo: https://codepen.io/daewoong-kim/pen/pomjRPb 방.. 2024. 5. 16. [http] vary header로 dynamic cache 다루기 HTTP Vary 역할HTTP Vary 헤더는 캐시 결정을 내릴 때 고려해야 할 요청 헤더를 지정합니다. 이 헤더는 캐시 서버나 브라우저에게 응답이 특정 요청 헤더의 값에 따라 달라질 수 있음을 알려주고, 같은 URL 요청이라도 다른 Vary 헤더를 포함하는 요청에 대해서는 별도의 캐시를 유지해야 함을 나타냅니다. 예를 들어, Accept-Encoding이나 User-Agent를 기반으로 다른 응답을 제공할 경우, 이를 Vary 헤더에 포함시켜 적절한 캐싱을 수행할 수 있습니다. Vary 헤더의 작동 방식서버는 응답과 함께 Vary 헤더를 전송하며, 이 헤더는 어떤 요청 헤더가 응답의 선택에 영향을 미쳤는지 명시합니다.캐시(브라우저 캐시, 프록시 서버 등)는 Vary 헤더에 지정된 요청 헤더와 해당 값이.. 2024. 5. 14. [http] cache-control: max-age max-age에 대해 많은 곳에서 잘 설명해주고 있다. 하지만 실제 테스트해서 눈으로 확인이켜주는 곳은 많이 없다. 직접 http header를 다뤄보고 내것으로 만들려고 한다.상황 1응답에 cache-control:public,max-age=0 그리고 last-modified: Tue, 14 May 2024 02:37:45 GMT 둘 다 있을 경우 케쉬가 되어서 이유를 살펴보았다. Cache-Control: public, max-age=0 - public: 공용캐시 (프록시 서버)에 저장될 수 있다. - max-age=0 캐시된 응답이 생성된 직후에 만료됨을 의미. 캐시는 유효하지만, 사용하기전에 반드시 유효여부를 판단 후 사용해야 한다. Last-Modified - 마지막으로 수정된 날짜와 시간을 의.. 2024. 5. 14. [http] no-store, no-cache Cache-Control: no-store이 지시어는 캐시가 전혀 이루어지지 않도록 합니다. 즉, 서버의 응답은 어떤 형태로든 저장되거나 캐시되어서는 안 됩니다. 이는 매우 민감한 데이터를 다룰 때 사용됩니다. router.get('/no-store', (req, res) => { // Cache-Control: no-store 지시어로 설정하여 캐시 저장을 전면 금지 res.setHeader('Cache-Control', 'no-store'); res.send('This response cannot be stored in any cache.');}); Cache-Control: no-cache이 지시어는 응답이 저장되는 것은 허용하지만, 재사용하기 전에 서버에 검증을 요청해야 합니다. 서버는 요.. 2024. 5. 13. [http] If-Modified-Since, If-None-Match 개념캐시된 데이터를 사용해도 되는지 확인 하는 작업 어떻게?서버에 재검사 요청을 보내고, 서버는 캐시를 써도 되면 304 Not Modified로 응답, 캐시를 쓰면 안될 경우 200 OK 와 함께 새로운 값 반환 (서버에 요청을 보내야 하니 느리다.) If-Modified-Since, GET 요청에 이 해더를 추가하면 캐시된 시간 이후에 변경된 경우에만 사본을 보낸다. 응답에 Last-Modifed와 같이 쓰일 수 있다. 응답에서 최근 변경된 날짜를 내려주면 해당 값으로 만료여부를 판단 할 수 있다.시간단위로 검사하다보니 특정상황에서는 이 방법이 적절하지 않다. - 1초 미만으로 캐쉬할 경우 (요청 응답 딜레이로 적절히 캐쉬가 안됨) - 클라이언트나 서버가 시간 계산을 정확히 못할 경우 (GMT를 로컬.. 2024. 5. 13. 이전 1 2 3 4 5 6 다음
