2009-05-31 1 views
4

언제나 나를 귀찮게하는 페이지를 개발하는 동안 문제를 발견했습니다. Firefox (내 일반적인 "dev"브라우저)는 항상 서버에서 변경 될 때 CSS와 이미지를 업데이트하지만 Internet Explorer는 항상 이것을하지 않습니다. 일반적으로 업데이트 된 버전의 서버를 요청하기 전에 IE에서 페이지를 새로 고쳐야합니다.브라우저가 CSS 시트와 같은 특정 페이지 요소를 항상 업데이트 (캐시하지 않을 것)하도록 요청하려면 어떻게해야합니까?

나는 브라우저가 적어도 각 요청에 대한 모든 서버 측 객체의 타임 스탬프를 확인한 다음 필요에 따라 클라이언트 측을 업데이트한다고 생각하지 않습니까? 내가 할 수있는 방법이 있습니까? 강제는 아니지만 ... 브라우저가 특정 항목에 대해이 작업을 수행하도록 "권장"합니까?

내가 겪고있는 가장 큰 문제는 CSS를 특정 방식으로 초기화하는 것에 의존하는 내 페이지에 JavaScript가 있다는 것입니다. 그 반대도 마찬가지입니다. 한 쪽이 업데이트되고 다른 쪽이 외부 쪽 페이지에있을 때 IE에서 매우 일반적입니다. 혼동을 일으키고 페이지에 가끔씩 튀기는 결과가 나타납니다. 나는 "페이지를 새로 고침"하는 일을 스스로 해결할 수 있지만, 사이트에서 스크립팅을 할 때 내 사용자가 "페이지를 새로 고침"하도록 장려하고 싶지는 않습니다.

모든 조언을 주시면 감사하겠습니다. 페이지 자체는 문제없이 업데이트됩니다 (PHP입니다), 최악의 시나리오는 CSS와 JavaScript를 페이지 자체에 침투시킬 수 있지만 은 정말 못생긴입니다. 물론 모든 비용을 지불하지 않으려 고합니다. .

+1

라이브 사이트에서 강제로 새로 고침을하면 느린 인터넷 연결을 사용하는 저 같은 사용자가 실제로 성가 시게됩니다. – grawity

+0

@grawity : 위성 링크로 보트에서 프로그래밍하고 있습니까? – erickson

+0

@erickson 아니요.하지만 256kbps는 광섬유가 아닙니다. (두 컴퓨터가 같은 연결을 사용하기 때문에 두 개로 나뉘며 두 번째 컴퓨터는 대개 DC++ 클라이언트를 실행하기 때문에 남은 것은 33 %를 뺍니다.) – grawity

답변

10

그것은 클라이언트가 한 번만 외부 자바 스크립트와 CSS를 가져올 필요가 있도록 사이트를 디자인하는 것이 좋습니다.

향후 1 년 후에 만료되도록 외부 리소스를 설정하십시오. 각 파일 이름에 버전 번호를 추가하십시오. 따라서 "style.css"대신 ""을 사용하고 클라이언트의 CSS를 업데이트하려면 버전 번호를 증가 시키십시오.

완전히 다른 리소스로 간주되기 때문에 버전 번호가 증가하면 클라이언트는 업데이트 된 파일을 다운로드해야합니다.

+0

* facepalm * 왜 그렇게 생각하지 않았습니까? –

+1

그게 실제로 올바른 방법이지만, 새로 고침 할 때마다 CSS 코드를 디자인하고 변경할 때 디자이너가 나중에 더 적절한 방법으로 돌아 오는 것을 "잊지"않는 한 다른 솔루션이 더 편리합니다. –

+0

GWT처럼 전개 할 때마다 파일 이름에 내용의 부분 해시 (또는 전체 해시)를 추가하는 스크립트가 하나 더 있습니다. 참조 파일 이름도 변경해야합니다. 너무 쉽지는 않을 수도 있지만, 알고 있다면이를 수행 할 수 있습니다. –

3

모든 URL 끝에 약간의 검색어 문자열을 추가하십시오. 추악하지만 개발할 때 작동합니다. 예를 들어,

3

이것은 단지 문제) (그리고 사이트를 서비스 할 때 이러한 것들을 제거하는 것을 잊지 마세요)

