Development Tip

CSS 파일의 브라우저 캐싱

yourdevel 2020. 11. 27. 21:31
반응형

CSS 파일의 브라우저 캐싱


CSS 및 브라우저에 관한 빠른 질문입니다. 그래서 검색을 시도하고 비슷한 게시물을 찾았지만 확실한 것은 없습니다.

웹 프로젝트에서 하나 또는 두 개의 CSS 파일을 사용합니다. 이것들은 내 웹 페이지의 HEAD에서 참조됩니다. 내 페이지 중 하나에 도달하면 CSS가 캐시되어 각 요청과 함께 다시 다운로드되지 않습니까? 나는 희망한다. IE, Firefox 및 Safari는 이것을 다르게 처리합니까? 브라우저가 닫혀있는 경우 새 브라우저 인스턴스가 열릴 때 처음 방문 할 때 CSS가 새로 고쳐 집니까?


귀하의 파일이됩니다 아마 캐시 -하지만 따라 ...

브라우저마다 동작이 약간 다릅니다. 서버에서 나오는 모호하거나 제한된 캐싱 헤더를 처리 할 때 가장 두드러집니다. 명확한 신호를 보내면 브라우저는 거의 모든 시간을 따릅니다.

지금까지 가장 큰 차이는 다른 웹 서버와 애플리케이션 서버의 기본 캐싱 구성에 있습니다.

일부 (예 : Apache)는 HTTP 헤더가있는 알려진 정적 파일 유형을 제공하여 브라우저가 캐시하도록 권장하는 반면 다른 서버는 no-cache파일 유형에 관계없이 모든 응답과 함께 명령을 보낼 수 있습니다 .

...

따라서 먼저 훌륭한 HTTP 캐싱 자습서를 읽어보십시오 . 콘텐츠 게시자를위한 HTTP 캐싱 및 캐시 버스 팅 은 저에게 정말 눈을 뜨게했습니다. :-)

다음으로 FirebugLive HTTP Headers 추가 기능을 설치하고 조작 하여 서버가 실제로 보내는 헤더를 찾습니다.

그런 다음 웹 서버 문서를 읽고 완벽하게 조정하는 방법을 찾으십시오 (또는 시스템 관리자에게이를 수행하도록 요청하십시오).

...

브라우저를 다시 시작하면 어떤 일이 발생하는지는 브라우저와 사용자 구성에 따라 다릅니다.

경험상 브라우저는 다시 시작할 때마다 서버에 체크인하여 변경된 사항이 있는지 확인합니다 ( If-Last-ModifiedIf-None-Match 참조 ).

서버를 올바르게 구성하면 매우 짧은 304 Not Modified (대역폭이 매우 적음) 를 반환 할 수 있어야하며 그 후에는 브라우저가 정상적으로 캐시를 사용합니다.


질문의 첫 번째 부분에 대해-예, 브라우저는 CSS 파일을 캐시합니다 (브라우저 구성에 의해 비활성화되지 않은 경우). 많은 브라우저에는 캐시없이 페이지를 다시로드하는 키 조합이 있습니다. CSS를 변경하고 브라우저가 다음 번에 캐싱없이 파일을 다시로드 할 때 기다리는 대신 사용자가 즉시 볼 수 있도록하려면 다음과 같이 URL에 몇 가지 매개 변수를 추가하여 CSS ir가 제공되는 방식을 변경할 수 있습니다.

/style.css?modified=20012009

href에 캐시 버스 팅 항목을 추가하지 않는 한 이전 답변 상태로 CSS 파일과 함께 보낸 HTTP 헤더에 의존합니다. 예 :

<link href="/stylesheets/mycss.css?some_var_to_bust_cache=24312345" rel="stylesheet" type="text/css" />

일부 프레임 워크 (예 : 레일)는 기본적으로 이러한 기능을 제공합니다.

그러나 firebug 또는 fiddler 와 같은 것을 얻으면 각 요청에서 브라우저가 다운로드하는 것을 정확히 볼 수 있습니다. 이는 브라우저 수행 해야하는 작업이 아니라 브라우저 수행중인 작업 을 찾는 데 특히 유용합니다 .

모든 브라우저 캐시 헤더를 무시하도록 구성하지 않는 한 동일한 방식으로 존중 해야 합니다 (하지만 예외가있을 수 있음).


IE가 @import 메서드를 사용하여 다른 CSS 파일에서 호출 한 CSS 파일을 캐시하지 않는다는 점에 주목할 가치가 있습니다. 예를 들어, html 페이지가 @import를 통해 "reset.css"를 가져 오는 "master.css"에 링크되면 reset.css는 IE에 의해 캐시되지 않습니다.


CSS 파일과 함께 보내는 헤더에 따라 다릅니다. 수동으로 보내지 않을 수 있으므로 서버 구성을 확인하십시오. 설정할 수있는 다양한 캐싱 옵션에 대해 알아 보려면 "http 캐싱"에 대한 Google 검색을 수행하십시오. 예를 들어 브라우저가 파일을로드 할 때마다 파일의 새 사본을 다운로드하도록 강제하거나 일주일 동안 파일을 캐시 할 수 있습니다.


서버를 엉망으로 만들지 않는 한 예, 캐시됩니다. 모든 브라우저가 동일하게 처리해야합니다. 저와 같은 일부 사람들은 브라우저를 구성하여 파일을 캐시하지 않도록 할 수 있습니다. 브라우저를 닫아도 캐시의 파일이 무효화되지는 않습니다. 그러나 서버에서 파일을 변경하면 파일이 새로 고쳐집니다.

참고 URL : https://stackoverflow.com/questions/460389/browser-caching-of-css-files

반응형