2009-11-24 2 views

답변

6

JS 코드의 두 가지 "빌드"를 가질 수 있습니다. 멋진 모듈 식 버전 하나를 작성한 다음 Google's JS compiler을 사용하여 실제 사용을 위해 빠르고 최적화 된 소형 버전을 구축하십시오.

15

하나의 JS 파일 만 있으면 HTTP 헤더 오버 헤드가 줄어 듭니다. 웹 개발과 관련하여 : 귀하는 귀하의 타겟 고객에게 적합해야합니다. 웹 트래픽은 비싸므로 웹 트래픽을 최소화하고 메시지를 최대화해야합니다.

+2

+1 좋은 지적. 디버깅 중에는 여러 파일을 사용하는 것이 좋지만 배포시에는 하나의 파일로 패키지화하는 것이 좋습니다. –

+1

연결 유지 연결을 사용하지 않는 경우 각 단일 JavaScript 파일에 대한 연결 협상 시간을 추가하십시오. – zakovyrya

+2

반면에 작은 파일은 캐시 될 수 있습니다. 몇 가지 기능을 공유하는 여러 페이지가 있다고 가정 해 보겠습니다. 일반적인 코드를 캐싱 된 파일로 분리하는 것이 좋습니다. – Nosredna

1

원하는만큼 파일에 자바 스크립트를 배치 할 수 있지만 파일간에 통신하는 유일한 방법은 전역 변수이므로 유일한 전역 "표면 영역"으로 제한된 내용을 포함하는 것이 가장 좋습니다.

이것은 언어가 어떻게 디자인되었는지에 대한 역사적인 결과 일뿐입니다.

+2

무슨 뜻인지 확실하지 않습니다. 파일을 분할하는 방법은 전역 변수의 사용에 영향을 미치지 않습니다. – Nosredna

+0

나는 모듈/자바 스크립트에 시스템을 포함한다는 것을 의미합니다. 파일의 글로벌 서피스 영역은로드 된 후 실행되는 모든 스크립트에 노출됩니다. –

3

예프. 혼자이 페이지의 소스를 살펴보면 적어도 네 개의 자바 스크립트 파일과 페이지 자체의 인라인 스크립트 요소를 참조했습니다.

파일을 적절하게 분할해야한다고 생각합니다. 대부분의 경우 관련 클래스와 메소드의 라이브러리를 모두 하나의 파일에 포함 시키거나, 다른 모든 파일을 포함하여 중간 파일을 호출하여 포함 할 수있는 별도의 파일에 보관할 수 있습니다. 논리적 그룹핑이 중요합니다.

다른 한편으로, SO와 같은 사이트를 실행할 때 고려해야 할 다른 사항이 있습니다. 모든 자바 스크립트를 별도의 파일에 저장하면 서버에 대한 요청이 4 개 (이 페이지의 경우)가됩니다. (또는 여러 서버에) 페이지를로드 할 수 있습니다. 이는 인기있는 사이트를 실행하는 경우 추가 HTTP 헤더에 기가 바이트의 대역폭 만 허용 할 수 있으며 자바 스크립트 파일을 통합해야하는 강력한 이유가 될 수 있습니다. 많은 사람들이 그것에 대해 걱정할 필요는 없지만 이런 것들에 대해 생각하는 것이 좋습니다.

+0

헤더 트래픽에 좋은 참고 사항 – warren

2

JavaScript와 CSS 파일은 브라우저에서 서버에 대한 요청을 줄이기 위해 각각 하나의 파일로 결합되는 경우가 많습니다.

브라우저는 일반적으로 웹 서버에 2 개의 동시 연결 만 만들 수 있습니다. 따라서 파일을 단일 스트림으로 결합 할 수 있으면 브라우저에서 더 나은 성능을 얻을 수 있습니다. 단일 연결에서 더 많은 데이터를 다운로드 할 수 있습니다.

이 여러 이미지에 관심이있는 이미지를 보여주기 위해 CSS와 배경 이미지를 사용하여 다음 '마스크', 한 번 다운로드되는 하나의 큰 스프라이트 파일에 넣어 이미지 스프라이트, 뒤에 같은 생각입니다.

실제로는 별도의 파일을 개발해야하며, JavaScript 및 CSS 리소스를 결합하여 하나의 파일로 압축하는 배포 프로세스의 일부로 결합 자/압축 유틸리티를 실행해야합니다.

+0

FF3과 IE8 이후 연결 제한이 10 ~ 15로 증가합니다. FF3의 about : config에서는'network.http.max-connections-per-server' 명령으로 설정할 수 있습니다. – BalusC

0

개발이 개별 파일에서 작동하는 동안 항상 논리적 인 의미를 갖습니다. 그러나 JS 파일이 HTML에 포함되면 각 JS 파일에 대한 별도의 다운로드 요청이 이루어집니다. 나는 별도의 파일 작업을 권장하지만, 아카이브에 포함하기 전에 컴파일 타임에 모든 파일을 대조 (및 압축)해야합니다.

0

HTTP는 상태 비 저장 프로토콜이며 웹 응용 프로그램에서는 모든 페이지마다 고유 한 ID가 있으므로 다른 페이지의 개체를 만들 수 없습니다. javascript는 브라우저에서 HTML로 실행되는 클라이언트 측 언어입니다.난 그게 왜 그

1

모범 사례가 여전히있는 JS 파일을 작게를하고 적어도 ETag, Last-ModifiedExpires 헤더를 제공 할 수 있으며 또한 gzip 해당되는 경우 다중 파일 개념을 지원하지 생각합니다.

우리는 YUICompressor을 사용하여 모든 관련 JS 파일을 요청 된 페이지에 적용되는 모든 기능을 가진 단일 파일로 축소하고 병합합니다. CSS 파일에서도 마찬가지입니다.

사용중인 서버 측 프로그래밍 언어를 모르지만 Java/JSP 인 경우 this article도 유용 할 수 있습니다. 그렇지 않으면 YSlow 방화 광 애드온은 많은 새로운 통찰력을 줄 수 있습니다.

관련 문제