<link rel="stylesheet" type="text/css" href="/mycss.css?foo=<?php echo rand(); ?>"/> 

당신은 스크립트, 배경 이미지 등을 위해 동일한 작업을 수행 할 수 있습니다 개발 중에 파일이 자주 변경되는 경우 일단 사이트를 게시하면 방문객은 현재 버전을 얻게되며 캐싱 메커니즘은 사용자가 원하는 것보다 더 많거나 적게 수행합니다.

사이트의 작동 방식을 수정하는 대신 개발 중에 새로 고침하기 전에 캐시를 지우는 습관을 개발했습니다. 파이어 폭스에서는 당신이 말했듯이, 이것은 일반적으로 문제가 아니지만, 정말로 확신이 필요하다면 Shift + Ctrl + Del, Enter 키를 사용하십시오. (그리고 Clear Clear Private Data 설정은 "캐시"만 체크 된 채로 있습니다.) 그리고 IE 이전 Shift + F5가 있습니다.

물론 다른 사람들이 언급했듯이 휘발성 파일의 임의의 쿼리 문자열을 사용하면 몇 번의 키 입력을 줄일 수 있습니다. 그러나 이것은 실제로 자신의 편의를 위해 제작 현장에 꼭 필요한 것은 아니라는 것을 이해하십시오.

+2

+1 Ctrl-F5 개발자 전용 인 경우 가장 좋은 솔루션입니다. – Nick

+0

그것은 생산에 필수적이며 개발자 문제 일뿐만 아니라 내가 무언가를 생산에 밀어 넣을 때마다 항상 나에게 일어난다. 예 : div를 메인 HTML 페이지에 추가하고 CSS에서 div {display : none}와 같은 것을 말합니다. 클라이언트 브라우저는 여러 번 새로운 HTML을 가져 오지만 캐싱 된 CSS를 참조하므로 내 DIV가 표시되며 모든 새로운 변경 사항을 보려면 캐시를 지워야하는 모든 사람에게 알려주는 더미처럼 보입니다 (Ctrl + F5). – capdragon

+0

@capdragon에 동의합니다 ... 이것은 개발 중에 만 문제가되지 않습니다. – FastTrack

1

당신은 CSS 파일에 대한 htaccess로 아파치를 사용하는 경우 :

<FilesMatch "mycssfile\.css$"> 
    Header set Cache-Control: "private, pre-check=0, post-check=0, max-age=0" 
    Header set Expires: 0 
    Header set Pragma: no-cache 
</FilesMatch> 
2

소스의 끝에 GET 데이터로 마지막 변경 타임 스탬프를 넣는 것이 좋습니다. 이렇게하면 캐시 오류가 발생하지 않을 것입니다.

페이지가 느려질 수 있으므로 캐시를 완전히 삭제하는 것이 바보입니다.

0

브라우저는 일반적으로 서버가 지시하는 지침에 따라 내부 캐시에 페이지를 저장합니다. 마지막 검사를 통해 만료되지 않은 것으로 보이는 파일은 다시로드 할 필요가 없습니다. 물론, 다시로드 할 때 주 페이지를 명시 적으로 다시로드하지만 j 및 스타일에 대한 동작은 다를 수 있습니다.

가있는 Safari로 개발하십시오. ->정확한 이유는 캐시 메뉴를 사용하지 마십시오. 나는 Firefox가 비슷한 것을 가지고 있다고 확신한다.

0

DanHerbert의 방법에 약간의 비뚤어 짐을 사용합니다. 나는 스타일 시트에 동일한 이름을 사용하는 경향이 있지만, 쿼리 문자열에 버전 번호를 붙이면 브라우저가 버전을 밝힐 때마다 브라우저가 파일을 다른 것으로 볼 수 있습니다. 여전히 캐시 된 상태가되지만 원하는대로 캐시를 무효화 할 수 있습니다.

파일 이름을 변경하는 것보다 약간 깔끔하고 중앙 집중식으로 관리되는 솔루션으로 적합합니다. 특히 4 가지 바람에서 비롯된 많은 스크립트와 스타일 시트가 포함 된 복잡한 응용 프로그램에 적합합니다.