DOM 실행 문제의 순서

... HEAD의 자바 스크립트 ... 페이지의 마지막 스크립트 앞에 비동기 적으로로드되는 스크립트 태그를 동적으로 삽입합니다 .

저는 로더 스크립트가 인라인 이라고 가정 합니다 . 이는 강조 표시된 비트가 실제로 "현재"스크립트 요소 즉, 로더를 참조한다는 것을 의미합니다. 이는 로더 스크립트 태그 앞의 html 만 구문 분석 및 해석 되었기 때문에 발생하므로 삽입 된 스크립트 태그는 실제로 head페이지 하단이 아니라에 있습니다. 따라서 대상 스크립트는 코드를 DOM 준비 콜백으로 래핑하지 않는 한 선행 요소에 대해서만 DOM 작업을 수행하는 것으로 제한됩니다. 이것은 처음부터 피하려고하는 것입니다!

기본적으로 페이지가 표시 / 스캔 가능하도록 모든 html을로드하고 이미지 / 스타일 시트 (비 차단 스레드에서 발생) 로드를 시작한 다음 자바 스크립트 를 로드 하려고합니다 . 한 가지 접근 방식은 대상 스크립트를 페이지 하단에 배치 하고 순서를 올바르게 선택하고 (상호 작용 우선, 개선 사항 2 차, 타사 분석 / 소셜 미디어 통합 / 그 외의 모든 것은 마지막으로) 필요에 맞게 조정하는 것입니다. 기술적 으로는 여전히 페이지로드를 차단 하지만 어쨌든 페이지 하단에는 스크립트 만 남아 있습니다 (그리고 하단에 있기 때문에로드 되 자마자 DOM을 직접 조작 할 수 있습니다. ).

적절한 예와 DOM 지원 콜백의 사용 및 남용에 대한 몇 가지 타이밍 퀴즈, 그리고 별의 성능 이 다음보다 낮은 가치 에 대한 "이야기의 다른 측면" 을 제공 하는 관련 폭언 / 개요 가 있습니다. 정상적인 종속성 관리 프레임 워크. 후자의 주제는 너무 광범위하여 하나의 답변으로 소진되지 않지만 requirejs 문서 와 같은 것은 패턴이 어떻게 작동하는지에 대한 공정한 아이디어를 제공해야합니다.

고려해야 할 또 다른 패턴은 완전한 페이지 사이를 "전통적인"탐색이 아닌 컨텐츠 청크에 대한 비동기 액세스를 활용하는 단일 페이지 애플리케이션 인 SPA를 구축하는 것입니다. 이 패턴은 모든 페이지 에서 공유 자바 스크립트를 구문 분석하고 재실행 할 필요가 없기 때문에 과소 평가되었지만 상당한 성능 이점 을 제공하므로 타사 js 성능에 대한 (유효한) 우려도 해결할 수 있습니다. 결국, 좋은 캐싱 정책 만으로도 로딩 시간에 큰 도움이 될 것이지만, 빈약 한 자바 스크립트 코드 나 대규모 프레임 워크의 실행 오버 헤드는 남아 있습니다.

업데이트 : 이것을 알아 냈습니다. 특정 시나리오를 염두에두고 (즉, 마크 업 자체를 제어하지 않고 실행할 마지막 스크립트가 되고자 함) DOM에 대한 비동기 스크립트 요소 의 삽입을 0ms setTimeout콜백 으로 래핑해야합니다 .

setTimeout(function(){

    //the rest is how GA operates
    var targetScript = document.createElement('script');
    targetScript.type = 'text/javascript';
    targetScript.async = true;
    targetScript.src = 'target.js';

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(targetScript, s);

}, 0);

환경의 단일 스레드 특성으로 인해 js setTimeout콜백은 기본적으로 스레드가 더 이상 사용되지 않는 즉시 0ms 지연 실행을 위해 대기열에 추가됩니다 ( 여기에서 자세한 설명 ). 따라서 브라우저는 "더 높은 우선 순위"코드가 모두 완료 될 때까지 대상 스크립트를로드해야하는 필요성을 인식하지 못합니다. 그리고 DOM은 스크립트 태그가 추가 될 때 작동하므로 대상 스크립트 자체에서 명시 적으로 확인할 필요가 없습니다 (캐시에서 "즉시"로드 될 때 편리함).