게으른로드 add이 스크립트? (또는 게으른 로딩 외부 JS 컨텐츠 이미 해고 된 이벤트에 따라

StackOverflow https://stackoverflow.com/questions/942921

문제

나는 가고 싶다 이거 추가 해봐 사용자가 사용할 수 있지만 페이지가 최대한 빨리로드되도록 게으른로드하고 싶습니다. 그러나 스크립트 태그를 통해 시도한 다음 게으른로드 방법을 통해 시도한 후 스크립트 태그를 통해서만 작동하는 것으로 보입니다. 난독 화 된 코드에서는 DomContentLoaded 이벤트 (적어도 Firefox의 경우)에 의존하는 것처럼 보이는 것을 볼 수 있습니다.

DomContentLoaded 이벤트가 이미 해고되었으므로 위젯은 제대로 렌더링되지 않습니다. 무엇을해야합니까?

스크립트 태그 (느린) 만 사용할 수 있습니까? (jQuery와 같은) 콘텐츠 준비 이벤트에 대한 여러 테스트가 있다고 생각하기 때문에 이것이 불가능할 수 있다고 생각합니다. 따라서 여러 시뮬레이션 이벤트가 발생해야합니다.

그럼에도 불구하고, 이것은 몇 개의 위젯이 정적 스크립트 태그를 통해 물건을 포함하고 있다고 가정했기 때문에 흥미로운 문제입니다. 그들이 속도에 대해 우려하는 개발자들에게 더 유용한 코드를 작성하면 좋을 것입니다. 그러나 그때까지 작업이 있습니까? 그리고/아니면 내 가정이 잘못 되었습니까?

편집하다: 질문에 대한 첫 번째 대답은 내 문제의 요점을 놓치는 것처럼 보였기 때문에 상황을 명확히하고 싶었습니다.

이것은 특정 문제에 관한 것입니다. 나는 또 다른 게으른로드 스크립트를 찾고 있지 않거나 일부 종속성이로드 된 스크립트인지 확인합니다. 구체적으로 이 문제는 다루어집니다

  1. 통제 할 수없고 난독 화되지 않을 수있는 외부 위젯
  2. 외부 위젯이 필요할 때까지 또는 적어도 다른 모든 것이로드 된 후 다른 연기 요소를 포함하여 실질적으로까지의 부하를 지연시킵니다.
  3. 위젯이 작성된 방법의 B/C, 기존의 전형적인 게으른 적재 패러다임을 배제합니다.

난해하지만, 위젯 개발자가 페이지 하단에 다른 스크립트 태그를 기꺼이 던져 버릴 의향이 있다고 가정하는 몇 개의 위젯에서 발생하는 것을 보았습니다. Yahoo, Google 및 Amazon의 수많은 연구가 사용자의 경험에 중요하다는 것을 보여 주면서 500-1000ms **를 절약하려고합니다.

** Hammerhead와 개인적인 경험으로 테스트를 통해 이것이이 경우 저축이 될 것임을 나타냅니다.

도움이 되었습니까?

해결책 2

이 코드는 문제를 해결하고 내가 찾고있는 로딩 시간을 절약합니다.

이것을 읽은 후 게시하다 대부분의 현재 JS 라이브러리가 DOM로드 이벤트에 대한 테스트를 구현하는 방법에 대해. 난독 화 된 코드로 시간을 보냈으며 AddTis는 다양한 브라우저에 대해 언급 된 Doscroll 방법, 타이머 및 DomContentLoaded 이벤트의 조합을 사용한다고 판단 할 수있었습니다. DomContentLoaded 이벤트에 의존하는 해당 브라우저 만 다음 코드가 필요합니다.

if( document.createEvent ) {
 var evt = document.createEvent("MutationEvents"); 
 evt.initMutationEvent("DOMContentLoaded", true, true, document, "", "", "", 0); 
 document.dispatchEvent(evt);
}

그리고 나머지는 특정 속성의 존재에 대한 타이머 테스트에 의존합니다. 정적 스크립트 태그를 사용하는 대신이 외부 JS 컨텐츠를 게으른로드 할 수 있도록이 사례를 수용해야하므로 원하는 시간을 절약해야합니다. :)

다른 팁

가장 간단한 솔루션은 매개 변수를 설정하는 것입니다 domready 임베드 할 때 1 ~ 1이 스크립트를 페이지에 추가하십시오. 예는 다음과 같습니다.

<script type="text/javascript" 
src="http://s7.addthis.com/js/250/addthis_widget.js#username=addthis&domready=1">
</script>

IE, Firefox, Chrome 및 Safari에서 테스트했으며 모두 잘 작동했습니다. AddThis 구성 매개 변수에 대한 자세한 내용은 확인할 수 있습니다 여기.

편집 : 목표가 단순히 다른 Contetn을 먼저로드하는 것이면 <script> 페이지 하단 근처의 태그. 여전히 domcontentloaded를 잡을 수 있으며 이전에 오는 컨텐츠는 스크립트 전에로드됩니다.

원래의:

DomContentLoaded에로드하는 것 외에도 특정 VAR이 True가 설정되면로드 할 수 있습니다. 예를 들어

var isDOMContentLoaded = false;

document.addEventListener("DOMContentLoaded",function() { isDOMContentLoaded = true; }, false);

그런 다음 다른 스크립트 파일에 추가하십시오

if (isDOMContentLoaded) loadThisScript();

의견에 대한 응답으로 편집 :

스크립트를로드하고 DomContentLoaded 리스너가 발사하는 기능을 실행하십시오. (읽다 어떤 함수가 호출되는지 잘 모르겠다면 스크립트).

예를 들어 

var timerID;
var iteration=0;

function checkAndLoad() {
    if (typeof loadThisScript != "undefined") {
        clearInterval(timerID);
        loadThisScript();
    }
    iteration++;
    if (iteration > 59) clearInterval(timerID);
}

var extScript = document.createElement("script");
extScript.setAttribute("src",scriptSrcHere);
document.head.appendChild(extScript);

timerID = setInterval(checkAndLoad,1000);

위의 내용은 60 초 동안 한 번 1 초만 시도하여 필요한 기능을 사용할 수 있는지 확인하고 그렇다면 실행합니다.

AddThis에는 섹션이 있습니다 도구를 비동기로로드하는 방법.

현재 '최고의'솔루션 :

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID]" async="async"></script>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top