2010-05-05 3 views
15

js 파일을 비동기 적으로로드하는 데 약간 다른 구문이있는 것으로 보였습니다. 두 파일 사이에 차이가 있는지 궁금 해서요. 저는 그것들이 똑같이 작동한다고 추측하고 있지만, 어떤 이유로 하나의 방법이 다른 것보다 좋지 않은지 확인하기를 원했습니다. :)비동기 .js 파일 로딩 구문

방법 1

나는 페이스 북 방법에 s.async=true; 예고
(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
})(); /* note ending parenthesis and curly brace */ 


방법 두 (페이스 북의 코드에서 톱이)

(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.async=true; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
}()); /* note ending parenthesis and curly brace */ 

답변

15

유일한 차이점 .

asyncdefer 속성은 스크립트 실행 방법을 나타내는 부울 속성입니다.

이러한 속성을 사용하여 선택할 수있는 세 가지 모드가 있습니다. async 특성이있는 경우 스크립트는 사용 가능한 즉시 비동기 적으로 실행됩니다.async 속성이 없지만 defer 속성이있는 경우 페이지의 구문 분석이 완료되면 스크립트가 실행됩니다. 두 속성이 모두 존재하지 않으면 사용자 에이전트가 페이지 구문 분석을 계속하기 전에 즉시 스크립트를 가져와 실행합니다.

소스 및 추가 읽기 :

+0

, 감사합니다. 스크립트가 head 태그에 삽입 되었기 때문에 s.asynch = true가이 경우에는 무의미하지 않습니까? 그리고 괄호의 구문까지 : (function() {...})(); vs : (function() {...}()); - 그것들은 거의 같은가요? – taber

+1

@taber : 예 괄호 구문이 동일한 목표를 달성합니다. ie : 함수는 함수 명령문 대신 함수 표현식으로 평가됩니다. 참조 : http://stackoverflow.com/questions/440739/what-do-parentheses-surrounding-a-javascript-objectfunctionclass-declaration/442408#442408 및 http://stackoverflow.com/questions/1634268/explain-javascripts- 캡슐화 된 익명 함수 구문/1634321 # 1634321 (특히 마지막 주석). –

+0

@ taber : 나는 그것이 ''에 삽입되어 있다는 사실이 어떤 차이가 있다고 생각하지 않습니다. (그러나 나는 이것을 뒷받침 할 참조 나 테스트가 없다). –

0

I을 : Whatwg.org HTML 5: The script element

는 이점에 관해서는, 당신은 구글이 지난 12 월에 무슨 말을했다 확인 할 수 있습니다 이것으로 주변을 돌아 다니며 스크립트가 결국로드 될 때 콜백을 시작하기위한 지원을 포함하는 라이브러리를 만들었습니다. 쿨

Sigma.async_script_load('http://example.com/underscore-min.js', '_', function() { 
    _([1,2,3,2,3,1]).uniq(); 
}); 

https://github.com/ssoroka/sigma