2011-08-22 5 views
9

자바 스크립트를 사용하여 사용자 브라우저가 gzip으로 압축 된 콘텐츠 (클라이언트 측, node.js가 아닌)를 지원하는지 여부를 감지 할 수 있습니까?사용자의 브라우저가 gzip을 지원하면 JavaScript가 JavaScript를 감지 할 수 있습니까?

나는 다음과 같은 가장자리 케이스를 지원하기 위해 노력하고 :
가 특정 웹 응용 프로그램에로드 할 수는 응용 프로그램으로 필요한 수요에 그들을로드 나을 수 많은 파일이로드보다는이 실행된다 그들 모두 초기에. 나는 먼 미래의 캐시 만료 날짜와 함께 S3에서 이러한 파일을 제공하고 싶습니다. S3 does not support gzipping files to clients that support it부터 각 파일의 두 버전을 호스팅하려고합니다. 하나는 정상 파일이고 다른 하나는 content-type으로 설정되고 application/gzip으로 설정되었습니다. 물론 브라우저는 요청할 파일을 알아야합니다. 브라우저가 gzip으로 압축 된 내용을 지원하는지 여부를 자바 스크립트가 감지 할 수 있으면 브라우저는 올바른 파일을 요청할 수 있습니다.

이것이 가능합니까?

+0

왜 파일 전송에 S3을 사용하고 있습니까? CLoudFront ..를 사용해야합니다. – Layke

답변

15

자바 스크립트는 사용할 수 없지만 자바 스크립트를 사용하여 브라우저가 gzipped 콘텐츠를 지원하는지 여부를 감지 할 수 있습니다.

위의 주석을 달았으며 다시 반복하고 싶습니다. 어쨌든 gzip 콘텐츠를 사용하는 CloudFront를 사용해야합니다. S3를 사용하고 있다면 질문에 대답 할 목적으로 CloudFront를 사용하지 않는 이유는 없습니다.

이 블로그 게시물은 브라우저에서 Gzip을 지원하는지 감지하는 방법을 완벽하게 설명합니다 .

1) 작은 gzip으로 압축 된 파일, gzipcheck.js.jgz을 만들고 CloudFront를에서 사용할 수 있도록 :

http://blog.kenweiner.com/2009/08/serving-gzipped-javascript-files-from.html

여기에 빠른 요약 한 것입니다. 이 파일에는 한 줄의 코드가 포함되어야합니다.

gzipEnabled = true; 

2)이 파일을로드하고 실행하려면 다음 코드를 사용하십시오. 다른 Javascript 코드보다 먼저 HTML HEAD 섹션에 넣을 수 있습니다.

<script type="text/javascript" src="gzipcheck.js.jgz"> 
</script> 

파일이로드되면 브라우저에서 gzip을 지원하는지 여부를 나타내는 플래그 gzipEnabled를 설정합니다.

+4

+1 좋은 트릭이지만 CloudFront는 콘텐츠를 gzip으로 저장하지 않습니다. 원본이 gzip으로 압축 된 내용을 제공하는 경우에만 gzip으로 압축 된 내용을 제공합니다. – Paulpro

+2

CloudFront에서 gzip으로 압축 된 콘텐츠를 사용하는 방법은 다음과 같습니다. gzip으로 압축 된 콘텐츠를 자동으로 제공하지 않기 때문에 S3를 사용하는 경우 gzip으로 압축 된 버전의 URL을 클라이언트 측에서 생성해야합니다. http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html – banjomonster

4

글쎄 클라우드 프론트는 자동으로 콘텐츠를 gzip하지 않습니다. Amazon이 S3 및 Cloudfront에서 자동 gzip 압축을 수행하기로 결정할 때까지 아래의 해결 방법을 사용해야합니다.

  • 일반 버전 외에도 gzipped 버전의 파일을 만들고 S3에 업로드하십시오. 파일 이름이 style.css이면 gzipped 버전의 이름은 style.css.gz 여야합니다.
  • 파일에 key = Content-Encoding & 값 = gzip을 사용하여 파일에 헤더를 추가하십시오. 브라우저가 콘텐츠가 gzip을 사용하여 인코딩되었음을 브라우저가 이해할 수 있도록하기 위해 필요합니다. 헤더는 S3 API 또는 Cloudberry, Bucket Explorer 등의 인기있는 S3 파일 관리자 도구를 사용하여 추가 할 수 있습니다.
  • 파일에 올바른 Content-Type 헤더를 추가하십시오. 예 : style.css의 경우 Content-Type : text/css이어야합니다.
  • 웹 페이지에 정상적으로 파일이 포함되어 있습니다.
  • 브라우저가 gzip 인코딩을 지원하는지 확인하려면 위의 자바 스크립트를 사용하십시오. true를 찾으면 파일 이름을 바꿉니다.g style.css with style.css.gss
관련 문제