2009-10-07 2 views
16

이 질문에 대한 답변은 브라우저마다 다를 수 있습니다 만, 어떤 브라우저는 복수 < 스크립트 > 태그가 사용되고 src 속성이 같은 경우에 대한 동작을 정의합니까? 예를 들어 하나의 HTML 문서에서 동일한 "src"속성을 사용하여 <script> 태그를 여러 번 사용하면 어떻게됩니까?

은 ...

<script src="../js/foo.js"></script> 
... 

<!-- what happens here? --> 
<script src="../js/foo.js"></script> 

나는 처음에이 질문을하는 이유, 내 특정 경우에 나는 JQuery와 사용을하는 ASP.NET MVC 응용 프로그램에서 부분적인 뷰를 사용하고 있다는 것입니다 . JQuery JS 파일은 모두 스크립트 태그를 통해 마스터 템플릿 파일에 포함됩니다. 부분 템플릿 파일에 스크립트 태그를 추가하여 마스터 템플릿 컨텍스트 외부에서 사용되는 경우 필요한 모든 JS 파일을 자동으로 포함하고 다른 뷰 또는 템플릿을 사용하여 포함시키지 않도록 스크립트 태그를 추가하는 것이 좋습니다. 그러나 JS 파일을 클라이언트에 여러 번 전송해야하거나 사용자 환경에 부정적인 영향을 미칠 수있는 부작용을 원하지는 않을 것입니다.

내 생각에 지금은 주요 브라우저 (FF, Safari, IE, Opera)의 전부는 아니지만 대부분이 JS 파일을 처음 사용할 때 캐시하고 이후 스크립트 태그에서는 브라우저가 가능하면 캐시 된 사본을 사용하고 만료되지 않은 경우 사용하십시오. 그러나 캐싱 동작은 대개 브라우저 구성을 통해 변경 될 수 있으므로 모든 종류의 캐싱 동작에 의존하는 것이 "안전"하지는 않습니다.

내 부분적인 뷰가 적절한 JS 파일을 포함하여 다른 템플릿이나 뷰에 종속된다는 사실을 받아 들여야합니까?

답변

10

캐시 된 경우에도 동일한 코드가 두 번 실행되므로 문제가 발생할 수 있습니다. 적어도 브라우저가 필요한 것보다 더 많은 시간이 걸릴 것입니다. 그리고 대부분의 JavaScript 코드는 두 번 실행되도록 작성되지 않으므로 오류가 발생할 수 있습니다. 예를 들어 동일한 이벤트 처리기를 두 번 연결할 수 있습니다.

+0

+1 일부 라이브러리는 이중 포함으로부터 보호되지만 jQuery는 볼 수 없습니다.두 번 포함시키지 마십시오. 라이브러리가 두 번 인스턴스화되면 비정상적인 동작이 발생할 수 있습니다. – bobince

+0

코드가 호출 될 때 실행됩니다. 당신은 그것이 두 번 해석 될 것이라고 말하려고했는데, 이것은 상당히 다르며, 당신이 설명한 것과 다른 문제를 일으 킵니다. –

+0

코드가로드 될 때 코드가 해석되어 실행되며 이는 JS와 완전히 동일합니다. 예를 들어'function foo() {}'는 실행될 때 foo라는 새로운 전역 변수를 생성하고 함수 본문의 값을 할당하는 코드 행입니다. JW는 이것이 두 번 행해지므로 문제가 있다고 말하고 있습니다. –

1

부분 코드에 직접 스크립트 태그를 출력하지 마십시오. 나중에 포함 할 수 있도록 스크립트 파일을 등록하는 메커니즘을 만듭니다. 이 메커니즘은 파일을 한 번만 포함시키는 역할을합니다.

+2

나는이 아이디어를 좋아한다. IncludeScript ("../ js/foo.js")와 같이 호출 할 수있는 메소드로 도우미를 만들 수 있으며,이 메소드는 현재 요청에 이미 포함 된 스크립트를 추적 할 수 있습니다. "트릭"은보기, 템플릿 및 부분 간 스크립트에 포함 된 정보를 공유하기 위해 요청 범위 내에 데이터를 저장하는 것입니다. ASP.NET MVC에서이 작업을 수행하는 방법을 잘 모르겠다.하지만이 작업을 수행 할 수 있고 잘만하면 되리라 확신한다. –

+0

ASP.NET MVC는 이전 버전의 ASP.NET MVC에서 요청을 저장하는 몇 가지 옵션을 제공한다. 범위가 지정된 데이터입니다. 한 가지 옵션은 ViewData 사전 개체입니다.이 개체는보기, 부분, 템플릿 또는 HtmlHelper 확장 메서드에 대한 속성으로 직접 사용할 수 있습니다. 또 다른 옵션은 HttpRequest/HttpRequestBase의 Items 속성입니다. 두 경우 모두 해당 컬렉션에 저장된 데이터는 요청이 지속되는 동안 유지되며 요청 중에 사용 된 모든보기, 부분 데이터, 템플릿 및 HtmlHelper 확장 메서드에서 사용할 수 있습니다. –

+0

직접 롤백 할 필요는 없습니다. 예를 들어, Page.ClientScript.RegisterClientScriptInclude ("jQuery", );' – Tacroy

0

FF 3.5x, Chrome 4x는 한 번만 포함합니다.

: IE 8은

0

은 무슨 일이 자바 스크립트 인터프리터 순간 그것으로 공급된다는 점이다 (> 스크립트 탭이 JQuery와-1.3.2.min.js 항목이 개발자 도구에서보기) 두 개의 사본을 가지고 다운로드됩니다. 네임 스페이스 충돌이 발생하면 지정된 범위의 변수 이름 만 실행 상태를 유지합니다. 일반적으로이 마지막 유일한 프로세스는 함수를 인터프리터에 더 빨리 겹쳐 쓰므로 문제가 발생하지 않도록합니다. 문제는 함수가 변수 범위를 정의한다는 것인데,이 변수는 변수의 다른 네임 스페이스 범위를 소개하는 다른 함수가 될 수 있습니다. 함수가 동일한 이름 값을 공유하고 다른 변수 정의를 포함하면 함수가 겹쳐 쓰여진 후에도 함수가 해석기로 전달 되어도 변수가 조기에 살아남을 수 있으므로 누출이 발생할 수 있으므로 문제가됩니다.

정확히 같은 파일이 두 번 포함되어 있으면 문제가 없습니다. 이 문제는 같은 파일의 다른 버전이 포함되어 있거나 동일한 함수 이름을 가진 다른 파일이 포함되어있을 때 발생합니다. 동일한 파일을 두 번 포함하는 것은 다중 전송을 의미 할 수 있습니다. 이는 대역폭 낭비입니다.

관련 문제