2013-04-29 2 views
9

몇 페이지가 새로운 Image.src = ''페이지를 통해 자바 스크립트 파일을로드하는 것을 보았습니다.Javascript 라이브러리를 이미지로 다운로드 하시겠습니까?

<script type="text/javascript"> 
     new Image().src = "XXXX\/js\/jquery-1.7.2.min.js"; 
    </script> 

나는 이것의 이점이나 목적을 궁금해하고있었습니다.

+1

이미지 또는 클릭 추적을 미리로드하는 데 사용됩니다. –

+1

@DavorMlinaric 그러나 그들은 분명히 여기에 이미지를로드하지 않습니다. jQuery를로드하고있다. 클릭 추적? 아마도. –

+1

실제 사례에 대한 링크를 제공 할 수 있습니까?나는 의도가 라이브러리를 미리로드하는 것이라는 것을 추측 할 것이다, 그래서 미래 가져 오기는 캐시에서로드 할 것이다. – apsillers

답변

7

HTTP 요청을 시작하는 빠르고 쉬운 방법입니다 (질문에 대한 의견에서 알 수 있듯이).

페이지 상단에서 다운로드를 시작한 다음 페이지 하단에 <script src='the-same-file.js'></script>을 포함시켜 파일을 브라우저 캐시에서로드 할 수있는 장점이 있습니다.

일 수 있으므로 다운로드 지연을 구문 분석 작업과 병렬 처리 할 수 ​​있습니다. 예를 들어 body이 여전히 구문 분석되는 동안 head에서 시작된 다운로드가 실행될 수 있습니다.

src 속성을 사용하여 헤드의 파일을 참조하는 것만 큼?

[연기 또는 비동기] 특성이 모두 존재하는 경우, 스크립트가 페치 및 상기 사용자 에이전트 페이지를 파싱 계속하기 전에 즉시 실행된다. 즉

Source (suggested reading) ,이 방법은 브라우저 나중에 과정까지 차단 동작을 발생시키지 않고 파일을 다운로드 할 수 있도록하려고합니다. 이 정말 필요한 경우

그러나

  • , 나는 이러한 목적보다는 new Image() 해킹위한 것입니다 defer 속성을 고려할 것입니다.
  • 이 "최적화"는 cache headers에 따라 역효과를 낼 수 있습니다. 결국 두 개의 HTTP 요청을 만들거나 파일을 두 번 다운로드 할 수 있습니다. "야생에서"

여러 주요 사이트의 빠른 조사 (Google 검색은 Gmail은, 트위터, 페이스 북, 넷플릭스는)이 기술은 자바 스크립트 파일을 가져 오는 데 사용 매우 사용되지 않음을 보여줍니다

아껴서 전체적으로.

예를 들어 Facebook은 캐싱/성능이 아닌 사이트가 잠재적으로 프레임 셋에로드 될 때 추적 용도로 사용됩니다. Image 인스턴스를 만들고 소스를 설정하면 clickjacking 시도를 추적하는 페이지에 대한 HTTP 요청을 시작합니다.

이것은 독립된 사례입니다. 정상적인 상황에서이 스크립트는 실행되지 않습니다.

관련 문제