자바 스크립트에서 비동기 스크립트를 추가 할 위치

내 페이지에 비 차단 자바 스크립트를로드하고 싶습니다. async이 지원되기 전에 가장 좋은 방법은 간단한 스크립트를 통해 동적으로로드하는 것입니다. 내가 <head>의 말처럼 다른 장소에서 스크립트를 삽입하는 여러 버전을 발견자바 스크립트에서 비동기 스크립트를 추가 할 위치

var myscript = document.createElement('script'); 
myscript.async = true; // cannot hurt, right? 
myscript.type = 'text/javascript'; 
myscript.src = 'myscript.js'; 
var node = document.getElementsByTagName('script')[0]; 
node.parentNode.insertBefore(myscript, node);

또는 <body> :

는 처음 <script> 앞에 삽입되는 잘 작동 예입니다

document.getElementsByTagName("head")[0].appendChild(myscript); 
document.getElementsByTagName("body")[0].appendChild(myscript);

비동기이지만 주문 번호는 in some browsers입니다. 브라우저 지원 측면에서 차이가 있습니까? 공연? 위험을 차단합니까?

주문에 대한 제약이 없습니다 (서로 영향을주지는 않지만). 스크립트가 너무 길어서 페이지 내용을로드하는 데 너무 오래 걸리면 계속로드가 잘되는지 확인하고 싶습니다. 마지막 솔루션이 가장 잘 작동한다고 생각하지만 차이점에 대해서는 잘 모릅니다.

는

출처

2013-01-08 Mad Echet

스크립트를 덧붙이는 여기에 최고의 솔루션입니다. 스크립트 태그를 차단하지 않고도 DOM을로드 할 수 있습니다. 또한 스크립트를 문서 끝 부분에 배치하면 더 이상 DOM 준비 이벤트에 함수를 래핑 할 필요가 없습니다. 스크립트가 실행되기 시작하면 DOM이 이미 브라우저에서로드되고 직접 조작 할 수 있기 때문입니다. 일부 이벤트 구독.

출처

2013-01-08 21:46:22

감사합니다. 그러나 어떤 스크립트로 인해 영향을받을 위험이 있습니까?이상적으로는 인라인 스크립트가 사람을 기다리지 않고 단일 코어 컴퓨터의 구문 분석 및 실행 외에 다른 사람을 기다릴 수없는 독립적 인 스레드를 시작하고 싶습니다. 가능한가? 신체의 끝에 그것을 두는 것은 무엇이라도 위의 어느 곳이라도로드하지 않으면 그것이 실행되지 않을 것 인 것을 의미한다? –

당신은 $의 script.js 같은 것을 사용할 수 있습니다

: 신체의 끝 부분에 http://www.dustindiaz.com/scriptjs

출처

2013-01-08 21:45:48 eikes

위의 내용은 훌륭하지만, 종속성 기능이 필요하지 않으므로 문제가 지나치게 오버 슈트되지 않는지 확인합니다. 그러나 그것은 확실히 좋은 영감입니다! –

단지 643 바이트입니다. – eikes

당신이 옳다면, 나는 그것을 처리 할 수 있어야합니다. –

귀하의 질문은 부하 부분에 초점을 맞추고 있지만, 실제로 성능은 다른 단계에 의해 영향을받을 수 있습니다 구문 분석

부하
에 스크립트를 추가 이러한 이유로
실행

신체의 끝은 보통 덜 눈에 띄지 않는 것으로 간주됩니다.

DOM을로드 스크립트를 실행할 준비가 될 때까지 기다릴 수 있습니다. 이 경우 스크립트를 머리 또는 본문에 첨부해도 상관 없습니다.

[편집] 사이드 댓글 : head 및 body 태그는 HTML 페이지에서 필수 항목이 아닙니다. document.getElementsByTagName('script')[0]은 이러한 엣지의 경우에 좋은 방법입니다. 요소를 가져올 것입니다 (최소한 페이지에로드 스크립트가 있습니다).

출처

2013-01-08 21:48:38 Christophe

감사합니다. 그러나 어떤 광고 스크립트로 인해로드하는 데 몇 초가 걸릴 수있는 위험이 있는지 궁금합니다. 이상적으로는 인라인 스크립트가 사람을 기다리지 않고 단일 코어 컴퓨터의 구문 분석 및 실행 외에 다른 사람을 기다릴 수없는 독립적 인 스레드를 발생시키고 싶습니다. 신체의 끝에 그것을 두는 것은 무엇이라도 위의 어느 곳이라도로드하지 않으면 그것이 실행되지 않을 것 인 것을 의미한다? –

@MadEchet 확실하지 않지만 스크립트를로드하는 위치에 관계없이 위험은 동일하다고 생각합니다. 오류로 인해 나머지 스크립트가 실행되지 않습니다. 독립적 인 스레드를 얻는 것은 어렵습니다 (브라우저에서 iframe을 구현하기 시작했습니다.) 웹 작업자를 고려해야합니다. 또한, 내 편집을 참조하십시오. – Christophe

편집 해 주셔서 감사합니다. 나는 그것에 대해 생각하지 않았습니다. –

페이지가 완료 될 때까지 기다린 다음 시도 할 수 있습니다. 추가 할 스크립트를로드하십시오. 최근에이 작업을 수행 했으므로 페이지가 잘로드 된 다음 새 블록이 나타납니다.

var Widget = {} 
    Widget.myDocReadyInterval = setInterval(function(){ 
     if (document.readyState === "complete") 
    { 
     clearInterval(Widget.myDocReadyInterval); 
     Widget.startLoading(); 
    } 
}, 20); 
Widget.startLoading(){ 
// do what you need here... 
}

출처

2013-01-08 21:49:03

고마워, 나는 이것이 가장 우아한 해결책이라고 확신하지는 않지만 작동한다고 확신한다. –

자바 스크립트에서 비동기 스크립트를 추가 할 위치

답변

관련 문제